Black-and-white-first design

Erik D. Kennedy offers 7 Rules for Creating Gorgeous UI (Part-1): a non-artsy primer in digital aesthetics. His second rule is to design first in black and white, which he likens to mobile-first design:

This is a reliable and easy way to keep apps looking “clean” and “simple”. Having too many colors in too many places is a really easy way to screw up clean/simple. B&WF forces you to focus on things like spacing, sizes, and layout first. And those are the primary concerns of a clean and simple design.

He provides a grayscale wireframe of Haraldur Thorleifsson as an example of such an approach:

Black-and-white wireframe by Haraldur Thorleifsson.

Black-and-white wireframe by Haraldur Thorleifsson.

Mobile first meets media queries

Here again is Ethan Marcotte from Responsive Web Design (p. 124):

Speaking broadly, responsive design is about starting from a reference resolution, and using media queries to adapt it to other contexts. A more responsible approach to responsive design would mean building our stylesheet with “mobile first” in mind, rather than defaulting to a desktop layout. So we’d begin by defining a layout appropriate to smaller screens, and then use media queries to progressively enhance our design as the resolution increases.

The mobile first approach to web design provides focus

The mobile first approach to web design asserts not only that the mobile experience of a web site should be considered and not merely an afterthought but should have priority: design should first be for smaller (presumably mobile) viewports and the experience can then be enhanced for larger viewports. Tim Kadlec (Implementing Responsive Design: Building sites for an anywhere, everywhere web, 2012, pp. 74-75) reports that most sites are still (2012) designed for the desktop viewport then down but that they should be designed for mobile viewports then up.

Here’s Ethan Marcotte on the mobile first approach (Marcotte, Responsive Web Design, 2011, p. 113):

It’s all too easy to fill a desktop browser window with social media toolbars, links to related articles, battalions of RSS links, and tag clouds galore. (This process is called adding value, I believe.) But when we’re forced to work with a screen that’s 80% smaller than our usual canvas, nonessential content and cruft quickly fall away, allowing us to focus on the truly critical aspects of our designs.

In other words, designing for mobile devices first can enrich the experience for all users, by providing the element often missing from modern web design: focus. That’s not to say that our client’s pages are light on content, or lacking in features. But by framing our design process with that simple question [How does this content or feature benefit our mobile users?], we’ve gained a handy acid test to apply when considering each proposed element, each new piece of functionality (brackets not in Marcotte).

Responsive web design: mobile users and desktop users wanting different things

Jeff Croft explains some differences in use between mobile users and desktop users (On ‘Responsive Web Design’ and the mobile context, 2010):

For me, creating a great mobile version of a web product is all about capturing the context the user will be in when they visit.

By and large, mobile users want different things from your product than desktop users do. If you’re a restaurant, desktop users may want photos of your place, a complete menu, and some information about your history. But mobile users probably just want your address and operating hours. If you’re a blockbuster movie, desktop users probably want an immersive experience, including trailers and production details. On mobile, they probably just want to know where the nearest theater is and what time it’s showing. If you’re a calendaring application, desktop users probably want a full-featured suite of tools for adding and editing events. Mobile users are probably more focused on simply seeing what they’ve got going on today. If you’re a major retail site, desktop users may be more interested in browsing and shopping, whereas mobile users may be more interested in checking the status of an existing order.