Home Resources Blog

If you’re approaching email design from the point-of-view of someone who largely works on web projects, then the idea of separating cosmetic touches from your content most likely comes naturally to you.

However, when we started designing templates for our email template builder, the need to not only keep our markup parsable, but ensure that the “prettyness” of the template didn’t interfere with how it was read, was really driven home. And as you can imagine, the content that concerns us the most as email designers is text – from the humble paragraph, to our stylized blockquotes.

So, let’s see progressive enhancement in action. When designing an HTML email. Wow.

Let’s talk about text

If there’s a medium that lends itself to progressive enhancement, it’s email. Given the contexts in which email content is parsed and displayed (and will be in the future), it pays to consider content first and independently from the presentation.

Traditionally, email designers have taken all sorts of scrappy approaches to ensuring that text in email “looks the same across all clients”. Your Gmail experience should be the same as your Outlook experience and so-forth. I’d argue that “reading the same across all clients” is vastly more important and that when possible, visually lovely flourishes should be added, for the environments that support them.

Coding with style

With that in mind, there are many ways to draw attention to special elements in text – like quotes. For example, when Tim on our team started designing these for our Mason template, he gave them a deceptively simple look, with subtle top and bottom horizontal lines. However, instead of extending these lines to the full width of the text, they’re only half the width and centered:

A blockquote in our Mason email templates

To pull this off in code without resorting to adding extra <hr /> markup or similar, we combined a couple techniques that are seldom seen in emails.

TL;DR It’s an illusion!

Because the template has to play nice with a WYSIWYG editor, we want to avoid adding any extra HTML. So here’s all we had to work with:

<blockquote>
  <p>Hey Bonita, nice to meet ya</p&gt
</blockquote>

We first experimented briefly with giving the <blockquote> some wide margins and then applying negative margins to the inner elements. But as you might imagine, a few email clients ignored the negative margins, which made the quote text the same width as the borders should have.

When that failed, we turned to the pseudo elements ::before and ::after. These can be used in CSS to insert styleable elements into the page that aren’t part of the actual HTML. If you’re not quite familiar with them, have a read through this crash course by Smashing Magazine and we’ll rendezvous back here.

We then used the ::before element to create a faux border at the top of the quote, and an identically styled ::after element for the bottom border. Here are the CSS styles that were needed to get them in position and give them the right size:

blockquote {
  position: relative;
}
blockquote:before,
blockquote:after {
  content: '';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}
blockquote:before {
  top: -2px;
}
blockquote:after {
  bottom: -2px;
}

Now the pseudo elements are in place, but they’re still transparent. What we needed is for the middle 50% of these elements to be grey, while the outermost quarters should have the same white background color as behind the text.

We achieved this by making the background of each pseudo element a CSS3 gradient. But rather than a smooth gradient, we wanted sharp edges between the colors.

To do this, we started with a stop at the 25% mark and colored the first quarter of the gradient white. Then another stop was applied, also at 25%, which gave us an immediate transition to grey. The next stop was at 75%, continuing with the same shade of grey. And finally, one more stop at 75%, with the remaining quarter of the background colored white:

blockquote:before,
blockquote:after {
  background: linear-gradient(to right, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%);
}

Because different browsers and email clients support different syntaxes for gradients, we also added a slew of vendor specific flavors for good measure.

Cool! So, we got the look we’re after, with just one little caveat – the code we’ve used only works in a few email clients.

Ensuring our text degrades gracefully

Thankfully, some of the most popular email clients – like Apple Mail, iOS Mail, Android, and even AOL Mail – support the aforementioned techniques. That said, you can forget about seeing those ritzy pseudo elements in your Outlooks or your Gmails.

This is where graceful degradation comes in. For all those less capable email clients, we simply add a pair of plain CSS borders:

blockquote {
  border-top: 2px solid #d9d9d9;
  border-bottom: 2px solid #d9d9d9;
}

Just about every email client will show them – and if the ::before and ::after elements are rendered, they will cover the grey borders up with the white and grey gradient.

Here’s an exploded view of how this all comes together:

Scaled blockquote animation

So, is it worth writing all that extra CSS, just to add a bit of flair that not all of your recipients will see? That is a case-by-case decision, taking into account things like your subscriber list’s email client usage statistics and what the fallback will look like.

Again, I do think it’s more important for emails to look as good as they can in each environment, than it is for them to look exactly identical everywhere. If that means rewarding modern email clients, I’m more than OK with that.

I hope the techniques in this post provided you with a new perspective on styling HTML elements in email – or at least a little inspiration for your own typographic experiments. If you have any questions or comments, I’d love to hear from you in the comments below.

  • Russell Thomas

    Thanks for sharing this post. I totally agree with your point of view – progressive enhancement is better than across the board consistency.

  • Nicki Snoblin

    Thank you, this is a valuable perspective. Sometimes it’s hard to explain to a client that I CAN’T make an email look the same for everyone. Telling them I’m using “progressive enhancement” seems to convert a negative to a positive – instead of dealing with a deficiency, I’m applying a design technique.

  • Jordan Dibb

    So glad this helps, Russell and Nicki! And thank you both for your wonderful feedback!

  • Mick Kennys

    Yeah but people use different resolutions, different screens, operatin systems, browsers and devices it is hard to optimize for everyone

  • Stig Morten Myre

    That?s true, Mick. It always helps to have a certain idea of which email clients your recipients are opening in:
    https://www.campaignmonitor.com/features/email-analytics/

    In the example we?re sharing here, the goal was to create a baseline good reading experience (blockquotes styled with standard borders) for most recipients, and then add a bit of extra flair that would simply be ignored by the email clients that don?t support it.

    There are different ways that you can apply progressive enhancement depending on the situations. If you?d find it useful, we might post a few more examples of how we?ve approached these kinds of challenges.

    Since you mention resolutions, I can also mention that we ran into a problem with the technique above when viewed on iPads. When the email is scaled to fit the screen, all elements won?t always fit the pixel grid. This caused thin slivers of the hidden CSS borders to peek out from behind the pseudo elements occasionally. We solved this by applying

    outline: 1px solid #ffffff;

    to the pseudo elements to better cover up the borders.

  • Jaina

    The “exploded view” just blew my mind a little bit – always the GIFs that get me!

    Progressive enhancement is a perfect solution in a world that has too many bases we, as a email geeks, need to cover. Though sometimes I do still boil down what I need/want to to do in an email to its most basic of CSS properties, just for it to be more “bullet proof” across different clients and browsers.

  • Stig Morten Myre

    Hey thanks Jaina! I’ll have to think of ways to work GIFs into all future blog posts now..

    I agree there’s something to be said for simplicity. And sometimes there just aren’t resources for that extra layer of polish. But I do think these kinds of details can help keep things interesting, both for the reader and for us as designers and coders.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free