Mobile is a new paradigm. It has its own rules, standards, technologies, and challenges. Here’s how marketers are working with designers and developers to optimize branded materials for these new platforms.
The golden rules of mobile: simplicity, brevity, accessibility. The screens are small, the Internet connections slow and people don’t have a lot of time. The best mobile experiences are those that condense the bigger picture into a bite-sized chunk, friendly for on-the-go consumption.
“Successful mobile websites and applications will do fewer things, but do them better,” says Daniel R. Odio, CEO of PointAbout. On mobile especially, it’s important that things ‘just work.’ ”
Think about the use cases for different consumer devices. Nicole Amodeo, director of creative products at the mobile ad platform company Medialets, stresses three key points for anyone creating content for mobile: “Why, when and where does your consumer use a device?” When exploring answers to these questions, it’s important to allow “your target audience and their particular use cases to dictate the experience, the content, the features and utilities,” Amodeo adds.
Before deciding on a platform for mobile marketing material, think more about what makes the most sense for the user and use cases. For example, does it make sense to create create an app, or phone- and tablet-optimized website?
A user will need to gather the data they are after, quickly and easily without having to wait a long time for a page to load on a 3G connection. Therefore, when converting a traditional website into a mobile version, it’s important to make sure a number of things happen:
- Auto-Detect Mobile Phones. Mobile-friendly websites automatically detect that users are on a mobile device and then display the appropriate version of the site.
- Clear Calls to Action. The most important features of the site should be the at the top of the page and should include clear calls to actions.
- Avoid Mobile-Unfriendly Elements. The design should avoid mobile-unfriendly elements such as Flash, large images, video, and complex layouts.
- Fluidity. Design with a fluid layout that will gracefully adapt to a range of typical mobile screen resolutions.
- Touch Interface. Touch screens don’t have hover states — it’s all about fingers tapping, so don’t build a site that requires users to move their mouse over menus or other elements. Also, make sure links and other clickable elements are big enough to tap with a fingertip.
- Scrolling. Limit scrolling to one direction — the site should only scroll vertically. Having to manage a page that scrolls horizontally and vertically is difficult to navigate.
- One Window. Avoid pop-ups and new windows. A user’s entire experience should take place in a single window.
- Simple Navigation. Simplify your navigation. Typically, a site’s traditional navigation is too complex for a mobile site.
- Clean Code. Most desktop web browsers allow a lot of leeway when rendering HTML and will usually display a site correctly, even if the code has flaws. Mobile browsers usually have less room for error, so there is an added value to having clean, simple code.
- Use Alt Tags. Sometimes images won’t load, either because of issues with the mobile browser or because a user’s connection is too slow. Always include descriptive alt tags for images, in case they don’t appear.
- Label Forms. Some modern websites embed form labels inside the form field. On mobile, it’s much more difficult to keep track of the fields, and users often make use of “next/previous” buttons built into they keyboard. Without clear labels alongside the form fields, it might be impossible to know what information is supposed to be in which field.
- Escape Hatch. Sometimes users just need to use your normal site. If possible, always have a link back to the original, unoptimized site.
Responsive Web Design
One of the largest challenges in designing for mobile is the vast amount of devices to cater to. Rather than designing a mobile-specific website, responsive design allows websites to automatically adjust to a devices resolution, orientation and feature set.
The technology behind responsive websites is a relatively simple mix of CSS and a flexible grid-based layout. The best responsive websites even take into account device rotation, displaying different content depending on if the phone is in landscape or portrait mode. Taken to the extreme, a responsively designed site might even use GPS to display content relative to a user’s location.
Mobile-Friendly Calls To Action
The world hasn’t completely transitioned to mobile (yet). Until that day, one important way to leverage traditional media is to tie it into mobile. What are an ad’s viewers being asked to do, and can they do it on mobile? If an ad is going to be seen by consumers on the go, making mobile-friendly calls to action is important. If an ad asks users to check out a website, make sure the website loads well on a smartphone.
Embrace mobile technology. Instead of asking users to call a phone number or visit a website, use a QR code to let consumers quickly learn more about a product or even receive some sort of exclusive content, such as a free MP3 or other product tie-in.
Sometimes the best way to optimize marketing materials for mobile is to create an app. Users expect apps to complete simple, narrowly defined tasks quickly and easily. Think about how simple many popular mobile apps really are — they do one thing and they do it well.
The most successful way to market through an app is to create some sort of branded experience, tool, utility or game that both transmits a marketing message but still provides a level of utility and enjoyment for users.
A fantastic example would be the toilet paper brand Charmin’s app, which helps users locate the nearest public restroom.
There are many design and development tips to keep in mind when optimizing marketing — or, for that matter, any — content for mobile. But it all comes down to leveraging design and technology to keep things simple, clean, fast to load and easy to digest on the go.
Keep it simple.
This article first appeared in Mashable on May 17th, 2011 written by Ryan Matzner