Design and Workflow Blog

2018 email design in review

A big trend is the shift towards using a design system for email campaigns.

A series of emails based on the same modular template design.

We attended our first Litmus Live conference last month in San Francisco. We came away with a lot learned, good chats, and having a lot of fun after hours with fellow email geeks! Once we got over the con hangover, we spent the last few weeks watching archived videos from Litmus Live Boston and London events. There were so many great presentations! Litmus has highlighted a few of them here.

A big trend we've noticed from what was presented is the shift towards using a design system for email campaigns. There were three presentations specifically around the approach. It's been a topic that has come up a lot this past year. We've also blogged about it ourselves, and even gave a talk on it. Below are some key takeaways from the presentations at Litmus Live.

Fixing Enterprise Email with Design Systems by Fabio Carneiro

"A design system is a collection of reusable elements governed by a set of standards." Watch video of talk

  • Naming things: establishes a common language among teams
  • Defining language: foundations, components, patterns, templates
  • Documentation: important to provide specifics; cover what, why, how; how-not-to can also be important, should include voice and tone
  • Design elements to take into account: grid, spacing, typography, iconography

Email Design Systems by Crystal Ledesma

"It's predesigned, prebuilt, precoded, pretested; done in advanced so you don't have to focus on it again and again."

  • Audit: look at emails from past couple of years
  • Determine the shell: the container that holds all the modules together
  • Determine the modules: look at patterns in emails, boil them down to essentials of what they are made of

Creating Efficient Workflows with Modular Email Design by Jesse Blanner

"Modular email design - a system of interchangeable components (aka modules) and reusable patterns that can be combined to create email layouts."

  • Discovery phase: look at your existing email layouts and the nature of your content to get a better understanding of your design needs
  • Choose a grid: the foundation of most design systems; 8-point grids are common in digital design
  • Create a system guide and library: start designing some of the components and patterns you'll use in your system; designing within the grid will ensure that alignment, spacing and email structure will remain consistent; helps streamline and inform the rest of the process
  • Develop the system framework: bake-in HTML best practices and features where possible; mobile optimization, accessibly, etc; should be consistent from module to module to ensure they work across the entire system; helpful code commenting
  • Organize your modules: create a repository for your system module snippets and partials and consider creating CSS snippets as well to supplement your base code

Besides the workflow benefits, what's also great about this approach is that it makes it easier to adapt to email coding standards which are changing all the time (for the better). By having a framework for your emails, you can maintain your code and always send out emails that look great and engage all your readers.

Are you considering using modular design for your email templates? Check out our handy guide for getting started. And take your production workflow even further by making your template editable in Blocks Edit.

Photo of Ovi Demetrian Jr Ovi Demetrian Jr