What is the standard width for a website in pixels?

website-design

196,957

Solution 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

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

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

Solution 4

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.

1366x768 25.4%
1920x1080 11.0%
1280x1024 9.7%
1440x900 7.3%
1280x800 8.2%
1680x1050 5.7%
1600x900 5.0%
1920x1200 2.9%
1360x768 2.1%
2560x1440 1.1%
Other 11.6%

Solution 5

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

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

View more solutions

196,957

Jonx

Updated on September 17, 2022

Comments

Jonx over 1 year

What is the standard width for a website in pixels or where are statistics?
- Admin about 11 years
  
  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.
Admin about 12 years

do you have a source?
Mattis over 11 years

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).
Simon Hayter about 11 years

Most screens 'USED' not sold are 1366x768px due to macs and laptops. See my answer.
Konduktor about 11 years

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.
JRaymond almost 9 years

Link does not work anymore.