Build A Responsive HTML Email Template with HTML Tables & CSS

[@drewr]

Hey guys, I've just released my completely new and updated "HTML Email Mastery Course" for 2024 with the latest HTML Email concepts. I'm excited to release it, this is the best course I've ever made. Check it out here: ➢ w3newbie.com/email-course/ (coupon link for Udemy)

[@drewr]

I'm excited to release a new video on HTML Email Template Development to promote my new course, "HTML Email Mastery" which there is a link to in the video description. 😎 New website development and Bootstrap tutorials are also coming soon!

[@ayo3able]

This is a great code along. I learned alot and sniffed out a lot of my regular errors. Thank you :)

[@nehagupta98721]

Hi.. thanks for this amazing tutorial, it's really helpful. What I'm trying to understand is that, if there was only gonna be one thing inside the row of the outer table (in case of the social icons row), why did you add an inner table? Couldn't the styles be added to the td tag?

[@BaamDesign]

this is what i was searching for, thank you so much!

[@mohammadalauddin2727]

Thanks, It's helpful for me.

[@lancemarchetti8673]

Great tutorial!

[@horrorcoder]

email templates = welcome to dark age of web development!

[@gururaj7250]

Thanks a lot bro

[@badscreenname1]

Liked 👍

[@drewr]

Thanks! :)

[@pramodmittal9761]

does this template work properly if 1. I mail it through the AWS SES service to any client 2. if that client forwards this template to another person ??

[@rangabharath4253]

awesome

[@DW-dw2lz]

After reading the comments, this won't help me if I want to build email templates to use across my workplace campus using MS Outlook?

[@drewr]

For HTML emails to work in Outlook they need conditional statements or "ghost tables". I have a page about them on my website responsivehtmlemail.com or you can check out my course.

[@ms-gk3dg]

Thanks 👍👍👍

[@MrRedhawk16]

Thank you so much for the coupon

[@investoearn2653]

Thanks 😊😊

[@viralworld955]

Hi sir, I follow your every step but still I got a white space underneath the banner image, why is so? Because guide me.

[@ruthiewilson4655]

What does the final code look like for this tutorial. I seem to be missing a step

[@teapotradio]

Hello, I am having a dark mode problem in the e-mail I wrote, please can you help me?

[@asiffoysal6289]

hey when I send the template by gmal the links dosen't work how to fix it plese help

[@albertcastaneto7245]

Can I use css Grid on HTML email?

[@drewr]

No you have to use HTML tables for HTML email for compatibility in email clients.

[@nishabd996]

Some outlook version email doesn't show your code correctly. Can you please explain that?

[@drewr]

Hey, thanks for watching. This design is limited in devices/clients it will work on. Designing for Outlook is more complex and requires conditional statements, more complex table structure, and preferably not using an inliner tool... which would make the tutorial very long. It's covered in my course linked in the description if you want to check it ou.

[@nishabd996]

​@@drewr Thanks for replying to me. Can you please make a video on it?

[@leeadams7652]

@@nishabd996 He has... and you have to pay for it

[@bwb3881]

@@nishabd996 its because of the center tag.

[@Mwtorres89]

how do i send out the actual email template out as a mass email?

[@drewr]

You'll need to add an email template to an email service provider (ESP).

[@bobquinney5613]

html really bring back tables?

[@drewr]

Yes! lol For HTML Email client compatibility it is necessary to use tables (especially responsiveness) and other features like conditional statements/ghost tables along with the standard tables for clients like Outlook. Email is ages behind the web in code rendering engines, though it could be a good thing for spam, phishing security, etc.

[@bobquinney5613]

@@drewr Thanks for getting back to me Drew I meant bo disrespect I just have seen more websites get changed from tables and didn't realize that there was still a great use for it. Again thank you.

[@ehsaanbaloch-l2x]

can you provide me code ?

[@MJB_18]

I just bought your course on Udemy and you released the same video for free here? Wtf dude

[@drewr]

Thanks for taking the course! If you watch the 3.5 hour plus course videos on Udemy you'll see the free version here is a small fraction of the information (ghost tables, email client testing, outlook compatibility, preheader text, dark mode, background images, various columned layouts, email client friendly buttons, etc), not to mention the completed code, bonuses, and more.

[@greatesttales]

@@drewr i just bought your course too... to me this is a ripoff...

[@sororbudwiser]

ugh, hate tables

[@arifulInsight]

Why html 4! 😥

[@arifulInsight]

Why table! 😥

[@drewr]

This is for email client compatibility which is way behind web browser rendering standards.

[@drewr]

Here is an updated coupon link to my 'HTML Email Mastery Course" w3newbie.com/email-course/ :)

[@Muhammadilyas-dv6nb]

Bro a single voice on all of the videos and all templates are exactly same just the images are changed.