Default Web Page Width - 1024Px or 980Px

default web page width - 1024px or 980px?

If it isn't I could see things heading that way.

I'm working on redoing the website for the company I work for and the designer they hired used a 960px width layout. There is also a 960px grid system that seems to be getting quite popular (http://960.gs/).

I've been out of web stuff for a few years but from what I've read catching up on things it seems 960/980 is about right. For mobile ~320px sticks in my mind, by which 960 is divisible. 960 is also evenly divisible by 2, 3, 4, 5, and 6.

mobile view always view width as 980px. Can anyone help me detect what wrong?

You must add meta tag in the html header for screen width

<meta name="viewport" content="width=device-width, initial-scale=1">

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

Recommended website resolution (width and height)?

The advice these days is:

Optimize for 1024x768. For most sites this will cover most visitors. Most logs show that 92-99% of your visits will be over 1024 wide. While 1280 is increasingly common, there are still lots at 1024 and some below that. Optimize for this but don't ignore the others.

1024 = ~960. Accounting for scrollbars, window edges, etc means the real width of a 1024x768 screen is about 960 pixels. Some tools are based on a slightly smaller size, about 940. This is the default container width in twitter bootstrap.

Don't design for one size. Window sizes vary. Don't assume screen size equals windows size. Design for a reasonable minimum, but assume it will adjust.

Use responsive design and liquid layouts. Use layouts that will adjust when the window is resized. People do this a lot, especially on big monitors. This is just good CSS practice. There are several front-end frameworks that support this.

Treat mobile as a first-class citizen. You are getting more traffic from mobile devices all the time. These introduce even more screen sizes. You can still optimize for 960, but using responsive web design techniques means your page will adjust based on the screen size.

Log browser display info. You can get actual numbers about this. I found some numbers here and here and here. You can also rig your site to collect the same data.

User will scroll so don't worry much about height. The old argument was that users wouldn't scroll and anything important should be "above the fold." This was overturned years ago. Users scroll a lot.

More about screen resolutions:

• Screen Resolution and Page Layout
• Best Screen Resolution to Design Websites
• Design for browser size - not screen size

More about responsive design:

• Responsive Web Design (2010, May 25), Ethan Marcotte, A List Apart.
• Responsive Web Design at Wikipedia
• Multi-device layout patterns (2012, Mar 14) Luke Wroblewski. Catalogs the most popular patterns for adaptable multi-device screen layouts.

Tools and front-end frameworks for responsive design and liquid layouts:

• Twitter Bootstrap
• Zurb Foundation
• 50 fantastic tools for responsive web design (2012, April 24) Denise Jacobs & Peter Gasston

Create responsive web page with CSS (need help about page width)

You must use a specific width in px for the page when the width is more than 1024.
For example if you have a .container {width:100%;} under the 1024 size, you can add:

    @media screen and (min-width: 1024px) {
.container {
    width:1000px;
}}

When the screen is larger than 1024px your .container still width 1000px.

My iPhone thinks it's 980px wide

When using media queries you need to add this to your head tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This allows the website to detect that it is being used on a device.

You can also do this,

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

This part, user-scalable=0; prevents the user from zooming with their fingers and is useful if you have position: fixed elements.

What is a good maximum content area width for web pages?

I'm assuming you're referring to the wrapper width since you mentioned 980.

The most ideal solution is to not think of pixels at all and instead rely on ems/%s and scaling, be as fluid as possible so your design fits on small mobile devices and your elements heights are not fixed but auto. Example being: http://www.456bereastreet.com/

But if you're stuck with web designers who still think pixel and you know for sure you'll be unable to get them to try making images that are liquid/fluid, I would say shoot for 960 pixels in width so you have enough viewing area in a 1024x768 with scrollbars in IE6/XP, but this really depends on your audience and the majority of your audience's screen resolutions.

Why is document.documentElement.clientWidth 980px on mobile phone

OK. It's here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

"The default width is 980px"

What's your favorite programmer cartoon?

Another one from xkcd

---

Related Topics