Responsive Web design for Mobile Devices

Mobile, if your clients aren’t already they soon will be, so nows the time to take make sure your business exposure works for the mobile masses.  The proliferation of Smartphones and Tablets (58% and 19% respectively) means that we are more than ever able to get online and organise our work and social lives away from the ties of a computer.

In the main mobiles (Smartphones and Tablets) are being used for apps and general internet surfing, this is why its important to make sure that if a customer comes to your business via a smaller screen device that they are given suitable access.

Mobile Apps or Mobile Web?

There are two ways a potential customer is able to access details about your business on a small device, either via an App or Via the Web browser.  It is less likely that a new customer will stumble across your app and install it. I would expect that by the time they go to this effort they are either already a client or certainly along the way to becoming one. But an app does have advantages over the browser. As it is able to access the phone’s design components it is likely to be more natural for a user.  Also if no data connection is required to run the app, i.e. all the data is local, then it is likely to be a lot quicker to use and can be used in offline scenarios.  A full blown app may be out of the cost effectiveness reach for most businesses, but if you are able to deliver your service through an app, i.e. selling products, etc it is certainly worth consideration.

So it is more likely people will access information about you via the web browser on the device, even if you have an app you should make sure your website is designed for mobiles.  Design is key, a nice rule of thumb for both web and app design is One Eye, One Thumb especially for a Smartphone.

One Eye: It is likely the device is being used at the same time as the user is doing something else, walking, talking, watching, so the content should be displayed in such a way as to be easily consumed.

One Thumb: It is unlikely the user will be able/want to use more than one hand on the device, probably no more than a thumb so navigation should be designed with this in mind.

Does this mean two or three sites designs, one for each type of device? This is something you need to discuss with your web designer but in a lot of cases no.  Hopefully your designer will start to discuss a ‘Responsive’ design.  A Responsive design allows a single site to look different depending on the device being used.  The benefit beingthat you have one site and hence one set of content to look after.  If you use WordPress for your website you may find there is already a Responsive design available.

How can you check to see if you site is already Responsive or what it looks like to the mobile user? Obviously to be 100% sure you could use your own Smartphone or Tablet (Don’t for get to try it in both portrait and landscape).  But did you know you can use your desktop browser!, just resize your browser (drag the edges in using your mouse). If your website is responsive the site will change as it get smaller.  Try it with this website or CarbonClix, as the screen gets smaller the text word wraps and then at a certain point the menus disappear and is replaced by a different design.  This only works for a Responsive design, if your site isn’t and you want to see how your site looks then you need to use a mobile device itself or use a service such as Screenfly.

With more and more people coming online every day, and some of these being purely through a mobile device, it is too important for this class of user to be overlooked.