10 tips on how to code an email newsletter

Want to create an HTML email template? Remember that it is not only its design what matters. It is also the dysfunction of tools available on the market. For example, some mail applications may not support the solutions you want to use in your email code. So, how to make your newsletter look good on every device and in every email application? See our checklist of best practices in coding emails!

5 tips on HTML email template

  • Use tables when coding a newsletter. <table>, <td>, <tr> are usually read properly by most email applications, while <div> and <p> can mess up your email design.
  • Use UTF-8 coding standard. It allows email application read out letters, numbers, and special characters of all languages around the world.
  • Use inlines for creating styles. The great majority of email providers delete a <head> section from an email code.
  • Set the margins and paddings to zero. Thanks to this, you will minimize the risk that the content of the newsletter will move when displayed.
  • Try not to use colspan and rowspan options in your HTML email so that its layout doesn’t mess up.

What other nuances remember about?

  • The width of your newsletter template should be 600 px. Thanks to this, your message will display well on every kind of device. At the same time, a universal size for a background image is 1600 x 600 px. However, remember that email clients often don’t support CSS background images. For this reason, use HTML background attribute on table or <body> elements.
  • Use graphics as block elements (display: block) if you do not want spaces to appear under the newsletter images.
  • Bet on popular fonts. Use the ones that are so universal that they will display correctly in every email application. The safe font families are, for example, Times New Roman, Arial, Georgia, and Verdana. If you want to use extravagant fonts in your HTML email design, put them on graphics.
  • Save colors in HEX or RGB formats. There is a high risk that other formats will not be supported by some email applications.
  • Don’t use Flash animations. Replace them with GIF ones, as they are commonly supported by email providers. Also, avoid using JavaScript in your HTML email template as almost all email clients block it.

Do you already know how to encode mailing? It’s high time you get down to it! We keep our fingers crossed.

You might also like

Read article
News,

Web accessibility – a temporary trend or a permanent change?

What is it all about? Back in 1999 when the ubiquitous digitization as we know it today was relatively still in its infancy yet becoming [...]

Read article
Advice and tips,

A Comprehensive Guide to Oxygen: Maximizing Your Web Development Experience

Oxygen is a vital component in our daily lives and necessary for survival. But did you know that it can also be used to build [...]

Read article
Advice and tips,

Why Skimping on Developers Can Backfire?

In our industry, dissatisfied clients often seek a new developer for their websites and other web products. Some of them were managed by companies that [...]