Responsive 101
You're probably familiar with this already, but let's get ourselves on the same page: A responsive website (or email, or banner ad) is designed and programmed to display the same html-based content across different devices, scaled and rearranged to fit nicely for each screen size. A good responsive piece provides a great user experience no matter what kind of device or screen it's being viewed on — from huge to tiny.
(We sometimes use the term mobile-responsive. Same thing!)
Some important vocabulary:
- Viewport: the device and/or screen size that's viewing the content — think of viewports as different-sized windows that we're viewing content through.
- Breakpoint: an imaginary line where one view switches to another, e.g. the desktop view to mobile the mobile view.
A couple notes on semantics
I hear people using the term "breakpoint" wrong all the time. If we're designing for two viewports (mobile and desktop), that's one breakpoint. You're probably familiar with the trick where you can view a website in your desktop browser and drag the corner to resize the window to be smaller and smaller, and then at some point the layout *pops* to the mobile view. That means you've just crossed the breakpoint. As stated above, it's basically an invisible line between the mobile and desktop layouts.
One more note on semantics: when discussing our layouts, let's avoid saying "the mobile version" and "the desktop version." Better to say "the mobile view" and "the desktop view" — they're two different views of one responsive piece. Let's make sure we're talking like digital experts.
Okay, so back to viewports. Two viewports (mobile and desktop) is generally standard. Some clients require that we design for three viewports, or even four — it might be large desktop screens, small laptop screens, tablets, and phones. Personally I think this is overkill; a good digital designer should be able to design for the extremes (small phone, big desktop monitor) and come up with a layout that they know will scale and rearrange beautifully across all possible screen sizes.
"Truly" responsive
In a truly responsive piece, no content is duplicated — it's one set of content (text, images, video, etc), programmed to display perfectly on all screen sizes and devices. We should strive for this in all cases; an excellent responsive design uses the exact same content for all screen sizes. Swapping in different content for different screen sizes is possible*, but we should avoid this. Different content for different screen sizes means more art time, more programming time, more QA time, and it also means a slower download speed for the user — which can hurt your Google ranking and cause frustration and higher bounce rates for users on slower wifi.
So truly responsive is the way to go.
Designing mobile-first is critical when we're creating something that needs to be 100% truly responsive. Things designed to be legible on mobile (e.g. a chart image) will be legible on desktop. The inverse is very often not true.
*Swapping of content in websites is well supported, although not recommended. Swapping of content in emails is very poorly supported and should be completely avoided in all cases.
Nearly infinite variations
Responsive websites and emails appear differently across platforms, e.g:
- mobile/desktop
- Mac/Windows
- iPhone/Android
- Chrome/Firefox/Safari/Edge/etc
- browser maximized/floating
- small laptop screen/large desktop screen
- browser zoom
- (for email) Outlook/webmail/phone
- (for email on desktop) preview pane width
- individual user settings; browser zoom, font size, dark mode, etc
All of these differences make for thousands of variations. Embracing the nature of digital media means we cannot make all of these views 100% consistent.
Which digital things can be responsive?
These days, websites and emails are almost always responsive. Banner ads can/should be but often aren't. IVAs and touchscreens usually are not. There are exceptions to all of these. (TMI: OFT emails are not responsive. Banner ads, rather than being responsive, are often designed and programmed separately for each size. IVAs can be responsive but the additional time/effort/cost required is not usually justifiable. Unbelievably, there are still some websites out there that are not responsive, but this is usually just because they're very old and have never been updated.)
Of course we should always shoot for making a piece truly, 100% responsive whenever we can!
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.