The SEO of Responsive Web Design
- Posted by Kristina Kledzik to Web Design
Will Critchlow announced back in November that Distilled's blog was updated with a new responsive design, but it occurred to me recently that we never went into the specifics of why responsive web design is so great. Responsive design has been a hot topic in online marketing for the past few months, but is it really going to become an industry standard?
Short answer: yep.
Responsive web design means that you don't have separate mobile, tablet, and PC versions of your site: the site adapts to whatever size screen it's being displayed on. Regardless of what device a visitor is using to access your site, they'll see all of the content you have to offer (no more partial-content mobile versions of sites) and they'll see it in readable way.
With a 55% increase in smartphone subscriptions in 2012 alone, responsive web design is the future of online marketing.
How does it work?
Sounds too good to be true, doesn't it? It all started with a fairly simple theory from Ethan Marcotte in a 2010 article titled "Responsive Web Design." Rather than creating a single webpage that is 800px across and centers itself on the screen, responsive webpages are composed of elements that size, shape, and place themselves based on the width of the browser screen. Elements determine the screen size using CSS media queries.
Let's start with a simple example on a grid, using 9 rectangular elements labeled A–I. On a small screen, like a tablet or an older computer with fewer pixels, the elements would display themselves in a 3 x 3 grid:
.PNG)
When the screen is wider, those elements can spread out:
When it’s narrower, they can stack:
Now, here’s a real life, complex, and, might I say, ingenious example. Microsoft’s website uses these sections:
When the screen gets smaller, elements stack differently:
For a more interactive example, go to www.microsoft.com and have some fun changing the browser screen.
In their design, Microsoft keeps all of the elements from the desktop version of the page to view on other devices. But one of the biggest differences between desktop sites and mobile sites is that mobile sites just don’t have room or the browser memory to have so much content on one page. For example, Smashing magazine gets rid of the extra stuff as your screen size gets smaller:
Here is their desktop view:
The full-sized page has two levels of navigation on the left, the main content in the middle, and search and ads on the right. It centers the main content in the middle, where you’ll be looking, but makes use of the ample width of the desktop screen.
Moving on to the iPad-sized tablet view:
When the screen doesn’t have as much room on either side, Smashing Magazine keeps the ads and search on the right, but it moves the navigation to the top in a clever way that is noticeable, but doesn’t take up too much space.
Here's their Kindle Fire-sized tablet view:
The ads were sacrificed as screen space became too valuable. Search was moved to the top, so that second tier of navigation was moved to the side to make sure the main content didn’t start too low on the page.
And now, onto mobile:
On the mobile view, the ads are still gone, along with the share buttons. The navigation has changed from a constant element on the page to a small drop down at the top. The search bar was put in the space available once the top navigation was gone.
As you can see, responsive web design gives you an amazing amount of control. With some creativity, a responsive web design can convert almost anything from PC-optimized to mobile-optimized, to anything in between.
Why responsive design is good for SEO
So now you know that responsive design is a clever idea that, with the right set up, will cut down on web maintenance and content creation. But how does that help SEO?
Usability
Google wants to send visitors to the sites that they want to see. When searchers navigate to your site and immediately return to search engine results pages, Google makes a note that your site might not be the best choice for that search term.
If you have a mobile site that has less content or looks significantly different than your regular site, you’ll frustrate return visitors who are looking for something they found on the desktop version. If you don’t have a mobile site at all, 61% of visitors will return to Google to find a site that is easily readable. Either way, your bounce rate will rise and your rankings will drop. With a responsive web design, visitors will get all the content they want, in a format they can read.
Duplicate content
Don’t worry, a mobile site with the same content as the main site won’t be hit by Panda. But you’ll still have the same content on two places on the web, which is bothersome for you and could bring visitors to the wrong version of your site. A responsively-designed website means that content is only in one place on the Internet.
Ranking for mobile searches
Google has said that it ranks sites optimized for mobile higher in mobile searches. Google recommends responsive web design, meaning your responsive designed site will rank as well on mobile search as a site designed specifically for mobile. That’s especially useful for...
Link building
With a responsive web design, a link to your main site is a link to your mobile site as well. Mobile sites are still new, so your competition in mobile search is going to have significantly fewer backlinks. A responsively-designed website will have the backlinks of your original site, even while competing for mobile visitors. It’ll give you an instant edge over there. And, as mobile usage rises and webmasters start linking to mobile sites, your backlinks from both mobile and desktop sites will combine for a stronger backlink profile.
Early adopter recognition
Making your site responsive now, when the topic is hot but largely unused, will get you noticed. Here are a few great examples:
- http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/
- http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
- http://www.clicknewz.com/5984/benefits-of-responsive-web-design-examples/
- And, of course, Microsoft and Smashing Magazine from this post.
Results
As you can probably guess, if your site was previously unoptimized for tablet and/or mobile, you’ll see a decreased bounce rate from those devices. We’ve seen the positive effects spread into the main site as well. On a fellow Distiller’s site, implementing responsive web design increased visits by over 400% in a month:
That’s an extreme example; the switch to responsive web design on Distilled’s blog didn’t have the same effect. However, results like this show that, in the right situation, responsive web design could bring amazing results.
The cons
Responsive web design isn’t the Holy Grail of online marketing, though; there are some disadvantages you’ll want to mull over before you decide to take the plunge.
Set up time
Moving to a responsive web design will take a significant amount of time from both your design team and your development team. It’ll probably take longer than most redesigns you’ve been through since both teams will have to learn a completely new concept before they can implement it. On the plus side, when other sites start upgrading to responsive web design, you’ll be ahead of the curve.
Large pages
If you have a lot of content on your desktop pages, responsive design means that all of that content has to be loaded on mobile pages. Can you imagine a poor phone trying to load all of this?
That’s why sites like NYTimes.com and CNN.com have separate mobile versions that only display a small portion of all the articles and links they have on their desktop versions. If you have a site that’s huge like that – and is meant to be huge like that – stick with separate mobile and desktop versions.
Mobile user experience
Since responsive web design confines you to the same pages and content on the mobile and desktop versions, it could limit your options for enhancing user experience. While I pointed out earlier that mobile users want the same content as desktop users, they’re searching on a tiny screen with their fingers rather than a large screen with a mouse and keyboard, so their journey to that same content will feel completely different. If you have a really interactive or complicated site that needs to have different pathways to content, like Facebook, you might want to keep that mobile version of your site so you can have that control.
So, is responsive web design right for your site?
If your site is too large or too complicated and needs a mobile site, you’re probably aware of it (and probably already have an amazing mobile site that shouldn’t be messed with). But, what if you don’t have a mobile site, or have a simple one and don’t know if the switch to a responsive web design is worth it? You’re going to do a little Google Analytics research:
Do I even need a mobile site?
Start by going to the Mobile Overview report, which is a Standard Report in the Audience section under the Mobile drop down. If the number of mobile and tablet visits is under 5% of your total traffic, you probably don’t need to worry about creating a mobile-specific site (yet: this number is only going to grow).
If it’s more than that, click on the Goal Set or Ecommerce metrics set – whichever you use to track conversions – at the top of the page, under the Explorer tab:
Are your desktop visits converting significantly more than mobile visits? If mobile conversion rate is less than half of desktop conversion rate, your site is performing below industry standard, and you need to optimize for mobile visitors.
How does my mobile site look on their screens?
Go to the Standard Reports > Audience > Mobile > Devices and change the primary dimension to “Screen Resolution.” You can change that right above the table, by clicking the Other drop down to the right of the line of other primary dimensions you could use. Try out the 10 most common screen resolutions that are used by your visitors. How does your mobile site look on them? Use Screenfly to see your site on different devices. You might be surprised by how many tablets or large phones are seeing an overly simplified site that isn’t very compelling. Even if you have a mobile site that looks great on 50% of mobile visits, if it looks bad on the other 50%, you should consider responsive web design.
Does my mobile site give visitors what they want?
Look at the mobile bounce rate under Standard Reports > Mobile > Overview. When visitors land on your mobile site, is something making them leave more quickly than on a desktop? Mobile visitors should have roughly the same bounce rate as desktop visitors.
If you have the time, do a full mobile SEO audit to really identify what the mobile version of your site needs to look like. Aleyda Solis wrote up a great mobile audit guide on State of Search.
Your best option: move towards responsive web design slowly
If you’d like to move towards responsive web design slowly or already have a pretty good mobile site out there, consider making your site responsive so that it’s optimized for desktop and tablet, but not mobile just yet. The design will be easier, but you’ll get a first taste of the technical side, and you’ll get better conversions for tablet users (which you probably haven’t optimized for yet).
Ethan Marcotte explains how the coding works in his original article and developers have been creating themes for popular CMSs (for WordPress, for Drupal, and for Joomla).
Be aware that the technical implementation is fairly advanced, and there are a number of small mistakes you should watch out to avoid:
1. Use compressed images
You might have some gorgeous photos that load fine on the desktop version of your site, but those are going to have to be loaded on mobile versions as well. 74% of mobile users will leave after 5 seconds waiting for a page to load, so make sure that you compress your images as much as possible, and use them somewhat sparingly. Smush.it is a great tool for compressing images.
2. Design for all screen sizes
A lot of designers will want to design for one mobile size, one tablet size, and one desktop size, and just make a “responsive” design that snaps the site into a different layout for those standard sizes. But we have large and small cell phones, tablets the size of Kindle Fires to 10” Samsung Galaxy Tabs, and desktop monitors as big as 30”. A responsive design is more about resizing the elements on a page as you have more pixels than it is about snapping one design into another. As designer Stephen Hay says, “Start with the screen small first, then expand until it looks like sh*t. Time to insert a breakpoint!”
3. Always show all content
It might feel overwhelming to find a way to fit all of the content from the desktop version of a page onto a mobile version of a page, but that’s the point of responsive web designs. In the examples described above, the only content that goes away is ads (which users probably didn’t want in the first place) and some navigation (which is replaced by a simpler version of navigation). No actual content is hidden. Mobile visitors want just as much information and just as many options as desktop users do, so don’t deprive them.
4. Optimize for touch
You probably won’t accidentally include an onmouseover JavaScript event on the mobile size of your site, but be aware that tablets can’t hover with their mouse either, and someone on a desktop might be using Windows 8 and want to use touch. Best practice is to make your site completely accessible with touch-only, regardless of the screen size.
5. Test on all browsers
Remember the good old days, when you complained about having to test your website on IE and Firefox? Now you’ve got:
Desktop:
- IE9 for Windows 7
- IE10 for Windows 8 (which doesn’t run Flash)
- Firefox
- Chrome
- Safari
Tablet/Mobile
- Safari
- Default Android browser
- Chrome beta
- Dolphin
- Opera
- Firefox
And those are only the most popular ones. You’ll have to test on all of those, at different screen resolutions, too.
But it’s worth it
Switching over to a responsive web design will be a big challenge, but with the way the industry is moving, it’ll prepare you for the future, and put you a step ahead of your competitors.
Have any of you made the switch? Any advice for those who haven’t?
Although not a panacea for all things mobile, responsive design does offer many benefits particularly for mid-range sizes devices but there are some downsides as highlighted in this eConsultancy post.
Whether the issues raised are 'downsides' and not just aspects of the development process to overcome is debatable. Learning how to overcome them will only improve the users overall experience. And, as developers, it is our responsibility.
User expectation is an area of concern but to some extent it depends on the type of site being searched and visited. Discovering and providing the most required information will overcome much of that concern.
There is likely still a market for dedicated mobiles sites and mobile apps to deliver specific targeted content if the user expectation can be properly identified.
Some recent investigation done on own clients showed almost all had over 100% increases in mobile visitors with one with 375% increase. Interestingly, almost all the increases were in the tablet range except for the site with the highest increase which was almost all mobile. And, that was due to the type of site it was and the requirement of the visitor. It was a tourism/location site and users accessing it on the move.
As far as bandwidth and data overload is a problem it can be addressed to a great extent by design from a 'mobile first' perspective, and can minimise the amount of data delivered to the device on 'user expectation' and 'need to see' basis. As screen size/resolution increases more content can be delivered accordingly.
Similarly image bandwidth usage is a problem but there are ways to minimise it and as mobile continues to grow, almost exponetially, in importance image servers delivering different, optimised imagery will become just another hosting option to enable it particularly for image heavy content sites. (John's photo site might be a perfect candidate.)
It would certainly be a good idea to go with this. You're asking for trouble if you don't adapt. As technology evolves so must your website. "Responsive Design" is a too business spiely for my liking. I can see it at SEO events now, "At the end of the day, what it boils down to, is profit margins, keywords, and responsive web design. At the end of the day..." etc. I think a name change is in order! I'd go with one of these:
1- Super Awesome Responsive Digital Unit Monster XVZVXZZXZ10000#
2- Prescient Technology Know-It-All 1
3- Data Acknowledgiser Pertaining To Relevant Computer Device Thing
4- The Super Web Adapter.
I like it! Let's go with #1, or SARDUM, because you know something's mainstream when we're only referring to it by acronym.
Kristina -
Great stuff. I think you've just made the case for responsive design for all of us :-)
Thanks! That's my goal. ;)
Very persuasive indeed. Definitely making me take a closer look at starting to port all of my sites over.
I'm pushing to go responsive for my company websites. I have been switching my personal websites over to responsive themes. Sure, I can see how it can aid in SEO through enhanced performance on any browser, thus improving qualitative factors. That said, I just think it's better for users, and that's who I am trying to serve. Generally speaking, serving the user and improving user experience either directly or indirectly helps your SEO and give you a bump in stats. It's just important to remember what that means based on your audience. But that's just me.
I recently started my career in web designing.And I dont know much about Responsive Web designing.Thanks Kristina for proving me some great informations about this topic.I will gratefull if you provide me more informations about Responsive Web Designing as that will help me .Thank you one again
Great stuff - you mention not to hide anything, show it all to mobile users but what if you can't (at my dev team is telling me they can't show it all) is there a concern about hiding content from search engines?
If it's a desktop or laptop they'll show everything, but on a phone they will hide some content so it can display correctly. Am I walking into a problem area for SEO? Is there a potential that searchbots will see this as hidden content?
Any thoughts are appreciated.
Thanks
Google has two bots now, one for mobile sites and one for standard desktop sites. So, if you hide it for mobile, Google's desktop bot will probably read it and Google's mobile bot probably won't.
That said, try not to hide too much content! There will always be navigational elements and other small things you have to hide and display somewhere else, but it's best to keep the standard body of the page the same.
Good luck with your switch to responsive web design!
My personal site for promoting my lusitano breeding stallion, Lusitano Legacy, never had a mobile version. However, I jumped on RWD and saw some great results, even before Google officially blessed it. After I made the switch, I saw 170% increase in mobile traffic in the first month as well as a 29% reduction to my bounce rate. The time on site seemed to show the biggest improvement from 0:45 seconds to 5:53 minutes. I think it's important to say that this is not because of any SEO efforts or any responsive magic; it's the result of delivering content in an accessible way, a point you've made too.
Responsive is the future and it really isn't all that hard to implement. I recently converted a friend's blog, and it only took a few hours to get something quite decent working; this coming from someone who really isn't too hot on web design.
Responsive design is a great option for a lot of websites. There are some applications where they don't make sense (typically web-based tools, intranets, etc) but most public-facing company websites should go responsive.
Thank you so much for this article. We are about to "redesign" my website by choosing a new theme and this will solve several issues that I'm currently having. Now, I'm going to build this idea into the mix as I look at this. Thanks.
It's cool using responsive design. I am presently implementing that on my new blog and I am already excited to launch it. I also agree responsive design is the future (but also the present). Even more in the far future, I think dynamic servers will play a big roll for big sites specially.
yes, there is day by day increasing mobile device and laptop so for low bounce rate here designing is most important factor in seo.
This is interesting. Thanks for sharing
Yes, responsive design is the new necessary evil! I've had trouble adapting but things are OK now.
The real issue I face with mobile design now is that, its impossible to design for all the mobile devices if you dont have them to work with! Web publishing companies can afford every new tablet and phone to work with, but I myself cannot. Also, I see all these new smart phone and tablet emulators and simulators popping up on the web. Too bad the people who created these things forgot to take into account the fact that not all screens have the same size pixels (pixel density). Therefore, smart phone simulators and emulators do not and cannot work! The pixel on your laptop is not going to be the same size as the pixel on your iphone or Galaxy s2. Responsive and mobile design definitely have their headaches. Thanks for the great post!
Raj IT, is comprised of experienced and talented professionals who have extensive information technology and business management experience. We at Raj IT are dedicated in providing the highest quality of services enabling the growth of our customers and our business partners with the right solutions every day.
any body know which one ecommerce site has implemented responsive web design? that would be great
Thank you for your article.
I only disagree with one thing - I don't believe that all mobile users require all the information that is contained in many websites. For example if someone is on their smart phone searching for a local plumber because they NEED one, all they want is the contact details - NOT all the other content that can be found on the plumbers website..
All you need to do is put your self in the position of smart phone users - they are on the train, waiting in a que or watching the kids play sport - then they think: "I need to book my hair in" or "gosh I'd like to go out for dinner tonight I know I'll book it".. Basically its the things you do on a phone - this is where a separate mobile version of your website, where the only things available are the things you want to do on a mobile phone, comes in handy.
Yes responsive sites are fantastic (we create them for our clients all the time), but there are plenty of reasons that a separate mobile website might be a more appropriate option - especially if you want your clients to phone you or visit your physical premises.
Of course i'm talking about smart phones and their functionality and not other mobile devices, such as tablets.
Thanks againMichelle
You have a point, but I disagree with the idea that because someone is accessing your site on their phone, they're only looking for certain details. When I go to work every morning, I pull out my smartphone, answer my emails, read blog posts, etc, not because I'm on the move and need location advice or need to make a specific appointment, but because I'm on the bus and can't access the web any other way.
With my expectations of the web via smartphones today, if I needed a plumber, I would Google "plumber Seattle," choose the highest ranking plumber, read some testimonials and pricing details, then want his contact information. If he chose to only show me his contact details, I would go back to Google and choose the next plumber on the list.
It's true that most mobile users are going to want a different selection of information, and the size of a smartphone and use of your fingers rather than a keyboard and mouse mean you need to deliver a different user experience. But I maintain that you need to offer the same information to your mobile visitors as you do to your desktop visitors - otherwise your mobile visitors will go somewhere else.
Twitter Bootstrap and Zurb Foundation can help in creating responsive designs for people who don't excel in web designing.
Quick tip: we've been creating responsive webdesigns for our clients for almost 6 months now, and found the Foundation Framework to be an excellent starting point with very easy learning curve and many features. There's also a WordPress starter theme based on this framework, search in Google and you'll find it.
Great post Kristina. Our company just got done with an entire responsive website redesign. We're currently in testing mode, sending 50% of new users there & 50% to the old site. We are already seeing improvements in many areas and are excited to start seeing the residual benefits of our efforts. This was my first experience working with responsive design, and I loved the flexibility it provides. It was a lot of work, but worth every day we put into it. +1 for going responsive!!
Lance
I think a great example of RWD is done on the homepage and knife gallery of this knife site http://shun.kaiusaltd.com/knives. Check out the filters and how they move and eventually go off canvas for smaller displays. According to Site Inspire, that site was designed and developed (in part) by Jordan Sowers.
Good overview of all the pros and cons of responsive web design. With so many people browsing the web these days with all kinds of devices other than the standard pc/laptop, you just can't afford to not serve them up with a good and readable site.
I'm currently using a mobile site and my bounce rate for mobile is lower than that for non-mobile so that's a good sign users are happy with the flexible layout. Responsive design seems to offer even more flexibility and usability than a mobile site though. So I'm definitely thinking of switching soon to try it out!
Great resource! I must say thank you for this beautiful and precious article. I really enjoyed that.
Does anyone else get frustrated when they are locked into mobile view of a site?? Since the iphone was released it was supposed to be able give us a full view of the internet. I am wondering if the mobile devices we are talking about are the older limited view phones that need the smaller view stack.
Hi Kristina,
Great overview and even more validation for using responsive design. One question - I've been using Smush.it but noticed more errors recently. It now seems (going by discussions on WP.org forums) that Yahoo is either severely limiting use, or maybe even stopping access:
http://wordpress.org/support/topic/disabled-temporarily-due-to-an-error-1
If so, can you provide any good alternatives that aren't too technical or server-heavy?
Thanks!
Thanks for the share !! Responsive design is the way to go for future web development, specially from SEO point of view.. Yes it is good to optimize your site for mobile users for better user experience.. why to penalize the users who fall on our page with missing content ...
Great, very informative and useful, thanks very much.
This is awesome. I used to be skeptical of SEOs that talked about site design and mobile. But I've seen the light (and this post helped me see it!).
Now are days responsive design must be require because lots of traffic comes from different mobile device. For good Seo its needed and it will decrease bounce rate of your business web pages.
Good article Kristina. It's good you added "4. Optimize for touch" because it's important to realize that responsive design is much more than just a design that adjusts itself according to the screen size of the device. It can also have different capabilities, depending on the device. For instance for tablets you may want to use swiping functionality etc.
Your concept is extremely fine. I am also a seo related person. Without Responsive Website Design website optimization is very difficult. This blog describe all the features of web design. Webmaster also follow the all rules of seo. Day by day many new sites come in our network so the competition will be high to higher.
Technology has improved tremendously and nowadays we live in a world where almost every person owns a pc, mobile phone and tablet. And having a responsive designs on your site is already an edge.
Responsive design isn't the end of the road. It addresses layout problems but doesn't solve important issues, like mobile performance and device customization
Fantastic post Kristina, I love how you r insights on this article. There are also some basic elements to incorporate in order to make your website responsive. And one of the basic element is considering the color of the site. - Basic Design Elements Applied in Web Design: Tips from Birmingham Experts’ POV
Nice one Kristina. We love responsive design. However, like Ryan, we overlooked its advantage when it comes to SEO. I also agree with you, since internet gadgets or devices are becoming smaller (as people wants to bring it anywhere they want) websites should also be accessible and following the trends as how devices evolve. Having a responsive site is really a great way to reach a larger market. Looking forward to reading your next blog.
Clearly it is only a matter of time before the importance and creditability google gives responsive sites starts to really show in the rankings. This is an awesome right up that should encourage us all to future-proof your sites for the ongoing changes and algorithms our search engines are using these days.
First of all, nice long article.In my current projects I tend to use specific domains for the mobile sites, as I can make they rank better for specific Mobile searches, and using responsive I can't be that specific on choosing Titles and descriptions that can rank better for users coming from Mobile devices.
I also make specific changes depending on what Equipment the user is using: For ex, my mobile sites have different menus for iPhone or iPad.
To test the website resolution, I also like to use viewlike.us
Loving the examples here Kristina (both in your post and the links you provided). Fantastic and very thorough post. Responsive web design will become a hot topic in 2013 and onwards IMO.
Really nice work. I try to translate it for my friends. Thx from Poland!
Hi,
Thanks for the article. I recently took a HTML/CSS class and found it very fun and intersting in creating a responsive site. Whether it is the design or programming, I found it very intersting. LOVE IT!
Thanks for the post, I've been hearing about responsive web design for a while now, but I had no idea that it can be beneficial from an SEO standpoint. And the fact that you may even not want using responsive in some cases was even a bigger insight for me. Great read!
My company came up with a great tool to test if your site is responsive across multiple devices. The results get emailed to you in a matter of minutes. check it out! http://www.vertic.com/responsive-design/
Great Post very informative thanks for the updates about responsive design.....!!!!
Great work Kristina! Responsive Web Design is a must have these days, as mobile browser usage already increased to 14,55 % of all web activity. I think that in a few years the mobile usage of Internet will be equal to its desktop opponent.
Responsive design has become an important factor. We are making our design portal www.yourdesignpick.com a responsive one so that we dont loose mobile traffic.
Great post Kristina. By the way, that's my mom's name. :-)
With more than 100 million people accessing the web via iPhones, iPads, Droids, Blackberries and other smart phone-type devices, the market is just too big to ignore. (Please have a look at our blog post on responsive business websites http://kayakonlinemarketing.com/blog/bid/169043/does-your-company-need-a-mobile-website.)
We find it a lot easier to deploy our clients' sites in responsive as opposed to mobile enhanced. Simply tweaking code to perfect each view is tedious at best.
For Wordpress sites, we'll pick responsive over regular every day.
Very good insight! Truly useful! Amateur SEOs don't pay attention at Web design..
tks for sharing it
Great read. Do you have the source where Google recommends responsive design for better rankings? Anyways, here is a good source for developers to get started developing in responsive design: http://twitter.github.com/bootstrap/index.html
Yep, here: https://developers.google.com/webmasters/smartphone-sites/. It's #1 on "Overview of Google's Recommendations." I believe the put out a blog post when they first started promoting it too, but I don't have that on hand.
@Jake - Google recommends the responsive design to improve the user experience, Google does not promise better rankings for a responsive website design.
dev.google.com/webmasters/smartphone-sites/details
No, they don't, but building your site the way Google recommends you do means their bot can definitely read your site, and that usually leads to better rankings.
Another bad part of those responsive web designs is that developers tend to use more javascript/ajax/ calls to do them, so from a SEO point of view, not all the robots will be able to see the actual content of your page.
From the user point of view it will be great, but from SEO might not be. Take care and discuss with your development team regarding this issue to come with solutions.
Yes, I think there will be some growing pains as websites make the move. But, a well implemented responsive web design can be fully readable by search engines.
Great recap Kristina! Responsive design is something my firm has been dealing with for a little over a year now. We've developed several websites on a responsive template and have come across several of the points you've discussed in this article. It's my personal belief that several of the questions regarding the mobile versions of websites can be answered or avoided by hiring the right designer. Here's a few of my tips when considering hiring a responsive web design firm:
*Creating the perfect responsive website comes down to hiring a great designer, and then a front end developer that works well with that designer. Designing a responsive site is a serious team effort. Find a great team, and you'll avoid a ton of headaches. *Make sure your designer has plenty of experience working within and designing on a grid.
*As a client, minimize your expectations for crazy, off the wall responsive design. When designing on a grid, some creativity is forced to be sacrificed.
If you have a good designer, that keeps the needs and goals of a website in mind while designing on a responsive grid, you can make your mobile site achieve the usability and communicate your message as efficiently as your desktop version. Here's a few examples of what Miles Design has done over the last 6 months.
Great tips, Robbie, thanks for sharing!
Thanks that's a great explanatory article.
We had a really bad experience of coverting our website to responsive and it's put us off totally. In retrospect, it's apparent that the idiot doing the conversion was no more a web designer than I am (hence "employing" him to do the job).
It's a real shame that Google keeps changing it's SEO goals because, for us, a long column being shown as our website just doesn't do the website justice - it's currently being re-devolped as I type. We are also of the opiinion that mobile users have got quite used to pinching in and out and don't necessarily want to see a website condensed into a single column. Surely this is where associated apps play their part?
I think your experience with building a responsive site is exactly why so many companies have built apps rather than mobile sites. But, downloading an app takes more engagement from your visitors than simply visiting a site does. I think apps work bests for sites like Facebook and Evernote that are mostly visited by return users. I don't know what your website offers, but if most of your visitors are new visitors, I wouldn't rely on an app instead of a mobile version of my site.
As to mobile users being used to pinching in and out - yes, they are, but I don't think that means they don't want a single column layout. I don't think it's the single column they really want, it's that they want the page to load and be readable right away. Imaging how quickly we'd hit the "back" button if we loaded a page on our desktop and had to zoom in. The only reason we put up with it as mobile users is because there are so many site that aren't there yet, we have to grin and bear it.
But, as more and more designers start working with responsive web design, I think we'll see some really creative alternatives. Maybe two columns, and you can swipe from side to side to see one column or the other? Maybe only certain elements will be minimized and you can click on them if you want to read them as well?
Now that was a killer writeup! Loved it... I actually read it twice to make sure I go everything. Lots of things to implement for me and my team!
Building good websites for mobile is definitely the way of the future. Although I have to say I hope that one day smartphones will be fast enough to quickly download even big web pages
I think they will, but I'd still want my site to be responsive. It's more about making all that content readable on different screen sizes than it is about making it small enough to load.
absolutely fantastic article. we've been debating about this for a long time within the office between the devs, creatives and seo. This has helped us answer a lot of questions....keep em coming ;)
Fantastic post, I do however have different views on a couple of area's, and that is the age of the technology and the amount of development time(setup time) that goes into a responsive design. The technology itself has been around for a number of years, and while I do agree with you, that yes you should get on the boat as soon as possible, I would not go as far as calling this stage of responsive design an "early adopter stage".
The development time, or setup time as you put it shouldn't be as drawn out as you make it sound. I do understand if your working with a team that is implementing it for the first time, yes it could take significant hours. It should honestly take no more than a couple of hours for planning, a couple of hours for design mockups(assuming you have the main design mockups ready to use as a reference), and 3-4 hours for development integration as it is just some basic CSS additions.
But this is an even bigger reason why every site needs a responsive design - it's too easy not to do... *cough*SEOmoz*cough*
I was fairly conservative in my estimates because this article is aimed at site owners or consultants who are implementing for the first time. But, you make a good point, it's just the first time that this is going to be a big change, and after that it won't be so hard. Make the change, people!
Great post. I'm in the middle of a mobile redesign now and you gave me some ideas.
thanks
I'm glad that mobile is getting more focus now, as a techy who's worked in the industry for the last 7 years I feel like the rest of the world is finally catching up.
e-Commerce and sites with lots of content can still go down the responsive design route, you just have to remember to design for mobile and then pull in everything else using CSS and Javascript to build up the larger versions. That way you save on the bandwidth for the low end data connections.
Responsive design is great for a 80% of mobile but the last 20% of mobile relies on things for which responsive design just won't work due to the mess that the mobile ecosystem is in due to the diversity in compliance and regulations per MNO, industry, ad partners, country legislation, payment requirements etc. There was a great discussion on Google+ about all of this a few months ago actually.
Interesting points. From an SEO perspective, "then pull in everything else using CSS and JavaScript to build up to larger versions" makes me cringe a little, since search engine crawlers might not read that if you hide it. But, if that extra content is mostly images, it's a great idea!
Oh text should be kept, it's mainly images, javascript, embedded videos, anything extra which the user won't see but would slow down the rendering of the page. The average data-speed on mobiles is still really GPRS. 4G is just too limited and even 3G can be hit and miss (location depending that is).
Great article - we've been practising safe responsive design for a while now.
http://www.edwardrobertson.co.uk/responsive-web-design
One thing you didn't mention, I don't think all of the redirects from desktop sites to mobile sites for certain user agents, and back again help your mobile SEO - another reason responsiveness is the new King.
Sweet! It's good to hear from people who are using responsive web design already. :)
To be fair to those who spent their time making their (separate) mobile sites very SEO friendly: I think that those links back and forth can be fine, but it's easy to mess them up!
We've made the switch for a handful of client sites now. While the increase in number of visitors on mobile has been impressive (ditto for incoming search), it's the increased number of page views and conversion rates that have our team stunned. We anticipated good results - we did not anticipate it would be as high as it has been. In a couple cases, the new conversions have literally covered the costs of the redesign.
Thanks for sharing - we've just seen a handful of sites do much better with responsive web design, so it's good to know other people are seeing the same thing! I'm not sure why we're seeing such a big jump - maybe Google's actually giving some preference?
I am Nagamalleswari seo analyst what points you are discussed in responsive webdesign concept, in seo point of view I agree with you. we definitely will get a significant fewer backlinks from mobile search engine. So we get much more backlinks through responsive web design. In other matters like usability and ranking concepts your discussion is very clear and informative. So such a nice information.
I am a German web designer and responsive web design was the topic no.1 in the web design scene in the past month. It will play a big role in the future. And you are right: More links to the same site is better than dividing those links, I guess.
Glad to know web designers are preparing for it, because SEOs are going to start asking for it!
It is talking about nice
All designers will have to do it eventually.
It's more than just about dividing links, though. Google prefers RWD and will start rewarding it more. I believe that's the direction they're going too. See more here: http://www.widerfunnel.com/website-design/google-weighs-in-on-responsive-website-design
As Kristina says, the user experience is better too. We've been doing a lot of conversion optimization for RWD sites and finding principles for cross-platform conversion rate lift. Here's how it works: http://www.widerfunnel.com/conversion-rate-optimization/conversion-optimization-for-responsive-web-design
It's more complicated than WYSIWYG design, but worth the effort.
Thanks for this great article on responsive web design. Mobile SEO in general has been a hot topic to watch in 2013 so it's important to take an analytical look at what is involved in making a website mobile/tablet friendly. At the start of this year, we made our website "responsive for mobile devices" and it does feel good to have sorted it out. We've noticed that bounce rates have decreased for mobile devices as well, so it clearly has it's advantages.
I really liked the Whiteboard Friday that Aleyda Solis did last year on Mobile SEO Strategy, so I'd recommend that as further reading/watching for anyone that is interested:
http://www.seomoz.org/blog/4-tips-for-your-mobile-seo-strategy-whiteboard-friday
Thanks for pointing that Whiteboard Friday out - you definitely need to understand mobile and tablet SEO and web design strategy before you even start with responsive web design!
I really like Distilled's new responsive design. It's very clean and simple to navigate.
I have no doubt that this will become the standard but the distinction will be made by those who take the time and generate a content strategy with the different users in mind.
How long had Distilled been planning their new responsive design before they launched it?
It actually only took about a month to update our blog, but blogs don't have too many components, and we have some super awesome designers on our team. :) We've been slowly rolling out updates to the rest of the site since November.
While I've not done testing on an ecommerce site yet, the response from a news site I run has been great. Visitors are more engaged, view more pages and stay on site for longer. Which is exactly how I access sites, often a quick browse on a desktop but then I'll Pocket a stack of articles and read them in the evening.
Kristina,
Thanks for the detailed explanation on responsive design. Like you said, if your site is into too much of products then it is not feasible to go to responsive & also it'll take huge time to get transition from current to responsive. So, I hope it is not right for us to go now but yes we'll slowly get into grip of responsive because you never know what today is working tomorrow may not.
P.S Thanks for the mention of Screenfly. It was an awesome tool.
It definitely takes time, but it's a good investment! You might want to start making certain sections of your site responsive (like we did at Distilled) and slowly roll it out to the rest of your site.
Perfect timing Kristina, I'm just in the process of developing a responsive design for my personal blog. We have also been looking at offering responsive retro-fits to our clients so this will help out a lot. Particular thanks for the heads up on Sreenfly!
Thanks again, Matt.
Wow! This is a really great post. More and more people use their tablets and mobile phones to surf the Internet. I am always looking for new ways to improve my website. SEO is also very important to my business. I will definitely use these tips to improve my site.
great article! I'm developing an app and this post is very useful for me. Thanks!
nice point but i want to know more about mobile website, tell me more about content in mobile website, how to design for mobile.
Perhabs this is a better article to get you started? www.netmagazine.com/tutorials/get-started-mobile-seo
Great help in terms of Mobile optimization. Responsive webdesign is very usable and beneficial for both mobile and browser viewing.
Thanks for the great share.
Cheers.
Awesome Kristina. I like that you pointed out that hover effects and mouseovers don't apply to mobile, tables, and Windows 8 touch. It is comforting to know that if your website is built on a popular CMS like WordPress, that there are 1000s of responsive themes available now for about $40.
Last year I caught wind of Google testing a smartphone icon in the search results signaling that the site was responsive or mobile friendly. Curious, do you know whatever became of that?
Stay awesome
I forgot about that test - I tried searching on my phone (an Android) and didn't see those icons. If the icons didn't increase click throughs, though, I wouldn't be surprised to hear that Google quietly stopped showing the mobile icons. Which is a bummer; that would have been a nice incentive for us to convince companies they should optimize for mobile. :)
kristina
one problem we are facing when we use the bootstrap framework.
bootstrap framework could not validate the HTML & Css (almost 500 to 800 errors and warnings)
Google consider our site for ranking?
Our SEO efforts did not face any losses?
if i adopt this newly born technology then my web site is suffer any issues?
normally when technology new born then lot of issues will face them,
right strategy! when product / technology will be stable then we will adopt it other wise we face some losses in our ranking or SEO effort? is it right or wrong?
You shared really an excellent and informative post. In my opinion i think responsive web design is a good solution for B2B business as in today scenario mobile users are increasing day-by-day and we have to work on to perform good seo for responsive websites that helps them to boost in the online market. This post provide helpful information. Thanks...:)
This is a fantastic article; thank you very much!
I have learned a lot about landing page designs, conversion testing, etc. over the past 6 months. Traffic is fantastic, but converting them into clients or customers to increase the bottom line is critical as well.
I just redesigned my website from a traditional WordPress site to a responsive WordPress design and it is great.
Here are a few pointers I learned and would love to share with everyone:Check the site on mobile devices, tablets (7" an 10"), laptop, and different size monitors.(this takes time, any quality redesign and testing takes much testing)site architecture comes into play herethe placement of call to actioncontact informationsidebars, etc.contact form (also have a contacu us buttom so it goes right to email, if someone used a smaller device to view it)load timesliders are great, but they increase load time significantly especially on a mobile device(I removed mine and love it)the dual core smartphones seem to handle this well, but many of them don'tagain, test on multiple deviceslimit it to a few and think about the purpose it servesas mentioned above, use compressed imagesI didn't see a huge increase in traffic, but noticed more time spend on the site from smartphones and tablets, and a few more leads.
A key point as Robbie Williams made is site architecture, front end and back end development, have a great designer or consultant who understand this concept.
Love to help and share what I learned; it is exciting! :)I also have a superb contact if you need a totally new design - success is the path we take to get there!thanks again for the article!
Thank you so much Kristina.
This is really a very good post on responsive web design. Now days clients are also asking for mobile websites.
And this post is really very helpful to me because I am already in process to make my website design responsive. From your this post I got so many information that what points i should consider while design website for mobile device.
Also I would like to know that.. Do you know the list of open source ecommerce platform which supports responsive web designs? if you know please let me know.
Don't know of any ecommerce platforms that will help you build a responsively designed site, but I know found an article about a site that built a responsive site and used Demandware (www.internetretailer.com/2012/10/04/responsive-web-design-logical-way-browns-shoes). Maybe someone else here has a full list?
Thank you for the link of that article. Recently I have requirement of one client for his ecommerce website should be developed for mobile devices as well.. and I did some research and found some of open source which supports responsive design. such as
1. Joomla
2. Prestashop
3. Open Cart
4. OScommerce
So right now I know about above open cart which support responsive web design. So I wanted to know list of other ecommerce platforms which support responsive design. Because everytime client have different requirement. I am trying to find list of ecommerce platform which support responsive design. I will inform you once i will get that. Thank you so much for your help.
StudioPress is now rolling out new WordPress themes and / or updating their current themes to be responsive. Will it work for ecommerce? I'm working on a site for that now, but too soon to tell, but I'm liking it so far.
(notice, no aff. links. Just honest info based on opinion)
:)
It's not a pure eCommerce platform per se, but the Wordpress-based WooCommerce has some really nice responsive templates available for it; and because it's based on Wordpress, developing your own themes and such is about as easy as it gets.
Thank you Daniel for your help. Yes I am aware about woocommerce but didn't know that this plugin also support responsive design. I am also trying to collect the list of all open source which support responsive design. I will inform you once I will make that list.
I've been considering responsive design recently so this is a timely article.
I have some reservations though that aren't covered here. Most half-decent sites seem to perform well on the larger tablets anyway, and reponsive web design is going against a few standards that have built up over the years, for example, setting exact width and height attributes on every image so the browser doesn't have to reflow. Now a reflow will be required every time the page loads or viewable size/orientation is changed. Do you think this matters? It slows down page load and can be a poor UX when items you've already started reading suddenly move.
As for John F. Doherty's photography site - could the increased traffic be due (at least partially) to the MASSIVE size* of his photos appearing higher in image searches compared to before, when I think they were smaller?
*(sorry John, but they take ages to download!)
Thanks for pointing that out, about reflow. I didn't read anything about it in my research, but it certainly seems like something to be aware of.
I think that a key part of responsive web design is putting the looks of your site in the hands of the browsers that visitors are using to load sites. I know that's scary to designers (and warranted, after the scare that was IE6), but I think that most modern browsers now do a fairly good job of rendering sites as quickly as possible. Hooray for competition!
As for John Doherty's site: hopefully he reads this and gives more details!
Nice post Kristina. Currently the framework which I have told my web designers to use Bootstrap which is made by Twitter for the client websites which gives the perfect responsive design for all the versions. I have tested websites made with bootstrap which is perfect for all the versions of the devices and also got increase in traffic by 200%
A 400% increase in traffic for Distilled? Crazy!
The thing is, there are still some downsides to a responsive web design. But seeing that much increase in traffic... (rubs his hands*)
There's work to be done!
Not quite - 400% traffic increase for John Doherty's photography site. Distilled.net's traffic didn't have any noticeable difference after we implemented responsive web design on the blog. We've been rolling out other updates slowly, so that'd be harder to measure.
I see my bad on not noticing it was John's photography site. Yep I noticed Distilled's been doing a lot of changes recently - will the results of which come out as a case study, perhaps, on one of your next blog entries?
Dear Sean, by introduction of new google image design there may be a huge traffic drop down for websites from February. Mainly the websites publishing images. Now with new design og google images, if somebody click on the image of image search result it opens in same page. So the traffic drop will be very high.
Great Article - The Duplicate Content issue isn't really valid: http://www.youtube.com/watch?v=mY9h3G8Lv4k
GREAT post @Kristina! I'm a huge fan of these responsive designs! We see a variety of devices being used for web surfing; from smart phones to tablets to e-readers or laptops. The responsive design can deliver the best user experience which is extremely important!
Thank you for sharing!
Yay, responsive design! If you can afford it, it makes for a better user experience all around, and that's the goal of search ;)
If you can't afford it, try bootstrap [http://twitter.github.com/bootstrap/], ideally as a plugin for your Wordpress site. Not sure if there are plugins for other CMSs.
Thanks for covering the pros & cons. I wonder if offering responsive design up-front will become a unique niche for designers targeting small to medium sized businesses.
Kristina - the last I heard that Google has yet to directly reward sites for responsive designs in the rankings. As you mentioned, you will get rewarded for a lower bounce rate and more user engagement. Do you have any direct proof other than the experiment quoted below.
"Google has said that it ranks sites optimized for mobile higher in mobile searches. Google recommends responsive web design, meaning your responsive designed site will rank as well on mobile search as a site designed specifically for mobile. That’s especially useful for..."
Also, many of the large sites live on ad revenue and will not be able to afford to convert to responsive design if they have to leave their ads on the table and lose 25% of their revenue. I can't see that Google will punish the big brands for not going responsive.
No, I think that most SEO benefits that we've seen are coming from the lower bounce rate and increased user engagement.
But using a responsive web design doesn't necessarily mean you can't use ads; I just showed some examples where they didn't. There's a good article that discusses advertising on responsive sites: www.markboulton.co.uk/journal/responsive-advertising. A quick summary of that article: it can be done, but it has to be done with ad packages rather than specific placements, and just like responsive web design, you're going to have to expect to move ads around and resize them.
Good stuff Kristina. Being a developer, I always get asked about making a clients site responsive and mobile friendly. I've never really sold it from an SEO point of view, I would just give them the regular spiel of it's better for users and more and more users are searching for sites on mobile devices. But thanks for the reminder to mention that responsive sites can rank higher too!
Responsive is definitely the way forward. I'm glad to see both SEOs and web designers picking up on this and starting to design sites that look great across the board. Remember visiting sites on your 5 year old smartphones? They weren't so smart.
Kristina Kledzik,
Responsive design is not mobile SEO but good SEO for news sites and blogs...true mobile SEO can be achieved under the same URL with dynamic serving which allows different HTML (Title Tag, Meta, Content, etc) depending on the device type.
I posted on this and more at Search Engine Land - http://searchengineland.com/responsive-design-alone-is-not-mobile-seo-124202
Great writeup overall and very descriptive while to the point :)
,Michael Martin
It's true that responsive web design doesn't let you do mobile-specific SEO, but I don't think that means you can't use responsive web design on your ecommerce site and not have a well-optimized site. Yes, you target by shorter keywords and location with mobile SEO, but focus more on long tail keywords in desktop SEO, but I don't think you can't optimize for both in one webpage.
That said, you have a good point, and I certainly have coworkers who agree with you. :)
Great post Kristina. Thank you for providing real-world examples of effective responsive design, as well as making the case eloquently from an SEO perspective........as I attempt to do too frequently!
Thank you for sharing these tips with us. You have said that having a responsive design for your site is good for seo and I totally agree with you on that one. In the field of essay paper writing having duplicate content is not only bad in google rules but also would result in plagiarism. That is why I would opt for what you have described here as having a responsive design because this would add more value to my seo campaign.
[link removed]
You are really right mam. Day by day there is high increase in number for visits from devices like mobile, tabs, smart phones etc. Many of the pages I have made in recent projects are easily opening with mobile devices. Hope there will be good change in CRTs rates and business conversions.
Responsive design is the need of the hour if one has to stand tall in the world of web, Giving your full potential among the crowd of webmasters. Nice and beautifully crafted article. Covered the whole length of the web design tactic with ease and right perspective.
You are absolutely right sir.
I too faced some difficult time as SEO for many projects. Some sort of website optimization works conducted for reducing loading time and for achieving w3c validation, will hurt the designer's point of view. I really miss some lessons learned from the post made by Kristina mam while making aware of my designers about responsive designs.
Really there was hard time, The site owners (boss) will ask for creative designs especially for protecting their brand name and brand image in all sense. But while optimizing most of designs with j-quires and flash will be disturbed a lot.
Some times pages created aiming Firefox or chrome browsers will not be suitable of IE. Even we understand a little later that the beautiful web pages designed colorfully with super j-queries and flash with amazing drop downs are not opening in few versions of Internet explorer.
But now these type posts are really good in all sense