How to Make Your Website More Mobile-Friendly Does your website look as good on a mobile device as it does on a TV? If not, digital design expert Janine Warner tells what changes you need to make and why.
This story originally appeared on Business on Main
Forget about designing your website for mobile devices. Instead, design your website for all devices, from tiny phones to huge living room flat-screens.
"Nearly every business needs to adapt to reach consumers effectively on any screen," says Janine Warner, a globally recognized digital design and Internet trends consultant who I caught up with on her way to Abu Dhabi, where she took the World Summit Award stage to share multiple-screen strategies before a vast audience of international mobile specialists.
"There are two basic strategies for building websites that display well on all devices: responsive and adaptive," she explains. "And responsive sites are the best bet for most small businesses." Following is a translation of what that lingo-laden sentence means, along with key steps your business should be taking.
At a minimum, adjust your existing site for today's Web users. No business can afford to ignore the fact that more than a billion people primarily access the Web from mobile devices. Even if you're not ready to rebuild your site for optimal display on all devices, at least take one of the following two steps:
Simplify your site design. Pull up your website on a smartphone (or view it on the Google GoMoMeter) and you'll probably see the need for design changes. To display well on mobile, Warner recommends simpler page designs, large font sizes, critical information placed "above the fold," and big, touchable buttons that are fat-finger-proof. Minimally, she says, "You'll go a long way toward delivering key information on any device simply by putting your name, phone number and a link to a map at the top left of your home page where it is easy to find."
Create a mobile version of your site. As an alternative to editing your website, you can create a parallel version, using mobile-site-design services, many of which are free or low cost. "But there are tradeoffs," Warner says. "If your mobile site has a second URL, such as one with a .m subdomain, search engines may or may not find it." Both Bing and Google advocate a one-URL approach for findability and search engine optimization. "Still, if you love your site or can't afford to rebuild it, creating a mobile site that links to your main site isn't the worst strategy," Warner says. "The worst strategy is to ignore your mobile audience altogether."
Better yet, rebuild your site for display on any device. Here's where the terms adaptive and responsive site design come into play:
Adaptive design is the high end of website design. It's used by big companies that invest -- heavily -- to reach the largest possible online audience. "American Airlines is a good example," Warner says, explaining that adaptive design "detects and identifies the user's device and then generates a page matched to the device capabilities."
Responsive design is a more affordable solution that uses CSS (Cascading Style Sheets) technology to create a single version of a website that auto-adjusts to display properly on all devices except the oldest cellphones. "A responsive site allows you to reach the most active Web audience," Warner says. As an example, she pulls up the site of The Boston Globe, clicks on the right edge of the browser window and drags to the left, shrinking the page from full screen to an area the size of a smartphone. No matter how small she makes the display area, the Globe's responsive design looks good and is easy to read.
Commit to future-proof your website
As you prepare to make long-delayed investments in your business, put website redesign high on your list so you'll be ready to reach consumers via their phones, tablets, PCs, TVs or, soon, refrigerator doors, bathroom mirrors and more.
Even DIY platforms, ranging from GoDaddy.com to WordPress and many in between, are starting to offer designs that work on a variety of screen sizes. "Just be sure the theme you use is labeled responsive," Warner says.
Alternatively, she says that for a few thousand dollars or more, a professional designer can create a good custom website, "unless the designer doesn't know the term responsive, in which case you need a different designer."
Finally, once you get the technology right, turn your attention to creating great website content. "Remember," Warner says, "that especially on mobile devices, people access your website for three reasons: to save time, to connect with others and to waste time. So give them quick and easy access, put your contact information front and center, give them links to maps and directions, and then add video or other amusements to keep them on your site for as long as they want to stay."
That's how to future-proof your site.