Responsive design refers to a websites ability to act as a chameleon, easily toggling between a traditional website and a mobile one. A responsive website uses media queries to understand the device its being loaded on. In a matter of milliseconds, the website decides how to display itself depending on screen size, pixilation, and format. Images shrink or expand, columns reduce or multiply, and text size increases or decreases — all on-the-fly.
Responsive design is a butterfly emerged from the cocoon of mobile accessibility.
Now, its a beautiful analogy and all, but lets get down to brass tacks. Why does responsive web design matter to SEOs?
For one, internet usage via mobile is slated to reach one billion users by the end of 2012. That's right - one billion. But more than merely figures, responsive design is highly subjected to user experience. As numerous studies have confirmed, a better U/X leads to increased stickiness, leads, and conversions. So when it comes to responsive web design, SEOs everywhere are cheering on the sidelines. Get your clients into responsive design, and reap the rewards.
5 Quick Cheats For Responsive Design On WordPress
Eventually, your site will probably need a complete retrofit, but for those itching to get responsive right now, these five quick cheats will help you get the job done.
Images can cause problems when accessed by mobile. A plugin like WP Fluids can replace fixed width and height attributes so images resize appropriately when accessed via tablet or smartphone. For very basic informational websites, a simple tweak to your images can do wonders for the visual aspect of your site when accessed via mobile.
For sites that use a lot of video, the FitVids jQuery plugin converts videos into responsive sizes. Videos resize in fluid form, so no more pinching or double-tapping screens to accommodate the device.
Respond.js is a lightweight script that maximizes the way CSS3 media queries are handled on mobile devices, allowing desktop sites to become fluid when necessary. The script allows websites to become responsive when accessed by browsers like Internet Explorer 8 which may not support media queries.
With the WP Mobile Detect plugin, admins can control what content is shown or hidden on a mobile visit. More often than not, galleries, infographics, and other interactive media are to blame for a poor mobile experience, choking up a users precious bandwidth. By hiding this content using a shortcode built through this plugin, admins can hide large files that would otherwise cause sites to behave badly when accessed by smartphone or tablet.
Responsive Twenty Ten is a solid, fluid WordPress theme that delivers a gorgeously easy mobile user experience. Of course, its desktop companion is equally handsome, and with a little CSS magic, you can get this theme to work for almost any industry.
If you liked this post, you might also enjoy Q: What URL Should I Use For My Mobile Website? A: Responsive Design
Steve Peron is the co-founder of Elevated Search a boutique SEO firm based out of San Diego. Elevated Search has over 8 years of experience specializing in on page optimization, link building, local SEO and conversion optimization.