Welcome to the arrogantly named library of, Good Email Code

I always enjoy writing and talking about email code so I decided to set up this site to share code and explain the reasons behind everything I’m doing. You are welcome to simply copy and paste code or you can read up and learn the theory behind it.

The code here is what I would call best practice (other may disagree) and my theory behind that is.

Priority is given to making sure the code works. This means making sure it is semantic, functional, accessible and meeting user expectations. Consistency between email clients and pixel perfect design are also important but always secondary.

Please also consider that this is a personal site and I’m dyslexic. It is probably full of spelling and grammar errors, don’t discount the content because of this, just politely let me know and I can fix it.

With all that in mind, look at these cool things I’ve written.

Email code

• Base Template - A base template to wrap all the email content in.
• Preview Text - Small preview text that shows in the inbox but not in the email.
• Container - Place multiple columns of content next to each other.
• Columns - A centered column to house all the email content.
• Text - Basic text elements.
• CTA Link - A link that is styled to look like a button.
• Hr - A horizontal rule, used to separate sections of content.
• Spacing - Adding horizontal or vertical spacers between elements in email.

Email enhancements

• Absolute Position - Replicating position:absolute; to work across email clients.
• Stopping Gmail image popups - How to block the Gmail image lightbox from popping up.
• CSS Triangles - A triangle shape, made with code to avoid using an image.
• CSS Art - Creating images with CSS.
• SVG in email - Using embedded or external SVG's in an email.
• SVG to VML - How to manually convert an SVG image into a VML image.
• Picture - How to use the picture element in an email.
• Text shadow - Replicating text-shadow to work across email clients.
• MSO styles - Digging in to Outlook spesific CSS styles.

Email accessibility

• Using rem and em units in email - How and why to use relative units in email.
• Should you use an <h1> in email code? - What are the possible issues.
• ARIA landmarks in Email - Which landmarks can we use in email, and how to use them.
• Text In Images - Looking at some of the issues associated with including text in images.
• Visually hidden text - Text that is picked up by screen readers but doesn’t appear on screen.
• Table layouts - Why you should avoid using table layouts as much as possible.