Golden Section Ratio

Golden Section Ratio by Patrick Hoesly used under Creative Commons

I am currently working on a couple of web-based projects that involve adapting the content that is displayed to the dizzying array of screen resolutions that are available on today’s desktops, laptops and mobile phones. I started making a list of the screen resolutions and thought I would share it:

Mobile phone resolutions (commonly rotate):

  • 320×480 (iPhone 3)
  • 480×800 (Nexus One/HD2)
  • 640×960 (iPhone 4)

Full Screen resolutions:

  • 640×480 (old school)
  • 800×600
  • 1024×768 (many projectors)
  • 1280×1024
  • 2048×1536

Widescreen resolutions:

  • 1280×800
  • 1440×900
  • 1600×900
  • 1680×1050
  • 1920×1080
  • 2048×1152
  • 2560×1600

This list is by no means exhaustive, but I hope it captures enough of a baseline that I can use to “unit test” the projects that I am working on. Please let me know if I have missed any obvious ones!

Best Viewed in 800×600?

In the late 1990s and early 2000s we went through a period where many web developers and designers went with a standard of “locking” their website designs to screens that were 800×600. In many ways this made sense because (at the time) that was the most common screen resolution and monitors that were slightly larger would still look okay.

Go to your favorite search engine and do a search for the text +”best viewed in 800×600” (link goes to bing.com). You will find that there are still 1000s of sites with that text on it (and a site that is locked into a design that is optimized for that display.

Since it was in vogue to lock a design to one screen size a number of things have happened:

  • Desktop screen resolutions got bigger – much bigger! The 30” Apple Cinema display checks in at 2560×1600! Laptops also got higher resolution
  • The variety of resolutions also increased with Widescreen Resolutions becoming popular
  • Smart phones became popular and we started browsing on devices that were much lower than the desktop and laptops
  • Browsers (and their associated standards) made it easier to have websites that could adapt to different size resolutions (yeah!)

All these factors have conspired to make locking your site into one screen resolution no longer a desirable practice.

The most important resolution to optimize for?

The ones that your users are actually using! Knowing your audience is important especially before you spend a lot of effort in adapting your site to different screen resolutions. Most stats applications (either server side or client side) will give you some statistics on the screen resolutions that are typical on your website. As an example, if you have a site that is geared to information on mobile phones I would suspect that you would see more traffic from smart phones (smaller screen resolutions). If you have a site that hosts high resolution wallpapers you probably see traffic with high resolutions. You won’t know until you look!

Pete Prodoehl over at RasterWeb recently published some of his website stats, including the screen resolutions he sees on the site. He noted that a couple of years ago he made some optimizations for netbook screens, but actually sees more traffic from Smart Phone size screens.