Screen Resolution: Size Matters

800×600 or 1024×768 or 1280×800 or 1280×1024? I could keep going, but that won’t do any of us much good. One of the first questions you should be asking yourself when you set out to design a website is what screen resolution are you shooting for? The easy answer as of December 6th, 2008 is 1024×768 (that is width by height for those who are confused).

However, it does get a bit more complicated than that. There are two things you should consider, your target audience, and your future website. Based on the age and demographics of your target audience, the distribution of screen resolutions will change. Young and hip audience? Targeting upper class users? Assume that a larger percentage of your audience will be using larger screens. As for your website, you may have a dire need to shoot for a larger screen size because you need the space. Or perhaps you think you can sacrifice screen size because you really don’t have much content and you’d rather accommodate everyone. These are all things you should think about.

However, the bottom line is, around 30-40% of your users (again, as of December 6, 2008) are using 1024×768. Another 30-40% will be using 1280×800 or 1280×1024. Those are your two to pick from, but again, unless you want to inconvenience 30% of your users, 1024×768 is your sweet spot. You’ll have about 5% of your users still with a 800×600, but honestly, they need to upgrade. By the time a group drops to around 5%, it is worse to inconvenience 95% of your users to help the other 5%. Lastly, whatever is remaining in your percentage will be even larger resolutions.

Keep in mind that these things change over time. Within a few years, 1024×768 will be outdated, and we’ll be shooting for 1280×1024 or something else. Always track your users. I highly advise using Google Analytics. This tool allows you to gather information on everything to enhance your user experience. There will be another post on this topic in the next few weeks.

Now, another quick lesson. With 1024 as your target width, you actually need to be designing for about 990px. At least, that’s what I’ve always shot for. This is to take into account a scroll bar when your content goes below the fold. Also realize that 768px is a huge overestimate. After you factor in a windows bar, browser title bar, menu bar, URL bar, bookmark bar, and tab bar you’ve lost anywhere between 100 and 200 pixels. I’ll be writing another post on wrapper divs and sticky footers to help center your content regardless of screen resolution, as well as a post on sticky footers, which will keep your footer at the bottom of the screen unless content pushes it down further.

Thanks for reading, stay tuned!

One Response to “Screen Resolution: Size Matters”

  1. Saurabh says:

    Hi,

    Stumbled upon your website while trying to fix my site to ensure that the alignment of the elements stays consistent even after the screen resolution is changed. Loved the way you have lucidly explained everything. Thanks.