Screen Size Matters: Best Practices for Designing Websites to Match Browser Resolution

Designing your website for various screen resolutions can be tricky but warrants serious consideration. Catalyst Group present different methods for addressing screen resolution, including optimization techniques for a hybrid approach.

Summary
Statistics indicate that the current population of Internet users views the web at a wide variety of screen resolutions. Many consumer websites detect a growing majority of visitors with monitors set to 1024 x 768, and a significant number of visitors at 800 x 600. Unfortunately, although the breakdown inevitably varies according to each website’s audience demographics, the split is fairly even at this point. In other words, each audience is substantial enough to warrant serious consideration in the design process. This fact is critical to the business success of web design (or redesign) projects and to the experience of actually using a website. Specifically, it is vital to companies’ ability to maximize ad revenue and/or present information effectively because it relates directly to the amount of “real estate” a given visitor can see on their screen. Until the penetration of higher-resolution screens increases and a new viewing standard is established—a point likely to be 12-24 months away—companies considering site design (or redesign) in that time face a thorny choice between three basic options:

1. Optimize design for 800 x 600—the Lowest Common Denominator Approach
2. Optimize design for 1024 x 768—the Early Adopter Approach
3. Provide resolution-appropriate designs for each audience—the Goldilocks Approach

In this paper, Catalyst Group Design analyzes these three options in the context of real-world examples and offers a basic set of guidelines to help companies make the right decision for them during this transitional era.

Screen Resolution: What Is It & Why Does It Matter?
Screen resolution refers to a two-dimensional metric for the sharpness of the display of a computer monitor. Resolution is measured in pixels along both horizontal and vertical axes. The higher the number of pixels, the sharper the picture will be (due to the greater number of pixels per monitor inch). Web pages are designed to display based on pixel dimensions. In turn, table cells, images and other graphic elements (such as lines, icons, etc.) are displayed according to their pixel size. This means that a 10 x 10 pixel image will appear larger on a lower resolution monitor—because the monitor requires more physical space to display those 100 pixels. To put it another way, increasing a monitor’s resolution effectively shrinks the pixels, or “zooms out” from the displayed image. The result is a smaller image and more physical space on the screen to display additional information. So, practically speaking, the higher a monitor’s resolution, the more a person can actually see on the screen.

EXAMPLE: YAHOO! (http://www.yahoo.com) These screenshots show the Yahoo! Homepage at 800 x 600 and 1024 x 768 screen resolutions. Clearly, the Yahoo! Homepage is designed to fit neatly inside an 800-pixel-wide browser window. However, the width of the page is fixed, so that increasing the resolution displays blank space to the left and right of the homepage.

The Current Reality
By now, the statistics regarding high-speed connections are widely reported: Nielsen/Net Ratings in November of 2004 calculated that 53% of the US had broadband access to the Web, and that this trend was accelerating. 70-plus percent penetration is predicted by the end of 2005. Less widely known, but still familiar to designers and developers, are figures measuring monitor resolution, or screen size. Reports vary, but Browser News (approximately 32% at 800 x 600 and 65% at 1024 x 768) and W3Schools (approximately 34% at 800 x 600 and 61% at 1024 x 768 or higher) both cite the prevalence of higher-resolution monitors. Both sources also caution, however, that many monitors default to or are set at lower resolutions—thus indicating an even greater nascent capability to display at higher resolutions. Also, people with broadband connections are more likely to have more sophisticated equipment. This means monitors with larger screens—which can render higher resolutions at more readable sizes. In turn, high speed and high resolution will encourage peoples appetite for a site experience that leverages the enhanced capacity of their equipment. In sum, we believe there’s a trend: as broadband penetration increases, preference for 800 x 600 will decrease.

However, even as the market trends towards higher resolutions, a potentially large cross-section of critical users still have a smaller screen size. Indeed, our own experience with clients suggests that in late 2004, as many as 40% of people visiting major consumer portals are experiencing the online world through an 800 x 600 window. For this reason, many such portals—including sites like Yahoo! and MSN— are still largely designed for the lower-resolution world. But for many sites, this approach is not ideal. First, it will be out of touch with the broader consumer market relatively soon. More immediately, it compromises the site experience for a fairly large number of people and fails to make full use of additional space that might be available for either more content or more ads.

The Horizontal Fold
In the earliest days of web design, the notion of the horizontal fold was imported from the realm of print newspapers. The concept refers to the horizontal line at which the newspaper is folded, which therefore defines the area of the front page that is visible when the paper is stacked at the newsstand. For obvious reasons, the space above the fold is reserved for the highest priority, most compelling content. The web design analogy is well understood to mean the horizontal line that defines the area of a web page that is viewable without vertical scrolling.

However, the placement of the horizontal fold on a given page design is largely dependent on the monitor resolution of the site visitor (note how the Yahoo! screenshot in the previous section has a lower horizontal fold at the higher resolution). Although Yahoo! fixes the width of the page, they have allowed the content to flow vertically below the 600 fold, which means that additional content will be visible at higher resolutions. Interestingly, this design approach typically results in a page that appears cut-off at the bottom. But instead of seeming broken or incomplete, this bisection is understood to suggest that more content can be accessed by scrolling down the page.

It is probably a further remnant of newspaper layout and reading habits that the appearance of a vertically incomplete page, and the notion of vertical scrolling, are better understood and/or better tolerated by users than the horizontal equivalents (i.e., a horizontally incomplete page and horizontal scrolling). In other words, vertical scrolling mimics the experience of reading down a long newspaper column—which may even cross the horizontal fold.

The Vertical Fold
In the past, the prevalence of 800 x 600 resolution monitors argued strongly in favor of site designs that either fixed their width at around 800 pixels or stretched to accommodate higher resolutions. For this reason, the concept of a vertical fold — i.e., the vertical line that defines viewable content on a horizontal plane (beyond which you need to scroll right in order to see additional content)—was hardly ever discussed. Design concepts or wireframes were likely to indicate the position of the horizontal fold, but no vertical fold line typically is present. The assumption was that no vertical fold would ever exist, because you would never design a page that was not completely horizontally viewable at the majority resolution of 800 x 600. It was simply accepted that the few users at higher resolutions would see blank space on the sides. Today, due to the increasing majority of 1024 x 768 users, these assumptions seem less sensible. At best, designing a site that is ?xed at 800 width may frustrate the majority of users with a “smaller” site framed by significant blank space (and, arguably, conveys a sense of the site being behind the times). At worst, designing for the lower resolution ignores potentially valuable page real estate that could otherwise be used to enhance the user experience and/or contribute to site advertising or transactional revenue.

Option 1: Optimize Design for 800 x 600
Approach De?nition: At 800 x 600, pages fill the screen—with navigation, page elements, content, layout, and visual design all aligned in harmony. Page width is fixed, so users at higher resolution see blank space at the left and right of the page (or just the right side if the page is left justi?ed).

Given the significant percentage of people viewing the web at 800 x 600, designing for an optimal user experience at this resolution is still a viable standard for many companies; one that is adhered to by Yahoo!, MSN, AOL, and The New York Times. This approach has much to recommend it:

Accessibility. The primary bene?t of designing to an 800 x 600 standard is the obvious one: it ensures that the vast majority (virtually 100%) of a site’s audience will be able to see each page, in its entirety, with no horizontal scrolling, as it was specifically designed to be experienced (i.e., as opposed to a page optimally designed for a higher resolution that scales down to fit the smaller window).

Design Simplicity and Control. Picking a single page size regardless of monitor resolution allows designers to create a single, optimal layout that is consistent for all visitors and can be more easily updated. This also simplifies analysis of user feedback/site usage statistics since it is not necessary to consider the impact of different user experiences on these metrics.

Process/Operational Simplicity. Since the user experience is virtually identical for all site visitors, there is no need to parse content, functionality, ads, etc. between the two resolutions; i.e., the difficult decision of what material is placed beyond the vertical fold at 800 x 600 is avoided.

Predictability of Ad Inventory. Companies that rely on online advertising revenue are well aware of the challenges inherent in estimating, optimizing, and delivering on impressions promised to advertisers. Designing for a consistent resolution ensures that each pageview of a particular page template can be “counted” as a delivered impression, and that this number can be forecasted with some accuracy. If ads display differently (with respect to the horizontal or vertical folds) based on monitor resolution, these predictions and promises are more dif?cult to make.

In short, designing for 800 x 600 avoids risk and extra work. However, for many companies, this approach has one potentially signi?cant drawback: it leaves a large portion of the screen unused for a major percentage of the site’s audience (i.e., those users accessing the site at 1024 x 768). For sites that depend for their survival on their ability to monetize every unique visit/page view, this a potentially signi?cant waste. To quantify how much of a waste, see the formula in the callout box below.

The issue of forecasting and tracking ad impressions that would appear beyond the vertical fold is a somewhat tricky one. If these ads display whether or not a user scrolls over, the 800 x 600 impressions would still be counted even though the user didn’t actually see the ad. While there are a variety of technical means for addressing this issue, a simple approach could be to apply a discount factor to the impressions number based on the percentage of page views tracked for the period at the lower resolution. In other words, advertisers only pay for the number of delivered impressions times the percentage of 1024 x 768 page views for the period; the 800 x 600 “scroll-over” page views could be thrown in for free. In actual fact, this approach probably provides more certainty for advertisers than they would receive if their ad appeared below the horizontal fold (we are not aware of any technical means that exists to validate if a user scrolls down to view the bottom of a page).

SITES OPTIMIZED FOR 800 x 600 The following three sites MSN (http://www.msn.com), The New York Times (http://www.nytimes.com) and Sports Illustrated (http://www.si.com) are additional examples of how a higher resolution creates blank screen space around 800 x 600 sites.

This is an excerpt from a 2005 paper, download the full version in pdf form here.

This content was provided by Catalyst Group. Visit their website at www.catalystnyc.com.