DistilledLive Catch Up: Responsive Web Design

Last Monday, our Seattle office held a meet up about responsive design. We were lucky enough to get Matt Fordham, technical director at Wintr, to explain the fundamentals behind responsive design itself, and I made my argument for why responsive is so great for SEO. If you aren’t lucky enough to live in Seattle (or just weren’t able to make it Monday night), we’ve got all the details here.

The Case for Building Good Mobile Sites

I’m not going to start building the case for mobile in general, because most of you already have mobile sites. Most of you had mobile sites in 2010. The problem is, a lot of companies have bad mobile sites.

Mobile isn’t something you can keep neglecting. 50% of teens and 45% of young adults access the internet primarily through their phones already1, and that number is only going to grow as phones get cheaper and better. From 2011 to 2012, mobile sales rose by 80%, and they expect 2013 to increase by another 50% at least. (That’s $38.40 billion in predicted sales, for those of you who want hard numbers.)2

(Image courtesy of Shutterstock.)

mobile shopping in stores

What’s most surprising is that mobile sites help offline retail as well. 43% of shoppers visited a retail store’s app or mobile site while shopping at the physical store.3 People are starting to look for more information than you can offer them in stores alone. If you have a weak mobile site, they might look at your competitors to learn more about a product, and I doubt you want your shoppers to see Amazon’s price for a product you sell while they check it for reviews. On a more positive note, see this as an opportunity: if you have a strong mobile site, you can increase your offline sales.

The moral of this story? You can’t just invest in building a mobile site, you have to invest in building a great mobile site.

Responsive Sites Make the Best Mobile Sites

(In case you’re wondering about the details of what a responsive site really is, I wrote an introductory blog post about it on Moz.)

Technically, responsive sites are great because all visitors, regardless of their device, see a site that fits their screen. When you build separate mobile sites, you’re either going to build 300 versions of your site so that it conforms to every different device out there, or you’re going to leave some devices with a poor layout. Responsive sites reformat themselves to fit every device’s browser.

In terms of content, responsive sites are great because they deliver the same content in the same way on every device. That means that if someone has visited your site on their desktop, they can find the same information on their phone and tablet, and vice versa.

The most common argument against this set up is that mobile visitors don’t want the same thing. But, tell me what this man is doing on his cell phone:

manonmobilephone

(Image courtesy of Shutterstock)

He could be doing something that we would consider more “mobile” like looking up directions to a restaurant. He could also be checking his emails, or basically using his phone like he would a desktop, but on a bus.

How about this couple, who is using their tablet while watching TV (this is typical: according to a Nielsen study, 85% of tablet and smartphone owners use their device as a second screen at least once a month):

coupleontablet

(Image courtesy of Shutterstock)

They could be using their tablet as a second screen. She could also be using her tablet so that she can be sitting with her husband while she checks her email, in place of a desktop.

The point of this is that we can’t assume that we know why someone is using a mobile device. The best way to build a site is to provide all content to all visitors, regardless of device.

Prioritizing Content by Device

After I talked about this at the meet up, Oremo Ochillo commented: okay, mobile and tablet visitors could be looking for anything, but isn’t there a higher probability that they’ll be looking for something different? A mobile visitor is more likely to be looking for directions to a restaurant than someone at their desktop.

That’s completely true, but think about the root problem here: it’s not that you want to offer different content based on device, it’s that you want to prioritize content differently based on device.

If people are searching for your content on search engines, this is a moot point. Google’s getting good at directing searchers towards the content they’re looking for specifically, so it will list the right webpage based on user intent.

If people come to your homepage and have to navigate to find what they’re looking for, then you have to organize the site differently. Since pages will typically be divided by content already, the two pieces that you’ll want to modify for mobile are the navigation and the homepage.

The navigation of a site is one of the few things that will actually change by browser size on responsive sites. Look at Smashing Magazine to see how the navigation goes from the side to the top to hidden behind a button. Take advantage of the changing systems and reorganize it so that you promote location-based pages on mobile devices and content-based pages on desktops.

The homepage is a little trickier, but, as Matt Fordham chimed in, you can set up the CSS to change the order of content as the window shrinks (indicating mobile visitors).

Responsive sites can still tailor their content to mobile visitors by tweaking the order of content on the homepage and the navigation.

Why Responsive is Best for SEO

We’ve established that mobile sites should have the same content as desktop sites, but possibly use a different navigational system. But why are we recommending responsive so strongly?

1. Responsive sites rank for the maximum possible searches

All too often, separate mobile sites end up with different content from the main mobile site. This can come out in a few different ways:

Mobile sites have fewer pages than the desktop site.

This is by far the most common problem I see with separate mobile sites. Since the mobile site is almost always built after the primary site, site owners only recreate “important” pages from the desktop site. But those pages always have some traffic, and excluding them means you’re excluding all of the mobile visitors who would have found those pages via search engines.

Mobile sites have different pages than the desktop site.

If you add content to separate mobile sites that isn’t on the desktop sites, you’re going to run into two problems.

First, it may take longer to get mobile-only content indexed, since your desktop site is most likely stronger than your mobile site, and therefore visited more often by Googlebot. Content on the mobile site will be harder to find.

Second, you’re depriving desktop visitors of that content. Don’t think that desktop visitors are interested in a page talking about Foursquare? Don’t prioritize it in the navigation, but check desktop traffic to the page with your web analytics software. Worst case scenario, your site will have no mobile traffic to some pages and no desktop traffic to other pages, but you’ll have peace of mind knowing you aren’t losing any visitors to missing content.

Mobile sites have the same pages as desktop sites, but less content on each page.

This means one of two things:

  1. Mobile visitors get less information than desktop visitors.
  2. Desktop visitors get redundant or unnecessary information, and you’re streamlining it for mobile visitors.

In the first case, your mobile site will have a harder time ranking for as many search terms as your desktop site. It’s tempting to include less information simply because you have less information on the screen, but mobile visitors expect to scroll.

In the second case, why do you have that extra information on your desktop site in the first place?

Responsive sites include all pages.

When you want to add content on a responsive site, there’s never a question as to whether it’s aimed at mobile visitors or desktop visitors; it’s just for visitors. If it really is for one or the other, no harm done, visitors will navigate to the information they’re most interested in.

2. Responsive sites don’t have redirect issues

If you write different HTML for the mobile version of your site, you have to tie the different versions of each page together.

Dynamically Served Mobile Sites

Dynamically served sites use the same URLs, but your servers send different code depending on the user agent requesting the page. Left on its own, this can look like you’re “cloaking,” or, serving different information to try to trick the search engine into thinking you have different content than you really do. In order to avoid cloaking penalties, you need to include the Vary HTTP Header.

Mobile Sites with Different URLs

Search engines use URLs like unique IDs, so you never want to put the same content on two URLs. Whenever you do, you need to choose one as the “original” source of the content, and place a rel=“canonical” tag on the “copied” page. Generally, you’ll end up putting the canonical tag on the mobile page pointing towards the desktop page. Google also recommends that you add a rel=“alternate” tag to your desktop pages, letting Google know that there’s a mobile-optimized page out there.

Responsive Sites are Just the Same Site

If you properly tag your desktop and mobile HTML, separate mobile sites can rank just as well as responsive sites. But it’s much too easy to make a mistake with redirects and tagging, especially on smaller pages that you might not think to tag. Responsive sites don’t have that problem, because you’re always serving the same site.

3. Responsive sites (usually) deliver better mobile sites

I say this primarily for business reasons.

If you build a separate mobile site, mobile site changes and updates are separate tasks from desktop site changes and updates, and will probably become separate projects from desktop site changes and updates. Sometimes, mobile site changes and updates will be given to an entirely separate team than desktop site changes and updates.

When mobile site changes are separate, they will usually come after desktop changes, meaning your mobile site will often be behind your desktop site. When you’re building new pages, this will create problems with redirects, since you’ll have to figure out how to redirect mobile visitors to the new desktop page without a mobile version. When you’re just changing the content, mobile content will be inferior to desktop content (and possibly even wrong).

If you have a separate mobile team, they’ll either have to spend their days playing second to the desktop team, or they’ll add more content than the desktop site has, creating more redirect issues (and maybe making the desktop site miss out on great content!).

Responsive sites integrate mobile and desktop changes and updates.

With responsive sites, any changes you make to the site rolls out to the desktop and mobile sites instantaneously. No need for a separate team, no need for separate decisions, no worries about temporary inconsistencies between the sites.

Does this mean a separate mobile site will always be inferior to a responsive site?

No. But it usually will be.

If you’re working for a company that simply won’t let you touch their desktop site with your CSS media queries, you can build a great mobile site that competes with the best responsive site. It will just take longer to maintain, since you’ll have to update both sites with new information.

You also may find that in certain instances, you really do have a need for different information for your mobile site. Or, if you’re building a site with complicated JavaScript, it may be hard to modify for different screen sizes (this is most common if you have a webpage that plays a game).

Next Steps? Build a Responsive Site.

Or a really great separate mobile site.

Bridget and I wrote a guide to building mobile sites, so look it over to make sure you don’t make any errors that could confuse search engines. If you’re not sure how to build an awesome mobile site yourself, Wintr knows their stuff.

For those of you who attended DistilledLive last Monday: thank you!

For those of you who weren’t able to attend, feel free to ask any questions or leave any comments you may have below. And, consider coming to our next meet up!

Kristina Kledzik

Kristina Kledzik

Kristina joined Distilled as an SEO after working as an SEO/SEM/Web Analytics Specialist for the University of Washington. Kristinah264 // Kristina always knew she wanted to work with computers, but avoided computer science classes in college...   read more

Get blog posts via email

17 Comments

  1. A case for cost/value can also be made for responsive sites. When you can focus your efforts on one iteration of a site rather than many, you have the advantage of being able to cut costs and, most likely, increase the ROI because your design teams aren't stretched between multiple projects. Plus, less time is spent in updating multiple sites and making sure they're both set up correctly in order to avoid SEO penalties and such. For small organizations, especially non-profits like mine, that kind of thing becomes extremely important. You don't have to be selling a product to warrant a great mobile site.

    reply >
    • Kristina Kledzik

      Absolutely true! I think that a lot of people and companies avoid responsive design because it has a higher set up cost (and they have to mess with their desktop site), but it's much cheaper in the long run.

  2. reply >
  3. Thanks for a succinct article, the sort of article I can send to clients. What surprises me is that site owners have trouble understanding the importance of a responsive site - Hey - I wish my site was responsive...;-)

    reply >
    • Kristina Kledzik

      Always happy to help convince people to make better mobile sites!

  4. I absolutely hate mobile websites! Responsive design is the only way to go. It provides users the best experience and you don't have to maintain two sites! Nice post.

    Cheers!

    reply >
  5. A good responsive site is definitely the fastest way to keep inventory & item descriptions updated in an online store. I like your example of ecommerce responsive mobile experience because I see a lot of brands that still aren't there yet. If a brand has a poor mobile presence, I end up shopping there less. Online shopping saves time, so I actually don't go into stores that often anymore.

    If a retail store is out of stock in an item in my size, I always check online right away before asking the customer service rep to look up the item in stores nearby.
    - It's usually faster, and I don't have to wait in line.
    - The online store often has bigger inventory, offers more items and if I already know I like the fit I don't have to worry about trying it on.
    - I usually make a bigger purchase when I go from in store to online because I see other things I like that were not have in the store.
    - Sometimes the online store has special deals, or vice versa.

    reply >
  6. I love responsive designs. One design that fits all screens. As mobile internet users are gradually increasing day by day. The demand for responsive design is also growing with it. It provides good user experience !! Nice article !!

    reply >
  7. I'm definitely a big fan of responsive web sites. I have built some stand alone mobile sites for client before, but I am convincing more and more clients that using a responsive site is better than having a standard site and a mobile site...

    reply >
  8. I don't think anyone can really provide valid criticism towards "Responsive Sites". They have completely eclipsed mobile sites and made them redundant. The search engines loves them and they provide a fantastic user experience. Since we switched our websites over to responsive, bounce rates have decreased from mobile devices and rankings have been great.

    reply >
    • Kristina Kledzik

      Great to know that responsive has worked for you! Most of the criticism I see around responsive web design is because a) people think that mobile visitors have substantially different goals from desktop visitors (which I don't think is accurate), or b) they want something like a game or a full page navigation experience that is not possible with responsive design. And then, of course, there's that whole group of people who want to knock it because they don't want to have to spend the time/money to build a responsive site. :)

  9. Today, 30% of web traffic is coming from mobile devices. So having a great mobile website should be a top priority for all website owners.

    reply >
    • Kristina Kledzik

      30% is higher than the data I've seen, but I know it's growing like crazy!

  10. Thanks a lot Kristina for the lovely blog shared. Excellent article. Great info shared. Responsive website design is always a better option than having a standard site and a mobile site.

    reply >
  11. One thing that become more difficult is conversion rate optimisation - due to the complexity of establishing better conversion rates across multiple layouts and how to effectively conduct those tests.

    Thanks for the concise article.

    reply >
  12. Hi Kristina thanks for sharing a great post, I'm currently researching more about responsive design and I found this very helpful so keep up the good work!

    reply >

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

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>