Mobile Friendly Sites

The mobile web is evolving rapidly, and it’s a fact: most businesses do not have a mobile website. More than 2 in 5 mobile users will access the web from their phone each month, however very few websites actually mobile-optimize their content. If your website isn’t optimized for mobile, your site usability is in jeopardy and you’re running the risk of losing a potential customer, something that is 100% preventable. 61% of users are unlikely to revisit a website that is not mobile friendly – are you willing to take that risk? This literally happens thousands of times every day because most websites don’t work well on a smartphone. Customer engagement even increases 85% with a mobile optimized site!

The gadgets we use to access the internet are getting smaller and more powerful. We used to not be able to get online anywhere but through a computer, but now that we can tap into the internet through our phones, we are doing so — at increasing rates.

Screenshot - YouTube Mobile

Screenshot - YouTube Mobile

What does this mean for the web world? You need a mobile-friendly version of your site or else when visitors try to access you from a phone, they’ll either get frustrated or leave. That’s why YouTube rolled out a mobile site. Type in on your mobile phone, and you’ll see a streamlined version of their site allows you to see top movies, log into your account, and browse the site with just a few taps of your finger. If you don’t believe me, check out the screenshot below.

So what are the things to keep in mind when creating a mobile-friendly site?

1. Remember the medium. Laptop screens are most often 12 inches or more and desktop screens are even larger than that. But a mobile phone has a display of just a few hundred pixels. The iPhone screen is 320 pixels wide and 480 pixels high–much smaller than the header graphics most people will put on their sites. The average PDA is even smaller though, closer to 200 pixels by 300 pixels. Try making an image that size in a graphics program. You’ll be surprised by how small it really is.

2. Scale down, especially with file sizes. Given the small screen you’re working with, you will want to scale down your site. No bells and whistles on a mobile phone please. Not only will it be difficult to cram onto one small screen, but it could be time-consuming and expensive for the end-user as well. To use the internet from a phone, users have to pay their service provider for a data plan, a data plan that is often charged in cents-per-kilobyte downloaded. So strip the site of anything non-essential, particularly with graphics and dynamic elements (e.g. Flash displays). Your users will thank you.

3. Make navigation simple. When you pare down your site for a mobile phone, reduce your site to the main objectives that users would like to accomplish. Make your contact information prominent and, above all, make it easy and painless on a tiny screen and less-than-optimal internet connection. After all, the internet has made us all impatient, and if a task becomes too time-consuming, we will likely just leave (and, if we’re geeks, we’ll probably blog about it too).

With those tips in mind, consider a tale of two brands that I love: Southwest and the BloodHorse, a horse racing publication. Southwest has dramatically altered its usual web layout to make it easy for me to do what I’d like to do. Plus, since the page is so simple, it’s quick-loading. I’m a happy customer.

Screenshot Southwest Airlines

Screenshot - Southwest Airlines

Screenshot Bloodhorse

Screenshot - Bloodhorse

Unfortunately for the BloodHorse, the opposite is true of their page. There is no effort to accomodate a mobile user, and so the site is illegible without zooming in and out, takes much longer to load, and is full of Flash elements (the little blue boxes) that my phone was unable to render.

So keep it simple and keep it lightweight, and I’ll appreciate browsing your site the next time I’m wandering the internet with my trusty phone.