Design Components for Emails 📩

These days, both designers and developers are thinking in ‘components’. Whether it’s a design system created in Figma, or an app made in React, our approach is to create elements that can be reused in powerful ways.

When it comes to email design, why should it be more difficult? Having made over 80 newsletters over the last year or 2, I’ve found it extremely time consuming wrestling with HTML email templates. There are lots of these freely available, but they’re not very reusable.

Therefore, I decided to try and ‘break out’ any static HTML email template into a set of reusable components. I’m actually just solving my own problem with this project, but it’s come a long way:

As you can see in the video above, there are drag and drop HTML components being used to build an email. At the end, a custom HTML email is created. How does this work though? This is my approached to building it:

Modularising HTML

Starting with any HTML template, think about which parts of the email will repeat, and be reused often:

For me, those are:

• Article blocks
• Call to action blocks
• Header section
• Footer section

So to break an email apart, it would be nice if these sections were editable and reusable (especially the article blocks). To start with a full HTML email template may look like this:

In Email Otter, my approach is to separate relevant segments of HTML into smaller HTML files. This doesn’t take much technical expertise — here’s an example of where I separate the ‘Latest articles’ section from the main HTML file, and paste it into a separate file:

If this is repeated with each section, you’ll eventually have a small collection of HTML files — each containing a ‘component’ of your email design:

For instance, the ‘Try it now’ HTML would sit in one file like this:

Whilst this process is not technically advanced, it’s still a painful experience and something I’ll make much more user friendly. Ideally, you won’t need to touch the HTML — at the click a button, your large template will be separated into blocks.

Reusing the components

After separating out the large HTML template, the smaller blocks of HTML can be reused and edited in Email Otter. Furthermore, to take the pain out of newsletter making (I have made too many), Email Otter eliminates tedious tasks that cause us newsletter makers to suffer:

• Resize, compress and host your images in one click! This means you won’t take up space in someone’s inbox, and Gmail is less likely to clip your newsletter.
• Pull in entire titles, images and descriptions for each link. No more tedious copy-pasting, no more human errors.

See these powerful, time saving features here:

I’m still working on this, but you can follow my progress here on Product Hunt Ship :

emailOtter - Product Hunt

If you’re interested in the building progress, here’s some related posts:

• What I’ve learned building an email app from scratch
• Email Otter wants to meet you!

Finally, if you’re building something yourself, let me know about your journey!