It's probably the most important innovation in website design and development in the last ten years, and one that has steadily become indispensable to a good user experience, and a good part of your overall digital strategy. But this incredible method also breeds a great deal of confusion, and begs the question: What is the purpose of responsive design anyway?
I know the answer already
Those in the industry, of development or design, are probably already aware of the many benefits, and pitfalls, the responsive route can yield, and it's no surprise that the generally accepted answer to this question is: The ability of a website to fit different device sizes. In a nutshell, that's generally true. Now more than ever, responsive is supremely important considering the ever growing number of users out there browsing sites on their phones.
"The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn't have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'"
— John Allsopp, "A Dao of Web Design" Tweet This
A responsive website allows a view of your brand that can be true, displaying it on a user's laptop as well as on their phone. It maintains a consistent brand voice, is interactive, and can be one of the smart ways to build a website to make it perform. Let's be honest, the first time your site is visited may very well be on a user's phone, and those first impressions are incredibly important. Statistics have shown, that having a failed experience dooms a site to a dusty corner of the web, never to be revisited. It also sets an opinion in the minds of many that your brand is behind the times, or "old-fashioned". This can be a hard pill to swallow if your company is, for instance, in a Bio-Tech field, were using current technologies is part of your livelihood, or if your company is in pursuit of SEO best practices. Perceptions aside, there are somethings a responsive site is not.
What responsive design is not
Let's clear up some misconceptions out there about what responsive design is not:
- It's not magical silly putty. That means when you resize your browser on your desktop into an impossible, unreadable, or unusable shape, responsive design will not try to make that content legible. The reason for this is that it's not an actual use case. Responsive design is based on breakpoints using current device sizes on the market allowing it to reflow content from desktop to laptop to hybrid to tablet to finally, smartphone.
- It's not an App. Apps run independently (sometimes) of an internet connection, have access to some device features and functionality, and are usually, although not always, closed entities that run based on files downloaded to a user's device. This makes them usually faster to run, and able to share or push content using the device itself. Apps are also created to serve very specific purposes.
- It is not infinitely backwards compatible. This means that any user still running IE 8 (or any other older version of a browser) won't see the real responsive experience, and some widgets and features of certain responsive templates on platforms like Squarespace or Wordpress won't even load. For these folks the web as a whole is becoming a place they quickly won't be able to visit.
- It's not that simple. This approach works best when the elements on the page are considered and are fitting into a clean grid. Wildly changing elements from page to page in a template's grid creates an overly complex CSS rule system that has to be handled throughout all the many breakpoints. It's not impossible, but be prepared to pay for that complexity with time and money. Always weigh carefully the uniqueness of the design against the time it will take to fine-tune each view, and limit such deviations to a few special pages where it has an impact or purpose within the site.
Benefits of responsive design
Here's where the pay-offs come.
- You only have to manage one site. The benefit of this is obvious and means that you can concentrate on creating great content, and know that it will deliver across the web reliably. This benefit also trumps the desire to create your site as an App which needs to be created for two different operating systems, maintained, and updated regularly for each of those systems (i.e. Apple and Android). All of that effort equals time and money you've saved in your budget to spend on all your awesome marketing efforts.
- It's Google friendly, and ultimately SEO, friendly. Google doesn't like unresponsive websites, and by building a responsive design for your site, you are insuring that Google search will recognize your efforts. A few years ago, Google announced that it planned to penalize sites not optimized for smartphones. It rolled out algorithms that change rank for (and essentially penalize or downrank) sites that aren't optimized for mobile. Congratulations! You've avoided being downranked, and your SEO just got a positive lift!
- Statistically, responsive sites get more traffic. Because Google ranks this quality higher, your SEO gets a boost, which means more people will see it. The current industry stats suggest that there have never been more mobile viewers cruising the web as there is today, and that number continues to grow. Your potential audience has now tripled in size by being viewable across so many more devices.
- Responsive is the key to delivering a great experience to everyone, and as a result of a good experience, you've created a happy user. You've also strengthened your brand by delivering a consistently strong voice across these other devices.
- Happy users tell their friends. Responsive for mobile means users who use the devices to primarily share via social accounts can do so easily. More connects means a potential for new leads, and that grows your business.
In conclusion, you need yourself a responsive web design
This is a simplified explanation of responsive web design, granted, and putting this all into practice can be a complicated process. Remember to keep things simple, if possible, and streamlined. Fancy widgets aren't impressive to a user who has to wait to see them or use them. Be selective, be considerate, and when in doubt, always consult your design professionals—we know what we're doing and are here to help.
Smart ways to build and activate your website.
3 Cardinal Rules of Digital Video - Get the Biggest Bang For Your Buck
