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

• Template - A base template to wrap all the email content in.
• Preheader - Small preview text that shows in the inbox but not in the email.
• Container - A centered column to house all the email content.
• Columns - Place multiple columns of content next to each other.
• Text - Basic text elements.
• Link Button - 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 spacing 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.