Optimizers have been debating another question: Which mobile design is best for optimizers?
Is it m(Dot) design, responsive design, or adaptive design? All three options have their unique pros and cons as far as UX and SEO go, but which is most suitable for someone running experiments and tests on the regular?
First, what is m(Dot) design?
m(Dot) design is the original solution for mobile visitors. Before m(Dot) design came along, mobile visitors had to wait while the entire site loaded and then struggle to navigate a design and UX made for desktop visitors.
Today, it’s hard to imagine a site that doesn’t have any sort of mobile solution.
With m(Dot) design, you must create a separate version of your site specifically optimized for mobile users. For example, this was Facebook’s m(Dot) design…
Typically, you’ll notice less content, a simplified navigation, fewer images, and so on
What is responsive design?
Responsive design is a newer solution to the mobile visitor issue. Instead of having to create an entirely separate site, you can simply create one version that is responsive to different screen sizes.
Here’s how Google defines it…
Responsive web design, originally defined by Ethan Marcotte in A List Apart, responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns.
So, for example, here’s how the HAUS site looks on desktop…
And here’s that same site on mobile…
See how the design of the site literally responds to the size of the visitor’s device? That’s responsive design in action.
What is adaptive design?
Adaptive design, also known as dynamic design, is another modern alternative to m(Dot) site design. Here, the server identifies the device type that the visitor is using and then loads the correct version of the site.
So, for example, if you’re browsing on your iPad, the server will load the tablet version of the site.
Essentially, you have three different versions of your site prepared…
- A desktop site;
- A tablet site;
- A mobile site.
Only the necessary resources will be downloaded. For example, if the visitor is arriving via a mobile device, the content and images for the desktop version won’t be downloaded.
What’s the current mobile landscape?
- People switch devices multiple times before making a purchase.
Joel Harvey of Conversion Sciences explained this to the CXL Live audience a few years ago…
So, you need to be prepared for visitors using a variety of devices. A few years ago, this was the breakdown of how the top 500 retailers are preparing, according to Pure Oxygen Labs…
As you can see, m(Dot) rapidly declined.
Responsive design climbed quickly. It has definitely hit mainstream status and is occupying a lot of mindshare…
More retailers were found to be using adaptive design than responsive design. A few years ago, it was expected to grow to 20% (or more). Why?
Brian Klais of Pure Oxygen Labs explains…
So, at the end of the day, m(Dot) sites are on their way out, while responsive design and adaptive design battle it out for the top position.
The rise of responsive mobile design
m(Dot) sites were created because, well, they’re better than trying to load the full desktop version of a site on a mobile device. They were also pretty easy to create, which means they won’t take up too many resources.
Unfortunately, there’s a laundry list of problems that comes along with doing something the fast and cheap way…
- You need to manage and optimize two separate sites.
- The redirect causes a slower load time, which as we all know, is a conversion killer.
- Google doesn’t like redirects very much (because it requires additional resources on their end).
- Have you ever tried to share an m(Dot) link with someone on a desktop? It’s a terrible experience.
- Are you going to create a new subdomain for every device? Tablets? Gaming consoles? Smart TVs?
These problems have allowed responsive design to blossom. In fact, it addresses the three main problems that plague m(Dot) sites…
- You only need to manage and optimize one site.
- Having just one URL means no redirect issues.
- Social sharing looks good again.
In fact, Google has recommended responsive design quite publicly in the past. After sharing this chart…
Google confirmed its preference for responsive design…
Responsive Web Design: Serves the same HTML code on the same URL regardless of the users’ device (for example, desktop, tablet, mobile, non-visual browser), but can render the display differently based on the screen size. Google recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.
But was careful to add that Google doesn’t favor any particular URL format as long as the pages and all page assets are accessible.
Responsive design is also standard practice for landing page tools…
The problems with responsive design
But nothing is perfect, right? Responsive design has its own issues, just like m(Dot).
First, responsive design means that everything from the desktop version is downloaded, even on mobile… Even if it’s not used in the mobile version. In addition, the responsive design needs to make a number of decisions. “Should this be shown on this device?”
Joel explains how responsive design can impact speed…
Sometimes, Joel goes on to say, responsive design makes the wrong decisions…
When Joel says “we’re going to put our desktop conversion rate at risk,” he means that a desktop redesign is required to deploy responsive design.
Too often, redesigns are done based on subjective opinions vs. actual conversion research. The result? Conversions tank.
Another major issue is that instead of optimizing the mobile experience and the desktop experience separately, you have to optimize for both. Since desktop visitors and mobile visitors are so different, that’s a problem.
That also limits your testing capabilities. Let’s say you run an A/B test on your responsive design and it results in a 15% decrease in conversions.
When you drill down, you notice that mobile visitors loved the variation, but desktop visitors did not. Since there are more desktop visitors, your test results in a decrease.
Imagine if you could deploy the variation to mobile visitors, but keep the control for desktop visitors.
The benefits of and problems with adaptive mobile design
While responsive design is certainly gaining attention, Brian claims that many companies are moving to adaptive design to combat the problems that arise from responsive design…
So, how does adaptive stand out compared to responsive?
It’s lighter, meaning faster load times
As mentioned above, one of the biggest issues with responsive design is speed.
Since responsive design means downloading everything from the desktop version, even when you’re accessing the site from mobile, Brian says critics are right to be skeptical of responsive design…
With adaptive design, visitors only have to download the assets for that particular version of your site.
For example, if a visitor arrives via mobile, they only have to download the mobile assets. The desktop assets are not downloaded. As a result of having to download fewer assets, page load speed is increased.
Peter Nelson of UnDelay.io, an adaptive landing page builder, describes a speed test his team ran and how adaptive stacked up against responsive…
So, while even Peter admits that a lot has changed for both UnDelay.io and their competitors in this rapidly growing industry, adaptive was found to be significantly faster than responsive.
Catchpoint Systems tested the speed of adaptive design vs. responsive design as well. They built two identical sites in WordPress. Both had the same text and images, the same content. Not surprisingly, both sites performed exactly the same on desktop.
When you switch to mobile, however, things get more interesting…
As you can see, adaptive is significantly faster than responsive, just as Peter and his team found.
But, of course, smart optimizers are able to make content more mobile-friendly. So, they decided to optimize the images since the original site content was heavy on visuals…
Benefits across the board on that one, but you’ll still see that adaptive is faster.
Again, benefits across the board, but adaptive is still faster. I don’t need to tell you how valuable that speed, that saved time is.
Optimize for each device, making testing easier
Above, we also addressed the optimization and testing limitations that come with a responsive design. Adaptive gives you more control and flexibility.
Peter helps explain why that’s important to optimizers…
So, consumers are using multiple devices before they convert. No surprise there. But consider the implications of that. They’re using different devices for different steps of the funnel, for different purposes.
In a very simple example, they might be using your mobile site for research purposes and then your desktop site to actually convert. What should you do? You should optimize mobile to make research easier and you should optimize desktop to make converting easier.
In this particular example, why waste time pushing the mobile traffic to convert when they’re there to conduct research?
With responsive design, you have to either find a common ground that satisfies both, but doesn’t seize all of the opportunities available or seize all of the opportunities on one end of the spectrum, leaving the other end neglected.
You could be, essentially, sacrificing desktop for mobile or mobile for desktop or tablet for mobile… whatever.
With adaptive, you don’t have to. You can create a separate journey optimized for a separate goal.
Peter adds that some versions of responsive design are taking steps towards making optimizing for each device easier…
Another important point to touch on is A/B testing. We talked about the issues that plague responsive design when it comes to actual testing. With adaptive design, it works a little something like this…
So, if you have the traffic, you can simultaneously run an A/B test on mobile, an A/B test on tablet, and an A/B test on desktop. Furthermore, you can be running an A/B test on mobile with the goal of capturing emails while you’re running an A/B test on desktop with the goal of getting money in the bank.
But… It’s resource-heavy
That all sounds great, so why the hell is anyone using responsive or m(Dot) sites? Well, because adaptive design has its downfalls, too. Namely, that it takes a lot of human and monetary resources to pull off…
The application of adaptive design is not a standard offering among landing page builders, it’s not the most popular mobile solution, it’s not talked about as often as its competitors, etc.
Peter takes us back to when adaptive was first introduced…
Whoa… 30-40 different templates? I’m willing to bet no one is reading this and thinking, “That sounds fun.” Developer time is scarce, especially senior developer time. Small and even mid-size companies just don’t have the resources to take on this kind of design, even if they want to.
How adaptive design is evolving
In an article, UXPin wrote…
Responsive design will remain popular, but that might be because we have not yet found a decent solution to the heavy maintenance that adaptive demands. Adaptive design hasn’t died out though, despite the web’s apparent love of responsive, so it’s possible—in theory at least—that we’ll see some improvements emerge yet that will blow responsive web design out of the water.
I have to agree. Adaptive design is still becoming more accessible to smaller businesses. I expect that responsive will be the equivalent of m(Dot) in the not-so-distant future.
While still in beta, you can see that steps have already been taken by adaptive on drag-and-drop builders like UnDelay.io…
Despite the fact that responsive is still in vogue, I wouldn’t be surprised if the entire industry is headed towards an adaptive future.
Mobile optimization isn’t exclusively a technology problem
Talia Wolf of GetUplift hits the nail on the head about the responsive vs. adaptive debate…
Both have pros, both have cons. Is your site going to fail because you chose responsive over adaptive? No.
What it really comes down to is this…
- Do you know who your audience is?
- Do you know what’s different about your mobile audience’s behavior (vs. desktop)? How about your tablet audience’s behavior?
- Do you know what they’re looking for on each device? What they’re trying to accomplish?
- Have you conducted the proper conversion research to identify problem areas and make it easier for them to find and accomplish what they set out to on that device?
If you answered yes, you’re in better shape than most people debating whether responsive or adaptive is better.
- m(Dot) isn’t dead, but its vitals are weak.
- Responsive is gaining a lot of attention, but has undeniable speed and flexibility issues. It’s still the least popular of the three options.
- Adaptive solves responsive design’s core issues and is better for optimization in theory, but requires a lot of human and monetary resources. Technology is beginning to correct that; expect major growth in this space.
- More important than this debate is understanding your audience, their behavior on different devices, their wants / needs on different devices, and how to make it easier for them to get what they want / need on each device.
So, which mobile design is best for optimizers? Stick to responsive or adaptive for the best results, but remember that this debate is purely technological… there’s a lot more that goes into mobile optimization.