The number of users accessing the Web through mobile devices has been increasing very significantly. According to StatCounter telemetry data, in October 2016, for the first time in history mobile usage surpassed desktop.
Besides, mobile is not only about smartphones and tablets. IoT means the explosion of new interfaces: smart TVs, watches, wristbands…the list could go on. This means that the challenge of adapting user experience to different environments is increasingly relevant.
As an incentive to improve customer experience on mobile, Google has famously changed its search algorithm to privilege mobile-friendly websites. Curiously enough, this seems to have had a higher impact than the mere fact that people are simply not able (or don’t have the patience) to buy anything on mobile if the website does not offer a proper adapted experience.
However, there is still a lot of room for improvement. And the first step for improvement is to actually understand which techniques you can use to be more mobile-friendly.
Responsive vs Adaptive
Responsive and adaptive design methods give developers and web designers the chance to optimize web content across devices.
Their principle is the same: content changes according to context (most importantly, screen/browser resolution). However, the way that change happens is different.
The main differences
Responsive (RWD – Responsive Web Design) is fluid, flexible, and you cannot see any flickering effect as the design adapts fully to the size of the screen regardless of the device.
Just like this:
To do this, designers use media queries – a CSS module that allows CSS rules to be applied depending on the environment where the content is being displayed – flexible grids and also responsive images, allowing the page to be flexible and to be changed according to each context.
The term was coined by Ethan Marcotte in an article about Responsive Web Design and he then went on to write a book that is dedicated to the topic.
Adaptive (AWD – Adaptive Web Design) – The adaptive experience is not as fluid, as it uses specific breakpoints which are not loaded unless they are needed, meaning the page will adapt to that breakpoint if the screen size asks to. Adaptive detects the screen size and loads the proper layout for it.
You can see an example below:
An adaptive site is designed, usually, for six common screen widths: 320, 480. 760, 960, 1200 or 1600.
So which one is best?
Let us be clear: there is no perfect solution. People often prefer Responsive design for its fluidity, but there are setbacks when it comes to compatibility, particularly in the email context. Here’s a quick summary of the pros and cons of using each method.
- Flexible and fluid experience
- Cost effective and easier to manage, as you only have to deal with one single design
- Good for SEO as engines only have to index the content of one URL
- Browser compatibility. Some older browsers do not support media queries and therefore the content displayed on mobile will be exactly the same as on desktop. You can check for browser compatibility here.
- Email client compatibility. If you’re building responsive emails, you should take into account that many widely used email clients do not support media queries. These include:
Android Gmail app
Android Yahoo Mail app
Android Outlook app
Gmail, Outlook and Yahoo mail via Android browser
Windows Phone 7 and 8
- Loading times are higher as the same resources will be loaded regardless of the device
- No compatibility problems
- Faster loading: only one version will be loaded for each user
- Search engines need to index several versions of the same content/page
- Less cost-effective
- Break points might not be optimal for every single user
Ultimately, the decision will depend on your context and resources. For websites, the overall trend is to adopt responsive design as it’s SEO friendly and easier to maintain. However, you should be aware of the compatibility issues. For email particularly, where the search argument is no longer relevant, adaptive is probably the best choice as many modern clients do not interpret CSS media queries.
Most importantly, keep in mind that the best way to provide a good experience, regardless of the device, is to keep it fast, simple and clean!