Tips on Mobile Site Design

Todd FlemingThe Second in a Three-Part Series
When it comes to creating an online experience viewed through a mobile device, what’s old is new again. In fact, things have come full circle.
Back in the 90s when Web site design was relatively new, the mantra was content first, design second. It’s interesting how the same holds true today when designing for mobile.

Similar to the days of the early Internet, people today are using mobile experiences to gather information… product details, prices, directions, and other factual details. So when crafting sites designed to be viewed through a Smartphone or other mobile device, it helps to go back to our roots.

Brand: My approach to mobile site design begins with the brand. The brand image needs to be first and foremost, reflected in the overall design of the site. The logo needs to be prominent, but the message and usability should be in line to support the brand reputation. Logo should pop, but not distract from the content on the site.

Content: Content-forward design is essential for mobile. Strong mobile site experiences are typically content rich, designed with the end user in mind. It’s not so much about what the brand wants to share with consumers… it’s more about what consumers want to know from the brand. Be customer-centric in your approach. Go old school: Design your mobile site around its necessary content – don’t create the content to support the design.

Usability: With mobile devices, you have seconds to grab attention. Anything to delay its loading or confuse the user can lead to its lack of use. Beyond the obvious – easy-to-follow navigation, drop-down tabs, etc. – the design needs to be comfortable for the consumer to use. Offer them an experience they’re familiar with. Our mobile platform, for instance, has automatic mobile device detection already built into the platform. It can tell what device is being used (iPhone, Droid, Blackberry, etc.) and automatically call up the style sheet for that device for a seamless, familiar experience. Be sure to test, and factor in how your site design is viewed on different devices and different operating systems. Fortunately there are platforms to efficiently manage such variables.

Design: Man, that screen is small! So you can’t overload a mobile site with intricate, complex layout. Keep it clean, simple, content forward. Sleek, simple, quick, useful are goals for good mobile site design. Think twice about images and treatments that can increase loading time. Begins with good content and design from there.

When recently developing multiple mobile sites for Canon accessed using 2D tag technology, our goal was to give as much information at the point of sale as possible. That’s why you’ll see features, specifications plus videos and live unedited reviews of the specific product. We also wanted to maintain a clean, familiar look to the site. The small screen does not allow for visual distraction. Consumers using mobile devices want to easily navigate to the information (content) they seek, and the design for Canon reflects that consumer-centric approach.

Welcome to the rebirth of content-forward site design! Clean design, simple layout, functionality… it’s nice to be home.

4 Trackbacks/Pingbacks

  1. […] The Lunch Pail « Tips on Mobile Site Design […]

  2. […] Scott and Todd both mentioned, you need to accommodate the most popular devices with device-aware templates. This […]

  3. […] common topics that these brands (and others) continue to debate: 1. App vs Mobile Web 2. Designing experiences for a smaller screen 3. How to make sense of a vast vendor […]

  4. […] devices that are able to experience a rich mobile Web. And if you use device-optimized experiences like we recommend, this means it’s time to take another look at what experiences you offer for BlackBerry […]

%d bloggers like this: