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.

W3Schools’ screen resolution statistics

W3Schools’ screen resolution statistics

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.

Blip.tv on iOS (as seen on http://cssiphone.com)

Blip.tv on iOS (as seen on http://cssiphone.com)

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.

If instead color is more your thing be sure to check out the existing digitization of the color chapter here on Design Festival.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Leonardo

    If only it were this simple.

    screen size != resolution

  • http://aljiro.com Leo Aljiro

    Interesting. I always wondered about the stats regarding screen resolutions. I myself use the 960px wide as a baseline for my projects and so far it’s okay.

  • http://www.fijdesign.com/websites.php Fij Design

    Certainly want to work on the basis than many people do not have browser full screen for a while yet, great post…

  • Anonymous

    Screen res is a pain..
    i cant believe this!! me and my sister just got two i-pads for $42.77 each and a $50 amazon card for $9. the stores want to keep this a secret and they dont tell you. Go here, www.tinyurl.com/3qa436v

  • Anonymous

    I love how every idiot out there decides to use “de facto” statistics quoting w3schools. W3schools needs to be criminally procecuted for not CLEARLY stating in big bold 150 point font….

    “OUR STATISTICS ARE ONLY GENERATED FROM OUR WEBSITE”

    As quoted from their website…
    “The statistics above are extracted from W3Schools’ log-files, but we are also monitoring other sources around the Internet to assure the quality of these figures”

    That is total BS.
    They report 25% IE usage. Real IE usage is in the 50-65% range internet wide.

    Better more objective stats can be found here:
    http://marketshare.hitslink.com/report.aspx?qprid=17

    NEVER QUOTE w3schools stats ever again.

    • http://pulse.yahoo.com/_OK5DAACDTIDQWAS5PYVHACSRWE Barbra Barr

      I ČĂŃŤ βĔĹĨĔVĔ ŤĤĨŚ!! МĔ ĂŃĎ МŶ ŚĨŚŤĔŔ ĴÚŚŤ ĞŐŤ ŤŴŐ Ĩ-РĂĎŚ ŦŐŔ $42.77 ĔĂČĤ ĂŃĎ Ă $50 ĂМĂŹŐŃ ČĂŔĎ ŦŐŔ $9. ŤĤĔ ŚŤŐŔĔŚ ŴĂŃŤ ŤŐ ĶĔĔР ŤĤĨŚ Ă ŚĔČŔĔŤ ĂŃĎ ŤĤĔŶ ĎŐŃŤ ŤĔĹĹ ŶŐÚ.
      ĞŐ ĤĔŔĔ, www.tinyurl.com/3qa436v

  • http://www.printingray.com/sticker-printing.html custom stickers

    I did a search about them matter
    and found most persons will go together with your blog. I do not really know
    too much relating to this, i actually just wanted to obtain ideas out of your
    site, but your post caught my attention.