It’s time to move on from 960px.
The vast majority of websites currently conform to a maximum screen size of 1024px; with browser scroll bars taken into account, this means that sites usually have a maximum width of anywhere between 990px and 940px. This once conformed to the resolution of dominance: 1024 x 768px. But, with the advent of HD laptops, higher resolution desktops and ever-increasing screen sizes on both tablets and mobile phones (I’ll address these later), we, as web designers, must move on. Our profession after all, is build on pushing the envelope. Yes, we still have clients to please and our website still needs to conform to certain guidelines – navigability, target audience, etc – but we, as professionals, need to push our industry forward.
The Tipping Point
Is there a magic number that pushes us, as web designers, to the next level? Is it a majority (50.1%)? Is it 2/3rd (66.6%)? Does a magic number even exist? How many of us abandoned support for IE6 at a given number? Ok, bad example. Personally, I abandoned IE6 out of CSS-hacking frustration, numbers be damned.
Let me present some numbers, to give you a context. I have taken these from a variety of sources, and I have a short explanation of each and their biases below.
| Screen width | Site Catalyst | Wikipedia | W3 |
|---|---|---|---|
| 1024px | 20.2% | 25.28% | 14.0% |
| 1280px | 41.8% | 29.6% | 26.87% |
| > 1280px | 22.6% | 43.7% | 36.81% |
Site Catalyst: Owned by Adobe, the site require a login to access the stats. These stats are a pretty good indication of the North American market
Wikipedia: To take into account the sheer volume of lower-resolution screens from emerging markets – India and China, for example – Wikipedia has “normalized to counteract geolocational bias”, and therefore, their stats are a good indication of worldwide trends.
W3: Although the W3 aims to represent all users, few people outside of our industry know what the W3 is. These numbers are therefore skewed higher than the general populace.
Even if an average is taken of all of the the above numbers, the 1024 resolution sits at 19.82% indicating a clear global decline.
Responsive Web Design
I can hear a few designers already cursing me under their breath: “Uh, there is this thing called ‘Responsive Web Design’… hulllo!?” Yes, responsive web design is awesome. For those that are unaware of responsive web design, I highly recommend reading up on Ethan Marcotte, the man who coined the phrase. His book, Responsive Web Design, is pretty damned good and a highly recommended read. His articles are a sampling of the book, I recommend them as well.
Now that you have the book and/or an article under your belt, you will know that responsive design allows us to built one layout and control how that layout is displayed on a given device (desktop, tablet, mobile phone) through the magic of CSS, fluid images and media queries. The Boston Globe recently redesigned their site to be responsive (have a click, then resize your browser window). Hell, they even made their max-width 1232px to target 1280px screen resolutions.
There are number of resources available for would-be responsive designers. I’m sure you all know how to Google it, but a few of my current favourites:
The 1140px Grid: The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Grid System Generator: This generator allows you to control your maximum width, gutter sizes and outer margins. With a few simple inputs, the generator will spit out a downloadable file.
Adaptive Images: If you are running Apache and PHP, Adaptive Images is “A drop-in solution that automatically creates, caches, and delivers device-appropriate versions of your website’s images. No mark-up changes needed.”
Responsive Images: Responsive Images runs a jQuery script, combined with an .htaccess addition.
Your Thoughts?
Web designers must move past supporting the 1024px screen as the maximum resolution. I will grant, that in considering your client’s target audience, you may be forced to stick with 1024px due to their client base having wildly different resolutions than the general populace, but the upgrade to 1280px should at least be a part of the discussion.
Will your next design be based on a 1280px width? Will you be using a responsive design? Will you push clients to support higher resolutions? WHat do you believe are the advantages and disadvantages of moving up to 1280px?
