Responsive Design, or the idea that a website should respond to the size and orientation of the device on which it’s being viewed, is a tough concept for some designers and developers to wrap their heads around.
The best advice I can give someone who is just getting started in responsive design is to starting thinking responsively right from the start. Don’t create a site for one device and scale down, think about all devices the whole way.
“But that’s a lot of work!”, you say.
It doesn’t actually have to be. Here’s a simple hack I use for wireframing sites that I want to be responsive, and it doesn’t take much work at all.
Tools
All you need for this is:
- a sheet of 8.5 x 11 paper,
- a pen,
- and if you’re a slightly OCD like me, you might want a ruler.
Step 1
Fold your sheet of paper in half height-wise. You want two fat rectangles, not two long, slender ones.
Step 2
Fold the closest rectangle up. When pressed totally flat, the paper should look like 1/4, 1/4, 1/2.
Step 3
Open your paper up, and it should look something like this:
Step 4
Rotate your paper 90% and fold it up lengthwise. We’re trying to create thirds here, so with the backside of the fold hidden and pressed completely flat, you should be looking at two equal halves.
Step 5
Open your paper back up again and use your pen to draw along the folds so your paper looks something like this:
You’re done!
Now you’ve got a single sheet of paper ready for simple wireframing that gives you approximate dimensions for Monitors, Tablets and Smartphones, while leaving a little space for a Site and Page Name, as well as some Notes!
The dimensions aren’t exact, but they’re close enough, and at this point, you’re just wireframing; you shouldn’t be focusing on details anyway!
Using a tool like this, you can ensure that non-PC devices are first-class citizens, and your responsive with purpose, not as an afterthought.
Do you have any cool tricks that help you with web design like this one? Let me know!
If you like stuff like this, you can follow me on Twitter and drop me a line!