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!
