Use your organization’s logo, colors, and other brand elements on the mobile site or app, but keep them small on the screen and fast to load.
All mobile apps or sites that are associated with a company or organization should use this.
Users need to be able to identify your app or site as yours. In usability testing, people respond well to reliable, familiar branding, especially when the brand is already known outside of the mobile context.
Mobile screens don’t have much space to spare for elements that aren’t actual content.
Mobile network connections can be slow, and heavyweight images don’t download fast enough.
Create a small version of your logo, no taller than around 50 pixels, so that it takes up as little vertical space as you can get away with. If you’re creating different designs for different screen sizes or platforms, consider making different versions of the logo for each.
Apply your brand’s colors and font families in the mobile design. A basic text interface may function well enough, but it won’t look professional or polished.
Avoid using very large and complex images as stylistic elements. Download time is as important in a mobile context as on the desktop (and often more so). If you’re working in HTML, depend on stylesheets when you can, rather than handcrafted images.
Strong contrast and large, readable text will help people use your mobile site when the conditions are poor (bright light, motion, distraction). Even if your brand calls for visual subtlety and small, tasteful text, do what needs to be done for the sake of usability—adapt the brand look to the platform.
There are good examples of this pattern all over the mobile web. Going back to the first example given in this chapter, JetBlue pares down its branding to a look that is polished and recognizable, but works well on even a tiny mobile device (see the image below).
Fandango’s mobile site also takes a minimalist approach (see the image below). Like JetBlue, Fandango uses a polished-looking logo and style, but the site loads fast and can be used on tiny screens. None of the bandwidth-hogging images, ads, or video is loaded onto the mobile device.
Whole Foods maintains a very consistent brand look across its full-page and mobile sites. But its mobile site consumes more above-the-fold space than necessary with top navigation, and it downloads several large images, making it slower than it could be (see the image below).
Chipotle’s mobile website shows how not to do mobile branding (see the image below). The brand is strong enough on the main site, but none of it shows up on the mobile site except for a too-small version of the logo! The site uses only a neutral font and colors. (To be fair, the site does supply an iPhone app that has stronger branding, but it’s not likely that a very occasional customer will bother with the hassle of downloading it if the website fills her needs.)
Learn more about this topic from Designing Interfaces, 2nd Edition.
Despite all of the UI toolkits available today, it's still not easy to design good application interfaces. This bestselling book is one of the few reliable sources to help you navigate through the maze of design options. By capturing UI best practices and reusable ideas as design patterns, Designing Interfaces provides solutions to common design problems that you can tailor to the situation at hand. This updated edition includes patterns for mobile apps and social media, as well as web applications and desktop software.