Responsive & Scalable Email Design: What’s the Difference?9
I recently tuned into a really great webinar presented by Yesmail. Titled “Mobile Email Design: Differences Between Responsive & Mobile Scalable Email Design,” the presentation documents the differences between scalable and responsive design and how to determine which is right for you. With the increase of mobile opens (123% in 18 months!), it’s crucial to start thinking about which mobile strategy is right for you. Yesmail discusses two very prominent mobile optimization techniques in their webinar, which I’ve summarized below.
Scalable Email Design
A scalable email layout is readable & clickable no matter which size environment it is being read in. There is only one version (one HTML file) of the email, but the email scales to look great on both desktops and mobile devices. Scalable designs utilize techniques such as:
- A grid system for alignment and proportion
- A single column design
- Larger fonts (at least 14px)
- Touch-friendly buttons
- Key information & CTA in the upper left of the email
Here’s a great example of a scalable email from HP that Yesmail presented in the webinar:
This email from HP looks great on a both a desktop & mobile device and is easy to interact with in both environments.
In addition, we recently blogged about the mobile-friendly emails we’ve received from Help Scout, which utilize a scalable email design. Check out that post for another great example of a scalable email design!
Responsive Email Design
Responsive email designs use CSS3 @media queries to render two different layouts depending on the size of the screen the email is opened on. CSS media queries can auto-adjust the layout, content and text size of an email depending on the screen size of the device it is being read on. In addition, images can be swapped out or completely disabled, images & buttons can be resized, and colors can be changed. While responsive design requires two designs and extensive coding, they are they only truly “mobile first” strategy; however, not all mobile environments support media queries.
I’ve blogged about Twitter’s use of responsive design a few times because I think it’s one of the best I’ve seen! The media query not only enables the email look great on small and large screens, but allows Twitter to change the CTA depending on the screen size or device the email is being read on!
Pinterest also sends fabulous emails that utilize responsive design:
How does Responsive Design work?
Here is a piece of the actual CSS used in a media query:
@media only screen and (max-device-width:480px)
What does this mean? If your screen is 480px wide or less, a different set of styles will be used to display your email's HTML. For example, since an iPhone’s screen is less than 480px, users reading an iPhone would see an email with different colors, font sizes, images, etc. than users reading the email on a desktop. Media queries and responsive design can be used to display minor changes (making fonts bigger, hiding unnecessary text), or two completely different emails based on the screen size they are read on.
For in-depth details on creating a responsive emails, check out Campaign Monitor's guide, "Responsive Email Design."
Examples of Responsive Design layouts
In their webinar, Yesmail highlighted some really great examples of the different layouts capable with a responsive design. Below are two of my favorite examples (check out the recorded webinar for more examples!):
3 Columns to 1 Column
2 Columns to 1 Column, Resized Image, Font Color Change & Resized Button
It's really amazing what you can do with responsive design.
Which option is right for you — scalable or responsive?
Which mobile strategy is right for you — scalable or responsive? Check out the pros and cons of each technique below:
|Works everywhere||Not a "true" mobile design|
|Easy to code|
|Readable & Clickable in both environments|
|True mobile-first design||Doesn't work everywhere (works mainly on iPhones & some Androids)|
|Requires two designs|
|Coding is complex|
As I discussed in my post, "Design for ALL Inboxes," before choosing a strategy, it's important to understand your audience and which environments are most frequently used to view your emails (you can do this with Email Analytics). Once you have this data, you can determine your investment into your mobile strategy.
However, as a best practice, you should use BOTH — a scalable layout that turns responsive! It's possible to use a single-column design, bulletproof buttons & other mobile friendly techniques and layering responsive design on top of these elements. It's the best of both worlds.
- "Mobile Email Design: Differences Between Responsive & Mobile Scalable Email Design" — webinar & PDF by Yesmail.
- "Anatomy of a Perfect Mobile Email" — Litmus infographic.
- "Email on Mobile Devices" — Detailed guide by MailChimp.
- "Responsive Email Design" — 8 chapter guide by Campaign Monitor.