Adaptive Vs Responsive Web Design

Posted on 15 December 2017

What is adaptive design? What is responsive design? Both of these methods can be used to build a website that works on both your laptop and your smart phone. There may even be times when both can work together but either way the end result should be pretty similar. Especially as far as the end user and the search engines are concerned. Today we’re going to go through adaptive and responsive design and what the differences are between the two different ways of making your site cross-device friendly.

Adaptive Design

Adaptive design is when the server-side code (PHP, .NET, Classic ASP, JSP and so on…) detect what device you’re using and what it needs to send over; such as a “hamburger menu” instead of your usual horizontal navigation bar,  a piece of text that says “Hello smart phone user” or even sending a completely different set of files than what your desktop visitors receive. No matter what it does it works like this

1. User request the page
2. The server detects what the users device is.
3. The server then goes through the server side code.
4. It hits a rule (If the device is a phone then DO NOT SEND xyz)
5. The user gets only gets sent what ever data is available after any rules have been processed

The reasons why this is beneficial is because the user doesn’t receive a different version of the website for every device it has been built for because the server has decided what it is going to send before it has been sent. It does however mean that if you were on a desktop or a laptop and tried to scale down your screen size it may not give you the mobile version which may be more fitting if you’re having to scroll left and right as well as up and down to read someone’s website. You don’t have to worry about older mobile devices so much with adaptive design either as their only going to process what they would normally because all the work of which version of the site they need to display is down to the server. Adaptive design is an older technology but one that is highly useful and has some very big advantages although it would be more expensive to implement as the work involved in adaptive design over responsive definitely adds up. The reason behind this is because the work is a lot more involved and a lot more testing should be undertaken in different viewport sizes and on different devices or at least an emulation.

Responsive Design

Responsive design is different  to adaptive design because instead of using server-side code to work out what device a user is on it simply adjusts the website to the size of it’s window. It’s responsive to the size of the window. The benefits of using responsive design is that it is quicker to implement, It doesn’t need any back end code to work as this is all done from the users device instead and it’s usually a lot cheaper to implement too. The drawbacks of using responsive design over adaptive design is that you don’t get as greater compatibility with older browsers and devices (You’re out of luck if your visitors and using Blackberry Smartphones) and the page load time may be longer because of the server passing over all information for different screen sizes to let the users device sort out. If you’re starting out with website design though, do not be put off by these negatives. Responsive design is a new ..ish method of  implementing a website on cross devices and it is a very quick effective approach at getting the job done.

How We Do It

We know that in different scenarios responsive and adaptive design have advantages and disadvantages which outweigh each other and that is why we may use both on some websites we build. We do this because it ends up saving the client money, the end product is something that is compatible, efficient and easy to manage especially when it comes to making a minor change between 300px and 400px, You might say adaptive design would save the strain on the device but it wouldn’t be effective because the chances of the device wanting the same data just with some minor changes to the way it is displayed are very high.

If you want to find out more information about how we can implement adaptive and responsive design on your website, please get in touch with us today.