You might think the goal of a responsive design is to present the exact same experience to visitors regardless of what device they use and under what context they visit. The experience is going to be different though, because the device and context are different. What we want to provide is the same level of experience and that means our designs will look different across devices.
We do, however, want people visiting a site on a desktop to know they’re visiting the same site when they come across it on a tablet or smartphone. We’d like them to be able to apply cues they’ve learned interacting through one device when they visit using another device.
How can we make our designs consistent across devices and maintain visual unity in a design that will inevitably look different when viewed on different devices?
Designing Responsive Systems
Last week when asking if dedicated device designs were appropriate, I mentioned that I think the future of responsive and adaptive design is about designing a system that can sense device characteristics and the context of the person visiting in order to present a design assembled on the fly.
Instead of thinking about different designs for different devices, we should be thinking of designing a single visual system
We’ll be storing more and smaller chunks of structured content that can be combined in a variety of ways. Ideally we’ll be presenting optimized versions of a design for each context visitors are in when viewing the site.
The designs will inevitably be different as we better learn to take advantage of devices capabilities. At the same time we want people who visit the site on a phone and then later on their laptop to instantly know they’re on the same site.
One way we can do that is through visual unity. We can make sure each optimized version of the design has enough visual consistency so that visitors know instantly they’re on the same site.
How to Maintain Visual Unity in a Responsive Design?
I recently watched video of a 20 minute presentation by Laura Kalbag on responsive design systems from the Responsive Day Out convention. The video expands on ideas Laura presented in her article for 24 ways on design systems.
At the start of the 24 Ways article she says.
The best responsive designs are those that allow you to go from one optimised display to another, but with the feeling that these experiences are part of a greater product whole.
That greater whole is unity at work. Instead of thinking about different designs for different devices, we should be thinking of designing a single visual system that may not look exactly the same everywhere, but is clearly one unified version of the same overall system.
It’s ok for our designs to be different across different devices as long as we can maintain a certain level of visual consistency to make it clear to our audience that they’re in right place no matter what device they used to get there. We can do that by treating certain aspects of our design in a consistent manner.
- Typeface choices
- Type proportions
- Base unit for grid/layout
- Color scheme
- General aesthetic tone
Let’s take a look at each of the above in a bit more detail to better understand how they help maintain visual unity.
Typeface choices — Consistent typefaces are the starting point. Whatever faces you use, you should use across all devices. Your audience (outside of type aficionados) probably won’t realize this consistency on a conscious level, but it will register in their subconscious.
Type proportions — In his post Molten Leading, Tim Brown talks about a fundamental triadic relationship of type consisting of font size, line height, and line length. A change in one requires a change in the others. When moving from one device to another these values have to change.
The change in screen width across devices forces a change on the line length unless we adjust by changing one or both of the other two values. We wouldn’t change all three to maintain the exact same relationship between them. Instead we’d likely keep one of the values consistent and adjust the other.
Base Unit — Hopefully you’re on board with the idea of designing content out as opposed to canvas in. Assuming you are, you realize that when developing a grid it should be be based on something internal to the design, which becomes the base unit. This base unit could arise from a number of things.
- Dimension of a banner advertisement
- Dimension of a standard image
- The line height of the type
- A line length of the type
- Modular scale
Wherever it comes from the base unit is a good candidate for consistency. Your grid or general layout is going to be different across devices, but it should still be based on the same fundamental units. Measurements across the layout should be proportional to the base unit.
Color — This should be one of the easier aspects to keep consistent. Whatever color scheme you choose should be used everywhere. How much of each color gets used could vary, though once again I think proportion enters into things.
Your scheme likely has a dominant color, a subdominant color and some additional accent colors. Ideally these should all be present in the same proportion no matter what the device.
General Aesthetics — Here I think there could be more visual variety as your site might conform to what works best on a particular device, but the the general tone of voice behind your aesthetics should remain consistent. If you’re going for a soft weathered look you wouldn’t change to a hard angular and sleek look on one particular device.
A consistent color scheme will contribute greatly here as will the consistent use of key graphics and imagery. Aside from your logo, you might not repeat every image exactly on all devices, but you can pull back and think about what your graphics and images are trying to communicate and make sure any changes in imagery are still communicating the same thing.
The forms you use should also remain consistent. If your aesthetic calls for curves and textures on one device it should call for them on all, even if the specific curves and textures are different.
I mentioned proportion a few times above. The flexible nature of responsive design shifts our focus from absolutes to relatives. It’s one of the fundamental changes that’s taking place in this shift to responsive design.
Our print legacy and recent history developing websites has us all thinking in absolutes. We need to change that. The web is inherently fluid and absolutes only exist under a very specific set if conditions that will forever be out of our control.
In addition to the different aspects of design mentioned above, I think we’d all do better to spend more time understanding and working with scale and proportion. Much of the consistency want to bring to different devices will rely on both.
Our designs will inevitably be experienced in different ways due to the different devices and circumstances present when viewing them. Even were they to look and work exactly the same, they’d be experienced differently because the nature of how one interacts with them will change.
It’s ok for our designs to look and even work differently given they’re going to be experienced differently. What we want to do is maintain the same level of experience. We also want to ensure visitors to our sites know they’re on the same site regardless of how they’re accessing it.
One important consideration in providing the same level of experience is to maintain visual consistency across the whole of our design system. By making sure aspects of our designs like typography and color carry some consistency across devices we can help orient visitors in our sites even as the design changes to reflect the visitor’s context.
Download a free sample from my book, Design Fundamentals.
Good article. I’m tempted to forward this to eBay, because their mobile site is lacking key features from their desktop site that users really need. Like messaging – a pretty basic requirement.
Funny. Something tells me though, that eBay isn’t likely to make changes based on anything I said here.
As someone that is new to the field of web design and all kinds design in general, I find the article absolutely helpful while designing responsive websites.
Right when I first began learning, I was fixated into creating media queries for individual mobile devices and that resulted in a lot of problems. After a while, I began throwing away the notion of creating designs based on devices.
Instead, I’m learning to create designs that changes when there is a need to, while maintaining necessary elements that remain consistent across the whole design, and this article has given me a lot to think about.
Thanks for writing it.
Thanks Zell. I hear you about trying to align media queries with specific devices. It wasn’t just you. That was the initial thought of most everyone until the industry began realizing it wouldn’t work and even goes against the whole idea of responsive design.
I still tend to start looking at breakpoints based on some common device resolutions, but ideally you want to resize your browser and see when the content needs to be adjusted.
Thanks again. I’m glad I could give you a some things to think about.