One Size Does Not Fit All
Responsive design is the relatively new practice of creating websites that look good wherever they happen to be viewed, such as:
- On your desktop or notebook computer.
- On your tablet computer.
- On your smartphone.
- On your wearable device… think Google Glass here, for example.
Much of the context for this discussion centers around websites developed for companies that maintain the content of their websites themselves. This usually means their websites are developed on a content management system (CMS) platform such as WordPress or Joomla, or an eCommerce platform such as Magento. But the practice and meaning of responsive design is not tied to any specific computer language or software platform.
Example of a Device Unaware Website
Here’s a humorous example (no hate mail, please) of a website that was considered modern in its time in the mid-1990’s. Thanks to the good people at www.kli.org, we can still see what the Klingon Language Institute website looked like back then — at least as of the date of this publication.
The picture on the left shows what the website looks like when displayed on a high aspect ratio screen (much wider than it is tall) such as is common on notebook computers. The picture on the right is how the site appears when viewed on an Apple iPhone with a Chrome browser.
Unless you happen to have really good vision, you’ll probably have trouble reading the print on the smartphone without vastly enlarging those portions of the screen.
Benefits of Responsive Design
If your Web designer has done her job well, then virtually every page, post, widget — all the viewable stuff on your website, in other words — will look good on virtually any device.
What’s that? Just added a new page to describe your company’s new service offering? Making that content look good will not be a problem if you’re using a good, well-planned responsive design. If you’re happy with the way the rest of your website looks on most devices then you’re probably going to be happy with the way your new page looks on those same devices.
In general, responsive design provides:
- A more cost effective solution for the website owner.
- A better potential user experience for all who view the website.
Example of a Nicely Responsive Website
Friend and fellow Tweeter (Tweep) Pat Salber (@Docweighsin) hosts the best Health- and Healthcare-related blog I know (think crowdsourcing by and for healthcare thought leaders), entitled The Doctor Weighs In. The website is clean, simple and effective. Notice how the site behaves when viewed on a notebook computer versus a tablet or smartphone.
A common construction strategy in responsive design is to develop “stacking” support for columns of data. In the present example, available screen space is used to help, say, viewers on a notebook computer (1) See the many available topics AND (2) See the most recent blog posts AND (3) Subscribe to a newsletter if desired, all without scrolling. Viewed on a smartphone, the most recent blog post is shown but virtually nothing else. In other words, the “blog post column” was given priority over the other material and this is probably the smartest choice in this instance because the articles provide the greatest value in this website.
For much more depth on responsive design, see Ethan Marcotte’s original 2010 article on the subject at A List Apart.
Drawbacks to Responsive Design
As with all engineering marvels, there are costs associated with building and maintaining responsive websites. Generally speaking…
- The underlying code is more complex and therefore potentially more expensive to maintain in the long run.
- Content planning can become difficult when you’re trying to please everyone — that is, website viewers on computers, tablets, smartphones…. It’s important to remember that the shape of your content is always a factor in both mobile and web design. If your message is likely to change on the basis of which devices are used to view your message, responsive design may not be for you.
Alternatives to Responsive Design
If you happen to have an amazing website already — one that you’ve poured your heart, mind and many hard-earned dollars into — it is not necessary to replace it with a responsively designed framework unless there are other factors influencing your decision.
Alternatives to ‘going responsive’:
- Create a separate mobile website.
- Create a mobile app.
- Build “branches” of your website to deliver content according to the type of device requesting it to see its content.
The third bullet point is a viable solution but be certain that your SEO company tells the search engines what you’re up to in order to avoid potential penalties in your rankings.
In All Cases, Do Become Aware
According to Pew Research in January 2014, 91% of U.S.-based adults own cell phones and 60% of those use their phones to access the internet. In case this isn’t making sense yet, consider that your target audiences will be predominantly mobile within a few short years. And if you’re marketing to people who are not yet 18 today, forget about trying to reach them at any later point in time on anything other than mobile devices.
Example of a Website That Delivers Big Value
As a final example, here’s a website that looks completely different depending upon which device you’re using to view it. See www.regus.com to try this experiment yourself using different devices. Compare using a notebook computer, a tablet computer and a smartphone, for example.
Websites like this don’t have to be responsive but they certainly can be. There could easily be several distinct websites behind this one URL (regus.com) and the one you see at any given time depends solely upon the device you use to view it. The proof of whether a site is responsive isn’t typically detectable to the viewer but rather to the person(s) maintaining the site since they’re the ones who reap the greater benefit from only having to update the site once for any particular set of website changes.
What’s the best thing about the design of the website in this example? It’s design attempts to predict what the viewer wants when he wants it. If I view this website on my notebook computer, the interface provides me with everything I need to Learn more about Regus, in case I don’t already have a good idea of the services they provide, and/or Navigate to the exact set of services I want in case I do already know what I’m looking for. When viewed on a smartphone, regus.com correctly assumes that BIG BUTTONS might be a good way for me to quickly find what I want. A busy interface like the “notebook version” of the website would not be best in this instance.