The number of smartphone users is constantly increasing around the globe. According to Trinity Digital marketing, there are 1.2 Billion people accessing the web from their mobile devices (1). The number will continue to grow in the future. It is important to know the difference between responsive and adaptive design when optimizing your site for mobile. In this post, I’m going to give an explanation of the responsive and adaptive design.
What’s the Difference?
Responsive vs Adaptive Design (2)
The term responsive design (RWD) was firstly put by the web designer and developer Ethan Marcotte in his book responsive web design. Responsive designs respond to changes in browser width by adjusting the placement of design elements to fit in the available space. (3)
In other words, when you open a responsive site on desktop and then change the size of the browser window, the site will check for the available space and then arrange the content in the best way possible. Responsive design technology relies on:
- Media queries.
- Fluid grids.
- Flexible images.
The term Adaptive design (AWD) was firstly put by the web designer Aaron Gustafson in his book, Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. (4)
Adaptive design is built on the use of static breakpoints. Where Adaptive site works to detect the screen size and load the appropriate layout for it. Generally, in adaptive design you would develop an adaptive site for the six common screen widths: (320, 480, 760, 960, 1200, and 1600 pixels).
How to tell if a website is responsive or adaptive?
Well, the easiest way to tell if a site is responsive or adaptive is to start resizing your browser. If the site continuously reflows: it’s responsive. If the site stays the same and then jumps to different layout at a certain point: it’s adaptive.
Responsive on top, Adaptive on bottom (5)
Choosing Between Responsive and Adaptive Design
The decision of choosing between a responsive and an adaptive design approach takes into careful consideration the company strategy, cost, budget, etc. Whether you have an existing website you are working with or you’re starting from scratch will also be a factor.
Below are the pros and cons of both responsive and adaptive design:
Adaptive Websites Examples
Responsive Websites Examples
Interaction Design Foundation