Navigating your site through mobile vs responsive, the latest DistilledLive video

Mobile or responsive, that is the question. Luckily, our state side mobile expert, Kristina Kledzik is on hand for this month's DistilledLive video as she ponders whether it’s better to have responsive web design or a separate mobile site.

Tune into the video below as Kristina shares some of her best design tips and insights into engaging with your audience regardless of device. You can take a look at the full transcript to accompany the video below.

Over to you, dear reader

How are you working to incorporate different browser sizes into your website design? Are you losing in the ranking game just down to your varying content across devices? We'd love to hear from you in the comments below.

DistilledLive | Choosing responsive over a separate mobile site

Hi. Welcome to Distilled Live. I'm Kristina Kledzik. I'm a consultant here at Distilled in Seattle. Today we're going to talk about mobile SEO, specifically the question of whether or not it's better to have responsive web design or have a separate mobile site. Now, typically we're going to recommend that you go with responsive web design, because it's just a little bit easier. Search engines understand that it's the same site regardless of what device is visiting. They don't even have to worry about that. When you have a separate mobile site, you're going to have to do a lot extra to make sure that that separate mobile site is well-connected to your desktop site, so that search engines understand it.

So the first point I want to talk about is that, when you have a separate mobile site, you need to connect it well to your desktop site. Now there are two reasons for this. First of all, you just want search engines to understand that they're linked. So that way if someone has come to your site in the past, anything like that, the personalized search results are still going to show your site just as well on their mobile phone as when they're on the desktop. But the other reason is that your desktop site is generally going to have a better link profile, better link authority, and if you don't connect that well with your mobile site, your mobile site isn't going to rank as well.

Whenever you build a separate mobile site, you need to add code to both your desktop site and your mobile site to show that they're the same page. And this is on a page-by-page basis. If on that mobile site you've significantly change the content or you messed up that connection, that's going to break. And now your mobile site is acting as if it's a completely separate site, and it's starting to compete with all of the other websites out there that either have responsive design or have properly implemented the connection between their mobile sites and separate sites, and you're probably going to lose in the ranking game, unless you're a gigantic brand. So it's really important that you connect those two well.

The other part, which I mentioned briefly, is that the content needs to be fairly similar between the two. If you have a significantly different content on the mobile site, Google might not even trust that you have that linked together. Normally you're not going to choose to do that. But if you do decide to have a separate mobile site and you use a very different page structure, there's not really going to be anything you can link up. And that can really hurt your rankings.

The second point is that you should really be serving the same content to visitors regardless of the device that they came on. It's really easy when you're building a separate site to think that because it's a separate site people want to see less content. They have smaller screens. They don't want to take up as much room, or that they're on the go. Now first of all to address the on the go, you don't necessarily know that. Every morning when I come to work, I take the bus. And while I'm on the bus, I spend the entire time online on my phone. It's nothing to do with the fact that I'm on the go. It's just because I don't have a laptop in front of me. So if I'm expecting the robust desktop site that I visit all the time when I'm at work or at home, or really, at any point in my life, because I'm addicted to the internet, and I come on my phone and it's this horrible, tiny little site, I'm never going to visit on my phone again. And you're going to miss out on the business that you could have gotten every morning when I'm going to work.

You really want to make sure that you're offering the same content regardless of the device that's coming. So there is a good point that people make, that people are more likely to be on the go, and it is possible that you can use your analytics to find certain areas of the site that people are more interested in when they're on a mobile device versus desktop device. That doesn't mean you have to get rid of desktop content in order to promote that mobile content. It means that you should do different things to promote it.

For example, if you have a separate mobile site, what you can do is have the exact same content, but you can rearrange the points. So that way the points that are more interesting to mobile visitors are at the top, and less interesting are at the bottom. People can still scroll and find exactly what they want, but what they first see above the fold is going to be exactly what they wanted. From a responsive site, you actually can just use CSS to move around paragraphs, but have the same HTML. The other thing to keep in mind is that if it's really just pages that people want to find, you can have a very robust navigation system to make sure that people find exactly what they need.

Now, on a desktop site, it's really easy to have a robust navigation system. Everyone does. Everyone has multiple layers. But it can be really intimidating on a mobile site. What I generally recommend is having a button in the upper right-hand corner. When you click it, it opens up and basically takes up the entire screen just for navigation. Now you have that entire screen to give people all of the options they want, and you can always rearrange those to be what mobile visitors are going to be more likely to be looking for, rather than desktops visitors, which can be lower down. On a responsive site, you can do the exact same thing. Just have a break point where the navigation is minimized up into that button.

The third point is that when you have two sites, it's really easy to de-prioritize the mobile site. The mobile site is only going to be bringing 15 to 20 percent of traffic, maybe up to 30 percent of traffic. And the desktop site is taking up so much more. But the mobile site has a lot of value that's potential value that you're probably not researching right now. So for example, there have been studies that have said that 50 percent of teens and 45 percent of young adults use their phone as their primary access to the internet. I can tell you that my cousin is a masseuse, and she went for a year without having a desktop because she just used her phone to go on Facebook or all the sites she wanted. People like that you are not going to reach if you have a bad mobile site, even though you have this awesome desktop site. You need to realize that you're missing out on young people's viewership because you've chosen to de-prioritize mobile. If you have a responsive site, it's all the same. Whenever you make a change on the responsive site, everyone sees it equally.

So the first and final point is not actually related to SEO. It's really just that often responsive design is the better decision for you. One of the biggest reasons why people choose to build a separate mobile site is because they already have this desktop site. It's awesome. They don't want to touch it. They want to just spend less money and build a separate mobile site that's a little bit simpler, just based off the desktop, but smaller. Responsive design, I know, it can be really intimidating, because you're designers aren't really used to it. You're developers aren't really used to it. Designers and developers have to work together much more closely, which can be intimidating on both sides.

But what you need to keep in mind is that moving forward, you're not going to have to maintain two completely separate sites. It's going to be very financially draining, and in the future you're probably eventually going to choose to have a responsive site. And at that point, you're going to have to pay all the costs you would have paid ages ago, and you're also going to have to pay all that money in between. It's kind of like taking out a bad loan. The second point is that having a responsive site is going to be much better for user experience overall. It's really easy to focus on user agents as if that means it's always the same screen width. But think about, especially on desktop sites, how often people are going to resize their browser?

Lots of times you're going to have browser take up half of your screen, especially of a 27-inch screen. Or you're going to be a desktop site, and you're going to have a 27-inch full screen, and you're going to have these standard websites that like to limit themselves to 800 pixels. When you have a responsive site, one of the things good designers are going to do is they're going to focus on break points rather than on standard device sizes. They're goal is to just make the site look awesome regardless of the size of the browser. And they're just going to change it and see when it starts to look awkward, and then they'll fix it. So you can have a much bigger range of different browser sizes, and it's going to look awesome in all of them.

Okay. So those are my four points. So to reiterate really quickly, when you have a separate mobile site, you're going to have to connect the two. When you have a responsive site, they're just the same. When you have a separate mobile site, you're going to be tempted to have weaker content on the mobile site because you're going to cut some of it out. When you have a responsive site, you're going to have the same. Users and search engines are going to appreciate that a lot. Third, when you have a separate mobile site, lots of times you're going to let the mobile site be lower quality than the desktop site.

But it's really important to have an equal quality between the two, because having a mobile site that's out of date is going to discourage visitors. And many of those visitors are going to be young, and they're going to be future visitors. And fourth, there are just a bunch of other reasons why responsive is better. Generally, because you don't have to duplicate all of your content changes, and also because you have a stable, great user experience regardless of browser size, regardless of device. It's just awesome. So hopefully we answered all of your questions. I'm Kristina Kledzik.  This is Distilled Live, and thanks for tuning in.

Get blog posts via email