Tuesday, 15 April 2008

Layout Options - Part 1. Scalable Full Width Design

When starting a new site or redeveloping an old one, you need to evaluate the target market and the content you want to show them. These two factors alone will usually dictate the layout style (not the design style) of your site.

The key aspects of the layout include;
Page width: 800px, 1024px, Mobile Devices or Scalable Full width.
Design Width: Fixed block, Repreated Background Over a Fixed Block, Full Width or Fixed Block with Graphic Edging.
Navigation: Horozontal Bar, Vertical Bar, Buttons or Dropdowns.
Navigation Style: Text, Graphics, Flash or a combination.

Over the next few weeks I'll discuss the sections above, but today I'm going to discuss the disadvantages of using scalable full width design.

Scalable Full Width Design

Scalable or 'stretched' designs are becoming increasingly rare, but we're still receiving requests for them irregularly so I thought this article might be a useful resource for people out there that prefer this style of design.

As a general rule Digerati Solutions rarely recommend full-width websites and will usually suggest away from them for a few reasons.

1. Scalable full width designs make it difficult to place content and elements because the size of each block will change depending on the size of the monitor being used.<

2. Generally readable text is no wider than around 600 pixels at 12pt. Anything wider than this makes it difficult to read because our eyes can't track back to the start of the next line efficiently over that distance. On a widescreen monitor at say 1440px wide, the text content section (even at 70%) is still over 1000 pixels wide. Even using a standard 1024 layout, 70% is still over 710 pixels.

To combat this, you generally have to create many text columns (similar to a newspaper), however if you then need to view the page on a smaller monitor (say 800x600) the columns become very thin and again unreadable.<

Click Here to see a readability comparison

3. With only minimal content you can end up with content that fills the width of the page, but only covers around 20% of the page height, leaving a lot of unused space on the page.<

4. Elements can get quite spaced out on the page and related items can look disjointed, making it difficult for visitors to follow.<

5. Often to keep ratios relative, larger images are used to fill space. Any time you use larger images you're ingreasing the file size and slowing down your page.<

Generally the people that prefer the stretched layout style are only thinking about their own viewing experience on their own computer. Often it's a simple matter of education that will convince someone that this is not a good option to allow maximum viewing pleasure for the majority of visitors to your website.

Note: I need to admit that flash can alleviate some of these issues and I remember seeing 1 flash site that used full screen design to good effect. As a ratio however 1 out of thousands is not enough for me to warrant it as a viable option.

Please feel free to leave comments if you disagree with me.

Thanks to: East of the Web and Ellena Ashley for the sample text from the children's story The Dragon Rock. To read the story in full, please visit
http://www.eastoftheweb.com/short-stories/UBooks/DragRock.shtml