by Iain Wilson
If you're reading this article on a smartphone or small screen device like a tablet, it will look different to how it looks on a desktop PC. That's because we've taken a responsive design approach to handling our website on mobile devices.
Website access on smartphone mobiles and tablets has exploded in the last 12 months. If you've got a website, you'll need to consider these smaller screen devices, and ensure that the site looks and operates correctly.
Quantum shifts like this will always generate opportunities do things in a better way. It's also a commercial opportunity for web companies and there are plenty of companies targeting the mobile market.
Some are good and some are less good so you need to be a little careful when you get a phone call from someone selling 'mobile websites', and telling you about all the revenue you have lost because your site isn't 'optimised for mobile'.
There isn't a one size-fits-all approach to websites on the smaller screens, so let's have a look at some of the options.
You may well need a site that is built to work specially for smartphones and tablets, but if your site is relatively recently built and has been built professionally by someone who knows and follows web standards, it will probably work perfectly on a smartphone.
Sure, you might have to pinch and stretch to zoom in or out to view certain things, but in essence the site may well be easy to read and navigate on a mobile device.
Is this good enough? Maybe. You need to think about your audience and whether it makes any difference to them. Do they use smartphones and tablets to get to your site? Are they likely to care about zooming the screen to be able to view your pages?
Let's say you decide you do need a specialised version of your website for the smaller screens. What types are there and what do you want or need?
These businesses are offering an automatic service that will generate a mobile site based on your existing pages.
The theory sounds good, it's very cheap and it might just do what you need. But bear in mind, that because this is an automatic service, it is using templates and 'fitting' your content into these predefined areas.
It may struggle to deal with complicated designs, Javascript, animation etc. It may look similar to your competitors!
It may also not be hosted on your domain, but as a subdomain of the service provider e.g. www.yourname.mobiles-r-us.com. (at the time of writing this, there was not a site called this!).
But equally, it might be all you need to get started.
OK, so if you decide the automatic option is not quite right, what are the options.
There are generally two key considerations:
Why would you want a separate site for mobile? Well, you may have a situation where you want to promote a certain aspect of you site to customers on the move). And your main site, although containing the information, does not give it priority. Or you may feel you want make simplicity the most important aspect on the mobile site to get your key business messages across.
Take a look at the Really Great Training website on your mobile for an example. It will automatically sense that you are using a mobile device.
This option doesn't have to be a separate site, but it often is. In this option, the pages are built in a way that they look a lot like a native mobile app, and the pages transition from one to another using techniques that apps use, like sliding and fading.
The Really Great Training site uses some of these techniques and the Edinburgh Locksmith site is another example. Try first on your PC then on a mobile, to see the differences.
The responsive option doesn't need separate webpages for desktop or mobile/tablet. It just has one set of pages. Depending on the device viewing the page, the webserver displays the page content differently.
Usually, this involves resizing columns and images so that it fits onto the smaller screen without any need to zoom. The Sportsmans Charity site and Richard Ellis Training are a couple of examples of sites that have responsive pages.
Sometimes, some content can be omitted, like unecessary images or text sections, so that the important messages are prioritised, even on small screens.
Besides delivering different sized content for smaller screens, the navigation menus often need to be handled differently, especially on sites with multiple levels of navigation.
Without the screen real estate that PC devices offer, we have to be creative with how the menus are displayed.
It is possible to maintain a similar menu structure but often we have to resort to hide and show type menus where an icon indicates the menu, and tapping on it reveals or hides the menu. Look at this article on a mobile device to see an example.
Yes you can. We have done this for several clients. As long as the site is written to standards, and doesn't use too much inline CSS, it is usually not a huge job, but it does depend on the size, page variety, and complexity of the menu system.
If you're thinking about mobile support for your site, get in touch, we'd be happy to advise.
Liked this article? Please share it with your friends and colleagues.