Mobile First

Mobile First is a book about the idea of developing a website or web application for mobile devices first.

I was a bit disappointed by Mobile First as I expected a more technical book. I found the first part of the book, "Why Mobile First?", unnecessary because I already answered this question for myself before I picked up this book. The second part, "How to go Mobile", was interesting, with many real-world examples.

My Notes

Why Mobile First?

Growth

If your mobile product or business requires deeper hardware access, background processes, app or in-app sales, or more integrated placement on mobile devices to be viable, you may need a native solution.

Whether it's through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that follows those links on a mobile device won't have a great experience (if they can even access your content at all).

Constraints

Embracing constraints (rather than fighting them) will ultimately get you to better designs.

When you consider the amount of useless navigation, content fluff, and irrelevant promotions that litter a typical web experience, you realize why the mobile diet can be good for both businesses and customers.

You have to make sure that what stays on the screen is the most important set of features for your customers and your business. There simply isn't room for any interface debris or content of questionable value. You need to know what matters most.

If you design for mobile first, you can create agreement up front on what matters most. You can then apply the same rationale to the desktop (and any other) experience of your web product. If you can agree on the most important set of features and content for your customers and business, why should that prioritization change with more screen space?

If you focus on mobile first and make things fast enough for spotty mobile networks, your websites and applications will be blazingly fast on the desktop.

When you design for mobile you are designing something that can be used anywhere and anytime.

When reflecting on a lot of mobile usage patterns, I like to imagine people as "one eyeball and one thumb". One thumb because they are likely to be holding in one hand and using a single thumb to control it; one eyeball because in many locations where mobile devices are used we only have people's partial attention.

Capabilities

When you design and develop for mobile first, you can use exciting new capabilities on the web to create innovative ways of meeting people's needs. Technical capabilities like location detection, device orientation, and touch are available on many mobile web browsers today.

How to go Mobile

Organization

Mobile usage generally consists of a couple of interaction types:

• Lookup/Find: I need an answer to something now – frequently related to my current location in the world.
• Explore/Play: I have some time to kill and just want a few idle time distractions.
• Check In/Status: Something important to me keeps changing or updating and I want to stay on top of it.
• Edit/Create: I need to get something done now that can't wait.

Because they directly align with why people pull out their mobile devices, these behaviors often determine how your mobile experience can be structured and organized to meet people's needs.

As a general rule, content takes precedence over navigation on mobile.

Focusing on content first, navigation second gets people to the information and tasks they want quickly.

Actions

Human fingers are imprecise pointing instruments: they lack the pixel-level accuracy of a mouse pointer; they come in different sizes; and it's not uncommon for them to slip or move around as we interact with our devices. Bigger actions mean bigger touch targets that help people get things done when they are in "one eyeball and one thumb" mode.

Since the majority of people are right-handed and use their thumbs while operating a mobile with one hand, optimizing for right-thumb actions is most common. This means primary actions can be placed in the middle or bottom of the screen and arranged from left to right. Destructive actions like cancel or delete can be placed outside people's comfort zone.

There's a set of core touch gestures that are common across most touch platforms. These gestures form the basis of how you can expect people to interact with touch screens; they include: tap, double tap, drag, swipe, pinch, spread, press, press and tap, press and drag, and several variations on rotate.

We're still in a transition period between graphical user interfaces (GUIs) and natural user interfaces (NUIs). As a result, actions that rely solely on gestures might not be immediately discoverable by everyone using our web experiences. So for now, we may need to stick with buttons for the primary actions in our mobile web experiences.

Actions and information revealed using a non-obvious touch gesture (like a swipe) should have some alternate way of being accessed.

Removing extra options and information that's not valuable to your customers not only simplifies your product's user interface, it also gives you less to develop and maintain over time.

All the actionable links, buttons, and menus on your mobile web experience can benefit from having explicitly defined :hover and :focus states. This will provide valuable feedback to anyone using your site or application through indirect manipulation hardware on a mobile device.

Inputs

If you decide to use custom input controls in your mobile web experience to make things more efficient on touch screens, don't forget about non-touch and hybrid devices.

Specifying input types and attributes can help people on mobile provide accurate answers without a lot of work. But we can do even better by taking advantage of input masks. Input masks can help make complex inputs manageable on mobile by providing clear input cues up front and restricting people's inputs so they don't make mistakes.

Take advantage of mobile device capabilities to capture input in new ways.

Layout

Whether you call them fluid, liquid, or flexible, designs that expand and contract based on available screen space are a must.

With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change. This is accomplished by setting resolution "break points" and applying a different set of layout rules and media assets to each.

Devices are different not just because they have different technical capabilities and limitations, but because people use them differently as well.

Reduction is the best layout approach available to you on mobile.

Not only will reduction make putting mobile layouts together easier, it will also give people focused ways to get things done.

Conclusion

Whenever possible, test your designs and code on actual mobile devices. Simulators and desktop browsers are not substitutes for the real thing.