Responsive vs. Adaptive vs. Fluid Design
The world of web design has changed quite a bit over the years and continues to evolve as mobile-friendly design becomes more of the rule rather than the exception. When it comes to choosing the right layout for your website, there are a number of factors to keep in mind including style, typography, imagery, user experience, performance and online ranking just to name a few.
It used to be that sites were built with fixed dimensions — that were meant to be viewed on a desktop screen only. Now there are variations based off this original idea to make room for the influx of mobile users. Your users are demanding to view your site — not only on a computer screen — but on a tablet or a mobile phone. As a result, three popular considerations for web page layout are: responsive, adaptive, and fluid design. While each of these web designs has similar features, they each have their sets of pros and cons.
Defining The Different Types of Design Types
Responsive: websites are built with media queries that target more general break points that scale images, wrap text and adjust layout accordingly. This is my prefered strategy when building websites.
Adaptive: websites are built with media queries that target specific device sizes (e.g. iPhone, iPad, Android, etc). One of the problems with an adaptive layout, is that as new devices get introduced your code will need to be updated. Which isn’t ideal.
Fluid: websites are built using percentages for widths. The concept of fluid design was being used way before Ethon Marcotte coined the term “responsive design.” It’s pretty safe to say, that fluid design evolved into responsive design.
Fixed: websites are built using fixed pixel widths. While a design with fixed dimensions can sometimes be the quickest way to get up and running, it’ll provide a less user friendly across multiple devices.
Diving in: Responsive vs. Adaptive Design
Responsive web design (RWD) is what is recommended and rewarded by Google. The search engine continues to change its algorithm to include the growing number of mobile users and take into consideration how a mobile-friendly site should and does rank higher than those that are not responsive. A responsive design can help ensure that your website provides both a good user experience and adequate load time when viewing on a phone, tablet, or other mobile devices.
However, many web designers and developers have debated whether adaptive web design (AWD) edges out responsive, especially for older sites that already have a strong domain and web history. Think about it: it wasn’t that long ago that we designed solely for desktop. As new mobile devices are created and different screen widths and resolutions become a factor, it’s important to be able to go back and make an existing site mobile-friendly rather than starting over from the beginning. Adaptive design allows for this.
AWD uses a series of static layouts and detects the screen size to load the layout to fit however it’s being viewed. Typically, there are six common screen widths that cover the different ways that a user might view a website. Although creating multiple widths for the design of one website might seem like extra work, in some cases, in can be better for the overall performance and display.
The benefits of an adaptive site is that you can measure which views and resolution options are performing best and alter design and development for the sizes that are getting the most online traffic. For example, if your site drives the majority of its traffic through desktop, than you’ll want to make sure that you’ve addressed all constraints such as site speed, usability, aesthetics, and media load time (when applicable) that a desktop user might experience. You can still add views for different types of mobile devices, but with adaptive design, efforts can be based on what is top priority.
Alternatively, the benefits of responsive design are that it takes far less work to build and maintain. It’s applicable for all screen sizes and will adjust accordingly. While responsive design is fluid and will adapt to the screen no matter what device you’re viewing the website on, this type of design is far more complex and can create issues depending on the amount of content and media on the site. This may slow load time and ultimately, hinders the user experience.
The designer must keep in mind the widths of images and different features that will appear differently when automatically “resized” as a person changes their view from mobile to tablet to desktop. In each case, it’s important to perform testing and QA on multiple devices. For new sites, responsive would be the easiest way to go, but for sites that already have a desktop build, adaptive would most likely be a better option due to its ability to retrofit.
How Fluid Design Compares
A third option is a fluid design, which has the same adaptability as both a responsive site and an adaptive site. Fluid design doesn’t use fixed units, as with static sites, but rather uses the same percentage of space no matter what screen you’re viewing the site on. It’s able to fill the width of a page, but this can create challenges depending on the size of the browser.
Say for instance you’re viewing a multi-column web layout on a smaller screen, like a mobile phone or a tablet, the content may seem to be crowded within the page. Or, on the opposite end of the spectrum, if you’re viewing on a large desktop or a smart TV for a presentation, the content can look stretched. The styles and features of a website will affect fluid design and may affect the amount of whitespace seen depending on what size screen you’re viewing the website on.
The benefits of fluid design are that it’s user-friendly because it adjusts to whatever device the viewer is looking at, same as responsive design. It’s definitely an improvement over a static design; although some designers might still argue that it doesn’t allow for as much control.
What to Consider When Choosing a Website Design
With so many similarities between these three types of design, how do you know which is best? In today’s business world, a person’s website might be the first point of contact that a consumer has with your product, business, and/or brand. This means that if the user experience is poor, it doesn’t leave a good impression to continue the business-to-consumer relationship. That’s why when deciding on which design is the best fit, your audience is the most important factor. Who’s viewing your site? Who do you want to view your site? And, what kind of device are they viewing your site on? These are some of the questions that you and your team need to analyze and then strategize for when developing a new site or altering your current one.
This information can be found through Google Analytics or even through basic focus group testing. If your analytics show a high bounce rate, your site might be loading too slowly, may not be aesthetically pleasing, or it may not have resized to their screen size. This way you can see which areas cause a person to leave your site.
The second thing to consider is whether you will be building a brand new site or working with an existing site. Most new sites are being built with responsive design, which is advantageous, again because of the increase in mobile traffic. Older sites can still transition to mobile, but may best do so by choosing an adaptive design.
Third, it’s a good idea to project your goals. The time it takes to launch or re-launch a website depends on the amount of design time and optimization necessary to make your site fully functional across all mediums. It also requires the strength of a good development team who can code accordingly and across multiple layouts.
Then, of course, there’s the importance of considering how a site design will affect your search engine optimization goals. How much content will you be placing on the home page? How will the navigation be designed to benefit user experience? What resolution do images need to be? Will there be video?
No matter which design you choose, know that every designer will have a slightly different take on why responsive is better than adaptive or why fluid is equal to either of the two. The key goals to keep in mind are: desired functionality, adaptability to mobile, and the overall user experience.
