Friday, May 25, 2012

Dear Web Designers

If you don't care about responsive web design whatsoever, you may stop reading here.

One of the designers where I work recently shared a link to an article called Responsive Web Design: What It Is and What It Isn’t. It's a worthwhile read where the main idea is responsive design isn't just a method for making your website work on desktop and mobile. It's about making your website scalable so it fits whatever size screen the user has. Rather than "either/or" it's "everything/and."

Reading between the lines and honing in on my own pet peeves, why do so many web designs scale to small screens but not big screens? I find myself growing increasingly frustrated by seeing beautiful web designs with gobs of potential that only fill 1024 of my available 1920 horizontal pixels! That leaves nearly 47% of my screen unused.

This sparked a very insightful (for me) conversation with the designer. The process of scaling a website is generally conceptualized as a one-way process: start big and get smaller. There's no "start big and get bigger." It actually makes a lot of sense to me as a much more manageable process to only go in one direction.

Herein lies my plea: Web designers, please throw out your 960 pixel starting mold. It's outdated. It's time to get a bigger mold.

StatCounter Global Stats has plenty of data to show us why:
Source: StatCounter Global Stats - Screen Resolution Market Share

Source: StatCounter Global Stats - Screen Resolution Market Share

1024-wide resolutions had a huge market share three years ago and it's economically-savvy to design for the market. That market share has dropped consistently and significantly. Meanwhile 1366-wide resolutions have gone from non-existence to being the new standard.

I've done some analysis of the numbers. If you've shopped for a computer lately, you've probably noticed that all monitors are widescreen. Most Macbooks use an 8:5 aspect ratio whereas PC manufacturers have overwhelmingly adopted the 16:9 aspect ratio. Because PCs account for 90% of the market, I've chosen to focus exclusively on the 16:9 ratio. For the three years May 2009 through April 2012, 1024x768 has dropped by an average of 0.64 points per month. Meanwhile 1366x768 has increased by 0.53, 1600x900 by 0.1 and 1920x1080 by 0.14. The numbers are very consistent, aside from a completely bizarre November 2011.

So what size mold should be used now? It depends upon the context, like everything. If responsive design isn't in scope, then leave the mold where it is. If it is, here are some more numbers for you: For the three months February to April 2012, screen resolutions of 1280+ totaled 66.35% of the market, 1360+ were 42.07%, and 1600+ were 14.05%. Judging by the data mentioned in the last paragraph, I say, set the mold at 1600 because that market share has shown steady growth and I think 14% is a pretty big share. After that set the steps at 1280 and 1024.

Update: See how the trends continue for the months May through July 2012.

No comments:

Post a Comment