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

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 2

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 3

I made a little test last year using Google Analytics to find out what are average inner browser widths and height (what users actually see).

Answer 4

960 pixels is the best width for sites

Answer 5

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 6

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 7

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

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 10

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 11

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

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