As of 2018, consumers are more likely to visit a website from a mobile device than a laptop or desktop computer—meaning it’s been increasingly imperative for business owners to create a website that looks and works great across all devices and platforms. Two mobile-friendly strategies have risen to the challenge: Responsive and adaptive web design.
Responsive web design is a fluid approach whereby a page rearranges itself based on the detected screen size. Adaptive web design is a type of web design whereby the browser loads a layout created specifically for the given platform.
As you sit down to create a website, which mobile-friendly design strategy will work best for you? In this post, we’ll explore the differences between the two, as well as the pros and cons of each. We’ll also dive into design best practices to ensure your website provides a stellar experience for modern consumers.
Responsive vs. adaptive web design: What’s the difference?
For a website to succeed, it needs to be designed with all users in mind. Screen sizes, however, can vary from large corporate monitors to teeny-tiny smart watches, making it challenging to provide the same good UX design for a site on every device.
Both responsive and adaptive web design remove this obstacle, allowing designers to create great website experiences for every user. Let’s look at the key differences in how these design techniques accomplish this:
What is responsive web design?
Responsive web design enables a web page’s design and layout to automatically adapt to any screen size. The design technique uses CSS media queries (a tailored style sheet) to inspect the end user’s device characteristics. The website then renders itself accordingly.
Toyota's website exemplifies responsive design. Thanks to the fluid grid design, the homepage content flows into smaller screens with no issue. If you were to start with the mobile or desktop version of the site and slowly change the size of it, you would actually be able to see the design break and rearrange itself when the screen reached a certain percentage of the original.
The same content appears in the same order. However, some content has scaled up or down to best fit the new space. What’s more, some of the functionality has changed (like how the horizontal scroller works) based on which platform the visitor uses.
Responsive design entered the web design practice in 2010 when Ethan Marcotte introduced it at An Event Apart in Seattle. He explains what led him to name the new design approach:
“In the years leading up to the talk, I’d been working on more design projects that’d asked me to work on separate, standalone mobile websites. Heck, not even that: frequently, they’d ask for an ‘iPhone website.’ And something about that didn’t quite feel right to me. And it definitely didn’t feel sustainable — were we going to create separate websites for every new device that came along? Besides, I’d always been interested in creating layouts that were flexible and beautiful.”
Since then, this fluid web design technique has enabled consumers to do more with their smartphones. It’s also allowed businesses to reach more consumers, across more devices.
What is adaptive web design?
Adaptive web design enables a web page to load a static, pre-made layout based on the detected device. To make this happen, a designer must create different designs based on varying screen widths. The most common widths are (in pixels):
320
480
760
960
1200
1600
Apple has a good example of adaptive design, which requires a custom design for using the most common breakpoints. If this were a responsive design, the same content would probably appear on every visitors’ screen and in the same order—but adaptive designs aren’t dynamic.
The page’s structure is more or less identical, with the same number of sections. However, the content differs slightly between desktop and mobile—not so much in terms of text, but in its website imagery.
There’s nothing lost in terms of the user experience. In fact, adaptive design allows the designer to use imagery more precisely than if they were fitting everything from the desktop screen onto a mobile device.
Adaptive design was introduced by Aaron Gustafson, after responsive design. He wrote about it in his book Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement.
When he re-released the book in 2015, he had the following to say:
“The philosophy of progressive enhancement works and only continues to demonstrate its brilliance with each new Web-enabled screen that debuts in the ever-expanding global marketplace. In fact, I’ll go out on a limb and declare that progressive enhancement is probably even more relevant today than it was when I wrote Adaptive Web Design in 2010.”
Adaptive design has been permanently imprinted on the web design space, as companies increasingly want to control how their content appears on smartphones.
Responsive web design vs. adaptive web design: Which is better?
When it comes to mobile website design, there's no real winner in terms of technique. It depends on your needs, wants and resources. You can experience an effective design process from concept to production with website builders (like Wix) which create adaptive designs for the most commonly used devices. While web design platforms like Wix Studio run on responsive CSS powered by smooth drag & drop.
Let’s break down the pros and cons of each:
The pros and cons of responsive design
Pros:
Consistent content experience across all platforms
Works on new devices, even those with non-standard screen dimensions
Cons:
Less control over how the site renders on each device
Can hinder visual hierarchy if elements reflow in the wrong order or size
Requires more design expertise, cross-platform testing and design tweaks
Hinders website performance as dynamic content takes more work to load
The pros and cons of adaptive design
Pros:
Creates a perfectly-tailored experience for each platform and context
High performing, as the design is optimized for the target device
Easy to perfectly fit advertisements and other third-party integrated content
Cons:
Can negatively impact SEO if content inconsistent across all devices
Mobile-first web design
To get the best results from either of these mobile-friendly design strategies, it’s a good idea to take a mobile-first design approach—or creating your first design for the smallest screen size to avoid common mobile design issues.
10 things to consider when designing a versatile website
In web design, the trick in creating a stellar responsive or adaptive website is to focus on your site’s individual elements and consider how a site change may impact them.
Try to focus on including or optimizing these main components when planning out how to make a website mobile-friendly:
1. Header content
At first glance, the header can tell visitors a lot about a website:
What the brand is
What it offers
Which actions to take
How to search through all content
A desktop layout has plenty of room to display all this information on its website header. On mobile, less so—and your responsive or adaptive design needs to account for this.
Ask yourself which elements should be visible in your mobile website navigation. For example, a logo should be there for fostering strong and consistent brand identity. Other common items include a navigation menu, or if you’re building an eCommerce site, including a shopping cart icon.
2. Text legibility
Website text can be a tricky element to handle: You want it to look good and to reflect your brand’s style, but you have to make sure that your design choices don’t impact legibility.
When designing for different devices, you also have to consider that the size and style might not scale as the screen size moves up or down. Needless to say, it’s important to test this before you launch your site.
3. Hamburger icon
Navigation plays a critical role for every website, so it’s important to think about how users may interact with it differently based on their device. For starters, think about using a hamburger menu.
A hamburger menu refers to a three lined icon typically placed on the top right or left hand corner of a website. At this point, most people know what those stacked horizontal lines do, and trusted choice for navigating a mobile web design.
4. Navigation placement
The growing popularity of mobile apps has influenced the way website owners structure their mobile navigation. More than ever, we see designs going beyond the hamburger menu, which we’ve already recommended.
With a smaller set of top-level navigation links (no more than three or four), some brands will consider adding them to the bottom of the screen as a sticky horizontal menu, or within the website header. Another popular navigation method is creating a full-screen pop-up menu using a lightbox.
5. Sticky header
In adaptive design, you can keep your mobile pages relatively short. In responsive design, however, all the desktop content flows into the mobile web page unless otherwise modified.
If your mobile pages run long despite your best efforts, think about making the header sticky. This way, users can access your navigation at all times.
6. Visual hierarchy
A website’s visual hierarchy refers to the path a visitor’s eye follows on a page. Cluttered website layouts make it hard for visitors to know what details to focus on or where to go next, especially on a mobile site.
You can add headers and subheaders, image blocks, white space, navigation tools and more to web pages in order to:
Break up large amounts of content and complex subjects
Create a structure for information on a page
Ensure you have a well-balanced design
Establish relationships between different sections
You can account for this in adaptive design as you plot out the visual details for each version. In responsive design, you have to be careful as elements may resize or restyle as the screen scales down.
The best bet is to set global styles for desktop, tablet and mobile—ensuring the responsive restructuring process doesn’t interfere with your content’s integrity.
7. Page length
One last matter concerning your site’s content is its length. The navigation possibilities at hand may make a long page easier to scroll through on a mobile device—but when browsing on a phone, fewer scrolls will help as well.
With adaptive design, you can remove sections of text or images on mobile layouts. This way, you can allow more content to be perused on a desktop, while keeping the mobile version readable.
8. Imagery
Website imagery can be a very useful tool in design, branding, storytelling and sales. In responsive and adaptive design, pay attention to the impact these images have on your pages' performance. While the weight of imagery doesn’t tend to be a problem for adaptive sites, it’s still a good idea to only use the images you need, so they don’t slow down your pages.
9. Embedded content
It’s not uncommon to use external content like embedded social media widgets, videos or banner ads. In adaptive design, you can place these external elements within the boundaries of the containers they appear in. In responsive design, you should make sure to customize the embedding code to say within the confines of your container.
10. Interaction
Interactive design elements should be:
Easy to identify as interactive
Findable on the page
Interactive with without error
Consider the various micro-interactions visitors will expect have with your site, and the ways of these interactions may differ. For instance, let’s say you’ve put the phone number to your business in the header of the site. Desktop users will likely dial it into their phones. Mobile users, on the other hand, will expect to tap-to-call.
Interactive gestures or designs continue to differ between platforms. For example, an image slider may look the same for all users. However, only the mobile visitors can tap-to-swipe the slider left or right. Desktop visitors will use a mouse.
So whether you’ve chosen to use responsive web design or adaptive, don’t just focus on how to reposition, resize or represent your content on different platforms. Also think about how the context affects content interaction.