Learn the secrets that the pros use to create effective emails that work well in every single email client!

Crafting HTML Email

Preface

HTML email is a part of pretty much every project, but even many of the most experienced web developers dread having to work with it. This series of tutorials will explore the ins and outs of coding modern HTML emails, showing you how to love the craft rather than fear it.

Crafting HTML Emails: Coding HTML Emails: A Modern Perspective

One of the most difficult aspects of HTML email coding is that every email client has its own quirks and features. Email clients usually end up with these quirks through the best of intentions. For example, they might turn a plain text website address into a clickable link. There’s also the issue of security. Email clients need to make sure that our email’s HTML and CSS won’t interfere with their own interface’s HTML and CSS. A malicious email could use certain CSS properties (like absolute positioning) to lure people into clicking on overlaid hidden links. So email clients should parse, filter and manipulate HTML email code. But this means that we, as email developers, must be aware of this and make our code as friendly as possible for them.

Essential Best Practices

Interactive elements can greatly enhance HTML emails, making them stand out from the crowd. Even without JavaScript, we can use CSS pseudo-classes like :hover or :checked to create interactive components right inside HTML emails. And we can also do things like present buttons in a more engaging manner with hover effects, or add relevant content behind reveal buttons.

Adding Interactivity to HTML Emails

Focusing on accessibility is a fundamental part of designing for the Web. It ensures that websites are designed and coded so that they can be used by people with disabilities. The same principles apply to emails. And I firmly believe that, as email developers, it’s our job to make sure the emails we code are accessible to everyone. According to a yearly survey by WebAIM , some of the most common accessibility issues involve images and alternative text, headings and other HTML semantics, as well as language definitions.

Accessibility in HTML Emails

In this final tutorial on crafting HTML emails, let’s put everything we’ve learned into practice. I’m going to do an unsolicited redesign of SitePoint’s Weekly Newsletter , focusing on improving the code of the HTML email.

Community Questions