How to Make Your Website Mobile Friendly (And Keep Your Readers Happy)

Is your website content ready for mobile devices?
By the year 2013, forecasts predict that there will be 1.7 billion mobile internet users.
And it’s a pretty safe bet that at least a few of them are visiting your site, and seeing it on a screen that takes up just a few inches.
So what happens when readers feel cramped or have to work hard to navigate your site or read your content?
They leave.
Connection speed can also frustrate readers. A lot of the time, people are trying to access your site on slow cellular data connections. And despite the attempts by providers to increase capacity, it still feels “slow,” since the more they add, the more we consume.
You want both regular and new readers to have a great experience with your site, whether it’s at home on a nice large screen or while they are mobile and seeing it on a tiny device.
Brian Gardner of StudioPress summed it up pretty well when asked about mobile site design.

Many folks spend a lot of time working on the design of their site for modern browsers, but fail to realize the ever-increasing percentage of site visitors that come by way of mobile devices.

Not only is having a great site design important, you also need to prioritize usability and a quality user experience. That’s why we recommend using a plugin like WP Touch.

So how can you make sure your site is up to par for all those mobile readers out there?
Well, as luck would have it, there are some fairly easy things you can do to assure a more mobile-friendly site.
Here are some quick improvements you can make, starting today.

Install a mobile plugin

If you are using WordPress, you can transform your site into a mobile-friendly version in about 30 seconds with a simple plugin.
There are a lot of these plugins out there, but as Brian recommended, WP Touch is a great place to begin. It’s free, and you can customize it in several ways to best suit your site.
Learn more about WP Touch here.
Oh and one other thing about mobile versions of your site. Make sure you give readers the choice of viewing the standard site as well.
There are options in each plugin to do this. There are times when readers will want to view the full website, depending on their device and internet speed.
Note: before you install and activate any plugin, make sure your site has been properly backed up.

Create smart navigation

How’s your site navigation? Creating smart, thorough navigation for your website is a key aspect to making your site mobile friendly.
Make sure you offer readers clear and distinct ways to get to your most important content.
For example, do you see the red tabs along the top of this site? Those are examples of links to cornerstone content. Not only are they great ways to attract traffic, but they are perfect examples of clear navigation.

Write clear content

Now more than ever, you need to grab reader attention instantly.
When your site is being viewed on a much smaller screen, make sure you have compelling headlines that let the reader know she’s going to have a great experience reading this content.
Clear content that gets right to the point also assures readers can digest your material on their mobile devices, even while they’re distracted and busy.

Don’t use too many images

I’ve been guilty of this one. And I’ve also noticed in my analytics that when I include a lot of images in a particular article, I get less traffic reading it on mobile devices.
Lately, I have been limiting my use of images to one or two, and now my articles are getting read more by those with mobile devices.
Images are a great way to get a point across or break up text, but just try to imagine someone reading your content on a really slow connection with a tiny little screen. It might mean you don’t need that 20th image after all.
Notice that Copyblogger has, for most types of content, always had just one single, attention-getting image per post.

Don’t rely on Flash or Javascript

All arguments aside about the relevance of Flash, it is generally a safe bet that not all mobile devices will be able serve up either of these technologies.
Even if they do, it tends to be an extra step or two to actually view the content. The best practice is to stick with plain (X)HTML/CSS standards.

Practice good design

In the non-mobile web version of your site, it might be easier to get away with a few design problems that are far more visible and obvious in the mobile version.
Keep in mind the whitespace around paragraphs and words. If your content is so cramped that it makes readers physically uncomfortable, they might not hang out for very long.
Making your content scannable and breaking up long blocks of text is great for all readers, but even more so for mobile readers.
And cluttered, visually busy sites are hard enough to read on a large screen. Don’t ask mobile readers to go there!
So there are several ways you can begin making your website content more mobile friendly. Get started on a few of these and you will be way ahead of the competition.
(If you’re not sure where to start, the best payoff for the least amount of effort is probably getting a mobile plugin for WordPress like WP Touch.)
Have you recently turned your website mobile and noticed more readers? Fewer?
Share your experience with others in the comments below. And let us know your favorite tip for making your site more mobile friendly!

About the Author: Shane uses his Tablet Computer Geeks blog to deliver the latest and best iPad information, including accessory reviews, app reviews, and industry updates. Follow him on twitter at tc_geeks.