Jump to content

How to Streamline Your Brand for Your Mobile Site

0
  chco's Photo
Posted Feb 25 2011 08:15 AM

When designing a mobile version of your website it can be helpful to streamline the branding elements from your main website. The following excerpt from Designing Interfaces, Second Edition offers several ways and examples on how to approach this aspect of UI development.
What

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.

Use when

All mobile apps or sites that are associated with a company or organization should use this.

Why

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.

Walmart’s mobile site compared to its full site

Attached Image


How

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.

Examples

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).

JetBlue’s mobile branding

Attached Image


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.

Fandango’s mobile branding

Attached Image


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).

Whole Foods’ mobile branding

Attached Image


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.)

Chipotle’s mobile branding (or lack thereof)

Attached Image


Designing Interfaces

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.

See what you'll learn


2 Replies

0
  swapnil raja's Photo
Posted Jan 13 2013 07:25 PM

Really in the present scenario the Html5 scripting is getting boomed. Not only for the web but also for application development it is being used. What you have written in your article, its just a casting, there is still yet to be come.

Go throw this also

http://www.html5andcss3.org
0
  Andrew Symonds's Photo
Posted Mar 27 2014 04:27 PM

To streamline your website you need to be familiar with html5 and css3, the best way to do that accquire those skills. One good resource i may suggest is tutorialspark