Email design and development
date
Jun 30, 2020
slug
email-design-and-development
status
Published
tags
Content
summary
Achieve scalability and consistency using design templates and a robust code repository. Ensure seamless compatibility across email clients and elevate your email game with easy content updates and smooth integration into your automation tools.
type
Post
Email design: a love-hate relationship for many. The satisfaction of a perfectly rendered, cross-client compatible email is undeniable. But the frustration of working with outdated technology, the limitations of table-based HTML, and the lack of innovation in the field is equally real. While other design fields leap forward, email often feels stuck in the 90s.
This is a problem, especially considering the crucial role email plays in driving revenue and engagement. The question is: how do designers and marketers build a truly scalable and functional email system that keeps pace with modern design principles?
The Challenge: Managing the Email Mountain
For enterprises, managing hundreds—or even thousands—of emails requires a robust system. It's not just about individual emails; it's about maintaining a consistent brand voice and ensuring seamless compatibility across various email clients (Gmail, Outlook, Apple Mail, etc.). The inconsistencies in how these clients render HTML and CSS pose a significant hurdle. Knowing which CSS properties are supported by which client is only half the battle; knowing where to apply those styles is just as critical.
The Solution: A Design System for Email
Our approach focuses on building a foundation of reusable components and a streamlined workflow. This system is built on two key elements: design templates and a code repository.
1. Design Templates: The Blueprint
These aren't just mockups; they're fully fleshed-out designs in Photoshop or Sketch, ready for content injection. The key here is establishing a consistent brand voice—a unified look and feel across all your emails. We designed ours with simplicity and efficiency in mind, enabling us to create more with less effort.
2. The Code Repository: Bringing it to Life
Our simple email workflow provides the HTML and CSS to bring those designs to life. Every element in your design templates has a corresponding code counterpart. Updates to the design are automatically reflected in the code, ensuring consistency. The workflow also handles:
- CSS Inlining: Guarantees compatibility with even the most stubborn email clients.
- Reusable Assets: Templates and layouts are designed for reuse, saving time and effort.
- Version Control (Git): Track changes, collaborate effectively, and easily revert to previous versions.
- Email Previews: Test your emails before sending them to ensure everything looks perfect.
Getting Started: A Quick Guide
- Dependencies: You'll need Node.js (v10.x or later) with npm (v6.x or later), and Gulp.js (v3.x or later). Node.js Installation and Gulp Quick Start.
- Clone the Repository:
git clone https://github.com/shivdatt/simple-email-workflow.gitcd simple-email-workflow
- Install Packages:
npm install
- Build and Preview:
npm startView your compiled email athttp://localhost:8000.
How to Use the System
- Creating Templates: Reusable templates are stored in
src/templates, and layouts insrc/layouts. Use Nunjucks templating for dynamic content inclusion and block definition.
- Creating Emails: Create new email files in
src/emails/, specifying the layout and defining content blocks using Nunjucks syntax.
- CSS: Use SASS files in
src/sass/, with partials prefixed with an underscore (e.g.,_typography_.scss).
- Local Build: Use
npm start devfor development andnpm startfor the final build. Copy the meta, styles, and email body from thedist/directory.
- Managing Assets: Add assets to
src/assetsand link them in your templates.
By implementing this system, you can create a dynamic, consistent, and scalable email design process, ensuring your email communications are as effective and engaging as possible.