Many have tried to explain the differences between Responsive Web Design (RWD) and Adaptive Web Design (AWD). A better focus is defining when to use either method. With this focus, the first questions are around your goals. What are you trying to accomplish? Who are the users and what are their needs?
Your goals may fall into one of two categories: creating a brand new web experience for all types of users, or updating a current web experience to account for more types of users. The latter group may be looking to extend their existing website to mobile users, while the former group may be completely rebuilding their website. For both groups, it’s important to understand how both RWD and AWD can be useful in achieving your goals.
Responsive Web Design
Responsive Web Design uses a fluid grid, flexible media, breakpoints, and media queries to design a layout and build a page that shifts fluidly, responding to its environment. This equates to having one inclusive site that meets everyone’s needs. Spotify and Chobani have both done a good job at this. As more devices continue to be introduced, sites like these aim to support any and all screen sizes that come into play.
This method does require more up-front content strategy, as your considerations revolve around content and the users that will ultimately consume it – what is the most important content? What should all users be seeing? Designers should work to maintain the experience across all screen sizes. Luckily, the single design at the core of every responsive layout is one step closer to that consistent user experience.
RWD utilizes a single codebase as well, relying on HTML, CSS, and Javascript to position and serve the right level of content and media to the right screen size as fluidly as possible. While more code is required to optimize for all users, it allows for some features or media to be hidden on smaller screens. This solves for a great visual experience, but keep in mind that hidden features and media still load in the background. The hidden content may cause extended page load times, so a solid content strategy may help mitigate this issue.
Progressive enhancement (PE) can also be helpful. Some consider PE to be another form of RWD; while they have a similar emphasis on content, PE is simply another strategy to employ alongside RWD. PE introduces more features and enhancements to the user experience progressively, based on the user’s device and internet connection. This works well in conjunction with RWD’s fluid layout changes that are based on screen size. Together, RWD and PE have the potential to truly cater to the individual user’s needs.
Adaptive Web Design
Adaptive Web Design uses specific breakpoints to create individual layouts that cater to the most common screen sizes. Amazon is a great example to reference. While there’s more upfront work in sites like this, the time is spent tailoring multiple experiences with the goal of an optimal experience for all users. Knowing that multiple designs will be created, it’s important to factor in time for version control with future updates and maintenance. It’s also worth noting there won’t be as fluid of a transition between versions for breakpoints that aren’t designed, and the experience between screen sizes isn’t strongly considered. As more devices are introduced into the market, it will be essential to have a strategy in place to accommodate for new screen sizes.
For this approach, knowing your user base and what devices they use should directly inform what screen sizes are designed for. Content strategy is also important – keep a close eye on all versions of the site to ensure consistency in content hierarchy and user experience. That said, this method of web design adapts the experience for each screen size. Server-side device detection recognizes the users’ devices and serves up the version of the site that’s most appropriate for the device. While designing, building, and maintaining multiple versions of a site can take more time, the end product is an experience that’s customized for your users.
Progressive enhancement is almost innate in AWD; both focus on serving only the necessary content and features to each device for a tailored experience. PE acts as the guiding content strategy while AWD is the executional design method. These two practices naturally work together, making for a solid user-focused product.
Using Responsive and Adaptive Together
Considering the commonalities between these two methods of web design, it’s no surprise that they’re compared so often. However, there are ways these can be used together. The goal in working with both types of web design is to design layouts that are responsive in nature, while coding to allow for different media to be served based on screen size detected. RESS, or responsive web design with server-side components, serves as a method to integrate these two practices. RESS combines the fluidity of design with server-side device detection to deliver an experience that is optimized for any device and any screen size.
Final Takeaways
Both RWD and AWD aim to provide the best user experience through different technologies. At times, they can even work together to deliver a well-thought-out product. Understanding your user base and keeping your goals in mind will help to determine which of these design practices will work best for you.