A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Sites

Editor’s update (July 2015): In April 2015, Google made a pre-announced update to the algorithm that ranks mobile search results. A website’s mobile friendliness is a confirmed ranking signal for mobile search rankings. Take note and make your website mobile friendly with the help of the following article.

We’ve all heard the statistics: 2014 is the year when more people access the Internet on a smartphone than on a computer or laptop. Mobile design is the future. You don’t want your site left behind, but how exactly do you program for this increasingly mobile Internet? There are three main options, each with their own benefits and drawbacks. In this post, I’ll break down your mobile-readiness options, giving you the pros and cons of each to help you choose the best path forward for your website and SEO strategy.

Option 1: Responsive Design

Responsive design determines the resolution of the screen on which a page is being viewed using media queries, then adjusts the size and layout of the page appropriately. Google has stated it prefers responsive web design, which makes it the heavyweight in this discussion.

Pros:

1. There’s only one version of each page. The same page adapts to the type of device displaying it (rather than detecting the type of device and then serving different content based on that). Having the same HTML and URL across all devices simplifies your site maintenance.
2. Responsive design doesn’t rely on user-agent detection, as the other two options do. User-agent detection (i.e., detecting what browser or device is requesting a web page) isn’t bad in itself, but it’s not perfect, and if there’s a glitch in the process, users may get served the wrong version of your site. In addition, this saves the search engine spiders from having to crawl your site as several different user-agents — meaning more of your site gets crawled.
3. Responsive generally loads more quickly in browsers. Because all devices get the same content, there’s no process of request-user agent detection-possible redirection. And anyone who’s ever been hungry and looked for a good restaurant on their smartphone knows, speed counts.

Cons:

1. It can be a long and intensive process to redesign an existing site. So, if you’ve got a big site, moving to responsive may not be the best choice.
2. Depending on the layout of your site, it may simply be too difficult to cram the contents onto a mobile screen. Sites like NYTimes.com maintain separate mobile sites because it’s easier to break the content up than it is to put it into a single page.
3. Navigation elements don’t always resize well; hover-over elements don’t work on a touch-screen at all. So going responsive may mean changing your navigation.
4. There have been instances where responsive pages with lots of images have loaded more slowly with responsive design. I should stress that this is not the norm, but it has happened.

Should you opt for responsive design, keep in mind that you’ll want to optimize your images and test your site on various browsers and devices (or use a good user-agent emulator) before pushing it live.

Option 2: Dynamic Serving

Sometimes referred to as user-agent “sniffing,” dynamic serving can be done in two ways and is tricky to implement. In fact, Google outlines some common mistakes made with dynamic serving. What this technique does is detect a visitor’s user-agent (i.e., what device they’re using to view your site) and then redirects at the server level. One way to implement dynamic serving is unidirectional redirecting, in which links to a site default to the desktop site, but mobile devices get redirected from the desktop site to the mobile site.

The second type, bidirectional redirecting, has code on both the desktop and mobile sites, making sure that any visitor, regardless of device, is served the appropriate content. (These pieces of code are sometimes called switchboard tags.) Implementation means putting a rel=”alternate” tag on the desktop, pointing to the mobile site; and, on the mobile site, putting a rel=”canonical” tag pointing to the desktop site.

Pros:

1. Because the redirection is done at the server level, you only need one URL per page.
2. Dynamic serving also works well for feature phones. As defined by PCMag.com, a feature phone is a “cellphone that contains a fixed set of functions beyond voice calling and text messaging, but is not as extensive as a smartphone.” For example, feature phones typically can’t download apps, but usually have some web browsing capability. Per Google, the biggest difference is that feature phones can’t process CSS, so they can’t handle responsive design very well. So it’s important to know your audience and what type of mobile devices they’re using.
3. If you want to have a separate set of keywords specifically for your mobile users, then this option will let you do that since mobile users and desktop users each see distinct HTML. (Search Engine Land has a great article that discusses mobile-specific keywords.)

Cons:

1. Dynamic redirecting doubles your site maintenance work because it sets up a separate site for mobile, with a separate set of indexed HTML requiring a separate SEO project.
2. The necessary list of user-agent strings also requires constant maintenance, since new strings have to be added whenever a new mobile device is released.
3. Lastly, keep in mind that you’ll need to use a “Vary HTTP-User Agents” header if your site serves content dynamically. The header helps content get served properly and helps engines cache it properly. Google has details on how to add this header.

Option 3: A Mobile Site

This option, as the name implies, involves creating a separate domain specifically for mobile users. The most common examples are m.domain.com or mobile.domain.com. It’s a popular option for large retailers; Bridget Randolph points out that “73% of websites ranked in the Quantcast Top 100,000 sites used URL redirects to a mobile specific URL.” Like dynamic serving, this technique involves developing content specifically for visitors using a mobile device; however, a separate mobile site’s URLs are distinct, so there is no server-level redirection.

Pros:

1. For larger sites with page counts in the hundreds of thousands or millions, implementing responsive design may simply be too much work. A mobile site allows you to tailor your user’s experience, and slowly build up a unique mobile experience.
2. Like dynamic serving, a mobile site is better for feature phones than responsive design. Depending on your site’s demographic, this may not be a criterion; but for some businesses, it’s an important consideration.

Cons:

1. Your mobile site won’t benefit from any positive backlink profile that your desktop site has built up (unless you implement bidirectional redirects). So if you’re looking to get your mobile users to find you in organic search, this may be a real setback.
2. Your mobile site will require some extra SEO work. You’ll have to submit a separate XML Sitemap to Google and Bing Webmaster Tools. Plus, smaller screens mean smaller SERPs, so you may need to edit your Meta tags. Mobile-specific Meta tags should be shorter than those for a desktop site.

As you can see, the content has been dramatically reformatted and reduced to make it readable on a mobile device.

In sifting through all of this information to make the right choice for your site, don’t forget to ask yourself how many of your visitors are using mobile devices to access the site. Check your analytics. If the total percentage of mobile traffic is under five percent, then you can probably wait to implement mobile design. For now. If the predictions are correct, then mobile usage will only continue to claim more and more Internet traffic.

For information on how to optimize your pages for speed and mobile SEO, we recommend starting with these resources:

• The All-In-One Mobile SEO & Design Checklist
• 7 Mobile-Friendly Navigation Best Practices
• SEO Guide: Mobile SEO and UX Optimization
• Image Optimization: The #1 Thing You Can Do to Improve Mobile UX
• Webmaster’s Mobile Guide by Google Developers

John is a former SEO analyst at Bruce Clay, Inc. His love of good writing led to a B.A. in philosophy and literature; his passion for education informs his own writing. John sees SEO as a way of bringing technical skills and solid marketing wisdom together to build a better, content-rich internet.

See John's author page for links to connect on social media.