DEV Community

Cover image for Do you spend a lot of time creating HTML emails?
Aslam Shah
Aslam Shah

Posted on • Edited on

Do you spend a lot of time creating HTML emails?

As a developer, I always came across creating bulletproof emails that should look awesome in every email client. But it takes up more time than needed. Email clients make it hard to write the perfect code for emails.

So I decided to create a few templates that I can use every time I start a new project or change an existing email. However, I ended up creating 50+ email templates using MJML ( the best ;) ) email markup language and I thought to share it with the community. I present to you (drum roll ) CodedMails.

Alt Text

I hope these templates will help you rapidly create emails, which are tested and up to date with the latest email client changes.

Drop me a comment if you have any feedback.

Looking for your support and love :)

Top comments (16)

Collapse
 
julianrochsas profile image
JulianRochsas

Thanks a lot. Its helpful

Collapse
 
ianbromwich profile image
Ian B

Nice work dude, I was surprised to see that viewing the HTML was free <3 I don't write much email templates these days but whenever I did I just looked at example code from emails on reallygoodemails.com/.

Collapse
 
hunzaboy profile image
Aslam Shah

Thanks, and Yes you can use the HTML versions for free.

Collapse
 
ender_minyard profile image
ender minyard

great project πŸ’‘

Collapse
 
andrewbaisden profile image
Andrew Baisden

Those are some nice clean designs. Still waiting for email development to become modern so that the usage of tables is reserved for actual tables and not the design πŸ˜‚

Collapse
 
hunzaboy profile image
Aslam Shah

Hopefully in this lifetime . (Outlook 🀭)

Collapse
 
patricktingen profile image
Patrick Tingen

Wow, these are awesome. Currently, we just generate plain text mails for our users, but this looks waaaaaay better.

Collapse
 
adirije profile image
Chuks Adirije

Wow! Amazing stuff!

Writing emails has always been a hassle for me, now, it just got better and easier. I'm going all in.

Thanks, @hunzaboy !

Collapse
 
hunzaboy profile image
Aslam Shah

I am glad you found it useful. 😊

Collapse
 
hunzaboy profile image
Aslam Shah

Thanks and Do share your feedback :)

Collapse
 
nikme profile image
Nikola

For what are there so many :root ... { display: none !important; } items in head? I have never seen someting like that?

Collapse
 
hunzaboy profile image
Aslam Shah

Hey Nikola, what template are you refering to? I can give you better explanation based on the template. 😊

Collapse
 
nikme profile image
Nikola

Every one I have open, e.q. Welcome Email
code goes like

<style type="text/css">:root topadblock, :root script[src^="http://free-shoutbox.net/app/webroot/shoutbox/sb.php?shoutbox="] + #freeshoutbox_content, :root input[onclick^="window.open('http://www.FriendlyDuck.com/"], :root img[alt^="Fuckbook"], :root iframe[src^="http://static.mozo.com.au/strips/"],
 :root iframe[id^="google_ads_iframe"], :root div[jscontroller="U835zd"] + c-wiz[jsrenderer="YnuqN"], :root div[id^="zergnet-widget"], :root div[id^="traffective-ad-"], :root div[id^="sticky_ad_"], :root div[id^="q1-adset-"], :root div[id^="proadszone-"], :root div[id^="mainads"], :root 
div[id^="lazyad-"], :root div[id^="gtm-ad-"],.......
Thread Thread
 
hunzaboy profile image
Aslam Shah

Ahh, it's something added by an extension you are using. 😊 You can check the github repo for the actual html versions.

FYI: I don't have any ad in the website so I am not sure why it is even added there.

Collapse
 
calumsult profile image
Calum Johnson

Looks neat!

There's a typo on one of the cards btw, out instead of our- "All out templates...".

Collapse
 
hunzaboy profile image
Aslam Shah

Thanks :)