Before I get into the details of the different types of mobile websites, the first question to ask is whether or not you need to consider mobile traffic to your website at all. On the whole the answer is ‘yes’, but to what extent depends on your business and audience.
As a whole, mobile web usage is increasing rapidly. The use of mobile devices to access the web has increased by 67% worldwide over the last 12 months according to StatCounter. Desktop computers still win as 64.6% of web pages are still accessed via them, but mobile is now at an incredible 28.5%, and then there are tablets that account for 6.8%. But this doesn’t mean that these statistics will be the same for your business and website audience.
If you already have a website, one excellent way to track what sort of devices your audience is accessing your site with is to use a website analytics tool. They track lots of information about your website visitors including what device they are using to access your site. A popular, free analytics tool is Google Analytics, another is StatCounter. When I’ve used analytics on clients websites I’ve seen that some have 95% or more desktop users, and then others sites have had very high mobile users. If you can get your own figures it will help you determine the type of consideration you should give to the mobile and desktop sites.
Even if you have a very large amount of desktop users I always suggest at least a small amount of mobile optimisation, just so that if users do on occasion access your site through their mobile that their experience is good – and remember, as more people start to use mobile devices to access the web your audience might start using them too, so it’s best to be safe and at least have some provision for mobiles. I recommend monitoring your website analytics regularly to check what sort of devices your customers are using too, so that you can spot any changes in their habits and can adapt your site accordingly.
The minimum mobile optimisation you should have is to make sure that the website displays and functions correctly on a mobile device, sometimes it might need a few tweaks in the code to get it to display just right. You have to take into account that mobile users will often be using their finger to navigate on a mobile, so something like a drop down menu might need a couple of tweaks so that it functions properly when a user touches it, I’ve seen many sites where the drop down menu just doesn’t work on a mobile and the site becomes impossible to navigate.
If you decide that you need to consider mobile users more carefully then there are some options available to you:
Responsive Websites
The key to responsive design is flexible page layouts. The webpage detects the visitor’s screen size on-the-fly and alters the layout of the page to complement the screen. These types of sites have the ability to look good on a huge range of screen sizes and are incredibly fashionable at the moment. This technique involves using the website’s Cascading Style Sheet (this controls the look and feel of a webpage) to change things such as:
- The size of images – on a mobile images are often made larger or set the full width of the screen to make them legible, whereas on a desktop they might be smaller and in many cases have text wrapped around them
- Column widths – on a mobile the columns on the webpage are often merged into one, as the screen is often too small to display multiple columns next to each other
- The layout – if a site has a lot of visual elements then some of them might be simplified or hidden on the mobile site to make the layout less cluttered on a small screen
- Text sizes – text sizes might be increased or decreased to make them easily readable on the different size screens
On responsive sites, the webpages you see on your desktop, tablet and mobile are all the same page template, so responsive coding is often not too difficult to implement as it doesn’t require a full new set of webpages. It can often be much more cost effective than having a separate, dedicated mobile site designed.
There are some restrictions on what you can do in the design and there may sometimes have to be small compromises to get the site looking good on all screen sizes, but on the whole responsive is a very popular technique.
Dedicated Mobile Sites
For some businesses, particularly those with a high number of mobile users, a fully dedicated mobile site might be the best solution. You’ll have one set of pages or templates that are suited to a desktop computer, then a completely different set (with a different layout and url) that looks better on mobile devices. This allows for much more control over the layout, which for the mobile site in particular is extremely useful as you can have a completely dedicated design that takes into account the mobile interface and allows for items like bigger buttons that are easier to click on with your finger and a simplified layout with core items being easily visible. You can often spot a dedicated mobile site as the website has some code in it that detects your device and sends you to the dedicated mobile site. You’ll see the web address change to take you to the mobile site, common examples are:
- If your desktop site is on ‘http://www.mysite.co.uk’, then it might flick to ‘http://m.mysite.co.uk’ for the mobile site – notice the ‘www’ is replaced by an ‘m’
- Another common one is for ‘http://www.mysite.co.uk’ to become ‘http://www.mysite.co.uk/m’
When you look at websites on your mobile device, see if you can spot which sites have a dedicated mobile site by looking for the changes in the web address.
A great example of this is the Argos website, argos.co.uk, if you look at the website on your desktop and mobile, they both have a similar feel, but there are quite a few differences in the layout. On the mobile site you’ll see that:
- There are less visual elements on each page
- The links and panels across the site are simpler in design and easier to click
- The top navigation has been simplified
- When looking through the products the mobile version has a cleaner display and is easy to scroll through with your finger
- The search bar is much more prominent
- Also, notice that the Argos web address changes – the regular home page can be found here: http://www.argos.co.uk/static/Home.htm and then see that they’ve added an ‘m’ in the web address for the mobile site http://www.argos.co.uk/m/static/Home.htm
If you are a large shop with a vast range of products then a dedicated mobile site is often needed to enable users to buy products online, as to navigate through so many categories and products on a mobile can be difficult without a well thought out website interface. A mobile optimised or responsive site may not be able to be customised enough for this purpose. With so many users doing what is termed as ‘armchair shopping’ these days, using their mobile to buy products while sitting at home, shops would be missing a trick if they didn’t cater for them.
For many other businesses – perhaps a local law firm, or a plumber – then a dedicated mobile site might be overkill for their audience and the money it would cost to create one might be better spent on marketing activities instead.
Adaptive Websites (aka Dynamic Serving)
An adaptive website is a middle ground between the responsive and dedicated sites I’ve mentioned above. An adaptive site has separately coded templates for each screen size, so when you look at a page on a mobile screen it loads the mobile webpage code and on a desktop it loads the desktop webpage code. Something to note is that, although it loads the different code (dependent on the device) it is all done dynamically within the page so that, unlike a dedicated mobile site, the web address always stays the same. These types of sites normally only take a few screen sizes into account, e.g. a standard mobile phone screen size, a standard tablet size and a standard desktop size. If you want to fully take into account all screen sizes then you might prefer a responsive site.
Overall, adaptive sites can be most cost-effective for smaller businesses who would like to have their website look good on a mobile, tablet and desktop but don’t need a full responsive or dedicated site.
When deciding on a mobile site, my advice is to look at who your audience is and cater for them, work out why and how they access your site. If they are avid mobile users then a full mobile site might be for you, but if they are all just using a mobile to access your site and find your phone number then that might be overkill! You probably just need a simple website design with your phone number as prominent as possible.
