The concept behind responsive web design is that you don’t build separate sites for each platform. Instead you have one site in which the elements adjust based on the width of the browser screen. With the use of CSS queries the elements will determine the screen size, spreading out on a wider screen or stacking on a narrower screen. It’s really just like playing Tetris if you think about it.
Below are a few examples to help you get your head around the idea.
Desktop view
There’s lots of space, so nothing is omitted and ideally the content is centred.
iPad view
The navigation panes have moved to the top of the page, allowing more of the space below to be dedicated to the content.
Kindle Fire view
The screen of smaller tablets such at the Kindle Fire results in reduced space, so the ads are removed and only one navigation pane is on the right.
Moblie phone view
In a tiny screen the content is really all there is space for. The search bar is the primary navigation tool and the other navigation panes have been reduced to a drop down menu.
Getting your site running based on this set of principles takes effort and time. Implementation is akin to a complete redesign of your site, maybe even requiring more skill from your design and development team. But, stick with it because in the long run, it’s worth the effort.
The pro’s of a responsive website design:
Google favours responsive design.
In the long run you will cut down on site maintenance.
Responsive websites are more user friendly. This added usability will reduce your mobile bounce rate and increase your ranking.
Users will be more likely to find the content they are looking for.
Responsive sites don’t provide the user with duplicate content, it’s all only on one site.
Your links from your sites will combine and create a stronger backlink profile.
You will increase your monthly visits.
Yes, as with any thing there are a couple of con’s:
As mentioned before the setup time is significant, and the technical implementation is rather advanced.
Most importantly, mobile phones struggle to load content heavy pages. Unfortunately huge sites like NYTimes.comcannot sacrifice any of their content and have to have a separate mobile and desktop version.
Some extra considerations:
If you cannot figure out whether to go responsive or just keep a separate mobile site, its best to conduct full mobile SEO report.
Track your bounce and conversion rates amongst other things.
Comparison of your desktop stats to your mobile stats will help you figure out whether or not you are giving your users what they want and help you set some goals and strategies going forward.Bear in mind that more people are accessing the internet on their phones as more sites are optimised for mobile, so your stats are set to increase.
You still have to test your site in all browsers, in all 10 of the most common screen resolutions.
Make sure your site looks appealing in all browsers and resolutions and meets the needs of your users.One more thing, start getting your head around designing for touch. Tablets and phones have already rendered mouse-overs useless, what other methods can you use in order to make your site touch friendly?
Responsive website design is becoming the industry standard, so it can’t be ignored. Start the process slowly to see how your conversions and bounce rates are affected across the platforms as you go. You will reap the rewards.
