: How important is responsive web design? 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

@Cooney921

I would just like to chime in with a different perspective:

No, its not mandatory or even recommended. It depends on who your target audience is. Look at your analytics and see what percentage comes from Mobile and of those coming on Mobile is there any significantly drop compared to your Desktop users?

To give an example where I work our site is not responsive. 90% of our traffic comes from Desktop users though and the Bounce Rates and Event Completion Rates are nearly identical across Desktop, Mobile, and Tablet.

Until there's a cost justification to change it, there simply isn't a financial incentive to us to do so. Saying sweeping statements like 50% of users are on mobile or something is only applicable if all users are your target audience. Otherwise its completely irrelevant and bad logic to follow.

You need to only look at the % of users on mobile that you're targeting. Particularly for B2B applications most people aren't going to be looking at their phones on their free time. You'll get traffic Monday to Friday on Desktop computers.

Vote Up Vote Down

@Jessie594

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:


Adjust the body padding and margins
Move Left or Right hand side menus into drop downs instead, maybe hide them underneath an options button at the top.
Resize containers, use width 100% where you can
Change all your images to width 100%
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!

Vote Up Vote Down

@Looi9037786

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

Vote Up Vote Down

@Gloria169

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:


Who is your target audience
What kind of audience is your target
What is the purpose with your website
From where will your website be accessed (in most cases)
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.

Vote Up Vote Down

@Michele947

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:


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.
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.
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.

Vote Up Vote Down

@Twilah146

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).


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".
SEO: no. As good and bad as a non-responsive layout.
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 [...]"

Vote Up Vote Down