• Our dearest friends, we sincerely wish you have the most exciting holidays! We are confident that the year 2018 wil… twitter.com/i/web/status/9…



Practical Design Tips for More Effective Email Templates


You’ll hear a lot of people talking about effective email templates — but what exactly does that mean? What does an effective email template look like? In essence, it’s all about an appealing design and neat structure. That sounds simple, right? Well, the most tricky part is to make sure your newsletter looks equally good to all your recipients. Will it load fast? Will it resize smoothly? Will the design look stunning on smartphones and tablets?

Seasoned HTML email developers will take care of all the cross-browser and cross-device compatibility issues, bringing even the most complex template ideas to life. However, some designs can make the template code quite heavy, not to mention over-complicated. This can make customizing and adding extra informational blocks a seemingly impossible task.

Here are a few tips to help you keep your email templates more lightweight, universal, and super easy to work with:

Image overlay


Wow, that image looks so awesome running across the text, doesn’t it? Well, it’s definitely a great-looking image, but if you place it in several sections and overlay the text, you’ll frustrate your email developer, who won’t be able to offer the best compatibility for your newsletter. You wouldn’t like to use images instead of text, would you?

Keep to the width


Sure, we understand that design elements look absolutely radical positioned over the general email width. This will be a pretty challenging task for an HTML email developer, but not an impossible one. Just remember that this creative twist will make the entire template structure really complicated, which is why we highly recommend keeping things more conventional.

Background limitations


Sure, creative minds don’t recognize limitations. Well, in an ideal world, your designs would roam free, expressing themselves in all their unique glory. However, here in the real world, we need to play by the rules. Therefore, if you need a background for Outlook 2007+, mind the limitations. The amount of content shouldn’t exceed the corresponding section laid out for your designs. Otherwise (gulp!) it will be lost!

Ditch the fancy fonts


Is there any designer who doesn’t have a thing about fonts? You’ve probably got some personal favorites, and that’s fine… we all do! And we’ll definitely integrate the fonts you need. Just keep in mind that most fancy fonts, including Google fonts, are poorly supported by email clients. And aside from native iOS clients, these fonts will be automatically replaced by similar web-safe fonts.

When you’re designing the template, think about what your text will look like with all the standard fonts, such as:

  • Georgia (serif)
  • Palatino Linotype
  • Book Antiqua
  • Palatino (serif)
  • Times New Roman

And there are also the sans-serif fonts, of course.

  • Arial
  • Helvetica (plus Helvetica sans-serif)
  • Arial Black
  • Gadget
  • Comic Sans MS
  • Cursive
  • Impact
  • Charcoal
  • Lucida Sans Unicode
  • Lucida Grande
  • Tahoma
  • Geneva (plus Geneva sans-serif)
  • Trebuchet MS
  • Verdana

Get animated



Emails are all about attracting readers’ attention, and a great way of achieving this is to use an animated gif. Gifs are far more compatible with modern email clients than video.

A Few More Things to Keep in Mind

Here are a few more useful tips you should know the next time you design an email template.

  • Your PSD layers should have the “Normal” blend mode
  • Save design elements in different layers
  • Specify your text size and line height in pixels, and only in round numbers
  • Your content width shouldn’t go over 800px. The recommended width is 600px – 700px
  • Repeating blocks and design elements should have the same paddings and sizes

Easier Email Creation

The PSD2HTML team has vast experience in the creation of HTML email templates. We always analyze your design files before we get to work, and if we spot any glaring errors, we’ll let you know. Plus, we’re available if you need any help, so do feel free to get in touch with us. We’d be happy to give you a free consultation.

We’re also at your service to do all the necessary design adjustments that would guarantee better compatibility and save you plenty of time and effort. We’re here to make HTML email development as simple as possible.

As a final treat, here are some fabulous email galleries to get you inspired. Enjoy browsing!










About the Author: Dmitriy Romasko is the Team Lead and trainer for the HTML Email department at PSD2HTML. He is a big fan of newsletter template coding. Dmitriy has over seven years of experience, and he is passionate about responsive email solutions, web design, and online marketing.

leave a comment

All posts Back to top