Get smart, go mobile

In 2009, George Colombo produced a New Yorker cover using an iPhone app called Brushes. When neighbours referred to him as the guy who draws on his phone, he corrected them: “I occasionally make phone calls on my easel!”

The ability to make “calls” is no longer what distinguishes a mobile phone from other tech. I can make voice calls on my laptop using Skype or Google Voice, right from Gmail even! Indeed, the smart phone is closer, on the evolutionary tech tree, to a laptop computer than it is to a cell phone. (A cell phone, in turn, is probably closer to a rotary phone than it is to a smart phone, let alone a computer.)

As smart phones become more and more powerful, they become more and more indistinguishable from tablets, laptops, and desktop computers (the same, only smaller). And last year, more smart phones (not cell phones, but smart phones alone) were purchased than home computers (desktops, laptops, and tablets combined). So then the “year of mobile” was, like, two years ago. We’re firmly in the smart phone era. (An era these days might only last a week.)

So what does this mean for web design, if more and more people are viewing websites — big, beautiful, complex websites — on their teeny, tiny little phone-ish computers?

It certainly adds a new element of variability to the already cumbersome task I described two years ago when I wrote about the effect differences between web browsers has on web design:

print designers see the finished product as it will be seen by end-users. Web designers, on the other hand, have to account for all sorts of variability in end-use, including differences in users’ screen resolution, computer and internet speeds, and choice of web browser.

“Difference in screen resolution” used to mean accounting for whether the user was looking at your website on an older, smaller monitor or a newer, wider one. This usually meant playing to the lowest common denominator.

But now with mobile handsets and tablets in addition to laptops and desktops, there is an infinity of variability! And to cover all your bases you’ll need to build infinity versions of your website! Oh no!!

Just kidding. Instead, we’ll build one website that responds differently to different screen resolutions. For example, compare the two views above of In the MacBook view, the navigation menu is big and floats to the right; in the iPhone view, where we have much less space to work with, the nav menu shrinks and lines up in a neat little row below the header. Same website, different layout depending on the medium. It’s called “responsive web design.”

In the past, web design involved a fair bit of wrestling (mainly with the differences between Internet Explorer, Firefox, etc) to ensure your website looks the same across all browsers. Now, it’s not so much about making your website look the same on all screens, but good on all screens.

(Also see “Responsive Design: One size fits all” in the Globe & Mail)