Browse by...
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.

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

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free