Possible Duplicate:
Common screen resolution in 2011?

What would be a good web page resolution to design for?

I currently work according to 1024px wide resolution screens. and create UIs which span upto 1020px width.

  • 1
    Depends on the screen resolution employed by your desired target market. If you already have a site there, things like Google Analytics can help. Note also that you are considering screen resolution, whereas what really matters is window size which may well be smaller. If you can make it fluid or "responsive", it may well be better, too. Commented Aug 6, 2011 at 14:44
  • 1
    With the recent proliferation of smartphones, minimal resolution ought to be rather small, unless you're willing to completely exclude that target audience.
    – dbkk
    Commented Aug 6, 2011 at 14:56
  • Thinking in responsive design is the best. There are many smart resources in the topic, just search around. Commented Aug 6, 2011 at 15:28

3 Answers 3


Don't design for a resolution at all. It's 2011, the state of our art has matured past that point. Check out Ethan Marcotte's article on Responsive Web Design, and then buy his book (well worth the money - one of the few technology books I'd recommend this year).

Base your design on modular, scalable elements that can grow or shrink with the size of the client's display and can be rearranged to fit the available space. To get an idea of how this actually works in practice, go to http://hicksdesign.co.uk/ and http://simplebits.com/ on a desktop browser. Try resizing the browser from fullscreen down to iPhone-size and see how the page reacts to optimize for the available space.

enter image description here

"One website, many devices"

  • +1... even if you don't make a fancy automatically-resizing layout, your layout should at least attempt to make use of large resolutions if available, and scale down somewhat gracefully if not. Commented Aug 8, 2011 at 1:17

The 960 grid system (http://960.gs) is popular for prototyping designs and has been included in various frameworks and starter kits. It also has a bunch of spinoffs and variations, including at least one fluid version (http://www.designinfluences.com/fluid960gs/).

A responsive-design version can be found in the 978 grid system (http://978.gs/), which includes grids that scale up to 1378 (large desktop monitors) and down to 300 (mobile phones). The site includes specific information and recommendations on which of their grids works best with different browser/OS/screen-size combinations (http://978.gs/browsers/).

It's also good to consider tablets as a possible usage context, as they have similar resolutions to small/medium desktop monitors; 960/978 gs design constraints tend to work well for those screens.

Basically, if you're designing for typical 1024*768 screen size, 960 gs is well-tested and highly popular; if you're looking for a more sophisticated responsive framework, check out 978 gs.

  • But 960 doesn't accommodate a killer banner, what do you think we should do here? Commented Aug 6, 2011 at 23:49

I guess there is no sense designing for resolutions bigger than 1024 for the up above mentioned points. 960 grid would work great. I personally also expected to come a moment when there will be a scale up, let's say move to 1280px as a standard resolution for most clients. Fact is the resolutions are not so much growing that way because of the pocket devices flood.

I also read about responsive design and it seems that is the future. Unfortunately too less sites use that technique of coding yet, but I guess in future it will get better. The only unfortunate thing for us, developers of websites, is that more and more time will be spent over considering how to pass elements, what devices will show them right and so on.

Nevertheless I think migrating to "responsive design" would be great.

Not the answer you're looking for? Browse other questions tagged or ask your own question.