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.

Is there a standard size for the width of a website in a mockup? What is that size? Why?

share|improve this question
4  
Rule of thumb: The width that makes the mockup look good on the client's PC or PCs :) –  Pekka 웃 Jan 6 '11 at 15:58
add comment

12 Answers

up vote 12 down vote accepted

I start most of my mockups at 1200px wide even though I'm designing for 1024px resolution. I set up guides within the mockup for 1000px. The height may vary. The reason I make my mockup file wider is to see how the design feels with breathing room around it. Most people use higher than 1024px these days.

share|improve this answer
    
Only answer to provide a good reason for making the mockup wider than the target resolution's width. –  e100 Jan 17 '11 at 19:39
2  
I would call this answer "a very good idea", but not a "standard". –  Moshe Jan 26 '11 at 14:34
    
You should use "em" instead of "px". For example, instead of 1000px, use 62.5em. This will look the same on a "normal" pc, but will adapt more elegantly on not-so-normal screens (ie. HiDPI, mobiles). –  Hugo Jun 12 '13 at 2:07
add comment

I'd have to look for stats to back me up (such as this SO blog post), but 1024x768 has taken or is taking over as the standard common denominator for screen resolution. I design web mockups for general audiences with a width of 1000 px to account for scrollbars and window borders with a resolution with a width of 1024 px. For more specific audiences, Pekka's right in his comment. Find out what the norm is for the target audience.

share|improve this answer
add comment

Short answer: 775x400 for 800x600, and for 1024x768 use 1000x500.

Long answer: You cannot ever be sure that your presentation it will look right on your client computer (it could have a different operative system, browsers, a different calibrated monitor, or a lower resolution with big font setted to read better). For this reason I tend to show always presentation on my computer if I can.

If I cannot show it on my pc on the size matter I use those my personal rules (Don't take my measurements as holy ones, everyone has his owns):

As safe size it is good optimise for 800x600 (removing scrollbard and topbar I use 775x400 as "above the line"). But nowdays with more cheaper screen with wider standard I started to design for 1024x768 (1000x500)

The important it is to optimise not for the height but for the width. Height it is solvable with a simple scroll of a mouse, with the width if you don't have a mac mouse you cannot scroll horizontally to view more information. It is good to know however where more or less could be positioned the bottom line of the screen, even if it is impossible to determine precisely .

NOTE: I use such low height even on 1000px because people tend to have a lot of additional scrollbars on the basic browser (like GoogleRank for example or bookmarks, and many many others), so I always like to design for worst situation is possible.

P.s. sorry for my bad english :)

share|improve this answer
    
I would add that it depends on what browser and browser features you are using to determine how many pixels smaller you actually have to work with. –  Jason W Jan 6 '11 at 18:53
add comment

We have a tracking program which tells us information about our users. More than half are at 1024x768. So I use that as the "standard" monitor size.

However, that's not your live area for your site — people have sidebars, they don't always open the browser window full width, etc.

I like the 960 grid system. The numbers are flexible and the website provides lots of templates to download. I use that for my mockups, and everyone's been pretty happy so far.

share|improve this answer
    
Screen resolution != browser size –  DA01 Jan 18 '11 at 4:50
    
@DA01: you are correct; they're not the same thing, which I noted in my second paragraph. It's a starting point for figuring out how much live area I might have. –  Lauren Ipsum Jan 18 '11 at 11:17
add comment

I'm surprised no one has mentioned this yet:

Google has a nice development tool called

Browser Size

It should pretty much answer your question alone.

I have a few notes on current trends:

Currently the vast majority of users have resolutions of 1024x600 (tablet/netbook) or bigger. You have to remember to remove about 24px for the scroll bars, which leaves a nice even 1000px width. As for height: web users are very good at scrolling vertically, as they've grown accustomed to scroll wheels on mice. The initial height is important mostly for first-impressions.

Users are not quite as good at scrolling horizontally, so making layouts wider than 1000px is not recommended.

Also many users with larger screens do not use their entire screen for their web browser. Especially now that Windows 7 includes simple drag-n-dock functionality to drop a window on half the screen.

In summary:

  • avoid static widths over 1000px
  • make sure your first-impression looks nice at 1024x600
  • don't be afraid to drop content below the fold.
share|improve this answer
add comment

Browser size today is a tricky question because people are using two types of devices, computers with higher and higher resolutions and phones with relatively low resolutions.

If you're making a site to be a site than most computers today (most being 90% or more) have a minimum resolution of 1024. If you want slightly fewer computers but still a good percentage than 1200 is also in that range.

If you're making a mobile site, most phones max out at 480px for horizontal browsing, but most of them also have some sort of rendering system for larger sites.

The question for size is all about your own audience, if your target is a bunch of designers, you can have a larger site, if it's middle aged folks looking for new car insurance than you should work a little smaller, and if it's for phone users to look at while on their phones, even smaller still.

share|improve this answer
add comment

It totally depends on your website, as a rule, I'd tend not to go over 1000 for those clients on old machines. However studies are now showing that designing for 1200 is now acceptable in the design world, so it's food for thought definitely.

Your plan should be to hit the lowest common denominator and if that happens to be Joe Dinosaur on an 800x600 Windows 95 machine then that's who you should cater for.

Also it totally depends on the design of your website. I'm currently designing a website for my agency and it's going to be 800 wide, that is for preference, not to cater to anyone specific.

share|improve this answer
add comment

I recommend to use 960px for width of your template, because most screen resolution are 1028px , so the scroll-bar will not appear and you will see the background which you used as well.

share|improve this answer
add comment

I will suggest you to use 1024px for standard width. Because, maximum number of pc built with crt monitor and the resolution of this monitor is 1024*768px.

share|improve this answer
add comment

Unfortunately there isn't any standard size as the webpages now are accessed in a number of displays. Though to be on safer side, please research on the most popular resolutions (For example, 1024x768) and design on the basis of the popularity.

share|improve this answer
    
But note that cell phones are pretty popular, too! –  DA01 Oct 7 '13 at 17:08
    
Yes, certainly. Even most cellphones come with different display sized. Then there are tablets too. Best is to create a liquid display where the width is in % and not rigid. –  AB01 Oct 18 '13 at 6:52
add comment

The answer is: No, there is no 'standard'.

share|improve this answer
2  
Depends on how you define 'standard' I suppose, but I heartily disagree with your answer. The existence of '960' grid systems and specific breakpoints in Bootstrap suggest that you can make generalizations (that, admittedly, will change over time). –  Brendan Oct 7 '13 at 18:16
    
@Brendan commonly used, perhaps. But the point is that there is no standard size to a web page. In fact, Bootstrap is the epitome of that (responsive). –  DA01 Oct 7 '13 at 19:48
add comment

800 TO 1000PX WIDTH. Most websites are that size

share|improve this answer
1  
Could you expand on your answer in any way? Perhaps by referring to a resource with statistics or something with substance. As it stands your answer is very basic and almost just an opinion. –  Dominic Oct 7 '13 at 20:02
add comment

protected by Brendan Oct 7 '13 at 20:04

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

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