Wider Screens – A New 1024 X 768 Web Page Design Standard

Wider web pages are appropriate now that most visitors use wider screens. But there are some warnings.

We’ve been testing users for 10 years now and they don’t like to scroll any more today then when we started. When searching, they typically arrive on a home page, and far more often then you might suspect, they just don’t bother to scroll down. Several of our user experience guidelines (See our free Dudley Site evaluation tool to measure how persuasive your site is) address this behavior. The prime one is to insure that primary or critical page elements are above the “visual fold”. Simply put, if it is important, it better be visible at first glance on a normal monitor.

The good news is that we are now recommending a new screen size for web page design. The traditional 800 X 600 screen width is now used by such a small percentage of viewers that we can safely design to a new standard 1024 X 768. That translates to an actual new width of 965 pixels to account for browser scroll bars and framework, up from 770.

Here is an example of how much horizontal space you will gain (you’ll also gain more vertical space “above the fold”):

New 1024 X 768 Web Page Design Standard

Traditional 800 X 600 Web Page Design Standard 
 

Designers gain nearly 200 pixels, over 20%, across the screen to include critical page elements, expand navigation, improve branding and messaging in the header and redesign page elements.

How do we know that we aren’t excluding customers who still use the old standards? Sites regularly monitor these trends and one, OneStat.com, reports these statistics for July of this year.

USA Screen Widths July 2008

 

Screen Width

% of total viewers

1

1024 x 768

52.22%

2

1280 x 1024

13.81%

3

1280 x 800

5.05%

4

1152 x 864

3.63%

5

800 x 600

16.91%

 

total

91.62%

 

total minus 800X600

74.71%

Your traffic reports may deliver browser resolution statistics as well. Mine, at the time of this report showed only 2% of my viewers using 800 X 600 so the “macro” numbers reported above are likely to be very worst case scenarios. Check yours.

Users dislike horizontal scrolling even more then vertical scrolling so we do not recommend designing beyond these resolutions unless you are designing for a fixed and known market such as an intranet.

What are the risks?

  • You cannot control how people open their browsers so if, like some, they keep their internet windows minimized to less then 960, horizontal scrolling will be necessary. There are no statistics to substantiate or refute this behavior however. Our gut says this is not much of a risk.
  • Text width on a page appears to have the best readership around 55 characters per line. Avoid the temptation to build lengthy packed text on your wider site.
  • Overcrowded and cluttered pages with too many distracting elements are likely to see a drop in conversions. More is not always better. If you have a page which performs well currently, use the space to bring even more attention to important elements.
  • Three columns on a page seem to perform the same or less effectively then two columns. If your two column page performs well, resist the temptation to add another column. Use the space to improve navigation, add some branding impact and some whitespace to lessen the visual assault that a “packed“ page delivers.

 What are the benefits?

  • Reduce headlines from three lines to two. They will be much better read.
  • Use more text emphasis such as bolding and bullets, to allow readers to scan more effectively.
  • Very importantly – raise your calls to action from the bottom to insure they are visible at first glance. To minimize any possible impact on people who keep screens less then full size, avoid using the far right side of the screen for these calls to action.
  • You may be able to add an additional call to action such as a newsletter signup form or third party advertisement (ugh).
  • Trust icons may find a place.
  • Photos which were scaled too small at 760 to be beneficial may now make sense.
  • Branding elements may be made more visible to increase their impact.

If you focus on only one thing however, focus on improving the clarity of your company value proposition. Viewers need to know what business you are in and why they should buy from you at the very first glance. If you fail to deliver that information, you have little chance of success.

As always, test your new page treatments directly with users as well as by monitoring traffic reports.

If your site is still at the old 800 x 600 screen width, enjoy the new freedom and opportunity this presents but don’t perpetuate bad design practices.  


Learn How eVision Can Help You
Get More Business From The Internet