Skip to content

How we're doing with Mobile First Responsive Web Design (and other buzzwords)

It's been a while since Ethan Marcotte started the Responsive ball rolling, and Luke W coined Mobile First. The number of mobile devices in the world continues to grow apace, and the boundaries between devices classifications are becoming ever more blurry. What have we learned in the past few years, and what new directions are we taking?

Mobile

One thing that's certain is that the old beliefs about mobile context are gone. Mobile users aren't always in a rush or on the move: mobile device use occurs anywhere and everywhere. We still use "mobile" as a short-hand for feature phones, smartphones, and tablets, but the term is increasingly unhelpful. Does mobile include large screen smartphones that aren't quite tablets? How about new form factors like the Microsoft Surface and, an even larger leap, Google Glass?

Design

In terms of design, we're realising how much other design spheres can help us. For smaller mobile devices, industrial design can offers us many pointers. People are interacting with web sites in a very physical and personal way thanks largely to the proliferation of touch screens. The best experiences are designed to work well using one hand. This means minimising typing by using shortcuts and intelligent defaults where possible or using buttons and boxes to make choices instead. Simplifying and focusing further, we're designing for one thumb use. This means being even more careful with touch target sizes (44px wide by at least 30px tall), and placement of navigation and controls.

It's not all about touch, of course. Asia and Africa are the biggest mobile markets, and a very large proportion of the phones used there are older models with the 10-key keypads or full QWERTY keyboards. These hardware forms often bring additional considerations with them, such as fixed orientation.

Technical

In terms of performance, we're still getting there. Responsive images are no longer the elephant in the room: we're talking about them and getting to a solution. Average page weight is still increasing, not just for responsive sites, but we're talking about why, and how to fix it. The most interesting to me is the idea of setting a performance budget; choosing a maximum page weight and sticking to it. Read more about this at Clear Left, Tim Kadlec and Brad Frost.

 

Here are some articles for more in-depth reading:

  1. It’s a Write/Read Mobile Web by Luke Wroblewski Notes by Jeremy Keith
  2. Casting Off Our Desktop Shackles by Jason Grigsby (Presentation slides)
  3. Designing Mobile Magic Moments (Greg Nudelman)
  4. Mobile Input Methods by Steven Hoober
  5. Designing for Touch by Josh Clark Notes by Jeremy Keith
  6. Designing for Touch / Josh Clark / .net mag