What browser width should I use to design a website?

Question

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.

Answer 1

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.

Answer 2

Many layout templates use 960px width since that fits into the common 1024px wide screen resolution, gives some space for the scroll bar and is easily dividable by 2, 3, 4, 5, 6, 8, 10, 12 and 16 - ideal for columnizing the layout.

See http://960.gs for an example.

Other frameworks like bootstrap use 940px to account for some margins between the columns.

Answer 3

If you're targeting desktop browsers, then you can easily go to about 1000 pixels wide, if you need to.

StatCounter screen resolution

Why about 1000 pixels when the most typical displays are 1024 pixels or bigger? Because you have to allow for the scroll bars and window chrome.

If you're specifically targeting mobile browsers, then 320 pixels wide might be a good choice, although mobile browsers typically scale content to fit the view width, so 950 or 960 pixels wide can be great. Please note that 320 CSS/HTML pixels equals 640 device pixels on high DPI devices like the iPhone.

StatCounter mobile screen resolution

Your target market may change things, too. If you're targeting a tech savvy audience, you can expect things to be skewed to more modern devices. If you're building a government site, you'll need to cater for a wider range.

Also, how are you building the site? If you're using a grid system, like Blueprint CSS or the 960 Grid System, then that can dictate the size as well (most grid systems can also be changed to other sizes).

You may also want to look into responsive design if you're trying to work well on mobile as well as desktop.

Answer 4

in this time world wide slandered desktop size is 1024x768 it's good to make a website in 1003px size...