Responsive vs Adaptive Design

Introduction

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?             

2-Responsive vs Adaptive Design

Responsive vs Adaptive Design (2)

Responsive Design:

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.

Adaptive Design:

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.

5-rwd-vs-adapt-example

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:

Responsive Design

Screen Shot 2018-02-16 at 11.04.27

Adaptive Design

Screen Shot 2018-02-16 at 11.04.32

References:

1-     http://resources.mobify.com/50-mobile-commerce-stats.html

2-     https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design

3-     https://alistapart.com/article/responsive-web-design

4-     https://adaptivewebdesign.info/

5-     https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

Further reading:

Adaptive Websites Examples

https://www.mockplus.com/blog/post/adaptive-web-design-examples

Responsive Websites Examples

https://responsivedesign.is/examples/

Youtube Video

https://www.youtube.com/watch?v=IgojC1D3QpU&t=14s

Interaction Design Foundation

https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s