If you’ve not heard of A book Apart they are brilliant at providing short to the moment guides aimed at people without the time to spend digging around through reams of pages. Just perfect for the train!

Luke Wroblewski doesn’t disappoint in this short guide on Mobile First for designers. Reading through this guide offers a wealth of advice, every second sentence it felt like another simple statement resonating within me. Here are just a few highlights (really) I particularly enjoyed, but for a few quid go and get the whole book:

Growth

• Websites and applications should be designed and built for mobile first.
• Smartphones were boldly predicted to out-ship the combined global market of laptop, desktop, and notebook computers in 2012. They did so in the last quarter of 2010 – two years earlier than predicted. 
• … even if you can create native applications for each platform, the cost of maintaining them can quickly make it prohibitive.
• The combination of mobile and desktop experiences results in more engaged users across both sets of devices.

Constraints

• Screens are small, networks are unreliable, and people can find themselves in all kinds of situations when they pull out their mobile device.
• … design is the process of gradually applying constraints until an elegant solution remains.
• … 80% of the screen space from the desktop was missing.
• … Thinking “one eyeball, one thumb” forces you to simplify mobile designs …

Capabilities

• … mobile capabilities allow you to do: reinvent ways to meet people’s needs using exciting new tools …

Organisation

• Aligning with mobile behaviors also naturally aligns your website with real-world needs.
• … content takes precedence over navigation on mobile.
• … allowing people to explore and pivot to relevant content doesn’t have to mean piles of navigation bars that bury content.
• If you need a fixed menu, better to fix it to the top, as Twitter has done.
• … fingers are imprecise pointing instruments… [ isn't that obvious?, many examples I see say not so ] bigger [not downsized] touch targets are essential.
• Destructive actions like cancel or delete can be placed outside people’s comfort zone.
• Consistency in interaction approaches and gestures more than diversity. See Luke’s detailed guide here: Common Gesture Reference.
• We are in a transition phase from GUIs to NUIs (Natural User Interfaces).
• Develop with progressive enhancement in mind

Refer to Apples guidelines for target sizes and much much more

Inputs

• Take advantage of input types, attributes, and masks to make mobile input easier.
• Select menus are pretty tap-intensive: tap the menu once to open it, swipe the list that shows up to find the answer you want to select, tap it, and then tap down or close to go back to the form.
• HTML5 input types can help people accurately answer questions that require a specific format.
• … take the height of virtual keyboards into account …
• Actively encourage input and allow people to contribute and create using their mobile devices.

Layout

• … the meta viewport tag is really useful for designing mobile web experiences.
• Forget pixels and instead concentrate on points, for example on all iPhones this is consistent at 320×480, only the pixel density changes.
• Render rounded borders & graduated backgrounds using CSS3 but not to many or performance will be compromised.
• Flexible layouts which expand and adjust to the available width of the device are essential.
• Use break points to provide differing layout rules at significantly different device criteria. See more in Responsive Web Design.
• Consider the differences between connected TVs, desktops/laptops, tablets, smartphones, and feature phones.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.