Design / Usability

Email this article Printer friendly page

Redesign Your Site for Today's Wider Screens

Internet users don't like to scroll any more today than when we started testing them 10 years ago. A user typically arrives on a homepage and -- far more often then you might suspect -- just doesn't bother to scroll down.

The good news is that designers now have more room in which to put critical design elements "above the fold."

Design for a 1024 x 768 Screen Resolution

Organizations that monitor screen resolution trends, such as OneStat and TheCounter.com, show that at least 75% to 80%  of Internet users worldwide (probably more because of the "unknown" factor) have a screen resolution of 1024 x 768 or larger. Your Web analytics program will give you stats for your own site.

As a result, usability experts including Jakob Nielsen recommend designing for a screen resolution of 1024 x 768. This size translates to an actual new width of 965 pixels (after subtracting for browser scroll bars and framework), up from 770 under the previous 800 x 600 design standard. Designers gain nearly 200 pixels -- over 20%. How should you use this new space?

Testing shows that to be most effective, primary or critical page elements must appear above the "visual fold" -- that is, the screen as seen without scrolling. Now you have more space to include these elements. Simply put, if it is important, it must be visible at first glance on a normal monitor without scrolling.

The Risks of Designing for a Wider Screen

Designing for a wider screen is not without its risks.

• Smaller Windows. You cannot control how people open their browsers, so windows may be opened to less than 960 pixels. There are no statistics to know how common this is. Nevertheless, keep essential elements away from the far right side of the page.
• Text column width. Text width on a page has the best readership at around 55 characters per line. Avoid the temptation to build lengthy packed text on your wider page.
• Clutter. 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 attention to important elements.
• More columns. Three columns on a page seem to perform the same or less effectively than 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 increase whitespace to lessen the visual assault that a "packed" page delivers.

Users dislike horizontal scrolling even more then vertical scrolling, so don't design for screens wider than 1024 pixels unless you have a fixed and known market such as an intranet.

The Benefits of a Wider Webpage

There are important benefits, however, of a wider screen.

• Headlines that used to extend over three lines may now take only two lines. As a result they are more likely to be read.
• Text emphasis such as bolding and bullets allow readers to scan more effectively.
• Calls to Action. Very importantly, move your calls to action up from the bottom of a page to insure that they are visible at first glance. To minimize any possible impact on people who keep screens less than full size, avoid using the far right side of the screen for these calls to action.
• Additional calls to action might be added, such as a newsletter signup form or a third party advertisement.
• Trust icons may find a place.
• Photos which were scaled too small may now be sized a bit larger to make them more effective.
• Branding elements may be made more visible to increase their impact.

If you do nothing else, focus on improving the clarity of your company value proposition. At the very first glance, viewers need to know what business you are in and why they should buy from you. 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, and test with Google Website Optimizer.

E-mail Todd Follansbee to request his free Dudley Site Evaluation Tool. Follansbee assists clients as the User Experience Architect at Web Marketing Resources. www.webmarketingresources.net