Get Free Quote
« Why Press Releases... | Blog home | Internet Marketers On... »
June 26, 2014

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

Print Friendly

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 its 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.

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 (covered previously on our blog) and test your site on various browsers and devices (or use a good user-agent emulator) before pushing it live.

Here is a good example of responsive design, from wwf.org.uk:

WWF UK desktop home page

Screenshot taken 6/26/14

The mobile version resizes quite nicely:

NYTimes mobile home page

Screenshot taken 6/26/14

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.

Here is an example of a mobile site done right. As mentioned above, NYTimes.com has a full site for desktop visitors:

NYTimes desktop home page

Screenshot taken 6/26/14

And mobile.nytimes.com for mobile visitors:

NYTimes mobile home page

Screenshot taken 6/26/14

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.

Print Friendly




4 responses to “A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Sites”

  1. Jeff writes:

    I have to disagree with the cons to the having a mobile site.

    The first con gives the impression that there are separate search results for mobile site than there are for standard site. Which isn’t the case. You get the same results as desktop, but if you’ve implemented the proper tags on both mobile and desktop versions, the URL just updates for the version you’re on.

    Why would the mobile site need extra work?? If your site dynamically identifies the user agent and redirects mobile users to the mobile site, it’s the main site that gets the actual ranking (and all the SEO work).

  2. John Alexander writes:

    Jeff- thanks for your input. It sounds like you’re replying to the second option, dynamic serving, since you mention a site that “dynamically identifies the user agent.” The extra work comes in having to maintain the mobile site (or mobile version, as you refer to it) apart from the desktop site. The mobile site itself doesn’t necessarily require more work than the desktop site; it’s simply the case that you’re maintaining two sites, whereas with responsive design you only have the one.

  3. Roianne Cox writes:

    A users perception is that they are receiving a poor imitation of the real thing when redirected to a mobile site. Most websites display correctly on an ipad, responsive design takes away any disadvantages. Personally if I am searching on my ipad and get redirected to a mobile site I just move on to the next site that is optimized for my device.

  4. John Alexander writes:

    Thanks for your input, Roianne. To be clear, we’re not advocating any particular technology as a one-size-fits-all solution. Properly implemented mobile sites (whether separate URL or dynamically served content) should be optimized for tablets, but site owners have to carefully evaluate the reasons people might be using their site on a mobile device, tablet, or desktop computer, and which method would fit their audience best.



Learn SEO
Content Marketing Book
Free Executives Guide To SEO
By continuing to use the site, you agree to the use of cookies. AcceptDo Not Accept
css.php

Curated By Logo