Design Responsively — Strategy

Terms like “responsive” and “mobile-first” have been hot on the tongues of web application designers and developers for the past 5–6 years. Unfortunately, they’re often used with little explanation or implementation strategy, or worse, used to stifle creative or more functional designs because of a lack of consistency or ability between platforms.

This three part series will cover: The major responsive strategies and when you should consider using each of them. How responsive grids and layouts work, including the responsive standards and rules most commonly used, and, finally, how to use all of that knowledge to actually create mockups and designs — including the important point of where to start!

Part 1: Strategy

The fact is there are actually three main strategies to responsive design, and all of them can be correct depending on what the user is trying to do with the software, when, and where. Michal Levin describes these strategies as the three Cs of responsive design:

· Consistent Design

· Continuous Design

· Complementary Design

Consistent design is what we generally think of as “responsive.” This strategy supports doing an entire task flow on any single device by simply making the site smaller on smaller devices with flexible flows and sizing. Ultimately the site or app is exactly the same as it is on a larger form factor, all the same navigation and features, just packed into a smaller screen. This tends to be the “default” responsive strategy, but is really more a strategy of the lowest common denominator.

Continuous design is design that supports moving between multiple devices during a single task flow. An example is a field worker that opens a case of documents on their laptop to work on it, then needs to upload a document to it using their mobile device, but finally wants to review the new document and input information about it back on their laptop. In this case these devices play off of each other’s strengths and weaknesses at individual steps within the task, and the design and functionality should facilitate that.

Complementary design uses two or more devices at the same time to accomplish a task. A good example of this is using a television to display a document in collaboration software while everyone in the meeting can edit and mark up the document from their individual computers or tablets. Another is a fitness app that can use a smart watch to track heart rate and give feedback, but display statistics and workout routines on a larger phone screen. In these cases, multiple devices work together to allow people to collaborate on a task at the same time or extend experiences using advanced functionality together.

In choosing a responsive strategy, there is no “one size fits all” answer. Even with consistent designs, it may be better to hide or disable features that don’t make sense or are too complex for a particular form factor, or to restructure the navigation to make it easier and more optimized for the screen the user is using. Each application and layout needs to choose its strategy based on what users are trying to do with the software, on which devices they have available to them, when and where they need to do it. That’s the key to building responsive apps that feel tailored to the user and their device.

Want more? Keep reading with part two and part three!