In this lesson
Standard visual layout of web pages
Most web pages have a common "look and feel". A banner (corporate logo) and site-wide navigation bar are placed at the top of the page with section navigation links in the left column. The main content of the page is placed in the middle area. Additional reading or advertisements can be placed next to the main text in a right column and a footer area at the bottom of the page repeats the top-level links.
Typical layout for a standard web page
Although there is no definitive research proving that the above structure is the most effective, there are some practical reasons why this design has become so popular. The top banner creates an identity that the user might remember and so use again. The top navigation bar shows that there is more content available on the site that could be worth exploring. The main content is centrally placed so that the main heading and introductory text are within the users initial focus. The central column format means that the main text has a line length short enough to be easy to follow on the screen. The left-hand sub-content navigation bar is always visible, even if the user has a small screen, so other information relevant to the page content is easy to find. The right-hand column is less important and might be out of view so it can be safely ignored. The bottom navigation bar saves the user having to scroll back to the top of the page to continue using the site.
Note that you do not have to follow the above layout design in order to create an accessible web site. You may want to make your site "stand out from the crowd". This is perfectly acceptable, so long as you keep the design consistent throughout the site! Once the user has become used to your special design it is very confusing if a different layout suddenly appears.
Consistency of layout
Whichever style of layout you use, it is important to maintain a consitent style throughout the site. Your visitors want to find your information, not spend time learning how to manage new page layouts. Once a visitor becomes familiar with where the navigation buttons are they expect them to always be in the same place. This makes site navigation "intuitive".
If you have different sections of your site that you want to distingush from each other this can be done by using colours or headings rather than changing the overall layout.
Lesson Summary
- Style sheets allow you to separate style from content, this means that your basic HTML can always stays logical and accessible.
- Users with disabilities can over-write an external style sheet to provide a style suitable for them
- Different style sheets can be designed for different media
- One style sheet can be used by many pages
- Layout dimensions should be proportional (use % or ems) so that the layout is "liquid".
- Images etc. can be given fixed dimensions if you want to preserve a layout
- All images should be resized to the correct dimensions by a graphics programme, not by HTML
- Some browsers handle borders, padding and margins differently, allow some leeway when combining layers and boxes.
References
- CSS tutorials at W3C Schools - http://www.w3schools.com/css/default.asp
- SitePoint books - http://www.sitepoint.com/books/
The following guidelines are relevant to this session
Principle 3: Understandable - Information and the operation of user interface must be understandable
Guideline 3.2 Predictable: Make Web pages appear and operate in predictable ways.
3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user. (Level AA
3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently. (Level AA