Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I've heard a variety of opinions regarding the pros and cons of using responsive web design recently and was wondering whether it was necessary for small businesses that target small geographical areas to implement responsive web design?

Some sub-questions I have regarding this include:

  1. Is it better to use responsive web design as opposed to having separate code utilized for different dimensions/devices?

  2. Can it potentially affect SEO (positively or negatively)?

  3. What are the main problems I could run into when optimizing a website for a business using this design method?

share|improve this question
    
You've just made a drastic change to your title question without actually modifying the content. Are you really sure about that? (Hint: the answer is now "no.") –  Su' Sep 28 '12 at 8:34
    
@Su' Sorry about that, I just realized it would completely change the answers I would receive so I did a 'rollback' –  null Sep 28 '12 at 8:37
1  
How Important? Zero to little importance for most sites. For an App or tool more so (1) Responsive vs Adaptive? Varies from person to person and project to project. In short no one method is better and usage also depends on the audience of the site. (2) Affects SEO? No. (3) Main issues? You will have to test more, fix more bugs, and code more, some things will not work when having a reduced width and some things will violoate TOS (adsense) if you remove or change them. Here's 10 important features for web apps in this video which IMHO apply to most sites anyways vimeo.com/10510576 –  Anthony Hatzopoulos Oct 3 '12 at 19:50
add comment

5 Answers

up vote 18 down vote accepted
+50

Mobile internet use is widely predicted to exceed desktop usage within a couple of years from now, so some sort of mobile optimisation should be a serious consideration for any business.

In many ways, this is especially true for small, localised businesses: predictably enough, a lot of mobile searches tend to be focused on finding things nearby - think of finding a shop, restauraunt, etc.

As of May 2012, responsive design is Google’s recommended industry best practice when designing for smartphones. One of the principal benefits is that you're running one site: that's one site to design, build, maintain and promote. It's efficient.

From an SEO point of view, hosting a seperate mobile site, e.g. m.example.com, means you need to optimise 2 seperate sites and divide your businesses value (PageRank, authority, etc.) across the two locations. While you can avoid that by serving content on the same URLs via user-agent detection, this doesn't deal with the duplication of effort (it's still 2 seperate sites), and it also introduces more technical challenges, e.g. ensuring your user-agent detection works and is kept up-to-date, that search engines index the right content in the right index, etc.

In all, responsive design is an elegant solution.

To answer your other questions:

  1. Touched on above, but also consider how quickly the mobile market develops. The more flexible your mobile solution, the less you'll need to do to keep up.

  2. Depends what you're comparing against, but as mentioned above, either of the other 2 major options have significant SEO challenges attached to them.

    There's been some concern about the issue of "cloaking", i.e. hiding content from search engines, which is inherent to responsive design in most implementations. However, though this hasn't, to my knowledge, been explicitly answered by any of the major search engines, that Google regard it as "best practice" could be seen as an indication that Google is capable of discerning between legitimate hiding of content for reasons of device optimisation and other, less legitimate hiding, for reasons of manipulation.

  3. I think the main challenge is determining which content to show to mobile users. Depending on your site, that might not be a problem, but in many cases it is. The key consideration here is to understand what your mobile visitors are trying to do. For example, someone on an iPhone probably wants quick, easy information or transactions. The same person on an iPad is more likely to be interested in a more leisurely browsing experience.
share|improve this answer
add comment

The idea behind is to give an optimal browsing experience to your visitor regardless of the device. As the number of your visitors that use a mobile device will almost likely increase instead of decrease it makes totally sense to go that route.

There's a number affordable (not to say cheap) themes out there for Blogs and CMS you can immediately try out and see if you like what you get (Verify with all your or some of your customers devices).

  1. As long as you have to special reason always try to focus on one codebase. A reason might be you want to offer a specialzed website like a "web app".

  2. SEO: no. As good and bad as a non-responsive layout.

  3. You have to do a little more planning in the beginning. What content should be displayed on the smallest device, how should the order of content be? Things like that. Or: Does my content look good in every of my supported dimensions? You may also want to optimize the sizes of your images for each of the dimensions to deliver not only browser-scaled images but real-resized ones. If your CMS does not support that it's some more work.

If you plan to include ads from an external source you also have to verify if the given formats play well together.

Edit:

Let me add that if you have historical web analytics data available (say Google Analytics) you can easily look for the number of Mobile vs Non-Mobile users, identify the used devices (down to the actual hardware) and take a look at screen resolutions ("Do they actually see my pages or just a part of it and have to scroll?").

Second edit:

According to this post "Mobile Websites vs Responsive Design: What’s the right solution for your business?"" on the Google Analytics blog a site designed with Responsive Design in mind has this Pros:

  • Ease of updating
  • Optimized for Search Engines
  • Adding conversion and redirect codes

The Pros of the separate Mobile Site:

  • Designing for mobile user needs
  • Quicke site creation
  • Great DIY options

The Article "Responsive design – harnessing the power of media queries" on the official Google Webmaster Central Blog gives a nice introduction how "Responsive Design" is actually implemented.

"Building Mobile-Optimized Websites" on Google Developers states:

"Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices [...]"

share|improve this answer
2  
Google will actually rank your site lower if it takes longer to load. –  Ruirize Sep 27 '12 at 15:44
2  
@Ruirize Yes but... He asked if Responsive Design has a negative impact on SEO. And Responsive Design does not make a page longer to load. So "no". Only if you like to do that ;-) –  initall Sep 27 '12 at 15:46
    
@initall - Responsive design can make your site take longer to load on a mobile device depending on how you would have designed your mobile-only site. If it would have had a smaller page size (less up-front content, fewer libraries, etc), then maybe your site will take longer than it could have on a mobile device. Still, it's probably good to optimize a single site for low-bandwidth networks instead, but it's something to be aware of. –  Nick Oct 7 '12 at 18:45
1  
@Nick Of course, if you compare a Mobile optimized site with a more generic one (Responsive), the winner is... not suprising. This one lists some of the gotchas: blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold –  initall Oct 8 '12 at 8:02
add comment

I skimmed the other answers, forgive me if i'm redundant... I am doing responsive design every day for 8+hrs a day at this point... My clients want it because they want mobile users to have a 'unique' experience, my employers want it because it is boasted by Google as the preferred method and streamlines well. (and if boasted by Google as the way to do something most likely well work best for SEO)

Is it better to use responsive web design as opposed to having separate code utilized for different dimensions/devices?

I'd say it's better, yes. Most of your code is the same code resulting in less work than writing an iPhone app, a droid app, an iPad app, a kindle app.... you get the point.

Can it potentially affect SEO (positively or negatively)?

From a design point, i feel it's neutral; however, from a statistics point my responsive designs are doing really well. Clients love them, and customers love to use them.

What are the main problems I could run into when optimizing a website for a business using this design method?

It's a little difficult to do at first... you need to do some research into media queries and preferably have some mobile devices to test on. Keep in mind, resizing your window on your desktop is close, but how mobile devices render the internet is sometimes different than you'd expect. For instance, I designed a responsive site where I used a bg repeat for the header and on desktop it spans across the entire viewable area; however, on iOS it cuts short for some reason...

I recommend learning and trying some responsive design. check this site out for a jump start: http://html5boilerplate.com

To answer the question in the title: it's important and it would behove you to be aware of it and how to design for it, and should you decide not to use it you ought to be prepared to defend that stance as your client may be set on having this design. From my experience, clients and customers alike are loving the responsive design. Happy customers and happy clients are enough of a reason for me to pursue it :)

share|improve this answer
add comment

Responsive web design is critical - if you're creating a new site you MUST make your site responsive. Already, 50% of traffic is from mobile devices and tablets and not only is this going to grow, it's going to be come the clearly dominant form of internet use.

For small businesses that target small geographical areas, it is even more critical - SEO is going to be very difficult for a new small business, but if your product is good you can maximise how much people share what you're doing.

When it comes to reading social media, people are mostly using mobile devices now - generally in bed in the morning and in bed at night.

If your site is unusable on a mobile device then any shares that hit your relevant audience go to waste. You don't want this. It's critical to avoid it happening.

Regarding responsive or separate code: The primary downside to responsive design is that it's not as fast as separate code bases. This speed loss is going to be negligible, certainly in the case of a small local business when other factors can pop into the users mind as to why the site is 0.2 second slower than others.

The big advantage of responsive design is that you keep the same codebase. This reduces maintenance costs, testing costs and development costs.

The big thing in SEO these days is 'Site Quality' - site quality is difficult to measure, but generally speaking google use Bounce Rate and Time on Site to measure this. If your site sucks on mobile, 50% of your traffic is going to have a high bounce rate and a high number of visitors with low engagement (less than 10 seconds on the page).

This puts you at risk of Google Penalties - look at Google Panda and the new (last week) Exact Match Domain penalties, both of which penalise sites for having 'low quality'.

The main problems you could run into when optimising a website for a business using this method are that it's a new buzzword, everyone needs it, so there are cowboys out there charging ridiculously high prices for something that is incredibly easy to do.

For example, I recently made a website that has a shop, a forum, a Q & A section as well as various other pages, blogs etc fully responsive for all devices in about a day.

Here's the basics of what you need to do:

  1. Adjust the body padding and margins
  2. Move Left or Right hand side menus into drop downs instead, maybe hide them underneath an options button at the top.
  3. Resize containers, use width 100% where you can
  4. Change all your images to width 100%
  5. Decide what stuff is not needed on the phone (adverts?) and remove them (display:none)

Here's some sample code:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

What that does is remove anything with a class of 'advertbox' from smartphones (with max width 480px) and reduces the body margin.

If you're creating a new site, this is even easier to build in since you can make sure you build a clean design with nice clean classes and good styling to suit all devices.

I hope this helps!

share|improve this answer
add comment

I think it's important to first realize that "responsive design" (RD) is a buzz-term (if I put Width:100% to an element I have a RD right there, to exaggerate) and therefor its importance appear more important than it really is as in the end it's conditional as everything else.

Is it necessary to implement RD?

To answer that you will need to state some definitions:

  1. Who is your target audience
  2. What kind of audience is your target
  3. What is the purpose with your website
  4. From where will your website be accessed (in most cases)
  5. etc.

This is very similar to marketing analysis. It's about having the right medium for the right audience (perhaps your audience sits in front of a computer most of day, or they are on the go with the latest iPhone, and so forth). Do they do both, then of course RD is central.

Is it better to use responsive web design as opposed to having separate code utilized for different dimensions/devices?

Depends on the UI's complexity and how you will use it. A typical page can in most cases be rendered by using different sets of CSS for the various displays. However, more complex or sophisticated UIs may require different approaches so it can be wise to present a different page structure and strategy depending on which device is used (Google maps for instance, multi-touch interface..).

Can it affect SEO (positively or negatively)?

SEO is more about content than design. Only Google knows if they weight design though, but design/layout, but in general if your content is of high quality this will be weighted more than actual design.

What are the main problems I could run into when optimizing a website for a business using this design method?

Designing it for the wrong audience. Analyze your target and supply with up-to-date technical data if possible (ie. visitor logs providing information about platform etc.)

New technology is always risky, ref. the HTML5 problem for Facebook. It's not fully mature at this point and invites various problems similar to the IE6 versus standards problems.

Keep it as simple as possible. Fancy web pages are only valuable a very short time until the user actually has to use your page. If it has to wait 1/2 second for a fade to finish for each click it makes, the user will be lost rather quickly. Things like that.

share|improve this answer
1  
A clear no to some parts of your answer: Don't mix "responsive design" with "flexible" or "fluid" concepts. According to the screen size a responsive design may look "fixed", because it depends on media queries to deliver different CSS based on the browser width. It's not "width:100%". I wouldn't call it a "buzz-term" because it's a reasonable concept, a nice answer to a current problem and not just a hype. Concerning SEO: At least Google put some effort into detecting individual versus just-another-theme layouts; again: the RD per se is not bad or good, depends on your content. –  initall Sep 28 '12 at 7:01
1  
100% behind the 'fixed' comment, although it is muddy water. My responsive sites at work have been fixed with fluid internal elements. I would argue that it is a little bit of a buzz-word at the moment but I imagine very soon it will just be called webdesign/development. I think the SEO impact might come if companies have a mobile site instead of going responsive...but, I have no idea on the effects of this SEO wise. –  DBUK Sep 28 '12 at 19:30
add comment

protected by paulmorriss Jan 10 '13 at 10:10

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.