Screen Resolution Made Easy

If reading small type isn’t your strong suit, you might wish this were the case (if so, you’re in luck.  You can easily adjust a large monitor so that it displays at the same resolution as a smaller one).  If, on the other hand, you’d like your text the same size but want to fit more of it on your bigger monitor, we have good news: that’s the way it usually works!  Big screens typically operate using a higher resolution than smaller ones.

How does this affect the way users view a website?

The catch is that users with big monitors and high resolutions don’t always keep their windows small.  In fact, they typically make windows as big as possible so they can see more of what’s in them.

The problem then is that if you design a website to look good on a small screen with a small resolution, it’s going to look positively miniscule to these users. They’ll still be able to read your content, but it will be surrounded by acres of nothingness.  On the other hand, if you design your site for larger resolutions, it will look even worse to those users who are still stuck using their tiny monitors.  If things are really bad, they may have to scroll back and forth horizontally just to read your text (meaning they probably won’t stick around to read a whole lot of it).

How do you make a site look good for everyone?

Alas, it’s virtually impossible to make a site look the same for all viewers.  Your best bet is to optimize a site for 1024 x 768, which is the smallest resolution that’s currently in wide use (about 30% of users as of this writing).  95% of your users will have resolutions this large or larger, which at least means that very few of them will be forced to use a horizontal scroll bar.  Users with gargantuan monitors will probably forgive your site for not filling their screens since most other websites they view will probably fall short as well.

We should make it clear here that “optimizing” for a given resolution doesn’t mean it’s okay for it to fall apart at other resolutions.  A well-designed site will look good to anyone who views it; it will just look best when viewed at the resolution it was optimized for.  

One option is to use a liquid layout where content stretches or shrinks to fit the browser window it’s viewed on (the Amazon website and Gmail are good examples of this).  In general, though, simpler fixed-width layouts are often a better choice because there are a lot fewer places where things can go wrong (this approach is used by Twitter and on the McCormick & Winter website, among others).

Will I ever need to optimize for a resolution other than 1024 x 768?

Unfortunately, while 1024 x 768 is currently accepted as the standard for web design, it may well be out of style before you buy your next computer.  In January 2003, for example, nearly half of all users browsed at an 800 x 600 resolution, but by January 2009 that proportion had dropped to a mere 4%.  Clearly, the fat lady has yet to sing about screen resolutions.

For any site, you should keep an eye on what screen resolutions, browsers, and operating systems your viewers are using (since each of these factors affects how your site looks).  Fortunately, you don’t have to find where your users live and go knocking on doors to figure this out.  Google Analytics – or any of a number of free services for tracking web traffic – provides impressively detailed statistics on this information.  Take a look every now and then, and if one day you find that 90% of your users are viewing your website on a iPhone, for instance, it might just be time to head back to the drawing board.