Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@unruthless

unruthless/gist:11383824

Last active January 3, 2024 08:57
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save unruthless/11383824 to your computer and use it in GitHub Desktop.
Save unruthless/11383824 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Email Template guidelines
Raw
gistfile1.md

General guidelines for designing HTML email templates.

Questions and comments welcome anytime – thanks for reading!

KEY TAKEAWAY:

  • Coding for HTML emails is like coding for Internet browsers from 10 years ago. (It’s the email clients’ — Outlook, etc. — fault.)
  • Picture a website from a decade ago: that’s the level of design complexity we can reasonably shoot for.

WIDTH:

  • Your design should be a fixed width between 600 and 800 pixels. Choose the narrowest width within this range that supports your email’s content.
  • The width must be a whole-number pixel value.
  • Make sure your design accounts for wider displays, too:
    • Should the email body be centered, left-aligned, or right-aligned?
    • What should the background color be in the margins?

FONTS:

  • Custom fonts will work in some email clients (iOS Mail, Apple Mail, Android’s default email client, Thunderbird, newer Outlook versions) but will fall back to a default system font everywhere else (Gmail, Yahoo! Mail, Windows Live Mail, older Outlook versions).
  • So, you should test your design with (a) your custom fonts, (b) Helvetica, and (c) Arial.
  • All font sizes and leadings must be whole-number pixel values.
  • Don’t use a font size smaller than 10px.

LAYOUT:

  • Use as few columns as your content needs.
  • Try not to have overlapping visual elements.
  • If you’re not sure whether your layout is doable, ask the developer who'll be coding it, and work together to keep the essence of your design while eliminating any problematic bits.

HIERARCHY / COPY:

  • People tend to read emails linearly, from the top down.
  • Use short sentences.
  • Use bulleted lists.
  • If possible, make the first (top-most) text in the email a teaser for the email contents, because many email clients will display the first sentence of text as a teaser.
  • All font sizes and leadings must be whole-number pixel values.
  • Don’t use a font size smaller than 10px.

IMAGES:

  • 72dpi. Images will look a bit grainy on Retina displays, but unfortunately there's no good workaround yet.
  • Dimensions pre-scaled to fit the layout. Don’t assume that email clients are able to scale down your image dimensions on-the-fly, because some can't and some won't.
  • Make the file size as lightweight as possible. Rule of thumb: a visually-complex color JPG at 500px by 500px should be around 100 kb.
  • Make sure that the image’s dimensions are whole-number pixel values.

MAILING ADDRESS & UNSUBSCRIBE LINKS:

We must include both a mailing address and an unsubscribe link, to make sure our emails don’t get caught in spam filters.

TEXT VERSION:

  • Don’t forget to create a text-only version of the email template, for people who are unable or unwilling to receive HTML emails.
  • No images, no formatting, and — for readability and to prevent unwanted line breaks in some email clients — make sure each line does not exceed 80 characters.
  • It’s common practice to use 80-character-long line of dashes ----- or equal signs ===== to make section dividers.
  • To save time, create the text version once the HTML version is done.
@hardweb-it
Copy link

It would be best with a sample code :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment