Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
    
thats a completely different question then the other one. This asks what a default resolution of a whole website mockup image should be the other one asks for graphics within that website. –  Xitcod13 May 24 '12 at 4:13
2  
Not sure why it was closed, it's not a duplicate of the other thread. (I voted to reopen) Also changed the title to be a bit more accurate. - Most users now surf with a browser set to 1024 x 768 or larger. It's generally acceptable to use 1000pixels as a max width. This is why formulas such as the 960 grid, bootstrap, and others are gaining popularity. –  Scott May 24 '12 at 4:14
    
Sorry guys, I got hung up on the titles which were nearly identical. Reopened... –  Farray May 24 '12 at 4:54
    
Does this assume a fixed-width layout for the site? Or would it be worth including one frame in the mockup for "And if a user is using a resolution of 640x480 because they have poor sight, the site will look like this..." and showing how the layout reflows? (OK, you might use 800x600 instead) –  Andrew Leach May 24 '12 at 7:44
add comment

4 Answers

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

StatCounter screen resolution

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

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.

share|improve this answer
4  
I second the 960 grid system. Very flexible and will work for a majority of your viewers. –  Lauren Ipsum May 24 '12 at 10:02
    
"...you can easily go to 1024 pixels wide, if you need to.." this seems to be missing an important caveat in that some of the screen width will be taken up by browser window borders. –  e100 May 24 '12 at 13:00
    
+1 for responsive design. Considering more people will be viewing the web on mobiles than computers by 2014 I think responsive is a good path to at least look into - even if not using it for this project. –  DBUK May 27 '12 at 19:25
add comment

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.

share|improve this answer
    
Awesome reference to the 960gs site. @Hugh you should use their psd templates to aid you. –  skids89 May 24 '12 at 20:43
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
3  
Why 1003px....? –  e100 May 24 '12 at 13:01
    
because stranded size is world wide 1024 width and 768 height with 1024px width 11px need for scroll bar and 5px for right and left side margin –  Graphic Design Guy May 24 '12 at 14:48
2  
I wish I could down-vote a comment... :( But just FYI @Rizwanabbasi: scrollbars have different widths on different systems (touch devices don't even have them) and even on these systems scrollbars can be changed (Google is doing that for instance in its apps from GMail on). –  Robert Koritnik May 27 '12 at 8:25
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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