JOYLAB are experts in experience design, working with the likes of Clarks, Johnson & Johnson, SKY, eBay the BBC and many others. We’ll show you how to best use responsive & adaptive when designing for mobile users.
Responsive vs Adaptive: When clients talk to us about mobile-enabled websites and services they usually talk about responsive design. However, there are actually two different approaches to delivering your website across multiple devices: responsive and adaptive design. Below is an overview of these two approaches and some of the pros & cons to implementation. If you want to know more about our approach to designing for mobile or multiple devices – or have a project to discuss – get in touch.
The main difference between the two approaches is the way in which the website is delivered to a device.
Responsive design is client-side, i.e. the whole page is delivered to the device (desktop, mobile, tablet) browser (the client) and the browser changes how the page appears dependent on the dimensions of the browser window.
Adaptive is server-side. This means before the page is delivered to the device (desktop, mobile, tablet), the server (where the site is hosted) detects the technical constraints of the device – and loads a version of the site that is optimized for its dimensions and features.
In a bit more detail…
Responsive design has rapidly become the defacto choice when it comes to re-designing a site to perform on desktop as well as a range of mobile and tablet devices. But, as ever you need to strategically assess whether this approach or another delivers against your specific business goals, budget and user-needs.
Responsive design delivers the same HTML code to any device, but tweaks the CSS layout enabling it to adjust to the screen of the device accessing the site.
A huge benefit of responsive design is that a single codebase for a website can serve both mobile and desktop users. Ongoing maintenance of the site is simplified by supporting a single codebase. Definitely good for budgets.
But by using the same codebase you assume that the mobile version of the website loaded on smartphones is of the same size and complexity as the desktop version so the experience is not device specific in the same way that an adaptive version (see below) or a native app would be. As a result, it’s going to be less effective at serving up an experience to the user that is tailored for the context they are using your site in. Mobile users often want quick access to specific parts of your site or service.
The other downside of the responsive approach is that smartphones have to download and sift through all the information even if not relevant to the mobile experience you want to deliver. This in turn means responsive websites can be slow to load and data heavy on mobile devices. As we know slow load times can be hugely disruptive to the user experience and cause drop off in conversion. Not such an issue if there is only one source the end user wishes to access (ie a specific charity where the user is emotionally invested) but if there are competing sites (retail) that perform better or are easier to use this can put you at a disadvantage.
Adaptive is an alternative to going responsive.
Adaptive technology is used server side, it detects the device accessing your website and uses this information to deliver different batches of HTML and CSS code based on the mobile/desktop device.
Using the adaptive design approach, a server can choose how to optimally render pages, as well as enhance or remove functionality based on the capabilities of the detected device or information known about the particular user (great for personalisation).
Take the experience on a luxury yacht site for instance (bear with me – dream scenario, perhaps not one we can all relate to) – the user is highly unlikely to be wanting to peruse images to make a purchase on their mobile. They are much more likely to be booking an appointment to view in person, asking for further information on the product or be putting their own boat into dry dock for maintenance work. Loading irrelevant information and complex ecommerce functionality therefore slowing load times (in the case of responsive) could lose genuine interest from a nigh net worth consumer.
The most important thing adaptive delivery allows you to accomplish is a highly differentiated experience that is built for the specific intent of your mobile customer. Sector dependent (third sector, education, ecommerce) users will often have very different motivations for accessing a site on a mobile device than a desktop. Their behaviour will sometimes be greatly effected by environmental factors like location, time of day etc.
Where you need a bespoke/personalised experience based on the needs of the end user and the data you hold on that user’s past purchase history or behaviour – adaptive can be very helpful approach in delivering against your needs approach.
Another benefit of the adaptive approach is that there is no need to wholesale re-engineer the codebase from scratch. Quite a large benefit for complex sites with legacy code built up over time.
Which approach to use…
Responsive websites generally work well for content-heavy websites with fairly simplistic functionality and little difference in user intent between mobile and desktop users. If creating a truly responsive site and crafting from the ground up it can be a fantastic way to focus third sector web teams on honing their content strategy. Beginning by auditing content and cutting away much of the sometime unnecessary organic sprawl of information over time – then developing sustainable frameworks for content production and delivery to avoid this sprawl in future.
If you’re building a web based service where personalisation, task focus or download speed are critical factors, adaptive is almost certainly the way to go. Again ecommerce is a prime example of where personalisation and the complexity of environmental factors effecting shopping behaviour mean adaptive could be the right choice.
One certainty is, that either approach when implemented correctly by expert practitioners – will deliver a far better mobile experience (and conversion) than a non-optimised site. Get in touch and we can talk you through what works best for you.