✉️ Custom HTML emails with an email expert

This is a replay from a live stream on Twitch where Mark Robbins joined me to talk all about HTML emails!
🔗 Links
✅ Follow Mark on Twitter: / m_j_robbins
✅ Mark's Codepen: codepen.io/m_j_robbins
✅ Email Geeks Slack: email.geeks.chat/
✅ Email Resources: emailresourc.es/
✅ Parcel: parcel.io/
✅ Can I Email: www.caniemail.com/
✅ Litmus email testing: www.litmus.com/email-testing/
✅ Good email code: www.goodemailcode.com/
✅ Email Markup Consortium: emailmarkup.org/
✅ MJML email framework: mjml.io/
✅ Maizzle, a utility first email library: maizzle.com/
⌚ Timestamps:
00:00 - Introduction
02:35 - Why do people get frustrated with HTML email?
05:38 - Why Mark enjoys it
07:15 - What's a good place to get started
10:12 - Email and accessibility
14:24 - Is HTML really like 1990 web dev?
17:05 - Progressive enhancement and testing in email
23:31 - Plain text with visual elements
25:00 - Embedding images
25:55 - Ghost tables
29:47 - What should be avoided
32:00 - Good Email Code
38:40 - Email Markup Consortium
56:49 - Frameworks or Libraries?
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@dnlbellfield]

Hey thanks for having Mark on and showing love to the email dev world!

[@nitrohite]

Email HTML is one of the things I dread the most, I appreciate these type of videos because it’s a refreshing view on the subject and an up to date state of the subject, but boy oh boy is email HTML still so so so far behind anything else HTML/CSS-related, specially with SalesForce Marketing Cloud, it’s unfortunately such a painful set of tools and it makes building emails even harder than they have to be 😭 but thanks to Mark for bringing a little bit of light into it! 🤗

[@wimeatsworld]

This is very cool. I'm picking up HTML emails as a mail to get into the industry so I'll thoroughly enjoy today's episode while undoubtedly picking up many a gem along the way.

[@max_samusevich]

Thank you, Mark and Kevin! As an Email Developer I am happy to see the sphere is getting better and I’m excited to be a part of it and contribute ❤️ I know how frustrating making code for emails is from time to time but it’s hooked me many years ago and I’m still solving clues and exploring approaches while creating hand made emails and signatures I can help if someone needs emails or signatures

[@shahidurrahmankhan6783]

Do you have a website where you provide these services?

[@RobBulmahn]

Email HTML: Just ignore 99% of what's in possible CSS, and throw everything in tables within tables.

[@codernerd7076]

I call it writing html like it's 1998!

[@KevinPowell]

Turns out it's not so bad anymore!

[@RobBulmahn]

@@KevinPowell For some, but unfortunately the only HTML emails I'm crafting are for internal company use, and almost everyone still uses Outlook 2016. 😢

[@nitrohite]

@@KevinPowell it is, though, specially with Sales Force it’s such a painful way to manage CRM comms through email marketing 😭

[@VadelGame]

@@KevinPowell Coming from an Email Marketer & developer. It's still bad, specially with outlook.

[@brokenMikrophone]

This is most helpful! I got so frustrated while sending emails through CDO and I thought it just breaks because of that. This will step up my game immensely Thank you so much!

[@TheCocoaDaddy]

Awesome video! With web-based email access being so prevalent now, I was surprised to hear this discussion about desktop email applications. I didn't know about the "caniemail" site, nor did I know soooo many different email clients exist. Thanks for posting!

[@brianlarue5824]

Great subject matter! I am actually an administrator for the tool that Mark develops (Salesforce Marketing Cloud - Email Studio). Came here hoping to learn how to make better HTML emails. Outlook is an absolute nightmare! Whenever there's a display issue, it is ALWAYS Outlook related. Tables for email are an unfortunate necessity #ThanksOutlook

[@felixc.programs8209]

Very informative! You helped me find my passion with your videos and you inspired me to try to do the same for others by starting a Tech KZbin channel myself. That's it ,just thank you!

[@Chelleychelle710]

Oh my gosh I could scream to the top of my lungs this is why I love k.p. I asked in some vids back about html email bc I heard it's easy to get into and u have a video on it yay! Thanks so much kev

[@matthewreid1580]

A-MAZING! If all you did was share Mark's resources, that would have been enough. Super timely for me, i may be getting back into email dev.

[@byc090020]

Weve been using MJML at my work. It is a life changer.

[@shahidurrahmankhan6783]

Can it really product HTML and cssthat works in most/all web clients?

[@byc090020]

@@shahidurrahmankhan6783 I have limited experience with it but my coworkers have been using it for a year or so and they say it's been great.

[@shahidurrahmankhan6783]

@@byc090020 thanks for the info. Many people have been suggesting MJML. Don't know if If it would be a problem to get a job with it. But will try it now. If I can edit/add stuff after editing in MJML, I think it would be awesome.

[@DavidMermelstein]

@@shahidurrahmankhan6783 I used it years ago for one client but the design was not complicated, which it shouldn't be. I check in a variety scenarios. It works well. Try it out.

[@gezuh6111]

Mum get the camera. I was in the chat of the CSS King. Livestream was great. Greetings from Germany

[@wayslow]

This is really good knowledge. It's a perfect material for a nice 10min video for the future.

[@BigBadLion]

I work making emails as well, sometimes it's a nightmare! Specially when you want to make stuff compatible with older clients!

[@aldhairescobar5238]

There's a Figma plugin that takes your design and gives you MJML called 'cannoli', which might be helpful for those who are trying to start coding HTML Emails 🤷‍♂, Outlook is a pain but there are some tricks out there to create better layouts with it.

[@unleashthedog]

Oh been waiting for this since the announcement … dunno why in the last two months I was getting no suggestions for your videos and missed it. Good thing I checked! Straight in my overpopulated watch list

[@mikoj6707]

I recently got asked to make an Email and I said sure! How hard can it be right? WOW...I had absolutely NO IDEA that Email coding is so far behind the browser. After researching, I made a design using a table and it worked fine in Gmail but as predicted, totally messed up in Outlook. I thought hmm...Maybe my favorite Frontend Dev KZbinr Kevin Powell spoke about emails before. Of course he curated such a detailed, interesting video on the topic with a WEALTH of information. OF COURSE! I learned so much and have a ton of great resources now, which will come in handy bc I'm discovering I might be one of those "weird" people who likes coding emails.

[@HansKr]

Very interesting and informative video. The only thing that surprises me is that in 2022 it is still not be possible for developers of browsers and email clients to come up with a joint solution so that HTML and CSS work the same everywhere and all components are available everywhere. You would expect this to be a small effort.

[@NiceChange]

Excited to upgrade my email templates 😊

[@tarek900045]

Wow are you spying on me you described my current situation with 100% accuracy

[@nicklarson8575]

Dark mode is a big problem when designing emails as well. I just recently got thrown into creating marketing emails for my company. One of the biggest problems I’ve run into is some Outlook clients rendering a button as an image with no link.

[@ratkajecsven1928]

Hello Kevin! Really love your entertaining videos. Can you please make a video on creating custom wordpress theme? Thank you!

[@lucoo3457]

thanks for the informative video

[@RazahLP]

Cool stream! 🙂

[@Ceko]

That outlook client on the other side of the scale Mark is talking about is the reason I’m watching this KZbin 😂 Happy our PO uses that client or else we wouldn’t even have discovered the errors that turned up 😮

[@MuhammadAhmedAshraf]

buttons and other stuff shouldn't have pointer cursor they are only for links i have read on medium what's your thoughts about it

[@MrMelquize]

Kevin, please more content about html email

[@groovecat]

Newbie here regarding email. Any courses that can take me through all the skills needed to focus on email development? Thanks

[@elg281]

Thanks

[@emailinsights]

Please bring a Playlist on html email

[@hafpixels4172]

Nice❤️❤️❤️

[@teenytinytoons]

I have my first email developer interview on Tuesday. I want this so bad. Any advice folks?

[@nice_man932]

Hi what happened?

[@Coderdawg]

Are there a lot of email dev jobs out there?

[@Yolo_Swagins]

Email "developement" is a nightmare, im dong it for over 4 years. If you can ignore Outlook for windows, Google app on apple devices and some old not much used email clients you are "mostly" ok. But whenyou cant ignore those, oh boy i was considering to buy crystall ball. Coz figure out what to use where was like some woodoo.

[@codernerd7076]

Now some online email clients apply some auto darkmode as well that mess up my template just started watching the video but hope they talk about that annoying thing and how to deal with it 😰

[@KevinPowell]

I don't think we talked about that actually... but I think that might come from the browser settings, perhaps? He did mention dealing with the email client and browser defaults on top of that, and browsers are looking more at following the system settings there. Maybe just forcing a background-color? 🤷

[@reegiromar]

Kevin ♥️♥️ fav one

[@naczelnypsycholog6296]

lol Kevin why you haven't finish FrontEndMentor project ?

[@cyptowithkelv]

I cant design things But can code design given is the industry for me 🤔?

[@VonUndZuCaesar]

HTML E-Mails in 2022 are still tables for layouts... So much stuff is not supported even not by Gmail or Thunderbird

[@MuditaShah]

Hi

[@KevinPowell]

👋

[@MuditaShah]

Hi Kevin! I was thinking maybe you could make something on a 404 error page for when someone goes to a wrong page? I’m having trouble making something which actually looks like a 404 page?

[@shanappy7041]

First comment 😀

[@cintron3d]

What is an email?

[@outpost31737]

I hate emails 99% end up in the trash can.

[@Hecho_Industries]

Please! Turn off the chat overlay in future videos, it’s distracting and unpleasant to try to watch the content

[@KevinPowell]

Fair request, but I have them on as a request from people who're there live though, since people on phones like having it full-screen but able to follow the chat easily. I could look at making it a bit smaller in the future maybe.