28

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

11 Answers 11

19

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.

  • 1
    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
  • 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). – WhyNotHugo Jun 12 '13 at 2:07
9

Is there a standard width for designing web page mockups?

Yes, no, maybe?

Once upon a time (see below) web design largely attempted to create a single view that would fit reasonably well on most screens. In the last five years, that has changed drastically with the adoption of Responsive Web Design (RWD).

RWD is a design principle of making designs in a way that allows them to fit reasonably well on any device regardless of the size of the device.

In web development, media queries are often used to apply different sets of styles to web pages depending on a number of factors. Some common factors include:

  • current screen width
  • current screen height
  • device width
  • device height
  • device orientation

Because styles can be targeted to specific screen sizes, it's not uncommon to create multiple sets of designs that target specific ranges.

To be clear, there are no set "standards". There is no governing body or organization that says "designers should make designs following these sizing guidelines", because in the end it's a judgement call.

With that said, the web development industry has organically come up with a set of common breakpoints that occur again and again.

Typical breakpoints are for the current screen width, and are commonly:

units in px

  • 320
  • 480
  • 768
  • 1024
  • 1200
  • 1600

The reason for these specific numbers are pretty mundane. The original iPhone had a screen with dimensions of 320×480; the original iPad had a screen with dimensions of 768×1024; 1600×1200 are common for larger screen resolutions.

While it's common to see mockups at some or all of those breakpoints, it's also common to need to provide multiple renderings of a particular page showing intermediate design inflection points.

A fluid-width comp that shows stacked items at 768px wide might need to include a design for 900px where the items have switched to two columns. If you find that you need to provide many sets of designs for these intermediary breakpoints, I would highly recommend designing individual components and showing the breakpoints where a component changes on a per-component basis, without including the rest of the page in the mockup.

This also helps to avoid common design pitfalls where specific UI components go missing or are not congruent between breakpoints.


The following is the older version of this answer which I am keeping for posterity's sake, but it has not been relevant for some time

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.
  • "Browser Size" has been incorporated into "Google Analytics". The stand-alone tool is not available anymore: analytics.blogspot.com.br/2012/06/… – Denilson Sá Maia May 25 '15 at 13:24
  • It's worth noting that this was written in the early days of RWD, and is no longer a relevant answer. – zzzzBov May 25 '15 at 16:39
8

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 :)

  • 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
6

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.

  • 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
2

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.

2

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.

1

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.

1

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.

  • 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
1

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

  • 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
0

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.

0

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.

protected by Brendan Oct 7 '13 at 20:04

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

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.