Wondering how you could apply modern UI design to emails? Here’s the answer.
The Problem
I don’t know about you - but emails are the last thing that I want to design. I end up sending plain text emails for most of my apps, and that works just fine.
However, a few projects have more complex requirements. In one such case, I had to send bills as emails and allow a designer (if not a client power-user) to “code in” the design for the bills.
My first thought was to use JSReport and send PDFs in emails instead of directly including bills in the email. This should have simplified the design process for the email and keep it aligned to previously applied best practice.
That was not to be.
- We had to keep emails light
- Emails needed to be engaging and direct. 40-60% of the target audience was not in the habit of using emails
- Any design that would require storage and linking to files was not acceptable
A few curious requirements and the current tech stack presented a simple, but effective solution.
The Solution
I had deployed the server stack on AdonisJS previously. This meant I could use AdonisJS views to merge the template with email design with the actual data at runtime.
But, I still had to provide a good way to design those emails. Not exactly MailChimp and friends, but something decent enough for the first run.
Email design is not exactly caught up with the times -
- Emails need inline CSS
- Using HTML tables to align can take an ugly turn anytime
- Responsive emails are a thing and not a thing I necessarily like
It was then, and only then, did I come across bootstrap-email.
Bootstrap Email, as it’s name suggests, is a way to design emails using Bootstrap. The best thing - you don’t worry about all the email design constraints. The creator/maintainers of Bootstrap Email have done the heavy lifting.
You now design emails (more or less) like a web page to create a responsive email. As simple as that.
- Emails are responsive and device-agnostic. Emails look like “real emails” in a browser, on a mobile device, or using apps like Outlook
- Create emails using simple bootstrap layouting. No special techniques needed
- Simple to design and consistent. No more dealing directly with HTML tables to design emails
The creators have kindly made the library open source and provided all this for free. Bootstrap Email is well documented and seems to have adequate maintenance over the two years.
Check out Bootstrap Email on GitHub, or see the documentation
Play around with Bootstrap Email using this online editor
