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 A simple graphic showing the silhouette of a man working at a computer
Advice and tips,

What Is LLMs.txt and Why Does Your Website Need It in the AI Era?

The age of AI is here, and businesses are racing to adapt to this transformative shift. Your website isn’t just a digital storefront anymore—it’s a [...]

Read article Emilia Ryszawy 4:40 PM A simple graphic showing a woman in a wheelchair pointing at a laptop screen with words "European Accessbility Act" written on it
Accessibility, Advice and tips,

European Accessibility Act: What It Is and Who It Affects

The European Accessibility Act (EAA) is set to reshape the digital and physical landscape across the EU, ensuring that products and services are accessible to [...]

Read article
News,

Cut2Code Rebranding: From now on, we are ambiscale! 

Why did we do it? (A little about history) At the heart of our decision to rebrand is a simple truth: we’ve evolved. When we [...]