Is Your Blog Really Mobile Friendly?

Some interesting figures about mobile browsing and user activity:

• 38 percent of web users in the U.S. access the web from their phone (or 89 million people).
• 53 percent of Americans using their phones to go online do so at least once a day.
• 65 percent of mobile users aged between 18-29 use their phones to go online.
• 43 percent of mobile users aged between 30-49 use their phones to go online.

And these stats are just for American users. Across the globe, mobile browsing is continuing to grow at a huge rate and, as you can see from the image at the top of this post, it’s expected to overtake fixed (or desktop) browsing within the next 2-3 years, going by current trends.

Which begs the question – is your blog or website mobile-friendly? And if not, how do you make it more mobile-friendly?

Defining Mobile Friendly

Depending on who you ask, making a blog or site mobile-friendly is as simple as asking the question, “Can I view it when I open my phone’s browser?” (or tablet, as the likes of the iPad and Playbook continue to grow in popularity).

While this might help, it’s not really looking at the bigger picture, and the differing experiences of the various mobile browsers that are in use. Apple uses a different browser from Android uses a different browser from BlackBerry and so on. Then you also have older phones that don’t have the features of a smartphone, and this makes the experience even more different.

So to define mobile browsing, let’s work with the meaning of “compatible with as many mobile browsers as possible”. It might look better on some than on others but at least it’s available on more than just the latest smartphones.

So now that’s kinda cleared up, how do you make your site or blog mobile-friendly? It depends on the experience you want to offer and how much you want to spend (if anything).

The Build It Yourself Approach

The most intensive way to mobilize your site is to give it a full mobile makeover. This can be by yourself with some recoding, or by hiring a professional to do the work for you. Depending on how much you want to make your site mobile-friendly and still interactive, the cost can run into several thousands of dollars.

Other ways you can bootstrap and make immediate changes include:

• Use a fluid width design. This is a fairly straightforward approach and just involves modifying your CSS style sheet to allow your site to change widths depending on what browser it’s being viewed on. Make sure you make a back-up of your site and refer to any manuals before progressing with this option.

• Centre your content. If you’re reading this blog on a desktop browser, you’ll see that we have our content centred, as opposed to being full-width and starting on the left. This means we don’t waste any content in the sidebars, and keep the main post area as the one that’s always front and centre.

• Friendly Links. A lot of websites and blogs use contextual links, so when you hover over them a box opens up on-screen and shows you an ad or similar (think Kontera and Apture). Great for desktop browsers, not so much for mobile. Consider making all your links simple and mobile-friendly too.

• Easy and Complete Navigation. When you’re on a site and you can’t find what you’re looking for, then it’s either a choice of searching (if it has that option) or simply leaving (never a good scenario). For mobile browsers, it can be even harder to implement a search option for such limited space. So make sure you have a clear, uncluttered navigation option, and have the most important pages you want your visitor to view upfront and centre.

• Brevity is King. Depending on what browser a mobile user comes in on, the load time of a page filled with content can be nasty, and put them off. Counter this and have a short, punchy page each time – the easier the experience (including load), the more likely a repeat visit.

The Plug-In Approach

While the most comprehensive way to mobilize your site is by in-depth optimization, like I say this can be pretty expensive (though definitely worth it for larger sites). For blogs, though, it can be less expensive, because generally most blogs only worry about the post content, and not other sales pages, etc. This means you can choose a simpler option, and there are a ton of these available. Note – these are for self-hosted WordPress blogs – there are options for Blogger and other platforms.

• WPtouch Pro. Probably my favourite out of all the mobile plug-ins for WordPress, WPtouch Pro offers a great-looking and customizable app that supports all the major mobile browsers. You can even add less popular browsers through the excellent WPtouch Pro documentation. There is a free version – but it’s definitely worth investing in one of the premium licenses.

• Wapple. Wapple is another excellent option, and one that I’ve used previously on my own blog. It’s hugely in-depth and really lets you set up the mobile version of your site to replicate a lot of the desktop version. Again, it offers a free trial, but it’s the premium options that stand out. I prefer the simpler approach of WPtouch Pro, but Wapple would be my next choice for sure.

• WordPress Mobile Edition. Built by the guys that developed the popular Carrington framework, the WordPress Mobile Edition automatically detects what browser is on your site, and offers a straightforward user experience based on simplicity. It’s probably the least “graphic” of the three plug-ins here, but its ease-of-use and simple set-up make it one to check out. Oh, and it’s completely free!

So these are the two main ways to make sure your site and/or blog is mobile-friendly. Some are more in-depth and expensive than others – your needs will determine how much you need to spend.

But with mobile browsing become more popular by the day, it’s a small cost to pay compared to losing readers and customers, no?

How about you? Have you optimized your site, and what other options would you recommend?