A few years ago, Ethan Marcotte introduced the concept of responsive web design. Web designers, developers and web project stakeholders latched onto it.
That initial popularity was followed by a slew of naysayers. Business owners and marketers who were hearing the original buzz got excited but soon became apprehensive. Is responsive design really good? Is it just a trend? What does it actually mean? Does it really save money?
Today, responsive design is still more of a debate than an accepted web design practice, but the arguments are all a bit off topic. As a web development community, we know the benefits of responsive design and we see the need to design for multiple devices, but, for the most part, we're all still assessing and addressing web development issues with a more traditional mindset. This results in poor judgment and implementation.
However, as designers and developers learn and experiment with responsive, the community as a whole will move towards a more modern mindset. 'Responsive web design' will become just 'web design'.
Responsive, good and bad
Truthfully, no firm is better solely because it designs responsively. Like all web design, there's good and bad responsive work. When people argue against the merits of responsive design, they're usually basing their arguments on poor responsive implementation. Good responsive work is still quite rare. Why? Because responsive design is really hard.
Designing for every device that exists and could ever exist is much harder than designing for a specific device. It's quite logical. Instead of outlining the rules and limitations of one platform, we now try to adhere to the rules and limits of all platforms, making sure that the site automatically knows when to serve up what.
This is an immensely challenging task. Designers and developers grabbed onto the theory early, but in practice, we all have a ton of catching up to do.
Don't hate on responsive
Load time, unnecessarily large images, hidden elements that still get loaded by small processors over slow cellular connections: these are all anti-responsive arguments. Those who still believe that we should be creating and maintaining completely separate mobile, tablet, mini tablet and TV versions of websites often confuse poor responsive implementation for over-arching responsive design flaws.
Any site that loads slowly or has usability errors is bad. Good coders understand the importance of these factors and avoid them at all costs. Good responsive coders do the same, but it's much more challenging to achieve.
Novice responsive coders may stop when the column sizes change depending on the device, feeling great that the site looks better on mobile than it otherwise would have. When you stop there, though, you're just giving responsive design a bad name and taking the easy way out. We can't risk blemishing such a great concept because some of us don't go the extra mile.
More than media queries
Responsive design is more than converting pixels to ems and adding media queries to our existing layouts. Real responsive design means thoroughly planning and executing an adaptable, versatile design system that acts and reacts appropriately based on device, connection speed and even user intent (the hardest one of all).
Real responsive design isn't a tool or method of coding; it's a mindset and also, by definition, futureproof.
Responsive is the only way. We just need to stop mistaking poor responsive design for responsive design being a poor approach. We need to focus on the same metrics and measurements of success that we did before responsive design and stop using responsive design as an excuse to fall short on those metrics.
For now, though, it's still just really hard.
Words: Drew Thomas
This article originally appeared in .net magazine issue 244.
Liked this? Read these!
- Amazing examples of experimental design
- Inspiring ecommerce website designs
- Pro mobile website design tips
Is responsive design actually dead easy? Show off in the comments!