“Mobilise” your site! – Our guide to Mobile-Compatible Web Design

We’ve all probably got one, and if we don’t, we want one. Yes, I’m talking about the smartphone!

Saviour, light and beacon of our (modern) lives. If ever there was a product that really has transformed the way we use the telephone then it must be the smartphone. Last year alone there were 1.5 billion searches made from mobile devices and Information Week reported that there are over 61.5 million smartphones in use today. With such staggering sales figures and the burgeoning tablet market starting to skyrocket, coupled with far greater access to more robust mobile data networks, the internet is now being accessed by users in a multitude of new, super-efficient ways.

Now if you’re thinking that this means business for your business, then you’d be on the money. However, what you really have to consider is making your site mobile-compatible, otherwise you’re just wasting everyone’s time. There’s nothing more frustrating than getting onto a website from your mobile only to find you can’t click through to see what you want.

The big question: how do you go about it? Testing your site on mobile devices can be time-consuming and expensive due to the vast number of different mobile devices.

Fear not, because there are some handy tools available at your disposal for making sure that your website behaves appropriately on the Mobile Web. Here are some great ways to test your site on mobile devices to ensure it’s not lost in translation…

1) iPhoney: this is an excellent free iPhone tester. Though it will not emulate your site exactly, it will allow you to test images and code in a pixel-perfect Apple-Safari-powered environment, with all normal features such as Portrait and Landscape modes, fullscreen, zoom and plugins. 26-09_iphoney

2) iPad peek: this nifty little web-based tool allows you to see how your website will look when put on an iPad. If you click on the top border to switch from landscape to portrait mode. The virtual keyboard and the buttons on the iPad browser are just for show, but the reload button works. The virtual keyboard and the buttons on the iPad browser are just for show, but the reload button works. However, Flash works on this and it shouldn’t. For as accurate a simulation as possible use a WebKit-based browser such as Apple Safari or Google Chrome. 26-11_ipad_peek

3) WC3  mobileOK checker: this tool invites web authors to run the alpha release of the W3C mobileOK checker and make their content work on a broad range of mobile devices. The W3C mobileOK checker runs the tests defined in the W3C mobileO and checks to see how mobile-device-friendly your website is. 26-10_mobileokchecker

4) Gomez: this popular tool gives you a rating of between 1 to 5 based on an analaysis of over 30 proven mobile web development techniques ranging from stylesheet use to caching techniques and standards-compliant code. Your results will be displayed in a straightforward document that will offer you advice on how to make your site better. The only flip-side is that you must enter personal information such as your address, in order to use the tool. 26-03_gomez

5) MobiReady: this is similar but more detailed version of Gomez in that it is a free report which gives your site a score (from 1 to 5) and in-depth analysis of pages to determine how well your site performs on mobile devices. You can enter a URL and it will  perform a set of evaluations including a Page Test and Site Test. MobiRead evaluates mobile-readiness using industry best practices and standards. 26-04_mobiready

There – that’s our round up regarding mobile-compatible web design! What do you think?

Bear in mind, there are more out there but we don’t want to bore you. One thing to remember though is that your business will feel the benefits immediately, and your customers will appreciate the effort.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>