Back in the days of Geocities, we only had the run-of-the-mill 4:3 CRT monitors to browse through websites. With the advent of mobile devices and widescreen monitors, web designers and developers had to take into account aspect ratio when creating their websites, and now we can point to two different approaches to web design; “Responsive design” and “adaptive design.”
But what is the difference between responsive and adaptive design? Responsive design essentially adjusts the layout of the different elements of the website to the viewport’s size and orientation. Adaptive design, on the other hand, recognizes the screen’s size and loads a static layout handcrafted specifically for it.
Stick around as we ponder upon this and other distinctions between responsive and adaptive design, as well as their pros and cons.
Responsive and Adaptive Design: Understanding the Nuances
Both responsive and adaptive design pursue the same objective – to wit, to make webpages usable across different devices and to ensure consistency in user experience. Nevertheless, both methods carry several advantages and disadvantages.
Let’s first understand what each method consists of:
Responsive Design
As hinted at earlier, responsive design is that by which the same elements in a website fluidly rearrange themselves to fit a viewport. Ethan Marcotte first utilized the term “responsive” in 2010 to describe how this process generally works.
Technically speaking, these “fluid” elements are written in CSS (Cascading Style Sheets) and “respond” via media queries to change styles.
CSS essentially creates different styles, each of which is tailored in a specific way. You can gauge certain parameters of each (e.g., color, dimensions, spacing, font, animations, etc.), and you can recall a .css file to change the look of an entire webpage or section without having to write down a laundry list of HTML tags.
Adaptive Design
Adaptive design does not rearrange fluidly as responsive design does. Rather, it loads a different layout with a series of baked-in elements positioned manually by the designer.
A web design can be usually adapted to the following dimensions:
- 320px
- 480px
- 760px
- 960px
- 1200px
- 1600px
Pros and Cons
Let’s now go over the pros and cons of each design approach:
Pros and Cons of Responsive Design
Pros:
- Its most obvious advantage is that the UX designer doesn’t have to redesign a website from scratch.
- Websites in responsive design are easier to maintain and make compatible with all viewports, including those that were not extant at the time the website was created and published.
Cons:
- UX designers must introduce more coding.
- It may not be possible to ensure that absolutely all viewports offer the same user experience.
Pros and Cons of Adaptive Design
Pros:
- UX designers have far more control over what is displayed in each screen size and can optimize a webpage more effectively.
- The websites don’t need to recall additional instructions and, thus, can load faster.
Cons:
- The designer must create separate websites catered to distinct sizes.
- In that same vein, the website won’t format correctly to screen sizes it wasn’t designed for.