Responsive vs Adaptive Web Development

Image for Responsive vs Adaptive Web Development

The concept of responsive web development (RWD) vs. adaptive web development (AWD) is blurred. I’m sure you could ask a handful of web developers and get a lot of different answers about what each one is—here’s my take on it.

The goal of RWD is to create a fluid layout that adapts to any screen resolution using the same stylesheet you would for desktop; less server calls = faster load times. AWD can be used in a couple ways, using the browser to detect a mobile device and serve up a special CSS file or use your normal CSS file and hard coding pixel values for widths and adjusting them via media queries.

RWD Way:

See the Pen Plain Vanilla Responsive Example by Intuitive Company (@intuitive) on CodePen.

AWD Hard Coded PX Values:

See the Pen Plain Vanilla Adaptive Example by Intuitive Company (@intuitive) on CodePen.

As you can see, the RWD way uses a lot less code, and will adjust to any screen size without needing media query breakpoints to adjust the width of the main content. If you don’t adjust the width of the main content at different resolutions when using pixels, the content will go off the screen and have to be scrolled to which isn’t ideal.

Fresh Out Of School
When I graduated from Philadelphia University in 2012, I used AWD because it seemed easier to me and media queries were beginning to gain traction. However, since then, fluid web development has become more popular and is easier to understand than AWD in my opinion.

How IC Does It
Here at Intuitive Company, even if the site we are developing isn’t required to work on mobile or be fluid, we code using percentages for a couple of reasons: The math is simplified when laying elements out next to each other in multiple columns. As long as the total width of elements next to each other total 100% with margins, padding, borders, etc. everything will be on screen and scale. Now the elements look nice on any resolution. We take advantage of both AWD and RWD in the following way:

The Hybrid Approach:

See the Pen Responsive and Adaptive Example by Intuitive Company (@intuitive) on CodePen.

The above code utilizes AWD and RWD because it’s using percentages to be fluid on all screens, but adjusts that fluid percentage to take up more space on a mobile device since the screen is smaller.

RWD to Support All Resolutions
Learning to code using percentages is one of the best things to pick up when developing a website. With all the different screen sizes out there you would be spending a lot of time making media queries for 1024×768, 800×600, 1280×800, and so on. Coding with percentages takes a lot of the headache out.

RWD + AWD
In the end it doesn’t have to be AWD or RWD, the goal should be to use AWD and RWD together to achieve the best user experience. We try and create a very fluid layout using percentages and adjust those percentages via media queries.

BONUS:

See the Pen Responsive with Min and Max Widths by Intuitive Company (@intuitive) on CodePen.

About the Author

Image of Matt Lewis

Matt Lewis

UX Developer

As a developer with a background in design, Matt is another "double threat" on our team. More