It’s no longer a selling point when everyone is doing it. And it‘s not impressive if you’re doing a lazy job.
Designers, raise your hand if you’ve designed a website or web app in the last few years that was not responsive to all the screen sizes and devices.
* Crickets *
Of course you haven’t. That would be absurd. Every website is expected to be responsive these days. Delivering anything less would be a crime towards your clients. Responsive design is the new minimum baseline. It’s an expected human right, like shelter, food, water, and internet access.
And what fun would interface design be if it only had to fit one size and shape? We might as well be print designers. The flexible design patterns that emerge from responsive requirements are usually the most interesting challenges in my freelance design jobs.
Yet, you’re probably still using the term Responsive Design, even though all screen design is responsive. Responsive Design is just Design.
I admit I’m guilty of it too. I still list Responsive Design as a service on my website. (Scrambles to go update it before anyone notices my hypocrisy).
I use it there because clients still respond to it. They’ve heard the terms and probably understand what it means. They want their project to include the industry best-practices, and it’s reassuring for them to hear that you do responsive design as a default. It’s important to speak your client’s language, and if this term is still part of their lexicon, then it should be in yours as well. So my website and project proposals still talk that way.
But when we talk to other designers, to developers, or other technology professionals, saying Responsive Design is like saying Motor Car (as if we needed to distinguish between the horse-drawn cars). Responsive is no longer a valid adjective when it’s an automatic and expected part of the noun’s meaning.
So can we just stop saying it, please?
Lazy responsive design
What annoys me even more is when people claim something is responsive — which it technically might be — but it’s the laziest possible version of responsiveness. Just enough effort to get all the content to fit on a smaller screen, but no consideration at all into whether it creates a good user experience on that device. Not even an extra thought for the most fundamental parts of the experience, like navigation.
Sure, you can view it on a phone, but does it really perform well there?
Another admission: I used to be guilty of this too. Years ago my responsive designs looked fine on tablet and mobile, but they were never truly optimisedfor smaller screens and touch devices. With most website’s analytics now tipping over 50% of users on mobile devices, it’s long past time we can afford to do the bare minimum for mobile experiences.
This is a result of the old desktop-first mentality, where sites are designed for a large screen and then scaled down for smaller ones, usually as an afterthought.
Mobile first? Or everything first?
There are staunch mobile-first supporters who will tell you every interface design project should be designed mobile first. I get where they are coming from, and I really value the forced simplicity that designing for mobile requires. But I’m not going to make the claim that it’s right for every project. It depends a lot on the nature of what you’re designing. I’ve designed a number of complex web apps that are meant to be used primarily on larger screens (tablets, notebooks, desktops) and in that context it’s perfectly acceptable to optimise that experience for large devices first, and allow mobile to be a secondary concern. Had we designed those experienced on mobile first, we would have gotten nowhere fast.
However, for most of my design work I take a desktop-and-mobile-simultaneously approach. Neither one or the other gets more attention, and I design them at the same time — so I can develop proofs of concept for each of them as early as possible within the design process. I’ve learned that the process of designing for big and small screens, touch and non-touch, can each uncover different design solutions that then inform the other. If either of them are left as an afterthought, both experiences suffer for it.
Responsive design should be so much more
If you’re a seasoned UX/UI design pro, this won’t be news to you. But if you’re newer to the game, pay attention. There is a lot more to true responsive design than just fitting the content on a smaller screen. You can’t stack everything into a single column and call it quits.
Terms like adaptive design and progressive design are thrown around a lot, and their definitions vary wildly depending on the source.
I don’t care what’s it called. What it means to me is that the experience on a tablet or mobile device can be controlled in ways that are for deeper than just a rearranging of content.
- Navigation can, and should, be simplified on mobile to allow people faster access to the things they need, in a pattern they are familiar with on their device. Experiment with app-style tab bars, or nav systems more considered than throwing everything behind a hamburger menu.
- Forms (or any other data input) should be broken down into smaller digestible steps for mobile. The one-question-at-a-time wizard-style interface makes a much better mobile onboarding experience than a complex form, even one that may perform well on larger screens.
- Different images or other content can be served up on mobile, both as a way to improve performance, and also to tailor content to the browsing habits best supported by each device.
- What happens to your wide data tables or lists on mobile? Scroll them, make one or more columns sticky and scroll the rest, or completely redesign the data to better fit the screen? Line items may turn into cards. Data may be regrouped to keep its relevancy when its position changes.
- Page transitions and other animations can be used to make mobile website more app-like. The appearance of speed can be as important as actual speed.
- Font-sizes can be tweaked. Size contrast between headings and body copy should be reduced. More and more people are reading long content on their small devices and we have to optimise to make that easily digestible.
- Proportions change when size contrast is lowered, images are constrained by screen width, and layouts are forced simpler. Does the hierarchy of your content still make sense when scaled down for mobile?
- Touch gestures should be supported where possible to make interactions that much more intuitive. And do you know if your tap-targets are large enough?
- Are you considering how your mobile design patterns adapt to the huge range of phone screen dimensions? Designing a slick iPhoneX mockup and calling it a day doesn’t nearly cut it. Do you know what happens on a phablet 700px wide? What about the smallest phones that are still 320px? Don’t forget the height of those viewports as well.
- How can we use the larger screen space of desktop devices to provide progressive enhancements, rather than the mentality of cutting back that optimal experience for mobile devices?
- Tablet design often turns into the forgotten middle child between desktop and mobile. Neither your desktop designs nor your mobile screens will be good enough squeezed down or scaled up for tablet. Don’t leave those mid-sized devices out in the cold, even if your analytics say they make up a much smaller share of users.
Are you thinking about all of these things (and more) each time you optimise a website or web app design for different devices?
Five years ago you could have gotten away with not considering this level of optimisation. Not anymore.
The Dribbble effect
All of us are wowed by impressive screen we see on Dribbble (sometimes even the ones with gratuitous animation). The interesting broken-grid layouts, unique navigation patterns, smooth screen transitions. But what you rarely see is how that eye-candy works in any other context. And that may be because the designer hasn’t considered it themselves.
How often are you presented with a iMac shaped viewport, with no consideration for what that looks like when swapped to a small portrait oriented device? Or something that works amazingly well on a desktop screen, but is decidedly ordinary when adapted half-assed to smaller devices.
The quality of your design work is the sum of all its responsive variations. No amount of “wow” on a wide screen will make up for mediocracy on mobile, or vice versa.
If you’ve ever worked in branding, you’ll know that consistency in application is one of the most important fundamentals of a strong brand. That demand for consistency extends to your responsive design experience as well.
In today’s world of Instagram, Pinterest, and Dribbble, few people present or consume design inspiration in a way that uncovers the truly valuable parts of the work, which is the creative ways we make those experiences adapt for every device. This is the single, universal challenge of all UX/UI/Product designers. There are very few mediums left that have the luxury of a known screen size and shape. Computer screens, mobile phone, tablets, and TVs can have huge variations. Some smart watches, fixed kiosks, or other very controlled environments are the only small segment of screen design left that doesn’t have to contend with this issue. At least not yet.
Be truly responsive
My mission, with each new design project I take on, is to do even better than the last time at ensuring that every device gets its fair shake — using all the tools available to me.
If your front-end-dev says “don’t worry, I’ll handle that stuff in code”, tell him there’s not a chance you’re leaving those details undocumented and up to guesswork (unless that coder is you, in which case use your discretion as to how much needs to be visualised before you do the remainder in the browser).
I’m done being impressed with any design work that doesn’t articulate its thoroughness in responsive design considerations. And god help me if I ever try to sell my clients on work that’s as superficial as that. Our job as designers is to keep our clients interests — and equally, their user’s interests — in mind at all times. And it’s never in anyone’s best interest (even the budget-watchers in Accounting) to cut corners on user experience for any device on the spectrum.
So while I may be trying to stop using the term Responsive Design, I’m doubling down on practicing its virtues. Anything less would be a failure as a modern designer.