Changing With the Times: Future Proofing Your Site with Responsive Design
By Flying Hippo
For the past couple of years, the web has started to embrace a new paradigm: responsive design. That is, a single site architecture that resizes and adapts to different screens to work on multiple devices.
While many web designers have shifted to start incorporating responsive design into their workflow, some companies are still wary of jumping onboard, citing complexity and cost. Instead, many of these companies have opted for a completely separate mobile site, usually with a different domain and style.
This might be the right approach for some companies, but for the vast majority (hint: this is probably you), responsive is a much better choice.
Responsive Design is not Mobile Design
Responsive design is often compared to mobile design as sort of a this-or-that choice, but they are not really the same.
Mobile design targets one platform (usually phones), and usually one device (iOS, android, etc). With a mobile-only design, the considerations of how it will look on desktop or other devices is almost never a concern. This is because you simply can’t have one design that works on everything. You either need to develop separate web experiences for each device, or create something fluid that can adapt to different resolutions and screen sizes.
Cue: Responsive design.
Responsive design is about making websites look good on any device, whether that be mobile phones, tablets, small laptops, or large desktop monitors. Responsive design also removes the complexity of maintaining a separate mobile site, keeping everything on one domain and ensuring your business’ branding is apparent when viewing your site, no matter how I access it.
Device Agnostic
The main thing to keep in mind with responsive design, is that it is about remaining device agnostic. Rather than building unique site designs for specific screen sizes, responsive design is built to adapt. As more devices (tablets, phones, monitors, TVs) become available and become more or less popular, this type of framework allows you to future-proof your site.
Well-done responsive design does not target devices specifically, but instead employs a fluid structure that adjusts at different breaking points rather than at specific screen sizes. That’s all to say that the design shifts elements around dynamically to best fit different types and sizes of devices. So, for instance, an area that is a sidebar when viewed from a desktop may stack underneath the main content area on a mobile phone to make the site easier to view and navigate.
One Design For All
Will responsive design solve all web design issues, in a world of phones, tablets, phablets, ultrabooks, desktops, and televisions? Probably not, but it’s a good step in the right direction towards making your website less platform-dependent. Responsive design cannot promise 100% device support and a perfect website every time, but it certainly does better than trying to create separate site designs for all possible devices — especially when considering the holes this creates in user experience.
The Bigger Picture
Responsive design is a subset of adaptive design, which strives to make websites smarter and more educated. That might sound silly, but device size isn’t the only variable to consider when supporting your customers. Network speed, resolution, feature support (e.g. audio and video), and user needs (e.g. blindness and low vision) all need to be taken into account. While this can seem like an overwhelming task, the main idea is that your website can’t live in a vacuum. You have to research who your customers are, what devices they use the most, what features they expect from you, and how you can increase usability.
This type of research shouldn’t happen once, it should be happening all the time. And your website will need to adapt accordingly.
With responsive (and overall, adaptive) design, the web takes a big step toward being truly amorphous. It has been a long journey from better browser support to better device support, to non-device support, and now better user environment support.
So, why bother with one-off mobile sites when you can prepare for the future with a responsive design?
Top image by lukew.
Device renders courtesy of Bright Bright Great.
