Mobile internet usage is set to overtake desktop usage by 2014. Danny Bluestone, managing director at Cyber-Duck, highlights how to optimise your website for any device
The future is most definitely mobile. Increasingly, business users are relying on their mobiles and tablets to access the internet, even when in the office. With the introduction of 4G and the growth in mobile web traffic, organisations now need to optimise their websites for mobiles, as well as desktops.
This article covers two different approaches to optimising your website for mobile devices – ‘responsive web design’ (RWD) and ‘adaptive web design’ (AWD). Despite sometimes being mistaken for the same thing, they are in fact very different, and each method has its own strengths and weaknesses.
Responsive web design
RWD means content stays the same on all screen sizes but responds by changing its layout for different size screens. For instance, you could have three columns of content on a desktop, two on a tablet and one on a mobile. The content would simply wrap depending on how many columns are used for the specific screen type.
The user interface would also sometimes change with things such as mobile-friendly drop-down menus applied to mobile devices but this starts to blur the lines between RWD and AWD.
Advantages: Over the last two years, RWD has generally been more popular than AWD because the content stays the same so there is no need to change or ‘adapt’ it. This also means your CMS (content management system) stays the same and you don’t have to duplicate content entry for different screen types.
RWD can be easily achieved using CCS (cascading style sheets) and HTML5, which are able to automatically work out the width of the screen, so content is simply moved and adjusted to fit the space available.
In addition, RWD is generally cheaper and less time consuming to implement than AWD.
Disadvantages: As it is only the layout that changes with RWD, and not the content or graphical elements, you could argue the user does not get a fully optimised experience for the device they are using.
The evidence indicates that users behave very differently when using smartphones and desktops, so ideally a mobile website should be adapted to these behavioural changes.
Websites with large files, images and videos take much longer to load on a mobile device with a 3G connection than a desktop with broadband. As the content doesn’t change between environments with RWD, mobile users are kept waiting.
Adaptive web design
AWD adapts what is displayed, depending on the capabilities of the device being used, as well as screen size. It centres more on the context of the user, so even when the same content is used, it is adapted (with some or even all of the design elements changing) depending on whether the user is using a mouse and keyboard or touchscreen.
AWD also uses different layouts for tablets and mobiles with certain ‘responsive’ elements built in to reduce the number of different templates required. AWD can be taken to further extremes with content being completely repackaged and reworded, while images and video are either reworked or completely removed.
Advantages: With AWD, devices get a tailored and adapted UX (user experience), so mobile and tablet users only see the content relevant to them. Graphical content and branding can be completely changed to strip out heavy or irrelevant graphics.
Mobile and tablet visitors normally get a UX tailored specifically for their device, which typically loads much faster than with RWD websites.
Graphical user interfaces are reworked so tablet and mobile users will see menus and sub menus completely redesigned for both portrait and landscape modes and touchscreens. For instance, good designers normally create larger buttons for mobile versions.
Disadvantages: Creating content for each and every device that could visit your site is time consuming and may be an inefficient use of resources.
A fully adaptive website can be more expensive if not planned correctly. If you have a CMS you might need to adapt it to cater for the different layouts for mobile, tablets and desktops. This can lead to higher development and on-going marketing costs if not planned properly from the offset.
You also run the risk of losing branding consistency and confusing your audience if users see different interfaces on different devices.
Align objectives
There are a number of options available to marketers who want to create a mobile optimised website. RWD is faster to implement with less customisation, resulting in lower costs and easier maintenance. AWD, however, can offer a much more custom and unique UX for each device resulting in faster browsing and download speeds with better customer conversions.
Sometimes the best solution is a combination of AWD within RWD or vice versa. For example, the BBC website is primarily adaptive but also responsive.
Whatever option you choose, it’s critical to carefully plan the UX to get the most out of your chosen route on all device types.
