Getting started with responsive design
If you own or manage a website, I want you to close your eyes for a minute. Imagine potential customers visiting your site and seeing it broken, slow, or frustrating to navigate. They let out a frustrated sigh, close your site, and bring up a competitor’s site instead. Your anxiety level is probably rising just thinking about it. Now ask yourself this question — were you picturing those potential customers sitting in front of a desktop computer?
Most of us probably would, but the truth is that nowadays they are more likely to be on a smartphone or tablet. Last year in May Google reported that, for the first time, search queries on mobile devices made up more than half of all search queries! Meanwhile PC sales are slowly declining, while tablet sales continue to grow, leading many industry watchers to predict that tablets will overtake the PC sometime this year.
For many businesses then it will be absolutely critical to deliver equally high-quality experiences on mobile, tablet, and desktop. In theory you could create a separate website for every device, but, with the wide variety of dimensions on different smartphones and other devices, this can quickly become cost prohibitive.
This is were responsive design comes in. Responsive design is the practice of using one codebase that responds to the device it is viewed in by changing its dimensions and other features, as opposed to having separate websites for mobile, tablet, and desktop.
Although responsive design involves a number of different techniques, the most fundamental is defining the sizes of various elements within the site with relative dimensions, instead of fixed dimensions, so they can grow or shrink to fit their container.
Designers often describe a site with responsive design as being 'like water' — taking the shape of whatever container it is poured into. In this case our metaphorical containers are the different devices that the site is viewed on.
A good responsive designer should also make sure that the site navigation can adapt in other ways to be convenient for both mobile and desktop users. A common strategy for navigation is to take vertically arranged navigation elements on the side of a site, and move them to the top of the site on mobile. This tends to work better on mobile since horizontal space is quite limited.
To see a good example of responsive design in action, check out the site below (created by Visual Eyez Studio) on your smartphone as well as on your desktop computer and tablet:
It’s important to note that some banner ads and video players might not be able to resize on different platforms, so always test your website on a few devices and if you notice a problem contact your web developer to see if there is a workaround.
Once you have a brand new responsively designed website set up, it’s a good idea to test it. Some tools for testing on different platforms include:
- The Real Thing: There’s nothing like having the real device for the most accurate testing. While this can get expensive, and you are unlikely to be able to cover the whole range of devices, you should at least test on your personal smartphone. I’d consider getting a smart phone on a different platform (Android or iOS) without a calling plan as well, just for testing purposes.
- Web-based Testing: There are a number of applications out there that allow you to remotely test on multiple real devices. I’ve found the most success with one called BrowserStack. You can also use BrowserStack to test in multiple desktop browsers (Safari, Internet Explorer, etc.), which is always a good idea.
To get a sense of what your return on investment might be for switching to a responsive web design, it might be helpful to see how many users are already viewing your site on mobile or tablets, how frequently they are bouncing (leaving the site immediately after arriving), and how many of them are converting (buying a product, submitting a lead, etc.). You can use any number of website data tools like Google Analytics for this. If after implementing a new responsive design you see a lift in non-desktop conversions with corresponding revenue higher than what you spent on the new design, your money was well spent!