Responsive Design – A new direction for the web?
You’ve probably heard of the term before, but do you know what it means? How it affects your visitors? Read on to learn more about this technology and both the benefits and risks of responsive design.
What is responsive design?
Simply grab the edge of your browser window and resize it back and forth and you may notice the whole “look” of a site “morph” to fit your browser window. That’s a responsive design! Responsive design is a programming method and design mentality for building a website to adjust its look based on the space available for it.
For example, on larger screens a website may show you a sidebar on the left hand side, whereas the same website on a phone may hide the sidebar so you can get right to the content area. Some websites may increase the font size to make it easier to read on a mobile phone, while the text gets smaller when you are on a larger screen. A big flashy slideshow or long video may be hidden to speed up the site (and save your data plan) on a phone, and various other functionality may be adjusted on-the-fly at what are known as “breakpoints”. In layman’s terms, a breakpoint asks, “at what point would the website break and need to be adjusted so that it fits on the screen?”
Why is this so important?
Responsive design looks to be the logical direction for the web, not a silver bullet, but an answer for some of the biggest issues that plagued web developers of old; compatibility.
The web is constantly evolving and web designers/developers have graduated from having to worry only about the way their sites look in different web browsers (a challenge in itself) to having to contend with the display of their sites in varying screen sizes and aspect ratios. We’ve got desktops, laptops, all-in-one’s, laptops, netbooks, tablets, cell phones, and e-book readers all of differing sizes, shapes, and resolutions. -But wait there’s more! Turn any of the devices on their side, and now you have a completely different screen size to contend with. With no set “standards” by manufacturers as to what qualifies as a “tablet” or what qualifies as a “phone”, and each manufacturer creating their own dimensions, web developers had to practically code just one site twenty times to ensure compatibility across a range of popular manufacturers and software versions. As the mobile web really started to take shape, this process grew longer and longer and impossible to keep up with.
Now, enter responsive design. Instead of worrying if the device is a Dell, Motorola, or a Windows, or an Apple device, and then worrying about the specific line or model number, responsive design says, “let’s just worry about if they are on a phone, a tablet, or a laptop.” That’s it. Switching from trying to program a website by the device, into programming the site based on the width of the device was like a revelation. Now, (at the very minimum) designers only have to worry about two usage scenarios: are users on a big screen or a little one? Designers and developers went from programming a website multiple times to programming the site once, and adjusting a few details based on specific repeatable usage scenarios. This cuts down on development time, ensures a consistent user experience across all devices, and (as much as you can say this about anything in the tech world these days) is future-proof.
Why aren’t all websites responsive?
There are still a few caveats with responsive design and websites may have difficulty transitioning to a responsive design and responsive design mentality. It’s a different mindset and certainly not something that is just “turned on”. A responsive design should not be confused with a “mobile version” of your website -there is no such thing! Part of the mentality is understanding that and realizing under the hood that there is only one website being served to all viewers which comes with a number of positives and negatives as well.
As we all know, speed is key. Hand-in-hand with most responsive design philosophies is creating code that is lean, mean, and reusable. That is almost a requirement, as your browser is still downloading the entire site and then applying its responsive wizardry on top of it. This is important to keep in mind. You may wish to hide a sidebar for mobile viewers, but they still have to download the data within that sidebar before it is hidden by their browser once the page is done loading. This is not to say responsive sites are that much larger than those that aren’t, (and in many cases the opposite will be true) but that you need to keep in mind when loading large slideshows or galleries if responsive design is helping or hurting at that point.
There are also issues with the complexity of a responsive website for large commercial sites. Again for reasons of speed, but also for the ease of maintenance and administration. Does it make sense to run a responsive website? This is a question you have to determine the answer to based on your individual needs.
If you are just making your website responsive so that you can say it is so, that isn’t going to help your visitor at all. If an important page is hidden or something is inaccessible via a mobile device, there isn’t any “click for the full site” button available with a mobile responsive website. A crucial part of any responsive design project is making sure as much of the website is accessible regardless of the device, or that there is a very good reason why it is not. The user experience must be cared for unless you want a bunch of unhappy visitors. It might look better to hide a sidebar on a mobile device, but there still needs to be a way to access that sidebar, and it must be intuitive and easy to find.
In some cases, depending on the programming of a website, it may actually be impossible to make the website responsive, or it may not be a good candidate for responsive design. User experience shows that a lot of ecommerce stores don’t function well on a tiny screen as conversion rates on mobile devices lag far behind those on desktops. Still, responsive design processes can be applied to make the experience as user-friendly as possible.
Finally, for all its merits, responsive design doesn’t do anything to solve one major compatibility problem: the differences between browser rendering engines. Responsive design does not handle anything with how your website looks in Firefox compared to Internet Explorer, and each browser still has its own quirks and compatibility flaws. While a lot of that is improving with each release, I fear we will always have to worry about these compatibility issues between software vendors until one of them claims victory or buys out all the other ones.
What does this mean to me?
To a business owner, you want to be sure your website is mobile responsive. It’s an important part of building your website up for the future, and ensuring compatibility across a huge selection of devices. Would any business owner purposefully neglect a specific user base of customers? Of course not! Of any upgrade you could do to your website, responsive design is one of the best.
Restaurants, please stop redirecting me to a plain text version of your menu because that’s all your mobile website allows… I want to read about the specials for the day! Don’t redirect me from your product page to a plain page with your product, a picture, a price, and a purchase button when your full site offers reviews and in-depth product details and videos that would actually make me want to buy. Doctors, please stop sending me to a map with your address and hours when all I want to do is read what coverages you take and see some pictures of your facility!
A responsive design ensures compatibility across any device users might view your website on. In the future, who knows what technology we will have? But, if the Internet is still around (And I’m just willing to be it will) no matter how big or small screens get, and no matter what device your site is being looked at on (I sure hope for holograms) your website will still display perfectly. This is why I’m an advocate for responsive design: despite its quirks, you can craft an excellent user experience that is replicated exactly regardless of nearly anything else. My personal philosophy is that you can have the best writing on the planet for your product description, the most beautiful high-quality photos, and the most glaring reviews imaginable, but it is all for naught if I can’t find the “Purchase” button due to a poor interface.
