{"id":32259,"date":"2014-06-26T09:43:35","date_gmt":"2014-06-26T16:43:35","guid":{"rendered":"http:\/\/www.bruceclay.com\/blog\/?p=32259"},"modified":"2023-01-31T12:59:11","modified_gmt":"2023-01-31T20:59:11","slug":"mobile-design-cheat-sheet","status":"publish","type":"post","link":"https:\/\/www.bruceclay.com\/blog\/mobile-design-cheat-sheet\/","title":{"rendered":"A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Sites"},"content":{"rendered":"

Editor’s update (July 2015):<\/strong> In April 2015, Google made a pre-announced update to the algorithm that ranks mobile search results<\/a>. 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.<\/em><\/p>\n

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<\/a> strategy.<\/p>\n

Option 1: Responsive Design<\/strong><\/h2>\n

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.<\/p>\n

Pros<\/strong>:<\/h3>\n
    \n
  1. There\u2019s 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.<\/li>\n
  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 \u2014 meaning more of your site gets crawled.<\/li>\n
  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.<\/li>\n<\/ol>\n

    Cons:<\/h3>\n
      \n
    1. It can be a long and intensive process to redesign an existing site. So, if you\u2019ve got a big site, moving to responsive may not be the best choice.<\/li>\n
    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\u2019s easier to break the content up than it is to put it into a single page.<\/li>\n
    3. Navigation elements don\u2019t always resize well; hover-over elements don\u2019t work on a touch-screen at all. So going responsive may mean changing your navigation.<\/li>\n
    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.<\/li>\n<\/ol>\n

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

      Option 2: Dynamic Serving<\/strong><\/h2>\n

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

      The second type, bidirectional redirecting<\/em>, 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<\/a>.) 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.<\/p>\n

      Pros:<\/strong><\/h3>\n
        \n
      1. Because the redirection is done at the server level, you only need one URL per page.<\/li>\n
      2. Dynamic serving also works well for feature phones<\/em>. As defined by PCMag.com<\/a>, a feature phone is a \u201ccellphone that contains a fixed set of functions beyond voice calling and text messaging, but is not as extensive as a smartphone.\u201d For example, feature phones typically can\u2019t download apps, but usually have some web browsing capability. Per Google, the biggest difference is that feature phones can\u2019t process CSS, so they can\u2019t handle responsive design very well. So it\u2019s important to know your audience and what type of mobile devices they\u2019re using.<\/li>\n
      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<\/a>.)<\/li>\n<\/ol>\n

        Cons:<\/strong><\/h3>\n
          \n
        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.<\/li>\n
        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.<\/li>\n
        3. Lastly, keep in mind that you\u2019ll need to use a \u201cVary HTTP-User Agents\u201d 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.<\/li>\n<\/ol>\n

          Option 3: A Mobile Site<\/strong><\/h2>\n

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

          Pros:<\/strong><\/h3>\n
            \n
          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\u2019s experience, and slowly build up a unique mobile experience.<\/li>\n
          2. Like dynamic serving, a mobile site is better for feature phones than responsive design. Depending on your site\u2019s demographic, this may not be a criterion; but for some businesses, it\u2019s an important consideration.<\/li>\n<\/ol>\n

            Cons<\/strong>:<\/h3>\n
              \n
            1. Your mobile site won\u2019t benefit from any positive backlink profile that your desktop site has built up (unless you implement bidirectional redirects). So if you\u2019re looking to get your mobile users to find you in organic search, this may be a real setback.<\/li>\n
            2. Your mobile site will require some extra SEO work. You\u2019ll 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.<\/li>\n<\/ol>\n

              As you can see, the content has been dramatically reformatted and reduced to make it readable on a mobile device.<\/p>\n

              In sifting through all of this information to make the right choice for your site, don\u2019t 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.<\/p>\n

              For information on how to optimize your pages for speed and mobile SEO, we recommend starting with these resources: <\/em><\/p>\n