After all those months (and quite possibly years) of spending blood, sweat and tears on perfecting those fluid grid layouts in responsive design, we are now embracing a new web methodology, adaptive design. But what is the difference between the two? Which is better? And how should they be used?

Introducing responsive and adaptive design

Users don’t give a monkeys on how a website is designed; all they want to do is quickly access information and easily complete tasks. Optimising web accessibility however, is not that easy considering users are engaging with a multitude of devices. In an ecosystem of devices, users can choose to switch between desktops, laptops, tablets, smartphones and more. This indeed has caused quite a headache for designers and developers for some time.

Ever since Ethan Marcotte coined the term Responsive Web Design (RWD) in a May 2010 article in A List Apart, designers and developers have welcomed the technique to overcome the challenges of designing for a variety for small and large screens. For sometime, many sources have recommended responsive design as a cost-effective alternative to multiple websites, e.g., mobile only websites. In recent times however, businesses have turned their attention to adaptive design, which is causing quite a stir in the web design industry. But what is the difference? What are their goals? And does it really matter? Well, let’s find out.

Responsive Design

In a nutshell, responsive design is a modern web development method used for creating dynamic changes to the appearance of a website. Responsive design is client side, meaning that the whole webpage is delivered to the device browser (the client), and the layout is adjusted to respond to the screen display.

Responsive websites on a desktop, tablet and mobile device
Food sense is an example of responsive design that works on a desktop, tablet and smartphone

For sometime, responsive design has been a buzzword flying around in most marketing agencies. Many designers and developers adopted the technique as a solution to provide an optimal viewing experience for the rapid incline of devices. For sometime, responsive design proved effective in creating consistent experiences for most devices, meaning that the same desktop content could be displayed to fit the smaller screens of tablets and smartphones. Responsive websites have also simplified Internet marketing and SEO, and have enabled businesses to manage just the one responsive website without having to support multiple websites./

Responsive layouts are often assembled using CSS3 media queries, and fluid grids that use percentages to create a flexible framework. These frameworks are usually developed with breakpoints that define the changes to layouts for various screen displays, e.g., 1024, 960, 479 pixels etc.; and of course there is the use of Ems, flexible images and videos, type and more, all allowing the website to adapt its layout to various screen displays.

How responsive design works

An illustration on how responsive web design works
In responsive design, the same web content is delivered to all devices

Case Study: Firebox

The popular gadget store, Firebox, is a great case of responsive design. Not only does the website look great, it’s UI (User Interface) is optimised to respond to a wide range of screen displays; users can switch between desktop and mobile devices knowing that they can interact with the same content.

Firebox website responsive web design on a desktop, tablet and mobile device
Firebox utilises a single consistent website by using responsive design

Firebox has been designed to look similar to social media sites such as Pinterest; the homepage is beautifully laid out with a stream of tiles intended to entice the user to explore and click away. Navigation adjusts in the sense that primary and secondary links are organised inside a burger menu when viewing on a smaller screen display. However, when viewing on a mobile device, the most important considered elements (search, account and basket) remain in view. The overall experience is consistent across most devices in a sense that the same content is delivered with a similar look and feel. Some UI features however, could be questioned e.g., product descriptions and variants (options) which can sometimes cause incredibly long layouts for smaller screens. Plus, certain promotions are sacrificed on the homepage to not appear on the smaller screen displays.

In all, Firebox serves as a beautiful and consistent website, which still performs well in terms of speed and accessibility. It’s fluid layouts have allowed Firebox to maintain a single website on a multitude of devices. Whilst there are several UI issues, the experience is quick, clean, consistent, and most importantly of all it works!

Responsive design pros and cons

Pros:

  • Re-use code and content
  • Offer all the features that the full site has
  • Quick, flexible and easy to work on most devices

Cons:

  • Slow download speeds, especially for images (even if content is hidden via the CSS command ‘display: none’)
  • More complex interaction
  • Pre-existing sites require rebuild to accommodate responsive design
  • Designing and testing can be difficult

When to use responsive design

The questions who, why, and how should come to mind when trying to determine the intended outcome of your website. Do you have a clear, distinct type of audience? What kind of experience are you trying to cater? How do you expect your audience to contextually engage with your website?

You could use Responsive design for:

  • Websites that do not contain complex layouts or rich content
  • If you just need to resize and rearrange elements on the screen to fit the user’s device
  • Users who do not need to perform complex tasks
  • Layouts that need to be quickly applied and updated for all devices

Adaptive design

Similar to a responsive website, an adaptive website is intended to work on multiple devices by using the same URL. This means that users will not have to wait for a redirect. In adaptive design however, a predefined layout is delivered to the relevant device to provide the most suitable experience to the user.

Illustration on how content displays on different devices in adaptive web design
An example of how adaptive design delivers optimised content based on the device, but not the browser

The term Adaptive Web Design (AWD) was coined by Aaron Gustafson, who wrote a book of the same title. In his book he describes adaptive design as a strategy of progressive enhancement, which focuses on the user, not the browser. Additionally, adaptive design is all about creating an optimal user experience regardless of which device you use.

Adaptive design is predominantly server side. This means that before the page is delivered, the web server detects the device and loads an enhanced version of a website that is optimised for its dimensions and native features. By providing different batches of HTML, CSS and even JavaScript, an adaptive website is capable of superior content delivery and a highly differentiated user experience. For example, a mobile device can benefit from an optimised layout, which contains a mobile-friendly navigation, smaller image sizes for faster download speeds, and simplified UI for improved usability.

More brands and businesses are beginning to turn to adaptive design as a means to deliver context driven experiences. Adaptive websites can essentially capture user intent more precisely on mobile devices. For example, on an airline booking website, a user browsing a smartphone is more likely interested in checking their flight status than making a booking (which they may have already done so on a desktop or tablet at home). Adaptive design is also particularly useful for large websites that have been built with layers of legacy code; a developer will no longer have to revert to the drawing board and re-code the website from scratch.

In all, adaptive design can be used to deliver the correct content to specific devices and aid better usability and site performance. Having said that, adaptive design does depend on predefined screen sizes and requires more development support, which can be a pain for designers and those wanting to make quick font-end changes.

How adaptive design works

Illustration on how adaptive web design works
In adaptive design, the web server detects the device and then determines which content to send to the relevant device

Case Study: CNET UK

In 2011, CNET UK made their website adaptive, one that automatically changes the layout depending on the device you are using. CNET UK focused on three main devices popular with their audience including desktop, tablet and smartphone. Each device has an optimised layout, repurposed search and navigation, and different content delivery. However, the most notable change is seen on the smartphone, with only subtle tweaks made to the tablet to take advantage of the touchscreen.

Adaptive web design on a desktop and mobile device
CNET UK made their website adaptive to deliver optimised layouts to various devices

When comparing the smartphone to the desktop the first obvious adjustment is the search facility and navigation; the smartphone compacts all navigation inside a slide-out menu, but still makes ‘search’ a prominent feature in the header. CNET UK also took the steps to speed-up mobile browsing by adding suggested products in a search dropdown.

The large carousel seen on the desktop is nicely compressed on the smartphone by using a single slider, and with only secondary textual content being removed to keep headlines intact. More interestingly though, the desktop’s left hand sidebar is removed from the smartphone’s layout with the text formatted to fit the size of the screen properly. The smartphone’s list of articles is also bolstered-up with thumbnails and labels for improved visibility.

Another huge benefit of CNET UK’s adaptive website is that videos play on iPhones, iPads and iPod touch devices. As opposed to the desktop’s Flash video format, mobile devices play all video content using HTML5.

In all, CNET UK has executed a very good job of delivering the right layouts and context to desktop, tablet and mobile devices. The branding and styles are consistent across all devices and the viewing experience is made a lot easier on a mobile device by optimising the fundamental elements including search, navigation and content.

Adaptive design pros and cons

Pros:

  • Repurposed content and new tasks for the appropriate device
  • Better usability and faster download speeds
  • Gives you more control over the design
  • Can be implemented on pre-existing site(s), especially those built with legacy code
  • Does not require site rebuild
  • Ideal performance across multitude of sites

Cons:

  • Requires more development and support – can be costly!
  • Time consuming
  • Relies on pre-defined screen sizes

When to use adaptive design

Again, you should ask yourself the same questions when considering responsive design: who, what, why and when? Use your analytics to determine what percentage of your audience is using desktop, tablet and smartphones. Once you have cleared the path for what type of devices you should be accommodating, decide whether you need to repurpose your website’s layout and content.

You could use adaptive design for:

  • Providing complex content to old and new devices
  • To target specific devices popular with your audience with pre-defined layouts
  • Load correct high quality images for retina screen displays and lower quality images for standard-definition displays
  • Provide new or useful tasks to your audience

So, which is better, responsive or adaptive design?

In a nutshell, responsive design is quick and convenient, and adaptive design is perhaps the more intelligent development approach. However, there is no clear winner as your audience and business will always have different needs.

Ultimately, your audience will not care about how the site is designed and developed, they just want to access information and complete tasks as quickly and easily as possible. Whether you choose to use one and not the other is purely down to your user and business needs. However, you may decide to take advantage of their fundamental differences; responsive can be used as a base framework to fit most displays, whereas adaptive can be utilised to target specific devices popular with your audience.

Depending on your audience’s needs, and whether you are kick-starting a new website or looking to enhance a pre-existing website, there are certain questions to be answered such as:

  • What devices do I need to design for?
  • In what context will users engage with the website?
  • How do I expect my users to interact with my website, and what tasks should they be completing?