DEV Community

loading...
Cover image for Do you spend a lot of time creating HTML emails?

Do you spend a lot of time creating HTML emails?

hunzaboy profile image Aslam Shah ・1 min read

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 :)

Discussion

pic
Editor guide
Collapse
ianbromwich profile image
Mr Rager

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 Author

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

Collapse
michaelandreuzza profile image
michael-andreuzza

Thank you, very useful.

Been looking for a template for my newsletter and I ended up doing this.

I am going to look at your project because I am starting to like to code emails.
Bright Mode

Dark Mode

Collapse
hunzaboy profile image
Aslam Shah Author

Thanks and Do share your feedback :)

Collapse
michaelandreuzza profile image
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 Author

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 Author

I am glad you found it useful. 😊

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
Collapse
julianrochsas profile image
JulianRochsas

Thanks a lot. Its helpful

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 Author

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 Author

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.