What is the standard width for a website in pixels?

Question

What is the standard width for a website in pixels or where are statistics?

Answer 1

There is no standard, despite most developers assume 1024x768 as standard.

There is a CSS grid system named 960grid which assumes the body width as 960px, then breaks columns in 96 columns with 10px, or 80 with 12px.

The problem is: PC screens are getting bigger and bigger always, slowly in some regions but are.

In the other hand, at tech-tops, you have smaller screens in mobile devices and netbooks.

Dealing with this reallity can be painful. There is CSS Media Queries to the rescue. Alternatively, you can use tag link (with rel handheld) to provide an alternative version to mobile devices.

Follow some reference links for you

• http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-alternate
• http://dev.w3.org/csswg/css3-mediaqueries/

Answer 2

What is the standard width for a website in pixels?

Any number greater than 0 and less than infinity.

Current best practices for Responsive Web Design (RWD) are to support every device regardless of its width in pixels. Typically this involves using media queries to provide different styles for different ranges of screen sizes. The actual ranges used matter less than the design being consistent across sizes, and the site maintaining functionality across sizes.

Users are very likely to see different screen sizes without thinking much about it, so you want to minimize the amount of surprise when they drag a window to dock on half their screen, or happen to tilt their phone.

Some common width ranges used are:

• extra small: 0-480
• small: 480- 768
• medium: 768-1024
• large: 1024-1200
• extra large: 1200+

These ranges are so common that I'd say they're practically a standard. Not all ranges need to be used, for example a site might be fluid width for anything below 768 and then fixed width and centered for 768+.

With all that said, be aware that the numbers you use don't particularly matter so long as the site is functional on whatever device a user chooses to view it on.

where are statistics?

Now to the tricky part, the actual data. If you're redesigning a site, the only data that matters is your own. What Wikipedia or Stack Overflow, or Google, or any-other-large-website-that-might-list-analytics-data says is irrelevant to your data for your site.

If your statistics show most users primarily using a particular range of device widths, you should probably focus on serving those users first. That all said, If your design is properly responsive you won't need to focus on any particular size at all.

For new websites or sites that didn't previously have analytics, heavily consider using a mobile-first approach, and be sure to use analytics so that you can properly adapt to your user base.

---

Old, Out-of-date Pre-RWD Version for Posterity's Sake

I am surprised that no one else has thought to mention browser size by google.

As for standards:

80% of viewers can handle up to 1000px width, but the ones that can handle more than 1000px width often don't. With wide screen monitors many people will align their windows to half the screen. Now that Win7 supports drag-n-dock, it's likely it will become even more popular.

As for height: your first impression to the user is at the top of the page up to around ~600px. However, most users know and expect content to fall "below the fold" and are willing and able to scroll.

If you want to go wider than 1000px, I'd highly recommend a fluid layout so that users on netbooks and smaller screens can still see the content properly.

~960px tends to be a standardized width, but really it depends on the content and the style.

Answer 3

As others have said, there is no standard to this type of thing. Although, here are a few tips that will either make or brake your website:

I've always used either percentages or a worst-case-scenario build: smallest screen resolution that you're going to commonly come across is 800x600, and even that is rare. Anything below that is probably on a mobile device. 775px width is a good medium to use, or simply 80% if you know for a fact your website will still have appeal when it is scaled out to a larger screen. Most common problems is that the text content (When scaled out to 1600px widths) seems empty and short. Having your website to 775px width will fix that, however it might not look good with massive open space on either side.

NEVER make your users scroll to the left or right. Cutting off content of the sides is the quickest way to lose potential customers or readers.

Have your navigation somewhere near the top or in a place to where users don't need to scroll to find it.

And just a content tip; either have high graphics/low information or high information/low graphics. Trying to combine both of them always looks terrible.

Answer 4

The standard would be "as width/height as possible". It depends on the users screen :

http://www.w3schools.com/browsers/browsers_display.asp

Answer 5

It's helpful to know how popular screen resolutions are and then based your template based on general use by the majority... Personally I recommend using Responsive Design - that way your site works for all devices and all resolutions.

As from January 2013.

1. 1366x768 25.4%

2. 1920x1080 11.0%

3. 1280x1024 9.7%

4. 1440x900 7.3%

5. 1280x800 8.2%

6. 1680x1050 5.7%

7. 1600x900 5.0%

8. 1920x1200 2.9%

9. 1360x768 2.1%

10. 2560x1440 1.1%

11. Other 11.6%

Answer 6

Google Analytics records the visitor's screen resolutions. You can easily create a custom report to check what are the common screen sizes of your visitors. Here are stats (top 15) for my website for May 2013:

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

The stats vary from site to site depending on the type of traffic it receives so design accordingly. I myself prefer fluid designs with percentage width, 1000px min-width and a reasonable max-width.

Answer 7

There isn't really such a thing as standard, and the statistics are entirely dependent on target demographics. Aiming at technical people will generally result in better hardware and higher resolutions, less technical the reverse. But then there are phones, netbooks etc which have significantly lower resolutions than the norm in most cases.

For reference I usually assume a minimum of 1024x768 now.

In any case here are some: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php

Answer 8

I think , it depends to content of website .

For example if you don't need any sidebar, etc, and if you like minimal designs , you can set webpages width to 500px.

So, i don't believe (and don't like) standart about web layout's sizes.

Answer 9

960 pixels is the most that's safe, as it works on a 1024x768 screen and leaves room for the scrollbar, and also works on an iPhone in landscape mode (because it pixel doubles its 480x320 screen to an effective 960x640, and doesn't have a scrollbar).

Answer 10

Given that most of today's widescreen monitors have a resolution of "1440x900" or wider, I would think that a 1280-pixel wide is becoming more the "standard" especially when it comes to displaying images.

NOTE: 1280-pixel wide was the width of many older 4:3 ratio 17-inch and 19-inch screens.

Answer 11

960 pixels is the best width for sites