Notes on Mobile First!

by Luke Wroblewski June 22, 2010

I recently had the pleasure of presenting my Mobile First talk at An Event Apart in Seattle and Boston. A few folks were kind enough to take notes and share them online.

Best AEA Yet

Luke Wroblewski’s extraordinary “Mobile First” presentation changed the way I think about web design. Luke showed how the mobile versions of many sites are strong, smart, and absurdly easy to use, while the “desktop” versions of these same sites suck. For instance, the mobile version of as well-known travel site gives me, the customer, a few big buttons making it easy for me to check in, check the status of my flight, and do one or two other things I actually want to do. By contrast, the desktop version is a confusing hodgepodge of ads, clutter, and Flash, with seemingly dozens of competing navigation aids, none of which offers me the opportunity to do what I need to do on the site.

It isn’t that a different team is designing the mobile versions; it’s that the discipline of mobile forces any team to create lean, user-focused interfaces. Conceiving the mobile version first gives us the opportunity to create powerful sites that never lose sight of the person they’re designed for.

Read more at: Jeffrey Zeldman Presents The Daily Report

An Event Apart Boston 2010

Web products should be designed for mobile first, even if no mobile version is planned. The mobile web is out-pacing the desktop web by a factor of 8. Next year we'll see smartphone devices will outsell desktop devices. Don't just port and rethink things for a small screen.

Focus on core actions, know your users, and use scalable design. Screen sizes: on good mobile devices, the screen is 80% smaller. For a good example, check out Southwest Airlines sites. The mobile version is driven by the tasks that people need to do. Some things make more sense on mobile than on the desktop. Luke isn't saying that they're equal, just that the two are equally important. However, if you're doing a mobile app, you need to think of everyone, and pick your target devices. When you decide, you should think about not just screen size but screen densities.

Read more at: Fred LeBlanc (PDF)

An Event Apart Roundup

Design the mobile version of your app or website first―before you design the desktop version―even if your app or website won’t have a mobile version.

Mobile web is growing at an unprecedented rate. These new mobile web users will demand excellent mobile websites and the demand will quickly become more important than a desktop website. Mobile websites are not an afterthought. Examples like Facebook’s iPhone app (and, in my opinion, GMail for iPhone & iPad) demonstrate how, in some cases, mobile versions are actually better than their corresponding websites.

Minimize the number of controls from which users have to choose.” Forcing yourself to pare down the number of available options and keeping only the absolutely necessary components creates a fine-tuned, focused direction. This minimalist approach will help you identify the primary goals of your website. Use that primary-goal approach on your desktop version as well as your mobile version. Basing your desktop version on the primary goal will dramatically improve the simplicity and clarity of your desktop website.

Capabilities of mobile devices are changing the way users interact with our websites. The clearest example of this idea is touch. Hover is out. Gestures are in. The ways in which websites utilize touch gestures are still being pioneered.

Read more at: TJ Kelly

Mobile First! –Seattle 2010

Web products should be designed for mobile first (even if no mobile version is planned). Over time, designing for the desktop web first will become a backwards way of doing things.

People use devices for short bursts throughout the day. While at home, waiting in line, at a stop light, at work. Users are performing small, quick, time-consuming tasks. People don’t use Web sites for long periods of time. Peak value for using web pages is frequently between 2-3 seconds. Short bursts of activity, frequently throughout the day. Quick, bursty, check-in behavior.

Simply your interface and don’t count on hover. Interface elements must be larger. Most smart phones manufacturers are moving to touch-based. Pay attention to minimum spacing between elements. Realize slipping of the finger happens more often than slipping of the mouse cursor. Touch gestures include tap, double tap, drag, flick, pinch, spread, press, press and tap, press and drag, rotate

Read more at: UsableWebb

If you're interested in catching my Mobile First presentation live, I'll be at An Event Apart in Minneapolis (July), Washington DC (September) and San Diego (November). Hope to see some of you there!