For years, the conventional wisdom for those of us who design web pages is that we should be designing web pages for 800x600 screens — that is, screens that are 800 pixels wide by 600 pixels high.  That means a web page should be 720 pixels wide, give or take, to allow for scroll bars on an 800-wide screen.  Under this assumption, the precious “above the fold” space — that is, the part of the web page that’s visible without scrolling down on the page — is around 400 pixels.

A 710-pixel-wide website gets lost on today’s new 1920x1080 screensA recent dive into Google Analytics for diginovations.com suggests that 800x600 design point is just plain bunk these days.  Big, high-resolution screens have taken over the world, and those who are designing 710-pixel-wide sites are leaving precious real estate “on the table.”  (See inset to the right, illustrating how a 710-wide website gets lost on today’s most modern 1920x1080 displays.)

So dramatic were the data that I took the Labor Day Weekend to re-design diginovations.com to a new design standard of 920 pixels wide — a 30% increase in width.  Our visitors are now enjoying a world of larger video windows and photographs, text lines that are less choppy, and more information above the fold.

Discovering Your Visitors’ Screen Widths

Google Analytics offers a treasure-trove of raw data about visitors to your website, their traffic patterns, and conversion rates.  But buried inside the “Visitors” tab under “Browser Capabilities” is a button labeled “Screen Resolutions”, and this is where I found the news that, frankly, shocked me.  Here are the top 10 screen resolutions for visitors to diginovations.com over the last few weeks:

As you can see, the first time we see a screen narrower than 1024 pixels is down at #10 (800x600, 1.2% of visitors).  Further down the list, the next instance is at #22 (320x396, 0.33% of visitors) and then #32 (800x800, .07% of visitors).

Since we had designed our site for the nearly non-existent 800-pixel-wide visitor, it was clear that a re-design was in order.  I was delivering an inefficient and sub-par experience to 98.5% of my visitors in order to accommodate 1.5% of them.  We redesigned our site to the 98.5% case (1024 wide), widening both our navigation and main columns.

Your Mileage May Vary

Of course, it may be argued that since visitors to diginovations.com tend to be more sophisticated users (i.e. video and marketing types), we may be catering to an atypically big-screen audience.  Indeed, looking at the same statistics for a more consumer-oriented site we manage (www.memoryworks.com), the percentage of sub-1024-pixel screens was just over 4% rather than 1.5%.  We would still recommend the widening of this site, though, because of the clearly superior user experience delivered by the wider columns and larger video and image windows.

The Small-Screen Experience

Over the next few years, we’ll also need to be doing more to accommodate mobile browsers such as iPhones and Blackberries as well.  These visitors are now less than .5% of our traffic, but other classes of website such as news sites are seeing much more activity from mobile browsers.  When the need comes, the way to handle these visitors is not to keep the website small, but instead to design special versions of the site for mobile users as they become more important in the visitor mix.