Is Your Website Mobile Friendly?

Your mobile-unfriendly website could be costing you revenue.

Recently, a friend and I were in Boston looking for an authentic Italian restaurant. We turned to Yelp on my friend's iPhone to wade through the sea of options before making our final selection. Of the finalists, the first restaurant didn't have a website – eliminated. The second restaurant wanted us to download a six megabyte PDF – eliminated. The third restaurant's website was built in Flash – eliminated. The fourth restaurant, which had a mobile-friendly website, is where we dined.

Does this seem like a good way to make a restaurant selection? Maybe. Maybe not. But it's an example how many of your potential customers are approaching purchasing decisions. Your website's mobile experience is important.

According to Michael Boland, senior analyst and program director, BIA/Kelsey, mobile search "happens further down the purchase funnel, compared with desktop search". Simply put, mobile users are closer to making purchase decisions than are desktop users.

So mobile is coming, right?

Wrong. It's already here.

According to Cisco Systems, mobile and portable devices accounted for 33 percent of web traffic in 2013, a figure Cisco projects to grow to 57 percent by 2018. The company's Global Mobile Data Traffic Forecast predicts the number of mobile devices will exceed the number of humans before the end of 2014.

These numbers are only going to increase as teens grow into young adults. Pew Research found in 2012 that 44 percent of 14-17 year-olds owned a smartphone.

Ask a teenager to order a pizza, and she'll reach for her phone, but not to make a phone call. I'll bet you a nickel she'll order it on a mobile-friendly website (and will probably ask for your credit card, too).

What can you do?

Mobile has permanently changed the web. Below are a few starting points to getting up to speed.

Responsive Web Design

Don't try to design for specific devices - there are too many. Instead create a website that responds to the device's viewport (screen size) and orientation (horizontal or vertical). Try this – go to microsoft.com, resize your browser window, and watch what happens. Elements on the page resize and stack. This is responsive design in action. Microsoft's websites is device agnostic, so it will work on devices and viewports that don't even exist in the market yet.

Ethan Marcotte authorized a groundbreaking piece, Responsive Web Design, in 2010 that remains the basis for website design.

Native HTML Content

When at all possible, serve content in HTML to your users. Think about it. Which is a better user experience – browsing a restaurant's menu as an HTML page or browsing the same information in an 8.5" x 11" high resolution PDF (possibly the same file sent to the printer)? Moving this content to HTML also provides an SEO boost.

Responsive Images

There's no reason to send a 1600x800px image to an iPhone 4S; instead, send an image appropriate for the device's viewport using responsive images, which leverages the new picture element. Since none of the major browsers support the picture element yet, you'll need a polyfill – Picturefill 2.0 is the standard.

HTML5 Video

If you're serving video from your own server (and not from YouTube or Video), then use HTML5 video. It isn't supported on many legacy browsers, so take a look at Video for Everybody, Video.js, or MediaElement.js. Also be prepared to encode your video in two formats – H.264 and WebM. Take a look at HTML5 video browser support.

Optimized Payload

A mobile device operating on cellular networks has a slower connection than is available from your WiFi router at home. Do you remember surfing the net on dialup? It was horrible. Don't make your website's mobile experience horrible by jamming too much down the pipe. Use responsive images. Minify and aggregate your site's CSS and JS. Look for unnecessary files. Is it necessary to load your site's slideshow JS on every page?

Conclusion

I've provided just a few suggestions for making your website a better place for mobile web users. A lot has changed since the first iPhone, and, undoubtedly, a lot will change in the coming years. The web is a quickly evolving place, so always be on the lookout for new techniques and completely new ideas.

Author note

The commentary in this post focused on the US market; however, in many parts of the developing world, mobile technology is already dominant, especially in Africa. For example, as of August 2014, mobile devices commanded 68 percent of web traffic in Nigeria and 74 percent of web traffic in Kenya.