Natasha Ness

Don’t Gamble With Your Email Design!

Natasha Ness / April 21, 2016 / 0 Comments

As the creative director at LeadMD, I oversee a lot of freshly designed and developed assets coming out of our good ol’ content and creative factory.

Most of the time we work together with our clients and take their email, landing pages, infographics or other assets from concept to completion, as a true extension of their team. Which we love and always want more of that sweet SWEEEET custom asset creation. We’re happy, the clients are happy, high fives for all. Woot woot.

But… On the flip side, our team is often asked to review pre-existing designs from other agencies or a client’s freelancer or an internal design resource, and make that come to life in a guided landing page or responsive email.

Here’s where the flip side gets a bit flopped.

Typically, my findings from this process is that around 95% of pre-existing designs we’re sent from outside teams need major adjustments. And not because it’s ugly or designed poorly, but it’s simply that not all design is created equal, specially around email design.

Unlike my team, every designer we have interfaced with in a scenario like this aren’t Marketo Certified Experts and haven’t done a lot of email or landing page design. Because this is the case, we push back to our clients, give feedback, and ultimately end up needing to redesign either a portion or the entire mockup.

  • What that means for us? More work! Which we love.
  • What that means for the client? More work…and time and money lost because something has to be redone that they didn’t plan or anticipate.

This is often times a frustrating process for our clients that in the end turns out just fine and dandy, but can ultimately be avoided when you have the right designer OR understanding of the subject matter in mind before you design.

But what makes for a good, solid, optimized user experience design for assets like emails and landing pages? Whether you use us or not (which we certainly hope you do!) here are some of the ways you can make sure your email design is in check:

1. Think of the mobile user

In a recent report from Litmus, in an analytics of over 1.3 billion email opens tracked, it shows a grand total of 33% of people open their emails from their Apple iPhone, now higher then Gmail on desktop and Outlook. This is an unavoidable market. If you’re still designing emails without a responsive or hybrid framework, you live in the stone age.

While you design your desktop version of the email you must think, how does this translate to mobile? Then you have to do just that: make mockups for both, understand how one effects the other and test them in all applicable environments.

2. Kill your dreams of custom or Google fonts

Seriously, I get it. Who doesn’t want their custom brand font or display an awesome block or slab-serif to make their audience say ooooh and ahhh about their emails? Sorry but you’d best fuggetaboutit.

Instead, use web safe fonts in email. While there are certainly work arounds, it’s not worth it in my opinion. There are just too many email clients that render certain fonts badly and can break elements of your email, so just play it (web) safe.

3. Don’t overuse background images

Many email clients will also render background images incorrectly. You can always do it, love it and play with it, but keep in mind your Outlook 2007 user might not be seeing the same email as your Apple iPhone user. So if you design a background image, make sure you provide a mockup or clarification to the client that a full color bleed will be the only option for some email clients. Then ensure it’s coded with both options in place.

4. Say goodbye to gradients

The typical CSS you’d use for gradients will not work in email like it does work on a web page. Again, same comment as above if you want your emails to be as cross email client compatible as possible, you need to build it with all of the relevant email clients in mind.

In the sample here, you will see that the same gradient CSS is rendered entirely differently in 9 email clients, ultra unpredictable! CSS gradients will straight up break your email (and your heart) in multiple email clients.

5. Create a great balance of content and imagery

Don’t assume your email is going to be a big ol’ image or a gigantic block of text, it’s a delicate balance. Users get upwards of 100+ emails a day, yours needs to stand out, you do that visually here.

6. Keep the dimensions under 600px

We see a lot of clients that have 700px+ in their brand guidelines. That’s too big man, and you’ll have significant issues on several email clients like Gmail and even more issues bringing those wider emails down for an optimal mobile experience.

7. Think about Marketo’s advantages & limitations

Think about who’s editing this email and their skill level in Marketo and HTML. We see a lot of design with some very custom and aspirational items, keep this thing as clean and easy to understand for your clients as possible, think about how this will be developed and ultimately used by other people, not just you.

8. Ask for real examples or sample copy decks to mockup

“Lorem ipsum” is every designers fav (though Batman Ipsum is my ultimate) but it can cause a lot of issues at the mockup phase. When you have realistic copy and realistic imagery you can better design your mockup for your client. How many times have we tried to fit a square peg in a round hole? A LOT. If you design with approximate copy in mind you will save yourself a world of revision cycles and headache once this bad boy gets coded.

Overall, my team uses many tools like:

  • Campaign monitor to understand email client limitations before we begin mockups
  • Litmus to test all emails once they’re coded (and is secretly our very best friend)

And our brains. We are all Marketo Certified Experts, we get the platform, we love it, we own it, we know what works and what doesn’t. Don’t gamble your department budgets on two agencies getting the job done, it can all be done here under one house and if it can’t, have your designer use the rules outlined above and you’ll be as good as golden.

Let’s get to designing!

Looking for the full scoop on creating killer emails that convert? Download our guide to email marketing: How to Write Email Copy that Readers Can’t Resist. Don’t want to miss a post, article, or video? Fill out the form on the right and you’ll always be the smartest marketer in the room.

FEELIN’ LUCKY? Come hang with us at Marketo Summit in May! Use code LeadMD200 to get $200 off registration through 5/1. Details here.


Share on activity feed

Powered by WP LinkPress