Unless you’re a web design nerd (like me) you probably have no idea what “responsive web design” means. However, you may notice that more and more of the sites you visit every day are embracing this technology. And it could be the key to getting your customers' attention. In a nutshell, responsive websites automatically and dynamically customize the look of each page based on the device you’re using to view it.
The promise of the full internet
It was less than 6 years ago that Apple announced the iPhone, a device that offered the promise of the FULL internet on a mobile phone. To quote Mr. Jobs, this was “a revolution of the first order.” The ability to view full webpages on a device that fits in your pocket started a chain reaction that today finds mobile devices accounting for more than 10% of all web traffic.
Streamlined mobile web
While the ABILITY to view full webpages on a mobile device is wonderful, viewing a site designed for a 20-inch monitor on a 3 ½ inch screen is a bit like watching IMAX through a pinhole. So web designers started offering streamlined versions of websites. These mobile versions are designed for a) usability, with a blown-up interface big enough for fat fingers on small touchscreens, and b) fast loading, scaling back on images, content, multimedia, and interactivity.
The missing pieces
Abandoning larger images and added functionality was a great way to speed up load time on mobile connections. But it’s 2013 and high speed WiFi and ultra-fast 4G connections are fast-becoming ubiquitous, negating the need for scaled-down content that often leaves the mobile user wanting more.
Big picture, small screen
So how do you offer your customers an elegant mobile site that doesn’t compromise on content, all without breaking the bank? Enter responsive design. Responsive websites use the latest in web technologies to determine whether you’re viewing the site on a computer, tablet, or phone, (and for that matter, whether you’re viewing it in portrait or landscape orientation) to dynamically scale and rearrange the content on that page for best viewing on your device.
Let’s take a look
For an example, check out a site I had a hand in building: Eufaula Barbour County Chamber of Commerce. If you view the site on a desktop and then on a mobile device (or resize your browser windows to Kate Moss proportions) you’ll see the transformation that takes place: the dropdown menu, which is great on a desktop, is converted to a more thumb-friendly scrollable list; the animated image rotator is scaled to fit the smaller screen while still retaining full functionality; images are moved above or below content appropriately and scaled to fit the smaller screen; the sidebar menus which are great on widescreen monitors are stacked below the main content. Using responsive web technologies and design principles, we were able to build a website for EBCCoC that delivers their viewers the full desktop experience, optimized for any device.
Do you need a mobile-optimized site?
I place a major emphasis on building sites that are fully compatible with mobile devices. But for businesses that really want to give their customers the best mobile experience, responsive web design gives us an opportunity to offer extremely cost-effective websites that are fully optimized for the varied web devices of today and the future.
responsive digram image source: http://www.yootheme.com/blog/2012/06/12/warp-gets-responsive