Make Your Website More Mobile-Friendly

It is estimated that the amount of mobile internet users will surpass that of desktop users by 2013. Given these stats, there’s a great likelihood that you’re viewing this post on a mobile device right now (how savvy of you!).

Have you ever had a difficult experience with viewing a website on your smartphone? If a site isn’t properly formatted for mobile, it’s likely you’re just viewing a scaled down desktop version, making text terribly difficult to read and navigation troublesome (especially when trying to click on links). Whether for business or personal use, it’s important to take the time to think about how your website looks to the mobile user. We’ve compiled a list of some tips to help with just that.

Choose a mobile-ready blogging platform

Tools like Squarespace are designed to automatically scale to mobile. There are no added steps to be completed by you, so you know that even with limited web design knowledge, your website will look perfect to anyone, anywhere and at anytime.

Choose a responsive WordPress theme

If you’re using WordPress for your website, you will want to consider using a theme that’s already customized for mobile. Check out this theme, for example:http://themes.simplethemes.com/skeleton. It’s uncluttered and simple so that you’re content will look great on any platform. You could also use a plug-in such as WPtouch, which allows you to customize many aspects of your site’s appearance as well as delivering a more user friendly version of your site for mobile visitors.

Consider screen size

It’s important to factor in the range of screen sizes that your visitor could be using to view your site with. Take into consideration changes in orientation and how your website will adapt. User experience is compromised when the a website based for desktop viewing is simply miniaturized for a smartphone or tablet.

Choose appropriate button sizes

There’s nothing more frustrating than not being able to tap/select a button on a web page. What’s more, if there are 2 or more links close together, then it’s sometimes easy to tap the wrong one. To ease navigation through your site, make buttons at least 40 pixels in width/height. This is the optimal size for the average finger tip.

Simplify navigation

Make sure to offer your viewers simple ways to move through your content. Don’t over-clutter your site with lots of text and buttons, and make sure headlines are succinct enough that they’ll grab the attention of a user who is viewing it on a small screen. Making your content easily readable and breaking up long chunks of text is a great way to make sure your content can be consumed on any type of device.

Make phone numbers clickable

Making your phone numbers clickable allows the visitor to call you directly from the device they’re using. Simply wrap the phone number you wish to use in the following code:

<a class="tel" href="tel:8001234567">(800) 123-4567</a>

Test, test, test!

It’s important to test your site on a variety of mobile devices. If you can get your hands on some of the more popular models, that should be efficient. MobiReady is a free tool that helps test the mobile usability of your existing site and offers detail free reports on potential problem areas and how your site displays on mobiles.

Have a look at this great article by Smashing Magazine for some more advanced tips.

Have you recently made some changes to your website to make it more mobile friendly? What were the outcomes? Let us know some of your tips on how to make a website look better to the mobile visitor.