Talking about designing responsive websites is one thing. Getting to it is a different story. As much as we like to think mobile-first, in our experience, clients expect to see desktop designs first. Larger designs are more impressive and easier to digest. And sometimes we don't even review smartphone-savvy designs due to time constraints.

But they're important. Ignoring mobile devices can lead to sub-par experiences — and that's counterproductive. With that in mind, here's a technique to quickly sketch out a mobile design from widescreen.

1 Sketch as usual

As much as we love to think about design with a mobile-first approach, we also know from experience that clients prefer to see larger designs first. So we often begin large, then work with our clients to decide what each screen really needs.

Then, whether it's a Xerox or another sketch, duplicate each page you want a mobile version of. We'll use this to make a checklist of items that we do not need.

 

2. Make a visual checklist

Next we go back over the approved designs with a critical eye. If it's on a lo-fi sketch then it's important — but is anything less important? For example, do we really need all that navigation in the footer, or a sidebar full of links to other pages? How about a rotating hero image? Won't one main photo do?

Mark out everything you think is too excessive, and tag everything that you need to keep, but also need to reduce. By "tag" we mean a simple mark, often with a shader.

 

Skipping this step would be a mistake. Like sketching itself, a visual checklist helps you, well, visualize what you're about to do next.

3. Sketch the mobile version

Sometimes simply stacking everything is OK. Indeed, it may be the only option. But not always. Exploring your options is always a good idea. Talk them out with your client to discover the pros and cons of each. Stacked or not, from here drawing a mobile version of each page is a snap. Your visual checklist shows everything that the smartphone-optimized design needs.

---