Responsive web design... any SEO benefits?

[Zivush]

We are about to complete a project of implementing RWD, responsive web design, to our websites.
We worked quite hard to bring almost the same content for every screen size. The only differences are in content presentation were with tiny pixel screens (lower than 320px) we have no choice but to remove one of the sidebars.

My question is - Does any webmaster who accomplished RWD has seen any SEO benefit? Such as -
1. Better site performance for mobile users, tablets and other visits from small desktop screens - page per visit, time on site, BR.
2. More traffic from Google (well, I doubt. At this point of time! But shouldn't they, soon? :-).
3. Conversion rate increased.
A note - Google Adsense (and many other ad networks) has yet to provide a solution that supports adaptive ads. I think this puts many webmasters on hold.

[JesterMagic]

Good question I have been wondering this myself about RWD.

[Andy Langton]

From a pure SEO standpoint, if you change the code, you'll see ranking changes commensurate with how well your code change matches algorithmic relevance.

I haven't seen any direct impact on rankings at all (nor did I expect any). User metrics all improved on sites I've done this with (as expected) including increased conversions from mobile users.

[netmeg]

I don't have responsive ecommerce sites as yet. On my information sites though, my mobile users are probably more than half the traffic now, with millions and millions of pageviews. The first thing I noticed is that time on site and number of pages per visit for mobile went way up. I definitely think the usability improved - not just because I try to fit most screens now, but also it caused me to trim some of the excess for desktop, so that it wouldn't get in the way of mobile.

I have at least one long form on the site (for event submission) and I never thought anyone would fill it out via mobile, but darned if they don't. So I looked into how I could shorten that up some.

But I don't know that I could say it was an SEO improvement; the sites were doing pretty well to begin with.

[canuckseo]

I switched my sites to responsive a few months ago. It didn't have a positive impact on SEO but it wasn't negative either - more status quo.

I saw a 2-3 day slight drop in rankings in Google until it adjusted to the new layout.

I did this because my mobile traffic was increasing and after research determined that the responsive layout was the way to go (as opposed to a mobile only version of the site).

The thing I love about responsive is that my sites look normal no matter whether i look at them on my computer, my phones or my tablets (2 different screen sizes). I also have a blog that has a mobile version of the site (not responsive) and while it looks fine on the smart phone screen it looks crappy on the tablets.

I noticed my mobile traffic had been increasing the previous months. When I hit about 12-15% of total traffic I made the switch to responsive on my main domains and my mobile traffic has increased. Is that because google recognized my responsive design and decided to give me more referrals? Hard to say since my mobile traffic had been steadily increasing beforehand. But my feeling is I did get a slight preference in Google mobile searches because of it.

The other reason for switching is that I do expect having a responsive site WILL be a ranking factor (if it's not already) later this year.

FYI the sites I switched are Wordpress sites - one uses a customized version of the "responsive" theme while the other users a different named, but still responsive theme. The theme choice has not made a difference either.

[Zivush]

Thanks for the responses.
Since site's overall performance must impact ranking, RWD may have an indirect positive effect on ranking (if it hasn't have any direct effect).
@netmeg
Have you taken care to serve the appropriate size of ads on every screen size or you just left the ads of the wide screen version?
Our sites also see millions of visits per month where many of them are from mobile devices.
Thanks for your tip. The very basic reason for switching to RWD is our eCommerce sites.
@canuckseo
I agree with you.
Responsive layout is the future. No doubt about that. Our sites are Wordpress sites too, but the original theme we use wasn't responsive. Now it is. It took us ~ 3 days to get the idea of responsive design and 3 days more to implement. It's a way better design approach. Very flexible.

I still can't ignore the risk of switching to a new design. It exists, but we will do it even if Google screams. That's how we always work.

[netmeg]

Have you taken care to serve the appropriate size of ads on every screen size or you just left the ads of the wide screen version?

Yea we came up with a solution and got permission to test it.

[Leosghost]

The item from adsense concerning the use of alternative sizes of ads on responsive sites..was also posted on the official adsense blog in French..

[adsense-fr.blogspot.fr...]

Why Google have still not posted this "google approved" method of integrating adsense into "responsive sites" in English ( so as to make it clear for the non French and German speakers is strange )..I, or anyone else ( or even Google's translation engine ) can translate it..but no "translation" is as definitive as if Google were to just post it in English on their own inside adsense pages..

Either their approved method can only be used on responsive sites whose TLDs are in the languages that Google's approved method pages are in..( Fr and DE )..or the lack of this info in English from Google is a mere oversight ?..

Or they have got so used to using FUD..that they are hedging their bets in case adsense on responsive sites on mobile devices results in a flood of complaints from advertisers about inadvertent clicks..that they don't want to take the risk of sanctioning this method is the far bigger English speaking markets..

Below is what is at the foot of their French article giving this Google approved method..

Publié par Dairine Kennedy, au nom de l'équipe Google Mobile

I find it very hard to believe that Dairine Kennedy ( Irish ) has for a "mother tongue" , French or German..So surely this approved adsense implementation for responsive sites version was written in English first..and then translated internally by Google..

So they should repost in English..and clear up the "confusion"..unless the "test it in smaller markets first"..is the reason..

Responsive sites SEO benefits ? ..bounce rate reduced ( mobile and tablet users land, and stay to read, and as G measure such things ..and track mouse movements and IMO touch gestures )..I'm recoding my old sites ( with the exception of one which I'm leaving as a "control"..it is falling in SERPS slowly ) to "responsive" and creating my new sites in "responsive"..

Long hours and late nights..a lot of sites to do..But based on observed results ..well worth the effort..

[canuckseo]

I don't have ads on my site but I was looking for a way to put a responsive google map on the page. I wonder if that code works? It uses some css and div tags:

/* Responsive iFrame */
 
.responsive-iframe-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}
 
.responsive-iframe-container iframe, 
.vresponsive-iframe-container object, 
.vresponsive-iframe-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

And then wrap your Google Map or Google Calendar iframe in a div like this:

<!-- Responsive iFrame -->
<div class="responsive-iframe-container">
 <... iframe code >
</div>

[netmeg]

Google AdSense told me (last week) that an English announcement was coming "very very soon" to the AdSense blog. They added the extra "very", I didn't.

My sites are mostly naturals for responsive design because most of them are event sites of one type or another, and most lend themselves to a ton of mobile visits (in some cases I get more mobile users than desktop users)

But I'm not convinced that mobile users in every instance search or use the web the same way on their phones as they do on their tablets or their desktops. I don't have any other types I'm working on now, but some of my clients' sites - if they wanted to go responsive, I'd really have to think and do some research about how mobile users might use the site first.

Responsive design is a relatively easy solution, but I don't necessarily think it's the *only* solution. You really have to delve into how people use your site.

[Leosghost]

Google AdSense told me (last week) that an English announcement was coming "very very soon" to the AdSense blog. They added the extra "very", I didn't.

That would make sense ( thanks for the useful news for the English readers here :) if they have "tested" our smaller markets and not had flack from advertisers..interesting to see if the name of the English announcement is "Dairene"..or if it is the translation of what she posted on Google France or Germany..

Agree with you entirely about responsive being the easy way, but possibly not being suitable for all sites..:)

There is never a, "one size fits all" solution..for anything..:)

[lucy24]

I find it very hard to believe that Dairine Kennedy ( Irish ) has for a "mother tongue" , French or German.

You don't spend a lot of time in Canada do you?

Can't help but note that over the past couple of years G### has used three separate Googlebot-Mobile UAs, as against just one for, er, Googlebot-Desktop. Obviously they're doing something with that information.

:: detour here for massive train of thought involving feature detection and recent pleas for access to .js files ::

[Leosghost]

Does anyone in Canada speak French ;)

Québécois is not the same thing..

[Zivush]

Google AdSense told me (last week) that an English announcement was coming "very very soon" to the AdSense blog. They added the extra "very", I didn't.

@netmeg
I guess/hope you are talking about enabling Arbitrary Sized Ads (non standard ads) to all publishers.
The moment this feature will be released, hundreds of sites will go responsive.

[lucy24]

Québécois is not the same thing..

Well, it definitely isn't English :P

Aigu on both e's? Really?

[ColourOfSpring]

When it comes to those who have carried out responsive design, is it really a case of "light touch" - small adjustments to your site (css widths etc) rather than wholesale changes? I ask this because I do see a lot of sites that completely stripdown their site into something that I personally would consider TOO simple for small screens. Personally I find these sites frustrating because they go TOO far - navigation is cumbersome because they've gotten rid of their standard navigation into Three Big Buttons To Click On The Home Page, then Three Big Buttons To Click For My Next Option. It's like the website equivilant of those horrible phone systems ("press #1 for...") that frustrate you. Traversing backwards and forwards through these sites is a chore. Also, I can't get a grasp of the site's size (in regards to overall content) and what's available to me - it's like they're leading me way too much, rather than letting me roam around their site as you would normally like to do.

I do think the pinch/zoom gesture was a game changer that actually made browsing the web a lot QUICKER and easier. However, I know that even with that gesture, you get sites that could use a little responsive design as they becomes troublesome on small screens (rollover navigation that doesn't really translate to touchscreen, etc).

[netmeg]

I guess/hope you are talking about enabling Arbitrary Sized Ads (non standard ads) to all publishers.

No, I don't think AdSense is ready to release anything. I think they're just going to give their permission to using a PHP if/then situation to serve ads based on the viewport, as long as you don't alter the code.

is it really a case of "light touch"

I'm not sure what that means exactly. It did force me to think hard about what I put where, because I want the most important stuff above the fold, and the fold changes depending on the viewport.

In my case, most users don't want to roam the site like they might on a desktop, they're looking for specific information, probably while they're out and about, and that's it (although given how the number of pages per visit is going way up, I might be wrong about that)

I still have tweaking to do as far as font sizes, and getting an image header to work okay and look right in all sizes is a serious struggle for graphically challenged people like myself, but at least the *site* part works.

[canuckseo]

navigation is cumbersome because they've gotten rid of their standard navigation into

This isn't mandatory for responsive design - my responsive sites switch to a very functional dropdown menu on smaller screens

is it really a case of "light touch" - small adjustments to your site

nope - mine were complete redesigns - sure they looked similar to what they did but the code did change a lot - plus I added features to one site (social media stuff) that didn't exist there before. I reorganized things and moved sidebars - everything was completely changed.

[AlexB77]

@canuckseo, Your code looks good, except, I would not set any width or height for your div only padding and margins to let it resize correctly and in accordance with the screen that it's being viewed on unless it is absolutely necessary, in which case I would also create css for various media screens. I have it on one of my sites, without any width or height and it works fine.

@Zivush, I have RWD now for almost a year on 3 of my sites. So here is what I have observed, at first and for about good 4 months there was no noticeable changes, but I was kind of expecting it to be like this for a while anyway. So after about 4 months, we have started to see increase in mobile traffic, nothing major, about 3-5% of overall mobile traffic and 1-3% increase of overall site traffic, no major impact on SEO or PR. NO the funny fact, traffic is still increasing, but mostly from social sources, which means that mobile visitors are mostly visiting from Facebook, Twitter, G+, LinkedIn and Pinterest rather then organic search again proving that people is spending more time on the social networks than searching on the mobile platforms. So, we are now little over 1 year with RWD and still no major changes is noticed in relation to SEO or PR, just simple increase in traffic mostly related to the amount of posts we make daily.

At the beginning of this year, I have been discussing the problem of RWD and Adsense with G in London, UK. It seemed that at that point and I am only talking about January this year there was not major movements towards creating add containers for variable screens and devices, but after discussing this with their programmers, one solution, which I am sure most of the guys already either implemented or at least know about is to recognize screen resolution using javascript and populate your adsense block with correct adsense code as JSON object using ajax POST or GET method after your page is loaded. This actually have no negative effect on the page load at all, I have checked it twice and most importantly it all works, at least for us.

[canuckseo]

@AlexB77 thanks for the feedback - i've only used it for google maps and yesterday a google calendar - nothing smaller than that (IE Ads)

[moTi]

sorry for being slightly off topic, but here is an important note many of you might not consider.

I also have a blog that has a mobile version of the site (not responsive) and while it looks fine on the smart phone screen it looks crappy on the tablets.

the recent years have introduced one fundamental challenge in layout delivery, namely for mobile devices. so there are really only two different basic screen sizes to regard:

1. desktop computers, notebooks and tablets

2. smartphones

the confusion arises, because tablets are commonly labeled mobile devices. in fact, they are, but keep in mind, that in terms of screen capacities, even in portrait mode tablets don't differ that much from devices like small notebooks. in order to correctly cater to tablets, it is more important to keep an eye on things like touch gestures and device compatibility features and integrate them properly.

which has nothing to do with responsive design but rather with usability aspects. so, what is the fuss really about with responsive design when the only new and fundamentally different player in the game is the tiny smartphone screen? which for obvious reasons is actually rather useless to adequately regard with a responsive design approach. why do you think apps even exist? so better come up with a separate mobile version: a webapp.

and it's not hard to detect browsers for smartphones (only smartphones, not tablets) on the server side and deliver a mobile site for them. there are solid scripts in every programming language available for free.

Responsive layout is the future. No doubt about that.

not in my opinion. in my opinion you are subject to a hype that is not thought out.

[skunker]

Hey, does anyone know how wide to code for Google Glasses? Someone saw a google class hit on their stats ...

[synthese]

Just got out of a meeting with Adsense rep talking about this very thing.

They are starting to let publishers (whom they have a relationship with - (ie. you have an account manager) use Javascript to test viewport width, set different ad units accordingly.

This code has been bouncing around online for a long time, but its not good enough IMO (thus the reason for our meeting).

We went responsive about 2 months ago. It is challenging to adapt an existing site, and if you manage to lift metrics on your mobile size you are doing well. We've noticed a small improvement in mobile usage. Ads? They are tricky to get right at the best of times.

[Panthro]

I feel sorry for anyone having to adjust a large, existing site to be responsive. Designing Responsive is like designing three websites at once.

I'm not sure of the effect it has on SERPs, just whatever you do, don't be like NASCAR and design with tablet users in mind first, then mobile, THEN desktop.

[Zivush]

@Panthro

Designing Responsive is like designing three websites at once.

In a way. It is quicker than creating a separate site (or app) in order to serve smartphone users.
Also, using em and % instead of Pixels gives a lot of flexibility. RWD is just a better approach to CSS design.

@moTi

There are really only two different basic screen sizes to regard:
1. desktop computers, notebooks and tablets
2. smartphones

Agree. I don't see any difference between Tablet users, Laptop users and Desktop users. They all have the same experience.
The main RWD purpose is to giving the all content of an information site to smartphone users while keep providing better user experience than what they could have without RWD.
When it comes to a webapp you compromise with the content. Smartphone users nowadays want the all thing not part of it. Therefore, I see an app as a mini-site, a different approach. Nothing to compare to a website.

@AlexB77
Thanks for you inputs about the traffic movements.
As of Adsense, I know the solution that you're talking about. Since it hasn't been officially recommended by Adsense, I am not going to use it.
As market leaders, they should introduce an arbitrary sized ads. Not a partial solution.

[lucy24]

They all have the same experience.

But they don't have the same range of input methods. And that becomes crucial the moment words like "hover" enter your code.

[ColourOfSpring]

I feel sorry for anyone having to adjust a large, existing site to be responsive. Designing Responsive is like designing three websites at once.

I'm not sure of the effect it has on SERPs, just whatever you do, don't be like NASCAR and design with tablet users in mind first, then mobile, THEN desktop.

There's always been this kind of developer peer pressure to get your site "made for mobile" going back as far as the late 90s. I think if you keep your original page designs simple, you shouldn't have to make radical changes for a smartphone version, if make a version at all (depends how simple the layout is).

[SEOPanda]

We're about to relaunch our site with responsive web design.

There's various types that we'll focus on, basically creating a separate css depending on user agent, and the other would be to have responsive design when you shrink your browser.

it's going to remove many elements such as content and various other things, so I'm curious how you guys handled this for SEO purposes.

Does GBOT primarily index and rank based on desktop version?

Thanks for any insight.

[incrediBILL]

I think you're looking at the SEO value all wrong here because whether visitors can find your site or not has no bearing on whether they stay more than two seconds after discovering it's not friendly for a tablet or phone.

With tablets and phones sales skyrocketing and exceeding new desktop purchases you should damn well be designing for RWD if you expect to survive at all!

I did 2 sites with help from PageoneResults from scratch which are fantastic and did another experimental site, very technical with lots of form inputs, using Twitter Bootstrap and that worked out really well too and both methods have done extremely well as far as SEO goes.

[SEOPanda]

incrediBILL, i understand what you're saying ,just curious on SEO rankings. We rank well now ,and just trying to make sure we can preserve that with responsive design so just looking for tips on that since many "SEO" elements are going to be stripped out in favor of "bare bones ease".

thanks