Responsive VS Adaptive Design
Both adaptive and responsive design are very similar in the way that they both adjust the user interface depending on the screen size. However, the way that each of them achieve this is what makes them different.
Responsive design will change the appearance of the content based on the viewport of the browser. Width is typically the factor chosen that determines what is changed and effects the elements on the page.
A responsive website is fluid and will adjust to the viewport no matter the size of the browser/screen. This is because it uses percentage-based CSS rules to change elements based on the device size.
So, whether the browser is sized to 200px or 20,000px, the page elements will consistently change to the specified proportion. This ensures the page will always look good.
The benefits of this method are endless. The most significant advantage is that the code does not need to change for each and every screen type.
While this may be a more difficult result to achieve, considering there needs to be a design for almost an infinite amount of screen sizes. Despite this, the result is cleaner code and great adaptability.
An adaptive site will also adjust the page layout depending on the width of the browser, but it does it in a different way.
It will use multiple versions of the same design. One design for mobile, one for desktop, one for tablets and so on. This is done using ‘Anchor points’. These are points at which the design will change. So if the CSS states that at 320px the layout changes, it will do so between 0-320px, unless rules have been put in place for any width less than 320px.
Generally, there are 6 screen widths that a design will be made for, to cater for the smallest mobile to the largest moniter/TV. These sizes are 320px, 480px, 760px, 960px, 1200px, and 1600px.
Similarly to responsive design, this process can be complex. The designers need to design the same page six or more times in a different way. And when you think of how many page a website consists of, you can imagine how repetitive this process would become.
Which Should You Choose For Your Site?
Responsive design give you a future proof design. 16:9 is the most common aspect ratio. With the speed that technology is advancing, if that changes, then your site will still adapt to the screen size.
For example, smart watches have become extremely popular in the last few years. Even though they don’t support websites now, they may do in the next few years. It is very unlikely that any websites will have a design made for a screen no more than a few inches.