Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|improve this question

migrated from stackoverflow.com Jan 19 '11 at 15:21

This question came from our site for professional and enthusiast programmers.

    
Fast forward to today and responsive web design is becoming the standard. Your website should adapt to the many different screen sizes. At least: HD Screen, Desktop, Laptop, Tablet, and Mobile. –  Mario Awad May 17 '13 at 14:06
add comment

12 Answers 12

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.

share|improve this answer
add comment

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%

share|improve this answer
add comment

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.

share|improve this answer
    
Most screens 'USED' not sold are 1366x768px due to macs and laptops. See my answer. –  bybe Feb 22 '13 at 20:37
    
Since I cannot "add comment" to your answer yet, I'll ask it here. What is the source of your list of screen resolutions? I am curious. Thank you for providing the 1366x768 info. That is useful to know. –  J. Chin Feb 23 '13 at 21:13
add comment

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

share|improve this answer
    
Awesome page Martin, I'm surprised I haven't heard about this one before :) Up vote this guys! –  Mattis Sep 27 '12 at 14:04
add comment

960 pixels is the best width for sites

share|improve this answer
    
do you have a source? –  Christofian Feb 28 '12 at 3:06
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
1  
If someone is interested, docking Google Chrome to one side on my 1920x1200 resolution monitor resulted in an usable area of 927px (leaving space for the scroll bar). –  Mattis Sep 27 '12 at 14:02
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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

share|improve this answer
add comment

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

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

share|improve this answer
3  
That site should be avoided (w3fools.com) and those stats are worthless (because the sample is heavily skewed). –  Quentin Jan 19 '11 at 18:55
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.