Responsive web design is an industry term that’s been bandied about and touted by designers, developers, salesmen, shoot, even myself and the GuavaBox crew talk about it all the time.
The phrase responsive web design is self-explanatory enough to give you a rough idea of what it means, but it doesn’t explain everything you ought to know. Responsive design, sometimes referred to as mobile web design, is a broad term used to describe a set of characteristics and functional traits of your website.
In this blog post, I want to help you in three specific ways:
- I want to explain responsive web design in a holistic, but not overly-detailed way,
- Discuss the significance of responsive design – why it matters,
- And figure out who needs responsive web design; who knows, it might be vital for your business!
What is Responsive Web Design?
Responsive web design describes the process and end result of creating an online platform that adapts to each unique viewing device.
With responsive design, your website will automatically adjust to display perfectly on your desktop computer, your notebook, your tablet, your smart phone, and any other Internet-equipped devices.
Responsive websites are sometimes referred to as being device-agnostic; it doesn’t matter what viewing device the users have, the website looks great!
Responsive web design requires intense focus on the end user experience; empathy and insight are crucial. You need to understand your users’ needs and design your responsive website to provide the information they want quickly and conveniently.
Buffalo Wild Wings: Good Responsive Design
The Buffalo Wild Wings website is a great example of responsive web design (blog post). The B-Dubs site not only adapts instantaneously to the user’s device, their content also adjusts. They understand that a mobile user is probably most interested in finding a location or checking out the menu, and they make those options available immediately.
The IRS: Bad Responsive Web Design
An example of poor responsive web design is the IRS website. Since we all love to hate the IRS, they’re an easy target anyways, but in this case the criticism is especially warranted (I know, I know…you’re thinking that all the criticism is especially warranted…no comment).
The IRS website is informative and easy to navigate using a desktop computer, but when I need to look up some information from my smartphone or fill out a form on my iPad, the experience is miserable (for multiple reasons). The page is cut off and the carpal tunnel-inducing endless scrolling back and forth is as frustrating as the fact that I’m on their website in the first place.
Why Does Responsive Design Matter?
Your responsive website is critical for crafting a delightful user experience, but it’s also significant for search engine optimization (SEO) purposes.
An Awesome User Experience
Getting the right information to the right people in the right format is the challenge of all design. Your website needs to reflect your ability to understand your audience’s pain points, deliver the right content based on that pain, and present it in a way that minimizes the barriers for readers.
Responsive Design for Search Engine Optimization
There are several ways to create a responsive website. One option is to create separate versions of your site, and serve them based on the viewing device. The other primary option is to create a dynamic framework for your single site that allows the same content to reformat and adapt to the viewing device. The second option is almost always a better choice!
Why Using Separate Mobile Versions Is Bad For SEO
The problem with multiple versions (typically a desktop version and then a mobile-friendly version of your site), is two-fold:
- What happens when users share links? It looks dumb when you are browsing a mobile version on your iPhone, shoot me a link to that site, and then I open it up on my desktop. That mobile link either doesn’t work, or else it takes up about a third of my screen and is unreadable. Awful.
- Google prefers a single version. According to Google, “sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device...is Google’s recommended configuration.“
- You can attract more traffic via search because of search engine algorithms preferring a single version!
Who Needs Responsive Web Design?
Responsive design makes sense for any type of website that is seeing (or anticipates) a substantial amount of traffic coming in through mobile devices. If you don’t know what devices your visitors are using, check out Google Analytics (free!) or another tracking program to figure out what devices are viewing your site and what user behavior with those devices looks like.
As you continue to improve your marketing, recognize that mobile website users are just as valuable as desktop users, and may even be more valuable. Location-based businesses – restaurants, attractions, etc. – often drive a higher percentage of sales relative to viewers from mobile sources than from desktop users.
If you’re currently considering a website redesign (blog post), make sure that responsive web design is a major part of planning and implementation. With mobile browsing continue to skyrocket, and tablets increasing in popularity, responsive design is not something to ignore.
Hockey great Wayne Gretzky is known for his simple response to the question of what made him a great player: “I skate to where the puck is going to be, not where it has been.”
Apply the same principle in your marketing to stay ahead of the curve and gain a competitive advantage.
Thinking About Incorporating Responsive Design Into Your New Website Redesign?
In this checklist, we expand on responsive design and a host of other considerations, plus we give you an actionable checklist to help sort through it all. Don’t miss out on something critical because you didn’t do your homework!
You may be starting from scratch, implementing a complete redesign, or just tweaking your current site; at all phases, a holistic web design strategy is a must!