The world of web design has changed quite a bit over the years. As it continues to evolve, mobile-friendly design has become the rule rather than the exception. When it comes to choosing the right mobile-friendly layout for your website, there are a number of factors to keep in mind.
Websites used to be built with fixed dimensions . You could look at them on a smaller screen, but they were really only meant to be viewed on a desktop screen. These days website visitors need to be able to access to a functional (and, ideally, beautiful) version of your site on whatever device they have within reach. As a result, three web design options have been developed: responsive, adaptive, and fluid design. While these web design styles have similar features, they each have unique pros and cons that can help you decide which is right for your next website or website redesign.
Some Definitions
CSS breakpoints: The various widths at which a website “breaks” into different responsive views. In this example below you can see four different breakpoints for the Pack site. Breakpoints are made using a media query in CSS.
Responsive Website Design (RWD): Websites that are built with responsive design use media queries to target breakpoints that scale images, wrap text and adjust layout so that the website can ‘shrink to fit’ any size of screen.
Adaptive Website Design (AWD): Websites that are built with adaptive design use CSS media queries to identify specific device sizes (e.g., iPhone, iPad, Android, etc.) and deliver a version of the website optimized for that screen. One of the problems with an adaptive layout is that you need to update your code whenever a new device is released, which isn’t ideal.
Fluid Website Design: Websites that are built with fluid design use percentages for widths.
Fixed Design: Websites that are built using fixed design rely on 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.
Responsive Design vs. Adaptive Design
Responsive web design
Responsive web design (RWD) is recommended and rewarded by Google. Google continues to change its algorithm to embrace more of the growing number of mobile users, so they take how mobile-friendly a website is into consideration when determining search engine rankings. If your website isn’t built with RWD, it may end up at the bottom of the pile. Beyond rankings, responsive design can result in higher profits by helping to ensure that your website provides a good user experience that makes someone want to be there.
However, many web designers and developers have debated whether AWD is actually a better option than RWD, especially for older sites that already have a strong domain and web history, but need to refresh their look. Instead of having to completely overhaul a site, which can frustrate consumers who are used to a certain look and feel, AWD allows for a more mobile-friendly site without the awkward transition period.
Adaptive Web Design
AWD detects the screen size and then pulls the appropriate static layout from a programmed library of options. There are six common screen widths that cover most of the ways that a user might view a website, so all AWD websites should have at least these six options. Although creating multiple widths for the design of one website might seem like extra work, it can be better for the overall website performance.
The benefits of an AWD site are that you can measure which views and resolution options are performing best and then alter the design and development for the sizes that are getting the most traffic. For example, if your site drives the majority of its traffic through desktop, you’ll want to optimize the site speed, usability, aesthetics, and media load time (when applicable) for that user experience. With adaptive design you can save money and time by focusing your efforts on your top priorities.
For new sites, RWD is generally the easiest way to go. For sites that already have a desktop build, adaptive would most likely be a better option due to its ability to retrofit. Whatever design style is right for you, it’s important to perform testing and quality assurance (aka. QA testing) on multiple devices before, during, and after launch.
How Fluid Design Compares
A third option is a fluid design. Fluid design has the same adaptability as responsive and adaptive sites, but fluid design doesn’t use the fixed units that they rely on. Instead, it uses the same percentage of space no matter what screen you’re viewing the site on. Because of this, it is always able to fill the width of a page. This can make it feel organic when a consumer moves from one device to another. However, it can also create challenges depending on the size of the browser.
For instance, say you’re viewing a multi-column web layout on a smaller screen, like a mobile phone or a tablet. The content may look crowded and become difficult to read. On the opposite end of the spectrum, if you’re viewing the website on a large desktop or a smart TV, the content can look stretched. The styles and features of a website will affect fluid design, including how the amount of whitespace will depend on the size of the screen you’re viewing the website on.
The benefits of fluid design are that it’s user-friendly. It adjusts to whatever device the viewer is looking at, same as responsive design.
Which Web Design Style Should You Pick?
With so many similarities between these three types of design, how do you know which is best? A company’s website is often the first point of contact that a potential consumer has with your product, business, or brand. If the user experience is poor, it can mean lost income and bad feedback. That’s why the most important factor when deciding on which design is the best fit for you is your audience. Who is viewing your site? Who do you want to view your site who isn’t already? And, what kind of device are they viewing your site on?
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 fit the users’ screen. By pinpointing these pain points you will be able to identify what exactly you need to address, and then determine which design style will help you the most in doing so.
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 made with responsive design automatically. Older sites can still transition to mobile, but updating the design will always improve user experience .
Third, it’s a good idea to clarify your goals. The time it takes to launch or re-launch a website depends on your financial resources and your human resources (aka your team). It’s important to create a plan of action that delivers the best possible outcome within your resource limits.
Conclusion
No matter which design you choose, every designer will have a slightly different take on responsive versus adaptive design, or even why fluid is equal to both of them. Whichever you decide, the principal goals to keep in mind are desired functionality, adaptability to mobile, and the overall user experience. Learn more about responsive design with our responsive design video and tutorial, or by joining our responsive design online course.
