It's now more important than ever to have a mobile-friendly website, but which approach should you choose? In the past, Google has heavily favored the responsive approach, but the April 21 mobile-friendly update made it clear that a separate mobile website (also known as an mdot site) is also acceptable.
There are several factors to weigh up in making your decision. Let's take a look at the differences between the two types of sites, the resources you need to implement them and the SEO implications of each choice.
Mobile vs. Responsive: The Headline Difference
An mdot site is designed specifically for mobile devices and exists on a separate subdomain (hence the name). In contrast, with the responsive route you get a single website designed to work with any mobile device or computer.
B2 Interactive explains: “With responsive design, the website is adapting existing content to fit different screen sizes. With a separate mobile URL, the website has the ability to display different content for mobile users.”
That's the headline difference, but there's more to it than that. That's because there are differences in the underlying technological approach that will affect the user experience on your site.
Responsive Sites: Pros and Cons
Thomas Ryan, Marketing Executive with Afilas Mobile & Web Services explains responsive design this way:
“Responsive Web Design (RWD) is a technique in which websites automatically rearrange their content (texts, graphics, videos, etc.) according to the width of the browser minimizing resizing, panning and scrolling.”
Bryson Meunier, SEO Director of Vivid Seats says: “Responsive sites don't require additional workarounds that mobile sites do in order for Google to understand that the content is intended for mobile device users (e.g. bidirectional annotations and the vary header). They're also easy to maintain and work reasonably well on many different devices.”
For marketing, responsive sites also have an advantage in terms of brand coherence, because you have a single site to think about, rather than having to maintain your brand across two websites.
However, responsive sites are not perfect, says Bryson. They are often slow because of the need to load images for all devices. “The <picture> element should solve this eventually, but it's not widely supported by browsers or Google Search.”
There's also a targeting problem for some sites, says Bryson: “Responsive sites without server side redirects for separate user agents have to present the same content to every searcher, so you may be loading content to your device that you'll never use.”
He explains: “A good example is iPhone searchers being shown Android apps they can never download and vice versa. This can lead to a poor user experience as certain words like 'download' and 'print' benefit from a device-specific context. Without it the webmaster has to make all of her content truly adaptive or run the risk of confusing the user.”
Mdot Sites: Pros and Cons
A separate mobile site addresses some of the problems that responsive sites have, says Bryson, because of the ability to use the user-agent tag to serve different HTML: “That gives advanced marketers the flexibility to target their creative appropriately if needed. So if I want to show my Android app to Android searchers only, that can be done with these formats.”
Mdot sites also have some performance advantages because they load device-specific images but the need for redirects can slow those sites down.
SEO and Mobile
Another issue to consider when deciding on a mobile site is SEO. With mobile-friendliness and site speed important ranking factors, does that mean that mdot is always the better choice? Not at all, says Bryson. “Any of these formats can be made to load quickly if you take the time to do it right. And if you add server side redirects to responsive design (called RESS) you can serve device-specific content as well.”
And since Google supports responsive, adaptive and mobile URLs, companies should choose the one that best meets their needs. The most important thing is to ensure that users have a good experience. However, depending on the option you choose, your optimization process may be different.
Bryson says: “With mdots you need to use bidirectional annotations, or Google may not index and rank the content appropriately. You also may want to think about the keywords that the searcher might use that are different on smartphones as you can optimize content for them with m dots and adaptive sites.”
In contrast, speed is the major SEO issue for responsive sites, says Bryson. “All of the site configurations need to be fast, but responsive sites are the most difficult to speed up because of the images. Google took a poll of webmasters recently and 43% of them said that the most annoying thing about mobile websites is waiting for them to load. I wouldn't be surprised if this is a larger ranking factor at some point in the future for mobile, and if it is a lot of poorly executed responsive sites will suddenly become a lot less visible in search.”
Ecommerce Considerations
Ecommerce service providers also need to think about site speed, says Thomas Ryan: “It might no longer be the case that a company would require a separate mobile site as well as their desktop version. There are a number of reasons why, including various screen sizes (from feature phones with small screen resolutions to flag-ship phones with 1080p + screens), odd device shapes (some are wide screen, some are more square — think of tablets), and the rise of the Internet of Things (browsers where browsers usually didn’t live — like on fridges, in cars etc). The goal for an ecommerce website is to have a website that is both flexible (can work on any device) and fast (page load time can seriously impact your conversion levels).”
“Given that RWD websites send the same HTML, CSS and JavaScript to every device, the rearrangement is triggered client-side by the browser. This can produce an unnecessarily heavy and slow site on mobile devices, which is not optimal for ecommerce.” Two alternatives are adaptive design and RESS.
Adaptive Design and RESS
There’s also another option, as Thomas Ryan explains: “Adaptive web design in its simplest form is a technique for sending different HTML/CSS to different types of devices. Adaptive design allows you to ensure that the page weight and loading times are optimal for users irrespective of device.” However, he says that while responsive design is simpler, “many large websites prefer to serve their users with a content adaptation approach because it’s more flexible, offers faster load times and works better on poor bandwidth and a wider range of devices. This technique is ideal, but not cost effective for smaller businesses.”
Ecommerce sites, he says, may prefer to use RESS (Responsive Web Design with Server-Side Components). “It offers a way to get the best of RWD and content adaptation based on server-side device detection, which results in significant performance improvements over ‘classic’ RWD. A website utilizing RESS is responsive, and, at the same time, it is also fully optimized for different types of devices. This is the latest preferred approach, offering the best of speed, weight and content. Conversion rates will be the best that they can be.”
One issue for companies to consider is the cost implications of each mobile website choice. This isn't straightforward, as the cost of website development depends on the complexity of the website's design and functionality. Whether you're creating an mdot or responsive website, there are several tasks involved. Brad Frost has an excellent list, including:
- working out how you're going to create the website and what's important for it
- developing the design itself
- road testing the design to make sure that it works for everyone
- testing it on specific important devices
- quality assurance
You also have to think about website maintenance costs. With an mdot site, you need to maintain a parallel experience across two site, which can be time consuming and costly, while the responsive option gives you only one site to maintain. However, not everyone agrees that this means it's cheaper.
The best advice: whichever approach you take, assume it's going to take some time and cost some money. This Quora thread on responsive design creation may help.
The Importance of Testing
Another key aspect of the mobile web design process is testing. There are two issues to think about: organizing your tests and avoiding common errors.
Ivan Shubin, Senior Software Engineer in Test at eBay, points out that shared responsibility is an important aspect of test automation: “A common mistake is having an engineer, dedicated to test automation, which is the only responsible person for tests. In our company we had to refine the testing process and in the end we've build a strong pipeline which consists of several testing environments. We came up with a strict rule: we can only release if everything succeeds. Even if there is one little test failing — we can't go live. This rule had a huge effect on every team member as each of us felt responsible for the tests.”
He adds that it's also important to think about test-driven development (TDD): “For any changes you make on a project, you have to come up with a failing test. This way you make sure that the test coverage is always close to 100%. And even if you miss something, you can always add a test, because you will have to apply TDD technique for bug-fixing anyway. It's your choice where you want to introduce it: UI, service or unit tests.”
Ivan says that user interface (UI) testing requires a careful approach: “UI tests are the most fragile part of the pipeline and therefore they should be implemented in as isolated a way as possible. For instance when preparing a data for UI tests you should never rely on the front-end. Instead, generate test data with database queries, services calls etc. This way you will only touch the front-end when you actually want to test it and your UI tests will be more stable.”
Deciding Factors: The Bottom Line
In the end, the decision on which option is best for you in terms of design, functionality, cost and SEO will include thinking about:
- what kind of content your users need to see
- how often you are likely to update content
- what kind of behavior they exhibit depending on which device that they are using
- whether they need to experience the full functionality of your website no matter what device they are using
Duda Mobile suggests that in making the decision a question to ask is: “Am I ready to build a brand new website, or is my current website great, just not mobile-friendly?”
If you are happy with your existing site and don't need/want to make changes, a separate mdot site may be the answer. On the other hand, if you are planning a site upgrade anyway, then going the responsive route can be a great option.
Which approach have you taken with your mobile site and what was the deciding factor for you? Let us know in the comments!