Structure and layout
When creating web pages, it is important that the content is structured correctly. The way in which you structure your web pages can have a quite an impact in terms of how accessible they are, and also how they are ranked by search engines. Although most people scan the information on a page, in some circumstances the order in which the content appears in the code is more important than how it appears visually. One obvious example of this is visually impaired users accessing pages with screenreader software. Also, search engines tend to give greater weight to content that occurs first in the HTML code. For these reasons, it make sense for the main content of each web page to occur first in the HTML, before secondary items such as navigation. CSS can then be used to make sure that a site's navigation is immediately visible when a page is loaded.
But how do screenreader users find the navigation? I'm glad you asked. One of the main ways in which screenreader users navigate around a page and get a feel for it's scope and structure is by using header tags (h1, h2, etc.). If used correctly, headers can provide a lot of useful information to screenreaders by describing the structure of the page (For example a 'main navigation' h2 tag will quickly tell a screenreader where the main navigation is located). If such information appears redundant in a visual context (for example the navigation bar is normally immediately visually apparent) then these headers can be hidden using CSS.
Even though it is best for the main content to appear before navigational elements in the HTML code, we also want the site navigation to be immediately visible to users when they access a page, so the scope of the site can be assessed at a glance. To achieve this, we use CSS to implement a page layout which positions the navigation near the top of the page. There are a number of different ways in which this can be done, here's how this template does it:
The pages of this template contain six main divs: header, content, mainnav, additionalOne, additionalTwo and footer (in that order), all of which are wrapped in a containing all div. The pages are styled in a flexible, two-column format. The mainnav div containing the navigation bar is absolutely positioned underneath the header div and given a specific limited height. The additionalOne div is absolutely positioned below this and to the left of the screen, and given a fixed width. Likewise, the additionalTwo div is absolutely positioned to the right of the screen with a fixed width. The content and footer div's are then given a margin-left value slightly greater than the width of the additional div, to avoid overlapping. The layout is arranged to have a flexible width, which makes maximum use of the space available. This layout displays correctly at screen widths down to around 800 pixels, and is usable at screen widths down to 500 pixels.
The style rules used to implement this layout are located in the styles/layout.css file.