Sponsor: Quick testing across devices with this browser built for web developers.
Building an email template means dealing with table, tr, td tags a lot. And also need to check the compatibility of the CSS rules, to make sure it will be rendered nice for all email clients.
Previously I got a task to create an HTML email template. It is included with the design, so I created the system too. It is a tiny system that I just pick from the current website like the font and colors.
I designed the template using Figma, then decided to create the max-width to 580px, since the content is not much, just a changelog notification email with some comments.
On the first try, I built using Pinegrow (just wanted to make things easy), but it seems like no different. I still need to add a default table reset every time I insert a table tag
Keep trying to find the easiest solution to make a piece of email template on the internet. I found a blog that has a list of email development tools and resources, then my eyes stopped on the "tailwindcss" word.
An email prototyping framework using tailwind. This makes me fascinating since I like the utility class approach by TailwindCSS. The framework name is Maizzle.
The framework can do email-optimized CSS inlining, meaning that there is no need to add style=" " attribute to every tag. Maizzle will convert the tailwindcss classes to inline CSS.
It is just like creating HTML docs for websites. Now I just need to focus on how the table structure for my layout design.
If you're looking for a framework that offers abstractions like<row>and<column>, then Maizzle might not be the right choice for you.
Maizzle is using Tailwindcss, So, if you prefer multi-column you are going to need to use Tailwind percentage widths.
Read the doc for more detail about Maizle
Don't miss it: Best Lifetime Deals for Designers and Developers I'll Regret to Missed