Adaptive vs. Responsive Design by Mads Soegaard (interaction-design.org)
In lecture 7 we looked at Responsive Web Design and since then I have done a good bit of my own research into response and adaptive web design approaches to understand how they work better. This is an article that I came across that I found to be very helpful on this topic.
The URL Link To The Article:
https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design
I found this to be a really interesting article by the Interaction Design Foundation where they explain the differences between responsive and adaptive approaches to web and app design.
Presently, mobile devices appear to be the device of choice for viewing content online as such a mobile first approach, through responsive and/or adaptive design seems to be the way forward.
This article is really helpful and informative in explaining the benefits and differences between using each approach.
From reading it, I learned that the term responsive design was first coined by a web developer called Ethan Marcotte in his book, Responsive Web Design.
With responsive design the design responds to changes in a browser’s width by adjusting the placement of the website’s design elements to make them fit into the available space.
A responsive website shows content based on the browser space that is available. For example, if you open up a responsive website on a desktop or a laptop and then you manually change the size of the browser window the content of the webpage will move, arranging itself optimally to fit the content within that altered browser window.
From reading the article I learned that this process is automatic with mobile phones. The website will check for what space is available and then it will present itself in an ideal arrangement for that space. Responsive design is said to be fluid as the content adjusts to the screen size in which the website is displayed.
Now to adaptive web design. Adaptive web design was introduced as a concept by a web designer called Aaron Gustafson in a book that he wrote called, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement.
While responsive web design relies on changing the pattern of design to fit the space available, adaptive design on the other hand uses multiple fixed layout sizes.
So with adaptive design, the website will detect the available space, for example, detecting whether it is on a mobile or a tablet, then it will select the layout that is most appropriate for that screen size.
If you open your browser on a desktop screen the website will choose the best layout for that screen such that resizing the browser will have no impact on the design.
For example, the layout that would be displayed on a mobile website using an adaptive design approach might be different from the desktop version. In such a case the designers would pick a different layout for a mobile phone screen rather than leaving the design to rearrange itself as would happen with the a responsive design approach.
