Responsive and Adaptive Web Design

What is Responsive Design?

When we hear the term “responsive” or hear someone mention that a website is “responsive”, we automatically think that it means the site is built for a mobile device. While that notion isn’t untrue, it is actually a little bigger than that. To have a responsive website means that your site’s content is accessible on any device — regardless of size.

Responsive design is fluid.

What is Adaptive Design?

Often you will hear responsive design and adaptive design interchangeably. However, these terms do not hold the same meaning. Adaptive design is the process of defining the breakpoints in your design to fit a specific screen size.

The adaptive design concept became relevant when mobile devices and tablets first hit the market. Initially, there were only a few different screen sizes to contend with and so adaptive design principles were put into place to solve the issue of trying to access the web from these devices. Instead of having a streamlined experience delivered to the end-user as with responsive design, adaptive design delivers different experiences based on the size of the screen.

Which is better? Responsive vs Adaptive

Google recommends responsive web design  over adaptive design as the html is exactly the same on the desktop version of the site as it is on the mobile version. This comes full circle with the earlier point about responsive design being accessible across any device, regardless of screen size.

What are some of the Primary Keys to Responsive Web Design?

  • Responsive design is fluid and the grid is based on relative sizing (ex: using percentages to define width instead of pixels)
  • Images & Video scale as width changes
  • Considers mobile visitors first. An example of this is by making sure to hide any unnecessary desktop design elements that might get in the way of the content
  • Content should adapt to screen size