Marketing Email Design Do’s and Don’ts

Idan Carmeli

Email marketing is at the heart of B2B marketing. It’s our bread & butter, the Laurel in our Hardey, the red blood cells that deliver oxygen from our demand gen lungs to th… sorry, I got carried away.

Anyway, we B2B marketers love emails, and we would like to think that our prospects and clients love our emails too. That depends on a whole bunch of factors, many of which, luckily enough, we can control. A good example is Whether and How our emails render on our audience’s email clients.

There’s plenty of resources on the web to help email designers and coders do their job, but the truth is, we at Converto still see quite a few examples of emails out there that either fail to render properly on specific clients (Gmail anyone?), or just employ design elements that, while great for web pages, damage the email viewing experience (yes, animated GIFs, we’re looking at you!)

Now, while normally the job of ensuring emails are properly designed and coded is the job of your web design studio of choice, it’s a good idea to send them, along with the creative & technical brief, also some useful details about do’s and don’ts in marketing email design.

So, this post has two parts: the first contains some explanations and is meant for you, the less-technical marketer. Then, in the following section, we’ve included an abbreviated list of the same tips that you can simply copy and paste into your own brief document for your studio. Aren’t we helpful??

OK, here’s what you, dear B2B email marketer, need to know about email design.

Image Formats & Styles

The decision of whether or not to include any graphics in an email depends on the type of email, its purpose and its overall marketing context. There are certainly cases where you’re better off having no graphics, as in specific types of nurture emails, or heavily personalized emails designed to appear like they truly came out of the mailbox of a person, typically a sales person.

Nevertheless, in a world increasingly dominated by design, emails that look good have their own kingly place and time. For those cases, keep the following rules in mind:

• Use GIFs or JPGs. PNG is less recommended.
  
• Also, use RGB color values.
  
• Use max resolution of 72dpi.

Animated GIFs, or – the Bane of Outlook

Animated GIFs are awesome, yet some clients, most notably the newer versions of Outlook (2007, 2010, 2013 and probably 2016 as well, since they all use the same clunky MS Word rendering engine) won’t show the animation. Instead, they will show the first frame of the animation.

To overcome this, many email designers ensure that vital information—perhaps a call-to-action, offer, or headline—is included in the first frame of the GIF. Also, take into consideration that large GIF files can damage UX especially in mobile, avoid them. If you must, keep animations short and to the point.

Design with Tables (yes, we know, email is a douche)

While it is not a best practices to design web pages with tables, when designing emails they are essential. Using tables is, as tough as it is to admit in 2015, the only way to have your design render correctly across multiple email clients.

Responsive Design. Do we even have to explain why?!

Did you know that 3 out of 10 professionals read work emails on their mobiles at home because it’s an effective coping mechanism with kids-generated noise & mayhem? Ok, so I can’t empirically prove that, but real research has shown that over 50% of emails are read on mobile devices. Which means that using non-responsive emails is a non-option.

Responsive emails are made so primarily through the use of nifty little styling critters called ‘media queries’. Don’t worry, you don’t need to know how to code CSS – BTW, have you heard of this new attribute, Font-Facepalm? – But you should make yourself at least a little bit familiar with the technique. At minimum, to the degree that you can ask your email designer or HTML specialist whether they have mastered it.

Also, whenever possible, try and stick to single column designs. Only use multiple columns if you really must and it serves the marketing purpose of the email. Single column design simplifies and improves the odds of your email looking well across platforms and screen sizes.

Importantly, responsive web design rules don’t apply equally to all email clients. Case in point: the super popular Gmail web and mobile app clients lack media query support, not to mention they require all CSS to be inlined within email markup. This makes our tips about tables and dimensions below even importanter (don’t you wish this word actually existed?!)

Ensure your email looks great across different email clients

Each individual mail client renders based on its own CSS and HTML standards, therefore your design will not always look the same across all mail clients (e.g. why you shouldn’t use background images, see below). Also, “pixel perfect HTML” is a good place to aspire to, but hard to achieve in email.

Please note the breakdown of CSS support in all web clients – Outlook 2007 and higher is the Sith Lord to most email design Jedis, but Gmail, surprisingly enough, is not too friendly either.

Dimensions: keep email width at 600px. Nuff said.

Can I use special fonts? (yes, but try not to, ok? it bothers some email clients when you do it)

Unfortunately, using special fonts in your email design is not very recommended since – you guessed it – not all email clients support them. The safe bet is to stick to cross-platform fonts like Sans Serif Web Fonts, e.g. Arial, Tahoma or Verdana. You know what they say: no email designer ever got fired for choosing Verdana. Oh, no one says that? ok…

If you must use non web safe fonts, make sure to properly load the fonts in your HTML header tags, and then to reference them on the right CSS and/or body tags.

Special quasi-design tip to avoid the Gmail’s Promotions tab

A little known fact is that sender history is a strong determinant of whether Gmail will filter your emails to your audience’s Promotions tab, there to be likely ignored as marketing spam. The more clicks and opens your emails generate, the more likely it is your emails will not get ‘promoted’ to the Promotions tab. Which is just another reminder to focus on those attention grabbing subject lines and value-dripping calls to action.

OK, that’s plenty of Do’s. Let’s talk about some Don’ts.

• Do not use flash or video embeds, they won’t work.
  
• Do not get creative about bullet points, plain-text bullets work best.
  
• Do not use background images, Outlook email client does not show them. Instead, you can use a background color, and combine images in other ways in your Email.
  
• Avoiding top banners is a good practice to keep your email away from the ‘Promotions’ tab in Gmail clients.
  
• Do not use image maps- some email clients, notably Hotmail, do not recognize them.

That’s about it. Hopefully you have a better understanding now of a few of the key principles of good marketing email design.

Goodies, Take One.

As promised, below you can find an abbreviated list of the above tips for your email designer. Simply copy this list into your next brief doc:

• Use GIFs or JPGs. PNG is less recommended.
  
• Also, use RGB color values.
  
• Use max resolution of 72dpi.
  
• Do not use flash or video embeds.
  
• Use plain-text bullets.
  
• Do not use background images.
  
• Avoid top banners in order to stay away from the ‘Promotions’ tab in Gmail.
  
• Do not use image maps.
  
• Do not use Animated GIFs
  
• Use Responsive design
  
• Stick to single column designs
  
• Design with tables
  
• Ensure your email looks great across different Email clients
  
• Dimensions: keep email width at 600px
  
• Don’t use special fonts
  
• use Special quasi-design tip to avoid the Gmail’s Promotions tab
  
• Follow SPAM rules- include an unsubscribe option.

We hope you’ve found this post useful. Here are some of the resources we used to compile it.

(134)