What browser width should I use to design a website?


I am working on graphics part of the website and been asked to design a website in Photoshop. I wonder what are an average dimensions and browser widths for a website so i can create my mockup with those dimensions.

6/2/2012 12:12:00 AM

In the modern age of web design, browser width is irrelevant. There are so many different devices out there that you NEED to make your designs responsive, in that they work for any size screen.

To do this you should be using some sort of fluid width grid system and target specific devices using @media queries.

Media queries are simply different sets of CSS rules for different view port sizes. Media queries also respond to dynamically changing the width of your browser. As you make your browser smaller the page responds by dropping the floats or going from 12 columns to 1 or 2. The responsiveness also reacts to users on mobile devices and tables when they change the orientation from portrait to landscape or vise versa.

Targeted sizes:

  • 320 x 480 mobile device in portrait mode
  • 480 x 640 small tablets or an iPhone in landscape mode
  • 768 x 1024 tablet in portrait mode
  • 1024 x 768 tablet in landscape mode
  • 1200 + desktop browsers
  • 2900 ++ large media displays or conferences (This is not a must but what if someone was looking at your site on a very large display.

To see this in action take a look at the Frameless grid. It's not actually fluid but as you adjust your browser it goes from 14 columns all the way down to 1

Twitter Bootstrap, a simple CSS, HTML and JS framework built with popular user interface components, is also a good example of modern responsive design practices.

Another thing that you might also want to account for is pixel density. The iPhone 4 and the new iPad have retina displays that are 2x as sharp as normal screens. This makes the practice of serving sprites and images instead of text almost obsolete. On an iPad images with text look horrible.

So the answer to the question is that there is not a standard browser width that you should design for. You should make your design decisions based on your users and make it where it is the most accessible to the most amount of people.

6/1/2012 12:35:00 PM