Responsive Web Design And Search Engine Optimization

Responsive Web Design And Search Engine Optimization

Mike Arnesen

Responsive Web Design for SEO

Editor’s Note: This guest post is written by Mike Arnesen, Senior SEO Analyst at our search partner, SwellPath. SwellPath is a digital consulting agency specializing in custom analytics tagging, SEO, and PPC campaigns.


Think of the last time you visited a website on your mobile phone. Your experience probably fell into one of three categories: terrible, decent, or awesome. Let’s go for a quick dive into the details of what could have defined your experience.

A terrible mobile experience

  • The site used media like Flash, which wasn’t supported on your mobile browser.
  • You couldn’t pinch or tap the site to zoom in on what you wanted to read.
  • You may have been redirected from whatever page you requested to the site’s “mobile homepage” and had to navigate back to what you wanted to see originally.

A decent mobile experience

  • Even though the experience wasn’t designed for mobile, you could at least zoom in on the important areas.
  • You may have encountered a pop-up asking you to download the site’s mobile app. It didn’t help you access the site, but at least they were thinking of mobile.

An awesome mobile experience

  • The site’s color scheme and text site was optimized for reading on a small screen.
  • The site was optimized for on the go browsing: important elements were highlighted (e.g. location info, phone, and menus)
  • The site’s navigation was reorganized to take up less screen space.
  • All functionality was usable through a mobile browser (think videos).

So what was responsible for your last awesome mobile experience on a site? All the bullets above came from having a dedicated mobile design. This was a result of the developer taking the time to think of mobile users and trying to provide them with exactly what they needed. When you browse the web on your mobile device, it’s not hard to tell which sites have taken the time to provide a dedicated mobile design.

What’s harder to tell is how they did it. Did you pay attention to your mobile browser’s address bar when you visited the site? If you visited a URL like www.eroi.com, it either changed to m.eroi.com and delivered you to the mobile experience or stayed the same and delivered the mobile experience to you. For search engine optimization, this can make all the difference.

Dedicated Mobile Sites

If the URL changed and your browser was redirected to http://m.mysite.com or www.mysite.com/mobile/, then you’re looking at a “dedicated mobile site”. This is a completely independent site built solely for mobile visitors. While it likely has the same content, it can be build using entirely different technology and delivered in a different manner than the main www.mysite.com.

Responsive Web Design

If the URL didn’t change in your mobile browser but you still got an awesome mobile experience, you’re looking at Responsive Web Design. Responsive Web Design allows a website to respond to your screen size and give you an appropriate experience, all via the same URL.

Why is Responsive Web Design Better for SEO?

I’ll let the UX experts expand on why Responsive Web Design is killer for your users, but now let me get into why it’s amazing for SEO. Let’s start off by listing some of the disadvantages of having a dedicated mobile website(s):

  1. Duplicate Content
    In the majority of cases, search engines will see that you have the same content on both the mobile and desktop versions of your website. If you look at it from the point of view of a simple web crawler, the text content (or page copy) of m.mysite.com/about/ is going to look incredibly similar to www.mysite.com/about/. This makes your website’s content much less valuable in search and can have a negative impact on organic ranking.
  2. Link Dilution
    Search engine ranking is largely determined by the number of links pointing to your website (I’m really oversimplifying this, but it makes it easier to understand). Social  links/sharing also plays a big role these days. If you have two versions of the same site, users can either link to pages on m.mysite.com or pages on www.mysite.com. If you end up with a handful of links pointing to each version, your SEO power is going to be divided. This makes your website much less effective in ranking in search.
  3. Authority
    Assuming you don’t have an SEO specialist on your team, it’s going to be very challenging to signal to search engines that they should be sharing “SEO Authority” between two sites. In Google, you set this up using “canonical tags” and the recently debuted “switchboard tags”. In Bing, you might be out of luck. In fact, Duane Forrester said outright about dedicated mobile sites, “most of them will never accrue any value and rarely, if ever, rank in any form of search“. That’s bad news all around.
  4. Search Engine Confusion & UX as a Ranking Factor
    Search engines are very simple minded. If you have a mobile and a desktop site, you’re relying on search engines to sort that out (and, believe me, this can get hairy). Search engines have a vested interest in sending mobile searchers to a mobile-optimized site and desktop searchers to a desktop-optimized site. Therefore, if you make it hard for them to figure out which of your sites will offer the best user experience, you’re gonna have a bad time.
  5. Tablets
    So where do tablets get sent in the dedicated mobile site model? The mobile site is likely pretty basic for someone on an iPad but the desktop site might still be overly complicated for tablet display. Do you create a third tablet only site that only compounds the above issues further or do you simply let users “deal with it”? Again, UX ties into modern SEO.

If organic search traffic (and user experience) is important for your business, we already have a strong case for adopting Responsive Web Design. With Responsive Web Design, you only have one website at www.mysite.com. Your website’s structural code and text (your HTML) is always the same no matter what device accesses it. However, the CSS (style rules for the website) changes depending on the screen size of the device that’s viewing the site. An iPhone viewing the site gets CSS that makes it look awesome on an iPhone; a standard desktop browser gets the regular CSS that makes it look awesome on a desktop monitor; a tablet gets the CSS to make it look awesome on a tablet display. Now how does that affect SEO?

  1. Duplicate Content
    With Responsive Web Design, each piece of content has only one URL; duplicate content is a non-issue.
  2. Link Dilution
    Since there’s only one website, all the links and social recommendations (likes, Tweets, +1s) out on the web point to a single website. All your SEO power goes to a central location for maximum ranking efficiency.
  3. Authority
    See above. With Responsive Web Design, there’s no need to worry about your mobile site having trouble getting off the ground, even in Bing.
  4. Search Engine Confusion & UX as a Ranking Factor
    Engines only have to deal with one site. They can send mobile and desktop users to the same site and know that they’ll be getting a good experience.
  5. Tablets
    Under Responsive Web Design, all devices are covered. Tablets get an experience that’s just as awesome as phones and desktops.

If you’re a developer and you’re wondering when I’m going to get into the technical details in this post, I’m not. I may put a tutorial together at some point (let me know if you want to see that in the comments), but this post is about educating people about Responsive Web Design and making RWD evangelists. Responsive Web Design is the future: it’s great for users, it reduces the code maintenance for your dev team, and Google just made it the official recommendation this month (Bing officially recommended it previously in March, to the sounds of crickets). Also, if you’re a developer/designer, your clients will love it (if they haven’t heard of it) and want it (if they have)!

If you’re interested in learning more about Responsive Web Design, I had the pleasure of appearing on a Max Impact Hangout on Responsive Web Design (30-min, but great video). There’s also Google documentation on how to make RWD happen and a great blog post on it by Scott Vandehey.

Responsive Web Design for SEO

Editor’s Note: This guest post is written by Mike Arnesen, Senior SEO Analyst at our search partner, SwellPath. SwellPath is a digital consulting agency specializing in custom analytics tagging, SEO, and PPC campaigns.


Think of the last time you visited a website on your mobile phone. Your experience probably fell into one of three categories: terrible, decent, or awesome. Let’s go for a quick dive into the details of what could have defined your experience.

A terrible mobile experience

  • The site used media like Flash, which wasn’t supported on your mobile browser.
  • You couldn’t pinch or tap the site to zoom in on what you wanted to read.
  • You may have been redirected from whatever page you requested to the site’s “mobile homepage” and had to navigate back to what you wanted to see originally.

A decent mobile experience

  • Even though the experience wasn’t designed for mobile, you could at least zoom in on the important areas.
  • You may have encountered a pop-up asking you to download the site’s mobile app. It didn’t help you access the site, but at least they were thinking of mobile.

An awesome mobile experience

  • The site’s color scheme and text site was optimized for reading on a small screen.
  • The site was optimized for on the go browsing: important elements were highlighted (e.g. location info, phone, and menus)
  • The site’s navigation was reorganized to take up less screen space.
  • All functionality was usable through a mobile browser (think videos).

So what was responsible for your last awesome mobile experience on a site? All the bullets above came from having a dedicated mobile design. This was a result of the developer taking the time to think of mobile users and trying to provide them with exactly what they needed. When you browse the web on your mobile device, it’s not hard to tell which sites have taken the time to provide a dedicated mobile design.

What’s harder to tell is how they did it. Did you pay attention to your mobile browser’s address bar when you visited the site? If you visited a URL like www.eroi.com, it either changed to m.eroi.com and delivered you to the mobile experience or stayed the same and delivered the mobile experience to you. For search engine optimization, this can make all the difference.

Dedicated Mobile Sites

If the URL changed and your browser was redirected to http://m.mysite.com or www.mysite.com/mobile/, then you’re looking at a “dedicated mobile site”. This is a completely independent site built solely for mobile visitors. While it likely has the same content, it can be build using entirely different technology and delivered in a different manner than the main www.mysite.com.

Responsive Web Design

If the URL didn’t change in your mobile browser but you still got an awesome mobile experience, you’re looking at Responsive Web Design. Responsive Web Design allows a website to respond to your screen size and give you an appropriate experience, all via the same URL.

Why is Responsive Web Design Better for SEO?

I’ll let the UX experts expand on why Responsive Web Design is killer for your users, but now let me get into why it’s amazing for SEO. Let’s start off by listing some of the disadvantages of having a dedicated mobile website(s):

  1. Duplicate Content
    In the majority of cases, search engines will see that you have the same content on both the mobile and desktop versions of your website. If you look at it from the point of view of a simple web crawler, the text content (or page copy) of m.mysite.com/about/ is going to look incredibly similar to www.mysite.com/about/. This makes your website’s content much less valuable in search and can have a negative impact on organic ranking.
  2. Link Dilution
    Search engine ranking is largely determined by the number of links pointing to your website (I’m really oversimplifying this, but it makes it easier to understand). Social  links/sharing also plays a big role these days. If you have two versions of the same site, users can either link to pages on m.mysite.com or pages on www.mysite.com. If you end up with a handful of links pointing to each version, your SEO power is going to be divided. This makes your website much less effective in ranking in search.
  3. Authority
    Assuming you don’t have an SEO specialist on your team, it’s going to be very challenging to signal to search engines that they should be sharing “SEO Authority” between two sites. In Google, you set this up using “canonical tags” and the recently debuted “switchboard tags”. In Bing, you might be out of luck. In fact, Duane Forrester said outright about dedicated mobile sites, “most of them will never accrue any value and rarely, if ever, rank in any form of search“. That’s bad news all around.
  4. Search Engine Confusion & UX as a Ranking Factor
    Search engines are very simple minded. If you have a mobile and a desktop site, you’re relying on search engines to sort that out (and, believe me, this can get hairy). Search engines have a vested interest in sending mobile searchers to a mobile-optimized site and desktop searchers to a desktop-optimized site. Therefore, if you make it hard for them to figure out which of your sites will offer the best user experience, you’re gonna have a bad time.
  5. Tablets
    So where do tablets get sent in the dedicated mobile site model? The mobile site is likely pretty basic for someone on an iPad but the desktop site might still be overly complicated for tablet display. Do you create a third tablet only site that only compounds the above issues further or do you simply let users “deal with it”? Again, UX ties into modern SEO.

If organic search traffic (and user experience) is important for your business, we already have a strong case for adopting Responsive Web Design. With Responsive Web Design, you only have one website at www.mysite.com. Your website’s structural code and text (your HTML) is always the same no matter what device accesses it. However, the CSS (style rules for the website) changes depending on the screen size of the device that’s viewing the site. An iPhone viewing the site gets CSS that makes it look awesome on an iPhone; a standard desktop browser gets the regular CSS that makes it look awesome on a desktop monitor; a tablet gets the CSS to make it look awesome on a tablet display. Now how does that affect SEO?

  1. Duplicate Content
    With Responsive Web Design, each piece of content has only one URL; duplicate content is a non-issue.
  2. Link Dilution
    Since there’s only one website, all the links and social recommendations (likes, Tweets, +1s) out on the web point to a single website. All your SEO power goes to a central location for maximum ranking efficiency.
  3. Authority
    See above. With Responsive Web Design, there’s no need to worry about your mobile site having trouble getting off the ground, even in Bing.
  4. Search Engine Confusion & UX as a Ranking Factor
    Engines only have to deal with one site. They can send mobile and desktop users to the same site and know that they’ll be getting a good experience.
  5. Tablets
    Under Responsive Web Design, all devices are covered. Tablets get an experience that’s just as awesome as phones and desktops.

If you’re a developer and you’re wondering when I’m going to get into the technical details in this post, I’m not. I may put a tutorial together at some point (let me know if you want to see that in the comments), but this post is about educating people about Responsive Web Design and making RWD evangelists. Responsive Web Design is the future: it’s great for users, it reduces the code maintenance for your dev team, and Google just made it the official recommendation this month (Bing officially recommended it previously in March, to the sounds of crickets). Also, if you’re a developer/designer, your clients will love it (if they haven’t heard of it) and want it (if they have)!

If you’re interested in learning more about Responsive Web Design, I had the pleasure of appearing on a Max Impact Hangout on Responsive Web Design (30-min, but great video). There’s also Google documentation on how to make RWD happen and a great blog post on it by Scott Vandehey.

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Success!

Thanks for your comment. Don't forget to tell your mom you're published now.

This entry was posted in Development, Strategy. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.