Understanding the Difference Between Responsive and Adaptive Web Design

Is your business website adaptive? Or is it responsive? Between the two, which is the more effective design style for your business needs? This is a common question we are asked and as a top web design firm, we wanted to discuss the topic a bit. It is important to understand the difference between responsive and adaptive web design to ensure that your site will perform optimally and have the highest engagement and conversion rates possible to maximize online success. Both styles of design are useful for connecting with users on different sized screens which can lead to some confusion. While they do share similarities, there are also very clear differences.

What is Responsive Web Design?

Responsive web design (RWD) is a term created by designer Ethan Marcotte in 2010. The concept was later built on in his book titled Responsive Web Design in 2011. The basic idea is that responsive designs will “respond” to the changes in web browser width by adjusting the placement of various design elements to fit in whatever sized space is available.

This allows a website to be properly displayed on various screen sizes with content moving to fit optimally the size of the browser window. This is in comparison to Standalone Design where a user is forced to zoom in and out on smaller screens as the site was built for a standard desktop size. Responsive web design is rather obvious when viewed on a desktop and the browser window is resized; the page will fluidly adjust.

Flexible and fluid design styles were being employed earlier to adapt websites to an expanding desktop monitor market, however, RWD became more mainstream around 2014 when mobile access to the internet from phones and other small devices began to exceed desktop access.

What is Adaptive Web Design?

Adaptive web design (AWD) was conceptualized around the same time as RWD by web designer Aaron Gustafson and introduced to the public in his 2011 book, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. Yes, it is quite apparent that designers use extremely straightforward titles for their books!

AWD works by making use of multiple fixed layout sizes. The site detects the size of the web browser, by checking the available space, and then adapts by selecting the layout that best fits the screen. For example, if an AWD page is opened on a desktop, the site recognizes the available space and selects the closest fixed layout. Adjusting the size of the browser window will have no effect on the site’s appearance as the layout is fixed at this point.

This can cause sites to look noticeably different on various screen sizes if the designers opt to use a different layout on one screen size compared to another. Typically, with AWD there are six designs crafted based on the most common screen widths which are 320, 480, 760, 960, 1200, and 1600 pixels. Some designers include additional screen widths if the target demographic utilizes other screen sizes such as with tablets or netbooks.

Is One Better than the Other?

Both design methods are superior to the old “Standalone Design” which does not change when the screen size changes. However, between the two there are obvious Pros and Cons to each method.

Responsive Design – Pros

• The design is uniform across all devices creating a better, more uniform user experience (UX) when switching between devices
• SEO friendly
• Numerous templates and styles can be incorporated
• Relatively easy to implement

Adaptive Design – Pros

• Allows the possibility of creating the best user experience (UX) for each individual screen size (device type)
• Automatically senses the user’s environment
• Allows for optimal advertisement placement based on screen size

Responsive Design – Cons

• Less screen size design control which commonly means designs are built for mobile first and then expand to fit desktops
• Elements can move around during the re-sizing outside of designers control
• Advertisement placement is not fixed
• Slightly slower load times on mobile devices

Adaptive Design – Cons

• Requires more time and energy to create
• Does not work as well on tablets and netbooks due to varying screen sizes
• Requires additional SEO work to ensure search engines recognize identical content on multiple layouts

The Bottom Line

The bottom line is that understanding the difference between responsive and adaptive web design is very important before creating a new website or re-designing a current one. Each option has very specific positive and negative aspects which should be considered in relation to the business goals and customer user personas which should include how customers connect with a website. The final choice should be the option which would provide the best user experience and conversion rate for a business.

Be sure to check back every week for great new Lounge Lizard blog articles.