Four Sins of Mobile Website Design, and How to Avoid Them

According to a study released March 1 by Pew Internet, 46% of adult Americans are smartphone owners. A study released last year by Microsoft Tag found that more than half of all local searches were conducted on mobile devices. Despite that growth in mobile usage many sites are still horrible on mobile devices. Here are four things to avoid in mobile website design:

Adobe Flash. I get it: Flash is great for animations and cool interactive stuff. HTML lacked those features, JavaScript was dicey, and HTML5 was a long time coming. In the meantime, Flash filled a gap. However, using anything other than standard HTML + CSS for key components like navigation is just bad practice. How can visitors interact with your site if they can't navigate through it?

If your website makes extensive use of Flash, fire your web developers and hire ones who know what they're doing. Web developers who rely on Flash are doing you a disservice: Your site won't work on iOS or many Android phones, which will drive those people away. Tell your restaurant-owner friends to stop paying web developers who rely on Flash and PDFs.

If you must use Flash, degrade gracefully. A recent BBC article on big wave surfing had a video of a monster 72-foot wave. When rendered in a browser that doesn't support Flash, the video player was replaced with an image and a note saying the video would have been shown if the browser supported Flash.

At least the BBC article looked good and welcoming.

JavaScript popovers. Don't use popovers that cover the page and don't quit on their own. I know, advertisers love popovers, but they don't render well on mobile sites, offering just a teeny-weeny "X" to close them.

Frankly, I wanted to read this story in the graphic at left, but when I see a popover, I leave immediately. You got the ad impression, but that's it. When I leave, there's no chance that I will interact with your site further and there is less chance I will return, ever--at least, not willingly.

While I'm on the topic of JavaScript: For your mobile sites, remove any JavaScript that isn't absolutely necessary. While 3G and 4G speeds are faster than ever and mobile phones pack a lot of processing power, page rendering can take a long time--especially when multiple Web requests are outstanding. I'm pretty patient, and I might wait 5 to 10 seconds for a page to load, but many others won't. Exacerbating the issue is that partially rendered pages are barely useable in browsers that are trying to complete the page and zoom in/out and scroll.

JavaScript navigation that obscures content. See the gray boxes with arrows in the image at left? They're in the way and remain there while I scroll up or down (thankfully). This is one of the least-intrusive examples I've seen. Like JavaScript popovers, these navigation aids just get in the way and don't really help. I have no idea why I would click on unnamed links--they're useless. If you want to direct visitors to other content, either integrate the links into your text or put a list of links at the end of the post. Visitors will find it.

Speaking of JavaScript: Desktop UI things like hovering over links, mouseovers and other actions don't translate well to mobile, where someone's finger is "clicking" on page elements and not mousing around. Dropdown menus and flyouts work fine on desktops, but they're very difficult to use on mobile devices. Think carefully about using them: In fact, don't.

"Under construction" notices. Make your content work with mobile devices, period. A page like the one at left may seem helpful, but it's off-putting. Even more so because I clicked through anyway, and the page rendered fine. I bet the trigger was a Flash video widget. (See No. 1.)

Most modern mobile browsers, at least the ones I use on Android, anyway, render "desktop versions" of sites really well. Sure, visitors have to pinch in to see the text, but browser UI elements like magnifying a touched area of a page, smooth zooming and improved character and image rendering make getting to your content easy and reliable for visitors, without telling them you couldn't be bothered to support mobile devices.

The upshot: If you aren't coming up with a mobile-friendly design for your website, you're driving visitors away. A well-designed mobile site lets visitors on small form-factor devices connected via potentially slow and congested networks see your content and interact with your site quickly. Figure out which components are most useful for your visitors and design your site accordingly.

As Brian Katz, who heads up the mobility group for a global pharmaceutical company, says in a recent blog post about application development, "know why you are creating an app, figure out what data you need to access and how you will do that securely and then worry about the best tool to use for building the actual app. Don't spend so much time working it backwards."