SEMA News—October 2012
By Joe Dysart
Going Mobile on the Cheap
Making Your Website Mobile-Friendly for $100 or Less
Once a passing consideration, going mobile is now considered imperative for businesses looking to stay abreast of the unbridled popularity of tablets, smartphones and other handheld computerized devices—all of which demand websites designed for small screens. Indeed, according to eMarketer, there will be 54.8 million tablet users in the United States by the close of 2012 and 89.5 million by 2014. All told, 234 million Americans 13 and older were using mobile devices in April 2012, and 107 million of those people were using smartphones, according to Comscore.
Instead of building a mobile-friendly website from the ground up, many businesses simply opt for mobile website templates, which can be easily customized by adding text and images to pre-configured layouts. Among the easiest to use of this ilk are templates offered by AllwebCo Design. AllwebCo makes templates that can be quickly customized with a simple text editor, such as MS Notepad, with no web authoring software required. The company’s basic mobile website templates start at about $21; more sophisticated versions run $125 or more.
Similar template providers include Template Monster and Artisteer. Plus, businesses that are using the Wordpress platform can find scores of mobile-friendly Wordpress templates for as little as $8 at template clearinghouse sites such as Themeforest and Code-canyon.
Meanwhile, there are also a number of “gee-whiz” conversion services on the web that will convert any traditional website on the fly for anyone willing to type in their website address and press “Enter.” Essentially, these self-service online providers attempt to grab the essential data, colors and design elements of your website and then re-display them in a mobile-friendly form—usually in a matter of seconds. Subsequently, you’re presented with a number of online tools that you can use to tweak the resulting design to your taste and preference. Most of the services also offer free analytics with their packages, so you can track customer activity on your new mobile website. And many offer tools that allow you to effortlessly add mobile-specific features, such as click-to-call and mobile-friendly videos.
Seslija’s bMobilized service, for example, offers to do an initial on-the-fly conversion of your website in under 30 seconds. Subsequently, you’re able to use online tools to edit, create or replace menus, tweak your logo, customize headers and footers, drop in advertising and perform similar tweaks to ensure that your mobile site is just right. Trial use is free, and there’s a monthly $9 charge for customers who want to continue the service with tech support.
One of the coolest features of bMobilized is that it automatically updates the mobile version of your website any time you update your traditional website. Similar services are offered by Google’s GOMO, which is free for the first year and then $108 yearly, and Duda Mobile, which costs $9 monthly for the ad-free version.
Besides deciding on a template or an online service provider, one of the key considerations in going mobile is determining if you’ll leave your traditional web presence provider behind. While many mobile presence providers would have you abandon your traditional website design altogether, other web marketing analysts say that businesses may want to stick with a traditional website for people cruising the web on 24-in. or larger screens and then offer a scaled-down, mobile alternative for tiny-screen fans.
Once you’ve made that call, you’ll want to consider these top 10 best practices of mobile web design, as recommended by Google GOMO:
Keep It Quick: Given that many mobile users use their devices during spare moments, it’s crucial that your mobile site loads fast and is pain-free to use. In practice, that means prioritizing content and features that mobile users need most. You’ll also want to reduce large blocks of text to bullet-pointed text and ensure that images are small and compressed for easy loading.
Simplify Navigation: As much as possible, try to minimize the need for scrolling on your mobile site. Any scrolling required should be vertical, and you’ll want to establish a clear hierarchy in menus. Make navigation easier by offering clear “Back” and “Home” buttons. Use seven navigation links or fewer per page. And have a search box prominently available on complex sites.
Be Thumb Friendly: With mobile, the thumb rules. So use large, centered buttons for easy thumb navigation. And give users breathing room to reduce accidental clicks. Pad smaller buttons to increase the clickable area. And pad check boxes by making the text next to the boxes clickable.
A Google employee takes a break from reinventing the web.
Make It Accessible: In a perfect world, your mobile site should work across all devices. Consequently, you may want to find alternatives for Flash, since the video format does not work on all devices. Use HTML5 for interactivity and animation. Adapt your site for both vertical and horizontal screen orientation. And design to keep users in the same place when they change orientation.
Make Transactions Easy: To increase sales and calls to action, focus on information that will spur a transaction. And reduce the number of steps to complete a transaction. Forms should be short, using the fewest number of fields possible. And use check boxes, lists and scroll menus to make data entry easier. Also, use click-to-call functionality for all phone numbers.
Make It Local: If your business depends heavily on local clients/customers, be sure that your address is on the landing page. You’ll also want easily accessible maps and directions.
Sync Your Traditional and Mobile Sites: People now use multiple screens throughout the day. So make it easy for visitors to visit on both by allowing them to save popular searches and shopping-cart contents. You’ll also want to retain the look and feel of your web presence on all platforms.
Use Mobile Site Redirects: Such redirects are code embedded in your website and automatically sense that your visitors are using a mobile device and send them to the mobile-friendly version of your site. Once you’ve embedded this code, always offer users a choice to go back to your traditional website if they prefer.
Listen, Learn and Refine: Use free analytics programs such as Google Analytics to understand how people are using your site and to continually improve their experiences. You can also use surveys and other feedback tools to supplement that analysis.