HTML Email Development Best Practices

Zacarias Ripoll Cid -

If you think browser support in web development was a problem, you are in for a treat. Welcome to the crazy world of HTML email development.

As an Email Developer, you will be responsible for all of the emails your company sends. It is best practice to update your knowledge to deliver each email campaign to the best of your ability. You will also need to know how email works in each email client(aka testing), the legal requirements(CAN-SPAM), and how to deliver the email. This fast-evolving environment could cost your company or your current employer a lot of money or even get you fired. Don't waste time and read on best practices and new updates monthly. Keeping up to date will make you a better overall email developer, but most importantly, you will become a key player in your team.

Bellow is a list of best practices for developing and designing email in 2022. These information was found in popular email client's documentation such as and not limited to, Mailchimp, Salesforce, Email On Acid and Litmus. If you want to contribute to this list please don't hesitate to email me.

  • Design for dark mode. Example: Don't use jpg logo with a white background, add the CSS media query @media (prefers-color-scheme dark) to your email to declare dark and light color schemes.
  • Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
  • Having a lot of images can land your email in the spam folder. For the same reasons, it’s not a good idea to structure your emails as a single image.
  • Keep the maximum width of your emails between 600 and 800 pixels.
  • Use cross-platform and universally supported email safe fonts such as Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, and Webdings.
  • Don’t use JavaScript or Flash to create motion in your emails.
  • Keep email file size under 100kb. It will pass through more spam filters. Keeping your email under 102kb will also prevent Gmail from “clipping” your email.
  • Don’t overuse the image (<img>) tag. Many of the popular email clients block images by default, so when designing an email, assume that images will be blocked and background images won’t load. Other reasons for not including too many images include:
  • Images take longer to download than text and use more data
  • Design your emails with mobile users in mind, so that the emails can be easily scaled down for smaller screens.
  • Preview and fully test your email campaigns before sending to your entire email list.
  • Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.
  • Use colspan and rowspan to span multiple columns or multiple rows. This might be used for a header cell that titles a group of columns, or a side-bar that groups rows of entries.
  • Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.
  • Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
  • Inline all CSS before sending.
  • Use only absolute links for images, and host those images on a reliable server.
  • Don’t bother with JavaScript or Flash—those technologies are largely unsupported by email clients.
  • Gmail removes your entire <style> block if it encounters an error.  For example, Gmail doesn’t like an ‘@’ declaration within an ‘@’ declaration.
  • Gmail also eliminates your style block if it exceeds 8192 characters.
  • Gmail doesn’t support web fonts other than Roboto and Google Sans. You can still use web fonts in your emails, of course, just remember to use a font stack to declare fonts in order of preference and to account for varying font support across email clients.
  • Gmail does not support attribute selectors and most pseudo-classes
  • Gmail automatically converts phone numbers, email addresses, and URLs to links. The links will be default blue and underlined, which is really bad news if your background is blue

CAN SPAM Best practices

  • Don’t use false or misleading header information. Sender information should be accurate and identify the person or business who sent the email.
  • Don’t use deceptive or misleading subject lines. Subject lines should not make any statements that are deceptive or misleading; they should accurately reflect the content of the email.
  • Identify the message as an ad.
  • Tell recipients where you’re located.
  • Tell recipients how to opt out of future email from you.
  • Honor opt-out requests promptly. The mechanism provided to recipients for opting out of marketing emails must be valid for thirty days following the email. All opt-out requests must be done free of charge and within ten business days of receipt of the request.

Html Development is an ongoing process that will make you question your existence. It is like a gateway to how we used to develop web pages more than 11 years ago. The positive side of this type of development is that your work will be seen by hundreds if not millions of users; that in itself is an enormous sense of pride and accomplishment.