5 Easy Tips to Make Email Templates Look More Awesome – No Design Skills Necessary

Email design, or design in general, can seem both limiting and daunting. You want to make it awesome, but you’ve got about a million other things to do and you’re not a designer so what the heck are you supposed to do?

After spending close to 10 years designing and coding emails for a living (and teaching other designers to do the same), I can tell you there are some super simple, totally doable things that can make a huge difference. So, if you have been itching to up your design game and go beyond basic templates, here are some easy ways to give your emails some pro-level polish – without the pro.

1. Everyone, hide your preheaders
Preheaders (aka preview text) go a long way toward getting your emails opened. But once it’s opened, preheaders just hang out up there at the top, ruining the first impression you worked so hard on, cramping your logo’s style, and taking up space with no job left to do. Remove that extra clutter by hiding them. Designers and developers do this all the time using a bit of code, but you can do it a simpler way.

Change the color of your preheader text to the same color as the background and make the font size the smallest you can make it. If you are in Klaviyo, remove any padding from the preheader block as well the top of the block below it to close up the extra space. The text is still there and will still show up with the subject line, but you won’t see it in the email itself.

It’s important to remember to change the preheader text before you hide it. Once you can’t see it, it’s really easy to forget about. “This is preheader text” in everyone’s inbox is a bit awkward and not very helpful to your open rates. I’m imparting this particular bit of knowledge straight from good old-fashioned experience… The Klaviyo Newsletter a few weeks ago, for all you subscribers out there. :::facepalm:::

2. Fonts are the New Black (and Regular, and Oblique)

One problem I tend to see a lot with email designs is exactly that: One thing. One font. One font style. One font everywhere, all the time. Sometimes, maybe, a bold will get in there to mix it up.

Any email designer will admit that they’re disappointed that there isn’t as much to choose from compared to the desktops. But, there’s still more to email fonts in the world than Arial or Helvetica. Snooze.

Good news… the fonts available in Klaviyo are a-okay to use and we handle the hit-or-miss rendering issues in email clients. That gives you 19 (!) to safely pick from. Doing some math… that’s like… 18 more than 1. So mix it up and take them for a spin. Variety is the spice of life. And emails.

The best way to think about fonts is to look at it like the style of the font is its personality. When you choose to use it, you are borrowing its personality for your email. For instance:

 

Mixing and matching adds depth and nuance. Kind of like when you’re hanging out with a certain group of friends, you might be a little sportier than usual or act a little more sophisticated than how you are at home on your own.

Try to stick to no more than 2 fonts or 3 styles of a single font (bold, italic, regular, etc) per email. That’s basically 1 font and/or style for your headlines/subheads/CTAs and another for everything else. So you don’t give everyone a headache, whatever you pick for anything longer than a headline should pretty easy to read.

If all else fails and you’re feeling adrift with a type of indecision (pun absolutely intended), just take a look at your website and match the styles closest to the ones that are used there. You’ll still get some sweet design variety with the added benefit of brand consistency.

3. Use Your Best Assets

Speaking of branding… use all those pieces and parts that make up your website and use them in your emails. Not just your logo, I’m talking about colors, fonts, images, patterns, lines, icons, light or dark backgrounds, textures —you get the point.

Here’s the thing, your store’s website is already done and all the pieces are there for you to use, which is much easier than staring down a blank template and wondering what do with it. But most importantly, branding is the expectation people have when they interact with you. Each email opened is really a point where a person is interacting with your store.

Meeting that expectation consistently from site to email builds trust between you and your customers. Meeting expectations helps customers identify with what you’re showing them. When they identify with you they trust you, and they’re likely to come back and buy from you. So go with what you got. It’s great for your brand and, frankly, it’s easier for you. Win-win!

If you don’t have the colors or fonts on your site written down, here’s a handy trick I use from time to time:

In Chrome, go to your website, right-click on something you are interested in finding out more about. Select “Inspect” from the menu and it will open a window with a bunch code and a list of styles. If you poke through the list of styles you will see what color, font, and size of the clicked on item. You can use those color values and, in some cases, fonts, in your emails.

4. W H I T E S P A C E
Emails are a lot like trying to keep a bug in a jar. It doesn’t seem like a lot of space but you still have to pop some air holes in that sucker cause it’s really got to breathe. Bugs of all kinds should probably remain in their natural habitats and email in theirs. I promise 600px is more than enough space, so don’t be afraid to adjust padding and margins in and around your content. Spacing can go a long way to giving your emails that “designed” look and it helps make it easier to read.

Here are 2 rules that will get you padding like a pro:

Everything in moderation
Be careful not to go from having no space around things to pushing everything very far apart. You could affect your click rates if things are so far apart that people can’t see that there’s more content below.

Even spacing is key
Once you set the space around something, be as consistent as possible about how you apply it through the rest of the email. If you set everything differently, it can end up looking haphazard and be much harder to read if someone is chasing your content around the email with their eyeballs.

AHHHHH… isn’t that better?

5. Be a Little Unexpected. Goat.
Design does make emails look nice, but design is really organizing with flare. So present what you are trying to say with your audience’s point-of-view in mind — the colors and fonts you choose are just tools help you do that.

Not every tool designers use is strictly visual (colors, fonts, logos and stuff, etc). The first and best is to just be a person. You’re a person (I assume. If you’re a cat, then rock on computer-using, email-sending, blog-reading cat). And your audience is people. Connect with humor or sincerity as living, breathing person because, to quote the great ad writer Howard Gossage, “people read what interests them”. If he can get people to read ads, he is probably on to something.

One of the most fun places to try this is to shake up the normally standard messages we see all the time and tend to breeze right over.

You could say “No longer wish to receive emails from us? Click here to Unsubscribe”

It gets the job done, but what fun is that to read or to write when you can say:

“I guess this is goodbye, but we’ll always have this email. Unsubscribe”

Even if they aren’t unsubscribing, discovering things is fun. It’s unexpected and a reminder that there’s someone behind the emails they’re getting and that you have a killer personality with charm up the wazoo.

If your business is more serious, or funny just isn’t your style, sincerity is still a great way to form a personal connection and we are all about that here at Klaviyo. Warm and fuzzies about your email builds warm and fuzzies toward your brand and your business.

So, there you are. Go forth and embrace your inner designer — wear that black turtleneck with pride. And in case you were still wondering, nope, I wasn’t planning on explaining the goat. Unexpected, right?

 

Why Engagement is More Important than List Size

 

 

Don’t Fear what you can Measure (and an idea for improving Email)

 

 

Memorial Day 2017 email teardown

 

.yuzo_related_post img{width:260px !important; height:250px !important;}
.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}
.yuzo_related_post .relatedthumb:hover{background:#ffffff !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}
.yuzo_related_post .relatedthumb a{color:#323b43!important;}
.yuzo_related_post .relatedthumb a:hover{ color:}!important;}
.yuzo_related_post .relatedthumb:hover a{ color:!important;}
.yuzo_related_post .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb{ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; }

jQuery(document).ready(function( $ ){
//jQuery(‘.yuzo_related_post’).equalizer({ overflow : ‘relatedthumb’ });
jQuery(‘.yuzo_related_post .yuzo_wraps’).equalizer({ columns : ‘> div’ });
})

Back to Blog Home
Get email marketing insights delivered straight to your inbox.

1 comment

  • Nice article Sam. Another way I show pre-header text is by adding a text block in my template and then adding a div in the html view with style=”display:none;”. As you mentioned though the trick is remembering it is there to change with each campaign. Maybe the Klaviyo product team will see this and add a pre-header field in the campaign setup page which would be nice 🙂

Comments are closed.