Contact Us

CreativeSCS Home | Content & SEO | Editing Services | Web Development | Service Catalog

4 revisions
6 pages
$9/extra page

11 revisions
12 pages
$9/extra page

Design Notes: Five-Column Flex-Width Layout

Unlike our standard fixed-width layout, our new flex-width layout has five columns: two for content and navigation, three for ads and extras. Minimum width is determined by the first two columns, and is typically at 800px to fit snugly in the smallest screen resolution still being used by a significant number of people. The content column may be set at 640px while navigation can be 160px wide. We usually place the navigation column to the right of content in order to minimize cursor distance from the scrollbar. Both content and navigation columns are grouped into a single fixed-width division positioned over and covering another division containing the ad columns.

The ad columns have the following widths, in order from left to right: 224px, 256px, and 320px. The page is structured in such a way that the 800px-wide main division containing content and navigation covers the 800px-wide ad division containing the three ad columns. In an 800x600 screen or smaller, the main division completely covers the ad division, and only the content and navigation are visible. As the screen gets larger, the main division moves over to the right, keeping to the edge of the screen. This exposes the ad division, one column at a time, as the screen width increases to 1024, 1280, and finally 1600 pixels.

We find that this layout maximizes screen utilization for resolutions of 800x600 up to 1600x1200. It also preserves usability for all sizes by prioritizing the display of content and navigation, and by keeping the navigation links as close as possible to the vertical scrollbar.

Labels: ,

© 2004–2010 | Clarity template by our web design team | Site Map | Credits | Legal
Powered by Blogger