Design Responsively — Mocking Up

Part 3: Mocking Up Responsive Designs

Part one of our responsive design series covered responsive strategies for features and functionality, and part two covered how screens are sized through breakpoints and how that translates to layouts by the grid system. This part will take all of that information and combine in into creating designs and mock ups.

The biggest question when mocking up responsive designs is: “Where do I start?” While there are few different ways you can get pencil to paper, each with their own advantages and disadvantages. The most common ways are:

· Minimum Average Case First

· Prime Case First

· Four Column First

Minimum average case first starts with the smallest possible layout for the average grid case (12, 8, or 4) and then work your way towards the best case scenario. For a 12 column layout, this means designing at 840px wide, 8 column layouts at 480px wide, and 4 column layouts at 320px wide. Again, select the layout your research shows will be most common for users to start with. Starting small lets you tackle less than ideal conditions to start with, and as you scale those solutions up you can get creative in how you apply them at larger scale. It also flows more organically between the various grids as you work through the different sizes and layouts. This is generally the approach I take when creating responsive designs.

Prime case first assumes that the best case scenario and the average scenario are virtually the same. On desktop this generally looks like a 1920px 12 column layout, for 8 column layouts it’s a 768px iPad, and for 4 columns I use a 414px iPhone 6 plus. Start with the form factor your research shows is most likely to be used by your user. This tactic lets you really take advantage of the screen real estate and create really rich, excellent experiences. Unfortunately, once you start accommodating smaller screen sizes or less-than-ideal data, you’ll probably find yourself compromising on design elements or trying to cram things in where they don’t fit. Because of this, I only suggest using this method if you know the environment is fairly uniform across all users so the layout will stay as close to the prime case as possible.

Four column first is most like the “mobile-first” strategy, because four column layouts are most common on phones. Like minimum case first, you start working on the smallest layout, but you always start at four columns. This forces you to address any feature or data complexity problems first, but can also lead you to compromising too much in larger layouts if the four column layout isn’t the most common case, leaving you with layouts that feel stretched, empty, or sparse if you can’t scale them up properly.

No matter where you start, you will need to iterate your design through all three grids (remember, desktops support all three grids, tablets support 8 and 12, and phones support 4 and 8). To do this, I usually recommend working in separate files for each layout. This way it’s easier to view the different layouts side by side as you work and see what needs to be adjusted where. It also makes it easier to keep assets and things organized for the various layouts. If possible, try to use copy and paste to move items through the different layouts to maintain as much consistency as possible in the beginning. Then you can begin tweaking sizing and placement for the form factor you’ve moved it to.

Overall, starting your responsive design is the hardest part. Once you’ve decided the best starting point and started working through designs, the rest will begin to flow very organically. Just remember to keep your user and their use cases in mind to determine the right strategy for their responsive needs, follow the guidelines and rules of the grid system, and create the best possible experience for them.

For the full series, go back and read part one and part two.