Design and develop email components
Now that we had our plan of attack, and a blueprint to go with it, Francois could start building our design library and passing it along to me to code things up.
Francois took components and made them work in email by starting with a grid layout. Before email development began, Francois sent his mockups to Julia, myself, and other stakeholders for review, and he made adjustments until everyone was happy.
After I got the approved designs, I thought through the best way to code individual components and the actual email templates. You’ll want to avoid having overly complex code so that it’s faster and easier to edit.
That being said, I also had to get even more granular than design when coding components for the design system. For example, I developed components that are the shells of one column, two-column, and three-column content blocks. Within each of those shells, I then build other components like images, text, and CTA buttons that work with the different types of layouts.
Doing this allows me to control each thing separately. But I also coded it up in a way that’s really easy to edit quickly. Essentially, it was almost like I created my own customized MJML system for our emails.
6. Create a library of reusable code
To get the most out of your email design system, you’ll need to build a collection of reusable pre-coded components that you can easily access when needed.
It’s best to use a code editor that gives you the ability to save snippets right within the software. You could save out your HTML and grab it when needed, but that’s not the most elegant or efficient method. Having a library of trustworthy code at your fingertips is the whole point.
If you use Adobe Dreamweaver to code emails, you can save your library there. which is popular with some email geeks, lets you save code in folders too. However, free tools like Alter.email do not.
I used to code and archive our new email design system. Parcel is great because it’s built to be a platform dedicated to email development. As I went through this process, I worked closely with Parcel’s founder, Avi Goldman. He helped Morocco Business Email List me make the most of the tool and find even more efficiencies to create components.
Once I’d coded up components, I could then assemble those blocks to create new email templates. Finally, I documented explanations of my code so that new developers, designers, and marketers who are unfamiliar with the system can get up to speed.
7. Put your design system to the test
There’s one last step before you’re ready to start sending out campaigns with your new email design system – testing. We ran all of our email templates through
The automated pre-send checklist evaluates the templates for potential issues surrounding email accessibility and deliverability while providing on dozens of clients and devices. This helps ensure we’re delivering an ideal inbox experience to every subscriber.
We can also use Campaign Precheck to test the emails we send using those new templates. The platform helps catch typos and bad links while optimizing images and
In addition to email pre-deployment testing, the email marketer on our team reminds us of the importance of A/B testing as another way to get the most from the email design system.
“You can start with your best ideas of what will work in the design UAE Cell Number system, but what works for you may not work for your audience. Every list is different, and you won’t know what your subscribers respond to until you test it.”
~ Julia Ritter, Email Marketing Manager
Thankfully, design systems are built to be flexible and scalable. So, when split testing reveals a more effective design choice, you can easily incorporate that into the system.
