Website design: out with 980 pixels wide, in with 1000
For a good ten years now I (and many others) have been advocating for 960 or 980 pixels wide as the standard for website design. I’m upgrading that to 1000 pixels as of now. The reason for this is responsive design, which I’ll get into more below…
But first let’s go back to the 980 days. The reason for designing at 980 pixels wide was to create a layout that would safely fit within a user’s web browser without causing a horizontal scroll bar to appear at the bottom. The lowest common denominator screen size for desktop and laptop computers for many years now has been 1024×768 pixels. Creating a design at 980 wide (rather than the full 1024 wide) accounted for things like the scroll bar on the right side, the thin frame around (some) web browsers, etc. 980 was nice and safe, so that’s the standard I quoted for ages. 990 is also fairly safe; if a designer gave me a design at 990 pixels wide I would work with it. 1000 or more pixels brought us into dangerous territory; a site at that width ran the risk of causing that dreaded horizontal scrollbar to appear at the bottom. Anything bigger than 990, I’d kick back to art to fix.
Of course, very few users are still using desktop and laptop computers with screens set to 1024×768 pixels. However, just when this size was becoming uncommon enough that we could start to consider abandoning it (as we did with 800×600 years ago, and 640×480 before that), the iPad came out, with its 1024×768 resolution (now doubled to 2048×1536, but still displaying at 1024×768; it’s a long story). So we’re definitely stuck with accommodating 1024×768 for a long time.
However, a couple very nice things about the iPad: the web browser is always maximized, and it has no visible frame, so you really are seeing 1024 pixels’ worth of width in your website content area. Also, the scroll bar doesn’t take up any width; it overlaps the content of the webpage rather than taking up space next to it. So 980 pixels wide isn’t necessary at all for iPad.
What 1000 pixels wide means for responsive design
Responsive design has forced web designers and developers to have to do a lot more math, or least to think more mathematically. Whereas we used to slice up images and lay out columns and content areas more or less arbitrarily, with responsive design it’s become important for us to consider percent values when dividng up screen space. Figuring out percentages of the overall width means doing a bunch of math, which is not something any of us signed up for.
However, if we set 1000 pixels as our base, and strive to design all of our images/columns/margins/buttons/etc with widths that are multiples of ten, suddenly all this math becomes effortless. With a page container set to 1000 pixels wide, a logo graphic that’s 210 pixels wide is 21%. A left margin of 60 pixels is 6%. A right column of 190 pixels is 19%. See how easy that is? Doing this same kind of math with a container that was 980 pixels wide meant going to my calculator app every five minutes, and even sometimes dealing with decimal places in my code (I didn’t even realize that was possible before! It is, but let’s avoid all that hassle). All that math for 980 pixels wide is no fun for anybody.
So, let’s use 1000 pixels wide as the new standard for desktop website layouts. There’s still the small risk of that tiny percentage of desktop/laptop users with 1024×768 resolution seeing a horizontal scoll bar. Here’s how you fix that (if this weren’t obvious): overflow-x: hidden. Boom. Easy.
This article covers desktop and laptop layouts. I’ll get into designing for mobile later. Remember, every digital project should be designed with a mobile-first approach.