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.
Wooga, which develops “social games” and is based in Berlin, Germany, tells about realigning (I wonder if something went slightly askew in language translation) its logo in The New Wooga Logo: Realign over Redesign. The motivation is largely captured in this sentence: The logo space for Bubble Island on the iPhone or iPad is only 10×10 pixel [sic]:
Wooga’s “realigned” logo in the iTunes store.
Still, this paragraphs adds more:
The old logo was designed for web applications, which allowed several shades and highlights and a more complex visual appearance. Designing for mobile has to take different aspects into account: such as data size. If you small shrink the logo for mobile, the intricacies of the old design would become blurry. Wooga also uses the logo for in-game items on web and mobile and with this in mind three key factors emerge: legibility for smaller screens, reducing logo related bugs and emphasizing the existing features of the logo.
The new logo (below right) seems a touch less anthropomorphic, a touch less personified. While I slightly prefer the former, it had fewer constraints than the newer, which probably is quite satisfactory. To further reduce the logo’s footprint and perhaps loading time, some have mentioned that Wooga could eliminate the gray “W” as it is redundant.
The old web-optimized Wooga logo (left) and the new mobile-optimized logo (right).
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 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).
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.