You are here

HOW TO: Choose between adaptive and responsive approaches to mobile-friendly websites

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 sized 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 (just look at your Google Analytics), 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 like 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 that your CMS (Content Management System) stays the same and you don’t have to duplicate content entry for different screen types.