: Is there a standard width for designing web page mockups? Is there a standard size for the width of a website in a mockup? What is that size? Why?

@RJPawlick971

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

Vote Up Vote Down

@Phylliss782

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.

Vote Up Vote Down

@Dunderdale640

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.

Vote Up Vote Down

@Kristi927

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.

Vote Up Vote Down

@Kevin459

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.

Vote Up Vote Down

@Berumen635

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.

Vote Up Vote Down

@Sarah814

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.

Vote Up Vote Down

@Speyer780

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.

Vote Up Vote Down

@Voss6371140

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.

Vote Up Vote Down

@Ogunnowo857

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

Vote Up Vote Down

@Karen819

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.

Vote Up Vote Down