While I was busy relocating my physical self from Australia to Japan last year, mentally I was pushing web design into the back of my mind. It didn’t matter how I looked at it, after 14 years digital had started to feel stale. Learning a new way of life and studying a language in Japan was my ticket out of there.

That was over a year ago now. Life’s been challenging, but good. The one thing that rode me was eventually I was going to have to make a buck again, and the thought of going back to digital felt like dry toast.

I reluctantly returned to the knowledge web, and started reading. Turns out I had a hell of a lot of catching up to do. The smartphone was doing to the desktop web what the web had done to print 15 years ago. It was fresh again, and before I knew it I was hooked. I’d been saved by the mobile web.

I decided to write this article following Andy Clarke’s (@Malarkey) release of 320 and Up this week, and thought it was a nice milestone to take stock. Paul IrishDivya Manian and Shi Chuan created the Mobile Boilerplate (based on their HTML5 Boilerplate) to accumulate everything we’ve learned till now about designing for the mobile web. Andy’s 320 and Up is very much a Mobile First Boilerplate, and takes a slightly different approach. Let’s take a step back and look at some of the milestones that have led to this point.

Rethinking the Mobile Web

Bryan Rieger (@bryanrieger) from Yiibu reflects that due to the fragmentation of devices and device specs, web developers tend to focus on the iPhone. This is unfortunate, considering the iPhone has a very small piece of the smartphone market. The Rethinking the Mobile Web slideshow is a great piece of work, and the related article is a nice lead in. Here’s some of the things I took away from it:

  • 6.8 billion people in the world today,
    1.8 billion with internet connections,
    3.4 billion with mobile devices.
  • iPhone has less than 4% global market share.
  • Responsive websites work beautifully on the iPhone and Android, but not so on almost every other mobile device.
  • The absence of support for media queries is in fact the first media query you should be making.
  • Progressively enhance using JavaScript and media queries.
  • Adapt content (especially images) appropriately for each device.
  • Compress content where possible, and don’t include unnecessary data.

Media queries work great on iPhone and Android, but are only a very small piece of the mobile web. Therefore:

A desktop site + media queries does not equal a mobile website

Thanks to modern desktop browser support for media queries, and the ability to retrofit less supportive desktop browsers with fallbacks, the correct equation is:

Mobile site + media queries = desktop site

And that’s the formula Andy Clarke’s 320 and Up is based on.

Bryan notes that the concept of designing for the lowest common denominator and working up to the desktop goes way back to 2003, with progressive enhancement.

Responsive design! One web! We’re saved!

When I took notice of how CSS3 media queries could shape a desktop site for mobile, particularly thanks to Ethan Marcotte’s Responsive Web Design article on A List Apart, I wondered whether building a separate .mobi or m. website for mobile users was a waste of time. It isn’t, as shown in Rethinking the Mobile Web and expanded on in Jason Grigsby’s article below. You can read more about the One Web idea at New to Mobile? Welcome to the One Web Debate.

No! No! No we’re not! Keep panicking!

Unfortunately CSS media queries just aren’t well supported on mobile today, but that’s not the half of it. Cue Jason Grigsby’s CSS Media Queries is Fools Gold. Jason’s assumption is that speed matters more on mobile:

  • Letting the browser scale images is a bad idea
  • Using media queries to deliver different images doesn’t work
  • Media queries do not optimise HTML or JavaScript
  • Media queries aren’t supported well
  • The mobile context is ignored

Trying to address these problems, do media query polyfills like respond.js, and responsive image solutions go far enough?

Mobile First

You’d be forgiven for thinking that when the web and smartphones first met, Luke Wroblewski (@lukew) slid out in a fetal position and rose to spread the word. Luke travels the globe evangelising the mobile web and we have him to thank for the concept of Mobile First. He argues that designing for mobile is a discipline that forces design teams to include only the most important aspects of their product, which equates to better user experiences. The salient points in his Mobile First presentation are:

  • Smartphone sales will outpace PC sales by the end of 2011.
  • Mobile forces you to focus.
  • Mobile gives us locative, context-aware capabilities.

Here’s the Mobile First article with links to audio and video of the presentation. I personally found the Mobile First presentation slides (PDF) to be most useful.

Boilerplates

In 2011 version 1.0 of Paul Irish and gang’s Mobile Boilerplate was released. Andy Clarke’s release of 320 and Up has left me scratching my head whether the Mobile Boilerplate is now redundant, or whether I need to roll up my sleeves and bastardise the two of them to create something I’m satisfied with. On the other hand it is still very much reliant on CSS media queries and the One Web concept, which up to this point at least has been far from perfect too. Pulling the two boilerplates apart and putting them into practice will be great fodder for the next article.

About these ads