We introduced the Starter boilerplate email template a few years ago as a set of modular components to use as a starting point for coding your own custom designs from. Since then, we redesigned the layout and refactored the code with a focus on accessibility.

A recent accessibility report highlighted our emails as being among the most accessible. The template we used for those emails was coded from the Starter boilerplate, with each email's content put together in Blocks Edit.

Essential code

First and foremost is accessibility and best practices. For structure, div's are primarily used, while tables and the ghost tables technique are secondary, only used when needed to support Outlook. Semantic elements like heading and paragraph tags are also used throughout.

The code is easy to read and includes only what is necessary to work across email clients. To better understand the decisions we made with it, we’ve added notes on what each part of the code does and why it's necessary.

Modular pattern library

The modules included are based on common design patterns used in email, made up of stacked sections for layout, and standalone components like titles and buttons.

The layout is responsive for mobile devices. Dark mode adjustments are made as well. And it’s been tested across a range of email clients using Email on Acid's testing suite.

The code is available on GitHub and includes example email layouts and an example custom designed email built from the template.

The Starter email boilerplate template comes editable with every Blocks Edit account. Get yours for free. And for more email design tools and tips, check out these resources.