Notes From Mobile First

The following verbatim notes are from Luke Wroblewski’s Mobile First.

Chapter 1: Why Mobile First?

Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

Native vs. Web

Native mobile applications give you robust access to hardware capabilities that you currently can’t get through mobile web browsers. Core features like access to the address book, SMS, camera, audio inputs, and other built-in sensors are mostly unavailable.

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). Having a native mobile application won’t help.

Access might even be the biggest user benefit for a mobile web experience. Even if you build a native mobile application for one platform, chances are you won’t be able to create one for every platform.

Chapter 2: Embrace Constraints

Designing for mobile first forces you to embrace these constraints to develop an elegant mobile-ap- propriate solution. But the benefits go well beyond mobile.

Chapter 3: 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.

Chapter 4: Align With Mobile Behaviors

Content Over Navigation

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.

Pivot and Explore

A simple anchor link in the site’s header jumps people to navigation options at the bottom of the page. Having this list present at the bottom of content pages allows people to pivot and explore other parts of the site.

Chapter 5: Ready, Set, Actions

As more touch-screen mobile devices get into people’s hands, we need to make sure they can use our websites with their hands. To do so:

Chapter 6: Input

Chapter 7: Layouts

Through the application of fluid layouts, flexible media, CSS3 media queries, and (sometimes) a bit of JavaScript, re- sponsive web design allows you to adapt to devices more sig- nificantly. With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.

Device Experiences

different device experiences may require different user interface design solu- tions. The relative importance of primary tasks can differ between device experiences (because of user posture), as can the layout and interaction design needed to accommodate dif- ferent input modes and average display sizes.

Reduce

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

Conclusion

And last but not least, don’t be afraid to start small. Some of the biggest successes in mobile today came from small experiments and teams of passionate web designers and developers. You don’t need to know everything about mobile—just take what you do know and go.