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:


(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):


(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!

Get blog posts via email