Servage Magazine

When building a website today there is almost no question about if it should be made responsive or not. It makes sense to adapt websites to the device they are being used on, and thereby improve the user’s experience significantly. However, as soon as you begin discussing how you want to adapt the site to different devices and how that responsiveness should actually be implemented, then you run into some general decisions you need to make.

Now, responsive and adaptable are different things. It is important to understand the difference because it makes you able to consciously choose the method that is best for your given scenario. Note that responsive and adaptable are both covering the principle of optimizing a website for multiple devices, and therefore chosing either one of the two methods will make your users happy. However, the final touches, the little details, is what the distinction between responsive and adaptable is all about.

Responsive design

The term responsive design today often covers both methods. When people say that a website should be responsible they often do not know that a difference exists. Especially if you handle non-design aware clients, you may want to point out to them that there is a difference. Fortunately it is easy to explain.

Responsive means that the site responds to changes in the user’s viewport. That is usually due to different screen sizes or device orientation, but could also be the user resizing the window. Either way, responsive design will change itself live while experiencing the change in the viewport, and essentially be adapting itself to the viewport in a stepless way.

Adaptable design

The term adaptable design covers a method where the best possible sizing for a given viewport is determined and used. This type of design does not respond to changes in viewport by stepless resizing. It will monitor specific minimum and maximum sizing values, and the switch between different layout forms and sizes. Users will experience that the design “snaps” to a different size in “steps”, rather than being a dynamic and scaling responsive solution.

Pros and cons of the methods

The distinguishing factor is obviously the ability of truly responsive design to take any size, whereas adaptable design can take a series of predefined sizes. The advantage of responsiveness is that it will have the perfect size for any viewport. The disadvantage is that you cannot ever test any possible scenario, so users are more likely to experience unexpected behavior due to overlooked bugs etc. The advantage of adaptive design is the preset and testability of all layouts. There is no surprise. However, an undefined size may be better for some viewports which would be better off with the responsive version.

The decision is hard to make, but does not usually carry a great deal of importance. However, design decision makers should put more attention to this detail because it does have an impact on the design process and user experience afterwards. The decision matters, but implemented correctly you can get a great result with both of them. You find more views about this subject on e.g. THIS or THIS Page