A Brief Look at Screen Resolutions

In comparison to the fixed-versus-fluid debate, the argument about designing for particular screen resolutions has been quite tame these past few years. When designers say that a site is designed, or optimized, for a particular screen resolution, they’re actually talking about the resolution of the viewer’s monitor. In the past, the screen resolution debate was focused on whether our designs should still accommodate monitor resolutions of 800×600 without displaying a horizontal scrollbar. According to W3Schools’ screen resolution statistics, in January 2010, 1% of web users had their screens set to 800×600 pixels (down from 4% in 2009), 20% had their resolutions set at 1024×768 pixels (down from 36%), and a whopping 76% of visitors had a resolution higher than 1024×768. The figure below illustrates these trends. These days, it’s a given assumption that desktop browsers display at least 1024×768. Even the majority of netbook computers have a 1024×600 or higher resolution. For that reason, 960px has become the de facto width for most web design projects. With W3Schools reporting the growth of users with resolutions greater than 1024, you’d think we’d be looking to push the standard width past 960, but there are a couple of reasons why this probably won’t happen. First, most users with larger monitors still keep their browser window set less than 1024 pixel-wide, so they can see other applications they have running. The other reason is line length. If a line of text is too long, it becomes less readable. Therefore, a wider default layout width would really only allow us to add more columns.

Although desktop browser statistics like those provided by W3Schools justify our use of 960 pixel layouts, they ignore a major segment of the web browsing population: mobile users. Again citing Ethan Marcotte’s “Responsive Web Design” A List Apart article, mobile browsing is expected to outpace desktop-based access within three to five years. As mobile screen resolutions increase and mobile browsers catch up to their desktop cousins, it’s safe to say that your website design will be readable in modern mobile devices. You should still include popular mobile devices in your browser testing, though; if we’re struggling to make the sites we design look right in IE7, shouldn’t we be checking them on mobile browsers as well? Taking the increase in mobile usage a bit more seriously, a greater amount of websites are providing mobile-optimized versions of their sites; this, of course, means that more and more clients will be demanding mobile-optimized sites as well. This used to be a complicated task, dealing with mobile-specific languages like WML and awful, inept browsers like Blackberry’s old RIM OS.

Fortunately, designing a mobile-optimized site today is mostly about revamping your layout to work on mobile screens while possibly leveraging some of the bonus features of the OS to make it shine. Covering the technical details of designing a mobile-optimized site is outside the scope of this book, but the layout principles and design theory discussed in the rest of the chapter still apply. At the end of the day, no matter what you’re designing, the needs of your client and their target audience should be the driving force behind your decisions.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book (the second edition of which is out now). This is the twelfth part of the first chapter.

Frequently Asked Questions about Screen Resolutions