What Screen Resolution We Should Design For?

I always struggled at first when I needed to decide, which resolution to design for. So first thing We would need to ask ourselves is – who we will design for, what’s really our audience? That’s not important only to which resolution create our document, but how big our fonts must be and which browsers we must support. Now the vast majority uses computers with 1024×768 px resolution. But that doesn’t mean, that You should create design in 1024×768 resolution too and You got all that space available to use.

Width is important to get rid of browser side scrollbar, which would be seen if You create Your design too wide and as to the height there is no limitations, but You must create design so the most important things You want to display would be seen for example – buttons, some hot links, maybe ads. If I analyze my web page it’s not so well thought-out actually, but I hope to create new design in my spare time real soon.

Okay, so the question remains and that’s why I want to share with You with this great resource -

This resource is so great because there are nice collection of different popular browser screenshots 1024 x 768 px and 800 x 600 px resolutions and in different versions.

And also they also offer not only screenshots but also browser templates as *.psd files with the same 2 different resolution screenshots, 60px vertical grid to help You create column. Also You can switch on/off scrollbar, favicon, type in page title, to give You an overview how Your design will look in selected browser and also to help You show the most important things when user loads the page.

I used FireFox addon – Measure tool, to measure actual shown width and height for FF browser – it is 1000×660px.

You can get Measure tool addon here and also handy comes Firesizer 0.65 addon too, to easily check how Your page is displayed in different resolutions.

That’s one method, but I suggest You to use 955×600 document size, because a lot of articles and comments I read through suggested to use 950-960 width size or just use liquid layouts, that stretches to the current user’s window size and avoid to use fixed layouts that are always in the same size. And for a height I checked with measure tool different browser templates and every browser window seems to fit in 600px height.

If You are interested to check how for example apple.com, windows.com, mtv.com, resize Your window to 1024×768 resolution and test different pages and with measure tool You will see, how much width and size they use . It’s good to check this kind of popular sites, because they spend many thousands to test and optimize their pages.

I hope this short article will help people, who just start to create fresh designs and struggle thinking what resolution they should design for and what width and height they should choose creating new document.

I will appreciate to see Your opinion about this question!

*edited

Also fellow from Squangles.com just gave me great site, where You can check browser compatibility, cross platform browser test. You can get screenshots how Your site would look almost in every browser.

Here is the site : Browsershots