If you have been paying attention long enough, over the years you will have heard all kinds of Web design concepts touted as the newest answer to vanilla ice cream. One by one, they have either fallen by the wayside or are ready to follow the lemmings into that ditch. Progressive JPEG images, animated GIF images, and frames were early concepts that failed to stand the test of time. More recently, Flash animation was once considered the rage; however, as soon as support was dropped by Apple’s iOS (running iPhones and iPads), Flash became about as popular as a case of head lice.
Understandably, many people have grown a bit suspicious when they hear about anything that is marketed as the latest and greatest, so what is the story with responsive Web design? The best way to start answering that question is an explanation of what it is and how it works. Let me begin by saying that, in general, change is a good thing. As the Internet evolves, improvements tend to enhance and improve the user experience.
You may have seen the responsive Web design concept promoted by your local TV stations and similar businesses, usually along the lines of “One Address for Every Device”. Unlike a separate mobile website, responsive technology allows a single website to respond to each user device and display the site in the most appropriate form. Responsive sites are flexible and able to adjust, rearrange, and optimize content on a wide range of displays and input devices. The concept can be summarized in the word fluidity. Responsive sites are based upon the use of a fluid grid, fluid graphics and photos, fluid text, and a fluid background. The grid features a series of stops or fluid breakpoints, where the content switches from one representation to the next.
Unlike a mobile app, which needs to be downloaded and installed (and then may be rarely used), a responsive site is not limited to any one platform, avoiding duplication of expense for Android and Apple devices (with Blackberry, Windows Phone, Firefox OS, Kindle, Nook, and other upcoming mobile devices out of luck). Unlike a separate mobile-friendly website, which incurs a separate set of costs and often trims down the range of content that is presented to the users of mobile devices, a responsive website presents a consistent range of content that is optimized for every user’s device. This is a new way of building websites, and it is being quickly embraced both by top developers and savvy clients as a more future-proof, economical and elegant approach to delivering content across the expanding ocean of Web capable devices.
When visiting a responsive website using a desktop computer or laptop, you are presented with one version of the site. Using a tablet or smartphone, you are presented with alternate versions that are automatically optimized for the display size and touch-based input. When viewing a responsive website on a conventional desktop or laptop computer, you can actually resize your browsing window to see the content transform in real time as you reach the grid stops or breakpoints. Cool? Yes!
My own company’s first venture into responsive website design was the new website built for the Vermont Campground Association, the first responsive campground association website in the United States. The accompanying graphic shows the content as displayed on a variety of common devices.
Other than keeping up with technology and presenting your business in a savvy technological light, what are the other advantages of turning to responsive design for your next website? First of all, as I have already alluded, the total cost will probably be less than the cost of developing separate conventional and mobile sites. It is also no longer necessary to register a separate “mobile” domain name or even create a separate subdomain for your mobile content. In all likelihood, this will reduce your recurring hosting costs.
One big advantage presented by responsive technology is the consistency of branding that it allows. No longer do you have to wonder whether somebody is viewing your “full” website on a desktop computer or the abbreviated content on a mobile device. You also can eliminate those “Click here to view our mobile site” or “Click here to download our mobile app” links. A responsive site sends those links to the buggy whip museum!
Check the Google Analytics on your website. (If your website is not running Google Analytics, stop what you are doing, and get it installed!) I just checked the Google Analytics for one well-known campground website that we maintain, and the statistics are compelling. The site generates enough traffic for these statistics to be both meaningful and valid. Over the last 12 months, 28.1% of the visitors to their website were using a mobile device. Within the last month, that percentage shot up to 39.9%, and within the last week is up to 41.7%. Within the last 24 hours? It’s up to 42.3%. Do you see a trend?
Just as important, without either a responsive or a mobile website, visitors to this campground’s website who are using mobile devices are spending roughly two-thirds of the time that is spent by visitors using conventional computers, and the bounce rate is an astounding 85% higher. (The bounce rate represents visitors who reach a website and leave quickly.) Yes, people using mobile devices are prone to make quicker decisions, but these numbers simply represent lost traffic … and lost traffic means lost business.
Perhaps most importantly, responsive technology is good for your website’s SEO (search engine optimization). In fact, both Google and Bing have endorsed responsive Web design. Only one address needs to be indexed, and only one address needs to be checked when viewing your analytic reports. No longer will multiple versions of content be diluting the search engine ranking of your pages. Whatever form it takes, search engines have always hated (and penalized) duplicate content. It’s as simple as that!
Now that I have explained what it is, how it works, and its many advantages, are you ready to decide? Will your next website be built using yesterday’s technology or for tomorrow’s users?
Content for this article was also contributed by Joshua Pelland and Charles Davis, Pelland Advertising staff members.
This post was written by Peter Pelland