Covid19 update: WE ARE OPEN... it's business as usual and we look forward to hearing from you.

Responsive & Adaptive Web Design

Over the last three or four years the way websites are designed has undergone a seismic shift due to the rise of the mobile and tablet. The traditional approach of going online, via a desktop computer, remains popular but in order to satisfy all site visitors, web designers nowadays must think about the needs of the smaller screen too.

Two different approaches to mobile friendly design have arisen – responsive and adaptive design. The former is the better known of the two and this is partly why in this week’s blog we’re going to explore more about these two techniques. We’ll take a look at the main features of each of these design styles and investigate why two similar methods for achieving the same result have been invented. We’ll also look at the different situations suit each design style suits.

Responsive Web Design Concept. Vector

Responsive Web Design

The phrase ‘responsive web design’ was coined by the Boston, Massachusetts based web designer, Ethan Marcotte and introduced publicly in an article on the website titled ‘Responsive Web Design’ back in 2010. Marcote followed this up with a deeper explantation in his book – ‘A Book Apart – Responsive Web Design’ published the following year in 2011.

The core feature of responsive design is that it is fluid and regardless of the size of the user screen accessing the website, the website will fit accordingly. A combination of CSS3, fluid grids, media queries and other development tricks allow this to happen immediately. From the user point of view they are able to see the website in absolute comfort and with minimal fuss. Behind the scenes however the use of a fluid approach is what’s making this possible with everything controlled by changes to the screen size.

Of the two forms, responsive design is the more popular and certainly better known about outside the world of web design itself, so much infact that responsive design has become something of a byword for mobile friendly websites.

Adaptive Web Design

Like it’s cousin responsive design, adaptive design seeks to create a user experience that will remain positive regardless of the screen size but it goes about it in a fundamentally different way. Rather than changing fluidly to fit the screen size presented, adaptive design relies on different layouts set specifically for the device in use at that time. Therefore, a certain screen size of a laptop, an iPhone, an Android phone or a desktop computer will all have a website size that loads accordingly.

Huffington Post writer Garrett Goodman wrote an article about adaptive design in 2013 in which he summed up the process by describing it as a ‘server-side’ approach. He went on to explain that the server hosting the website would detect that you are accessing their website via a particular mobile phone or tablet and provide the website for you specifically based on that devices screen dimensions and any other features. In the same article he also applied the same descriptive approach to responsive design by referring to it as ‘client-side’ with the browser reacting to the user changing screen dimensions. Nicely put.

Example of Teapot website - desktop

Adaptive or Responsive?

The question therefore is which is better or another way of putting it, which should you use? One-way of looking at it is to think about whether you’re website is intended for mainly smaller screens – tablets and mobile – or it is to be accessed more generally.

Adaptive is worth considering if the majority of your users are accessing the site via a particular device as you can then optimize it accordingly. Another thing to think about is functionality and content. Adaptive allows individual devices to present the website layout in a unique fashion. Heavy investment in complex content can therefore be backed up with a tailored approach.

Responsive design will deliver a user experience that suits the majority of websites and their users and if you need a mobile first approach then adaptive would be the better of the two. Easier to build and maintain and more robust particularly if the site will be managed by the client rather than a dedicated team of experts.

Example of Teapot website - mobile

Time and complexity comes into the mix and this interprets directly into cost. Budget wise, if you’re prepared to spend more and are seeking the ultimate user experience possible then perhaps adaptive is for you but it could be argued that unless there is a specific need to go adaptive, responsive is the way forward as it hits all the bases.

What Do We Do?

At Teapot Creative we build all of our sites to be responsive and test them rigorously using different sized devices to ensure that they load efficiently and are robust and user friendly. In a sense this is taking ideas from the adaptive school and applying them to responsive and is a practical response to the web design evolution.

If you’re curious to see what these sites look like on different sized devices then you can find 38 websites in the Teapot Creative online portfolio.







About Alex

A former Teapot Apprentice. I handle a lot of the hosting, server management and site setup for our developers as well as building websites. It’s great to be a part of the team offering a great service here at Teapot. I love tea and I’m also an avid gamer.

Give us a call on 01460 281865 or email us to see how we can help you!