Some questions are stupid because the answers are obvious and easy. But some questions are stupid because it’s hard to know where to start answering. Today’s is one of those:
“How do you make a design responsive?”
Just starting the Crash Course? Start here!
****
As a beginner, if you ask an experienced designer about making something responsive, you might be more confused after you get the answer than you were before.
Responsiveness is not that hard as a concept, but in real life you have to consider a long list of details. They move, and you will need to look up the latest resolutions of devices, and you need to make a prototype to see it in action, and there are lots of decisions about breakpoints and what you will and won’t support, and on, and on, and on.
But that’s not the answer we want.
****
The stupid (but true) answer:
You make the layout change as the window size changes, so it fits on any device.
****
The real (and also true) answer:
You design in phases.
Design your website for the smallest, crappiest phone first. “Mobile first.”
It will probably be a single column, because a phone is too small to hold much more than that (exception: Pinterest!).
You will probably have to remove a lot of stuff or make ridiculously long pages.
Then you will feel like you are a shitty designer because your screens are so cluttered or so long. Listen to that inner voice. It is trying to help you.
Then you will remove some more, until you only have the most important features and content left.
When you finally feel like you’ve got it looking good on a phone, take that layout and copy/paste it into an iPad-size screen.
It will look stupid or half-empty, because a tablet has way more space. That’s when things start to get interesting.
****
Why this isn’t a stupid question:
Responsive design is an advanced way to think.
If normal, fixed web design is like shooting a target, responsive web design is like shooting a moving target.
People who know the technical details about how responsive design works will usually explain all the percentages and media queries and responsive typography details and how to load different images depending on resolution — which are interesting and useful — but that’s not what a beginner wants to know.
It’s like when your parents start telling you about how they made you:
Too much information.
You don’t need to know how to build a responsive design yet.
You need to know how to start sketching a responsive design.
****
Responsive layouts are related to each other.
Think of the phone layout and the tablet layout and the desktop layout as the same layout.
It changes.
You’re not designing three layouts. You’re designing one layout with three “modes”. Or five! Or 10!
(Probably not 10, but you get the idea.)
Everything that is on the small screen also has to be on the larger screens, but you might have to move those things to make the layout work.
Ask yourself: Will anything break if the layout stretches to be a little wider or a little narrower? If something in your layout only works at the exact size you have designed for, it isn’t responsive yet.
An ideal responsive design requires the smallest changes possible to make the layout work as the window changes size.
Draw your layouts beside each other. Do they make sense as a sequence?
In the same way that monkeys evolved into apes and apes evolved into humans and humans devolved into reality television stars, your layouts need to connect to each other.
Ask yourself what it will look like when all the things switch from one layout to the next. Will it be chaos? Or just a subtle shift?
If you have to scale an image, or squeeze a text block or adjust a font size to make the headline fit on one line, no problem! That’s responsive thinking.
If your site has to switch from vertical scrolling to horizontal swiping, that might get… awkward. And developers might come to your house with torches and pitchforks.
It’s tricky. Plan a lot of extra time to make things responsive, and keep it simple, stupid.
When you have a series of layout designs that can smoothly shift from one to the other as a window changes size, you have just made your first responsive design.
****
Tomorrow we will answer: “Which image format delivers the best user experience?”