Responsive vs. Adaptive Web Design

As Internet use has leaped onto a multitude of devices from desktops to mobiles to tablets, web design has had to change too. The two most popular ways to be functional across all screen sizes, a responsive or adaptive website... what's the difference?

Responsive

Responsive websites change through the use of percentages and fluid grids to adapt its layout to the viewing device. Therefore a responsive website would shrink and stretch its percentages based on the screen it was displayed on. 

Adaptive

Adaptive websites change based on predetermined sizes of the relevant device, so you will have a differently designed desktop sized website to your mobile sized website. This option enables you to change your content for your mobile website, making it more simple, scan-able and engaging for the small mobile screen.

So what are the key differences: 

Unique

Most responsive websites are through open sourced systems such as WordPress and Joomla, therefore they are template websites. Templates limit your ability to be unique, as adaptive sites can be made easily from scratch. 

Usable

In Australia, Smart phone users turn on their Google Search function on average 12 times a day.  And as a result 80% of Australians say they now access the Internet more often but in shorter bursts and are after specific information faster.

Adaptive websites are adapted to meet the demands of the users, enabling you to change the layout, images and content displayed from desktop to mobile. For example desktop websites are most appealing with multiple headings and long banner images, while mobile websites are best with dot points, several square images, less content and different 'Calls to Action'. In comparison a responsive website has a lot more content and images so often is slower to load, but as it has the same content across all screens, pages with a heavy load of content which it adjusts as determined by the screen size, but unfortunately it is not mobile user friendly. 

Updateable 

The biggest challenge with responsive websites is that as they are a template, this means they can be easily broken by viewers and do not offer as much control. While adaptive websites can be easily edited, updated and changed from screen to screen. 

Both methods take work, responsive requires a little more in the way of coding in order to ensure that the website fits every screen that access it. However, adaptive design requires that you develop and maintain separate HTML and CSS code for each layout and size.  Yet these are nothing for you to worry about, as both of these challenges are managed by your web developer.

Google

Google rates both Responsive and Adaptive the same with their recent adjustment to their mobile search algorithm, where they will rank sites higher that comply to their criteria for the sake of the end user.

Bloomtools 

For usability, ease of update and effectiveness, Bloomtools has chosen to direct most of our clients down the adaptive path because we can create a completely different designed website for the mobile, giving our client the ability to change out content on these pages to suit the usability of the device and increase their results.  Yet the reality is most users do not really care (or know) which method you are using. As long as your website is functional, usable, they can find what they are looking for and is clear on any sized screen you are doing it right.  NB/For those clients who a responsive design suits best, we can accommodate that too.

If you want to discuss this any further, talk to your local Bloomtools Consultant .