The RIGHT WAY to Build HTML Email Templates 2024
HTML-код
- Опубликовано: 17 июн 2024
- ➢ HTML Email Mastery Course 2024 (coupon link):
➢ responsivehtmlemail.com/email...
New & Updated for 2024 with the latest HTML Email concepts.
HTML Email Template Built From Scratch - 2023. In this tutorial we'll build an HTML Email Template with only HTML & CSS.
Download the tutorial starter files:
responsivehtmlemail.com/tut-8/
➢HTML Email Course:
responsivehtmlemail.com/course/
0:00 Introduction
0:30 - HTML Email Design Overview
1:40 - Tutorial Files Download Overview
2:02 - HTML Email Mastery Course Promo
responsivehtmlemail.com/course/
3:01 - Visual Studio Code Text Editor
3:22 - index.html HTML File Info
4:57 - Centering the HTML Email Template
6:18 - Centering and Email Width CSS
8:32 - Top Email Template Border HTML
9:22 - Header Two Column Table HTML & CSS
10:18 - Modern Logo HTML
12:00 - Social Media Icons HTML
13:41 - Two Column Header CSS
17:23 - Banner Image HTML
18:45 - Three Column Section Table HTML
23:47 - Three Column Section CSS
26:41 - Dark Background Two Column Section HTML
31:08 - Dark Background Two Column Section CSS
32:25 - Button CSS
33:28 - Single Column Text & Button HTML & CSS
36:50 - Email Footer HTML & CSS
40:05 - Responsive Email Template Completed
40:54 - Image Hosting for Email
41:39 - Testing the HTML Email Template with Litmus Putsmail!
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:
➢ responsivehtmlemail.com/email-course/ (coupon link for Udemy)
I have been designing an email for a nice calculated fields plug-in auto email, including conditional “if_not_empty” tags, and this was most helpful to make the top and bottom look really nice! Thanks for the thorough walk through.
This tutorial was setup nicely, straight to the point, and I was able to understand how to break up responsive columns. I'm aware this is a preview to the course but this video pretty gives a good foundation. Now we are moving towards more templating, using MJML or the new React html email.
Incredibly knowledgeable and we'll-spoken teacher. Nice tutorials comfortableness with the subject makes starting soft real exciting!!
Mannnn these videos are amazing. I am loving this and the way you're explaining everything.
I really like your html email udemy course! This video is a great resource too. Thanks!
Great video and really helpful! I couldn't get a grasp on how the setuper works but it's all clear now.
Awesome, great video!
Great tutorial, thank you.
Great tutorial, please post more videos Sir
THANK YOU SIR, YOU ARE FANTASTIC!!
17:00
30 * 5 is 150 .
Great tutorial overall thank you!
Almost done coding along with this video. I have to say I'm pretty excited. I wasn't even aware this was a potential job opportunity. I have been attempting to make a career change for a while now. I think I found a niche I could potentially excel at. Thanks a lot for this video. I have so many questions, but I feel that most will be answered in your online course. I just purchased it! Looking forward to working towards becoming a Email/Marketing Campaign Dev. BTW, thanks for the discount on your course!! You Rock!
great content, thank you.
Thank you for this amazing content.
THANK YOU for making this!! I don't enjoy writing HTML emails but this really helped me.
Very helpful. Thank you. :)
Thankyou so much. I learnt something new with this one.
great videos brother!
Great video -- thanks!
Really Helpful. Thanks
Mannnn these videos are amazing.
just finished this tutorial and I just went and bought your course . thank you
Update on your journey?
@@lastspoil5547 I ended up getting a job in IT just left there in dec and on jan 2nd got my first job in software development working with C# and javascript.
great tutuorial! thank you
Thanks for watching!
Thanks for the help.
you are so helfull man god bless you love from india
Thanks a lot!
great video!
The way you've set your containing tables are awesome.
I've noticed that, after adding a custom Google Font, the layout goes wonky for iOS Desktops whenever I use other main container setup methods--but not this! I wonder what's going on behind the scenes behind this magic. xD
Officially a fan of this method now. Thank you for sharing!
Thanks :). I spent a bunch of time in Email on Acid stripping down code to as little as possible while still working.. and this was the result (aside from Outlook stuff not in the youtube videos).
check a framework > normalize
you are literally the best
I will definitely be purchasing thsi course on udemy ! Great job!
Awesome, thank you!
Thank you sooo mch
Im actually really impressed by how you choose the pixel sizes. Im assuming over time, these numbers get easier to decide on.
yes
thanks it was really usefull
Thanks a lot
Best Tutorials
Hi love your video and learning from it currently and it looks super organized and more professional than most HTML Email tutorials iv seen I like your method the best cause theirs a sense cleanness to it. What I don't get and hopefully you would be able to answer is the structure of when to add a tr and td elements I get what their supposed to do but i don't know why your adding them the place your adding them hopefully you can clear that up for me? :D thank you so much
The layering is necessary for the content to have padding and different sections/columns in email clients though we don't include statements specifically for Outlook. The class names in the tutorial and explanation for the layers (columns / padding / content) should help with understanding the layers.
Thank you for the intel
Proficient in HTML and CSS and have been having a tougher time with JS so I just began googling if the two languages can get me a job and just learnt about HTML Email jobs and look forward to applying for them as I continue learning about JS and later react.
Thanks for this.
I’ve been a email dev for about 5 years and if you can find a job that teaches you Adobe or Salesforce it’ll boost your salary
@@JesusAndDev Can you help act as a guide and help me navigate through this to help me save time? I have found that Email development is not as popular as web development and find material has been challenging to have a system to follow.
Thank you for the response. I hope to hear from you.
Regards, Moses Njoroge.
Why not use grid or flexbox instead of tables?
@@drviagrin3798 i think its because some users use old web clients which do not have support for flexbox or grid
Great tutorial....
Wow
May ALLAH bless you..
Thanks and for you also.
Thank you
Hi, thank you for this. I coded along and it looks perfect in chrome and seems responsive. However when I sent it to myself in gmail the white font next to the keyboard image has turned to black, and the 3 column section is now 1 column wide (which is ok) but the subtitle header text (e commerce, web design, html email) is now aligned left instead of centered. Help!
Can anyone help me in understand in what is the condition to use table tag inside tr > td?
So i was struggling with the three column section not resizing as i resized my window. I started over from the beginning, as I couldn't see any missed tags, and I believe it was a simple indentation error from the beginning of the three column section that threw the rest of it off. As for where that was i'm not sure. Im brand new lol, but it works properly now.
A1!
Thanks!
thankssssss
Which tutorial do you recommend if I want to learn about this? It looks like you have two videos on this with similar titles and structure.
Thanks for the video, that’s exactly what I was looking to learn, but it’s really hard to understand all the details for beginners! What do you mean by tr and td??
Thanks for watching! I'm releasing a new course on HTML & CSS in the next week that I will add a link to in the description. I recommend basic HTML and CSS skills before learning HTML Email to know these tags for tables. (tr table row and td table data).
I have an doubt html5 under tag not is supported Then why you mention in template?
Great tutorial! I'm just curious why you put all your styling in with your HTML instead of creating a separate style sheet? Is it the norm when making email templates?
yes
Yes, some external CSS works for modern email clients but for best rendering we need the CSS inlined, separate style sheets will not work.
@@htmlemail Brilliant!! Thank you! This makes logical sense because the templates are embedded into an email and external stylesheets will not render when embedded in this case.
Awesome tutorial, it was very helpful!
one question tho, i dont seem to have a "Go Live" button on my vsc.
do you know how to add that?
Thanks! This is with the Live Server extension. I have a lesson on VS Code here:
responsivehtmlemail.com/html-email-template-resources/
When does "width=X" refer to pixels and when to percentage? It seems to alternate here. Is it assumed to be percentage with tables? Thanks!
Hey, can you make a video on Bootstrap for email framework? It seems like a big help in the dev process but I haven't quite understood how to use it.
Great tutorial...however, at 25:00 the layout does not go as expected...I get the two blocks in a row and 1 underneath...something with the spacing and padding is clashing. I checked the code, repåeated the tutorial to the same point with the very same issue. I tried Flexbox but still couldn't quite get it right.. ok so Three column section td class"three-columns" is where the issue is
Great info. To be a freelance email developer do you need to pay for something like Email On Acid to test your work?
This was incredibly helpful, thank you! This was my first HTML email, ever! I had a blast, but can not get the CSS to do exactly what it is supposed to, my email doe not look like the final outcome should! Any direction you can share? Thanks again.
Hey!!
Even for me its not working as intended. Two columns aren't stacking one below another althought it looks good on live server. Were you able to find out a solution?
Like and subscribe for more HTML Email Tutorials :)
Watch the preview video for the course mentioned here on my HTML Email website:
responsivehtmlemail.com/course/
You got way more than 400 likes and it was deserved
I hate using tables when making email templates i just don't understand them well i perfer using flex box is it ok ?
@@imranexd279 same here, but most flex grid is not supported in emails I believe
What are you building the original email imagery on and are you now uploading the design to this code building app. Where is the email imagery coming from? Is it one image or sliced? what format?
Yesssss!!!
I am working with slices that I export for web from Photoshop and when I upload the HTML to Klaviyo I'm left justified. I added in your center coding and it works but only centers the top image slice but not the entire email - Any suggestions?
I follow this tutorial to create a simpler version for my own newsletter, it looks amazing on pc/laptop (using gmail) but in smartphones the fonts are super tiny at 16px so I added a @media css rule, is that safe to do or should I use another workaround?
This video is 🔥 🙌.
I'll get your course soon, if this is the free content I want the paid honey 😎.
Changing the font size in the media queries will work for modern email clients and most if not all late model smart phones I believe.
where do i get the html email template
The full, tested template is including in my course as one of the bonus templates so I don't give it out on Github.
Responsively App is much better at checking viewport sizes on different devices than Google. I use it all the time
Thanks for this reference.
3 minutes in and still no information
i dint understand it either
Any reason why you’re not putting aria role presentation to all tables to make sure screen readers read the content smoothly?
tag doesn't work anymore, I loved the content and was following the tutorial but my page is not responsive. Please advice what can I use instead of tag
Thank you for this tutorial. I have a problem displaying the template on Gmail (It looks perfect on the browser using Live Server). The images don't show up and the text goes from the left all the way to the right. I don't have this problem on Apple Mail, it look perfect. I would appreciate your help!!
That is odd, if there aren't any typos I have never seen an issue in Gmail in my testing or in the support questions in the HTML email course. Was this resolved with double checking the HTML and if not, where is your Gmail? (operating system, browser)
great video, can you show us the way to make text center center above image ?
The the three column section you can simply change the order of the content so the title is above the image section. I hope this helps.
@@htmlemail thanks for the replay, what I mean is I have an image taking full width and have specific height, inside the image I want to add text that actually be on the top of the image and be center center.
using position absolute, flex, grid didn't work for me because of the client restriction.
any idea how to solve that?
I've completed this lesson but outlook does not show the same as live server does. Live server shows exactly what you have but outlook doesn't but blocks on the same line for the first row third and fourth row - and there are lines across each row section - how to fix this - I am sending all of the code through putsemail - not just the html portion - also - the main image and the footer leave a tiny bit of white spacing on the sides. The main issue here is the lines segregating rows and the blocks not being shown inline
Hi, something with the spacing and padding is clashing. I checked the code, repeated the tutorial to the same point with the very same issue, can you pls share the html code ?! many many thanks in advance!!!
hi, im a beginner, and ive been learning from your videos, but when i look at the code of other email developers(for learning purposes), i find them using divs, whats your comment on that ? is it enough to use tables, because i find your method much easier.
Thanks for watching! Divs only work in modern browsers and phones. For compatibility across all email clients tables are still used and recommended.
@@htmlemail That's what i've been wondering for years. I believe since a LOT of people still use MS Outlook (and not in the most recent version) it's more recommendable to use tables.
I have a question:
say I design an html email for a client
then what? do I send them the index.html file
or I send it to myself through puts mail and forward it to the client?
can you explain the process for working as a freelance developer
or refer me to one of your videos/courses that explains the process
I loved the video ... thank you very much
You'd have to check with the client. Your best bet is to learn an ESP along with the coding, you might need to add the code to an email campaign for them, get elements needed in the design from the ESP, or simply send the HTML file.
Great tutorial, does this template display correctly in windows office 365 desktop?
It requires Outlook MSO conditional statements, you can learn about them in my course linked in the description or on the page of my website about them.
Thank you so much
Hey,
Thanks for the tutorial , its really helpful.
I'm trying the same code for the two sections last but its not responsive at all for me. It simply aligns it vertically for all the screen-sizes. Can you help me on that?
Thanks I appreciate it! Double check the CSS for the two columns section, then the three column section but start here matching your code to the video: 9:22 - Header Two Column Table HTML & CSS ...it may be the "font-size: 0;" CSS.
Just curious of why you use instead of tag
You have to use tables for best rendering in email clients.
Curious what is the advantage of wrapping img inside element. Does that keep image in place or soemthing?
A tag links the image. Otherwise it’s just an image.
@@edgarmolina6222 it is not clear why he is using A with no link in href. I believe there is some advantage not clarified
@@KeyAndLock77 the only time he did that was when he set up the social media buttons and put a hashtag in the place of the link, which essentially is just a placeholder for a link since this was just a dev version of a real email.
Does your html email developer course cover everything I need to know or is there any additional courses I should get that you recommend? Thanks
Hi there, I recommend asking other students for recommendations or on the Litmus forum.
The video is really amazing. But I have a problem that is when I use "display:inline-block " it do not work. Is there any suggestion? plz.
hello, how to use imgBB and place the images to our HTML code?
A Big Thanks for the tutorial. I am having little trouble the whole stuff is not coming in center and not responsive according to the size of screen i followed each step of yours please guide me thanks.
It's tough to tell what could be happening here based on this, I would double check that your code matches the tutorial.
can we use tailwind css for this?
No you can't, check out this video for the difference between html email and web development: ruclips.net/user/shorts9DwAaA90wVQ
Ugh...great tutorial. I was doing so well until 24:46. Tried copying the .three columns .column with corresponding attributes and it centers everything. Do you happen to have a link to the direct source code so I can double check the code? I'm new to coding so I don't yet have complete comprehension of the html validator. (Besides simple errors like closing tags.) Thanks!
I would double check the CSS for the class but please see the HTML Email Template article post on my website which will give similar code throughout the article for a two column approach.
I'm having the same problem did you figure it out?
I left it for a while and came back and i'm still stuck did you find a solution yet?
This is absolute fing bs doesn't work at all f this
@@nateislate5551 For me worked, when I removed tables for padding and column, then changed content table class to column. ;)
Hi Drew Ryan. Thank you very much for your Awesome Tutorial. I'm Saju From Bangladesh. I've got your tutorials while I was searching for HTML Email Template tutorial.
I need an Advice from you. That is, Is it possible to Completely Learn building HTML Email Template by watching your Free RUclips Tutorials? (Note: I know very well HTML5 & all most 80% of CSS3 with Responsive CSS. )
Thanks! You will learn the basics from my content on youtube but you can also check out my website at responsivehtmlemail.com to learn more.
i wonder if this going to work across email platforms without any broken layouts?
Thanks for watching and asking. This structure will work in almost all (certainly all modern or cell phones) except for the layout to work with Outlook and some quite old clients as such you need 'html email conditional statements' so the tables adjust to device width. There is a lesson on this on the Responsive HTML Email website about this and it's included in the course. This is the same structure used as with conditional statements, but to code this design for all clients with them and inline styling instead of internal it takes maybe 2.5-3 hours.
So, like, is there a place to find the final code to all of this? Basically, starting at 13:41, I'm stuck trying to get the logo and social media icons to align the way they do in the video and I'd like to be able to compare and contrast the code to figure out where I'm going wrong. unfortunately, I can't see the entirety of your code in the video.
Hi, I got the same problem :( did you fix it !?
I hate using tables when making email templates i just don't understand them well i perfer using flex box is it ok ?
Your question is my question.
I would use flex, grid and media queries to make it easier.
Do you know if it works?
Hi Thanks for the great video. How to make a HTML email show as i design across emails platform? I sent this email using putsmail to my yahoo email, and it does not look as the design, but it works good in gmail and yahoo.
Hi, I have checked this html email template in yahoo mail and it works fine on my phone also so it may depend on the device. For best rendering there are things included in my course or my website like conditional statements if you are on Windows/Outlook.
@@htmlemail "depend on the device" You are right! Thank you, and i meant work good in gmail and hotmail on my original comment.
Just wonder... I saw top header image was set width=600px and max-width=100%. Why not just width=100%? Is that something emails not like/work and need to be set that extended way? As for normal page just width:100% should make image responsive and full width perfectly fine.
The tutorial is great. the only thing is on mobile, the three columns remain 200px in width instead of displaying block and changing with to 600px in media query. I tried that but it didn't work for me.
I'm not sure I follow your comment completely, but certain email clients won't respond to the media queries. Aside from using HTML email conditional statements like in the full course this is the optimal way to have the most clients display the responsive tables though. You could try something like this and test if you like:
@media screen and (max-width: 600px) {
.three-columns .column {
max-width: 400px!important;
}
}
aren't style tags stripped out by many email providers? i was under the impression inline styling on elements is best for maximum compatibility...?
Same
We inline it at the end when sending for time saving, in my course we design it with the styling inline as well as adding Outlook support.
Hello Can we send image as attachment ?
can I host the images on gdrive?
my logo and social media icon can not display in row, if i use this code, can you tell me what's problem
please where did you see those social media images ive been looking forem
Sir, they are in the img folder in the starter files download for the tutorial.
has the udemy course been updated ? saw the email referring to that .
Yes, the course has been rebuilt from scratch and released. It went from 3.5 hours to 16 hours long so there is a lot of more in-depth and advanced content.
The problem with this two column approach is that it very quickly turns from two column to 1 column. Actually it remains two column only if the email is 600+px wide.
Also another problem is when column flow into single column, it does not occupy entire 100% width but only the max-width, thus making column looks pretty much empty.
Not a good solution except for corner scenarios like Logo
A grid or a flex box would be better in this case?
@@mayankbehl2511 no, flex or grid are not implemented in all email clients. A solution is to use @media query and set the width to 100%. max-width: 100% !important; width: 100% !important;
42:04 You mention "although are we not designing for Outlook" - can you elaborate on this? Why does this not work for Outlook?
It's because of the way he coded it. Outlook is notorious for being annoying to code for but structuring it with a table-based structure, you'll almost be always fine. For the pesky sections, you can always use mso-conditionals and use ghost tables. If you have any questions let me know.
Someone please lend me a hand? I followed along with both this and an extremely similar tutorial of his, but starting with the three-columns section everything is stuck centered/displaying vertically in a row without the ability to align it horizontally. Everything above it works great though, and at this point I'm sure I'm not missing any code from the tutorials so it's driving me nuts
Sounds like there might be a simple typo if you followed along all the way. If the two columns in the header are responsive then the CSS for the three column section with "display: inline-block;" and "vertical-align: top;" should make them work the same going inline then stacking for the responsiveness.
@@htmlemail thanks for the response! I posted it for Stack Overflow and they haven’t figured it out quite yet, besides originally misunderstanding that it was an email template and telling me there was no reason to use tables/to use divs + flexbox.
But yeah I followed all the way along with both of your videos and paused throughout to take extensive notes during the first one… I’m sure it’s something small I’m missing haha. Unfortunately I have a time crunch trying to learn how to build email templates for the first time or I’d just buy your course right off the bat and start working through that to troubleshoot.
I’m having the same issue here and I can’t figure out why everything is just centering on top of each other when the css for the two columns works perfectly but the three columns messes everything up. EDIT: So I did some intense troubleshooting and found that in the html portion of the three sections code there was a closing /table tag missing which was causing everything to be selected. Hope this helps!
@@topshelfmusicgroup5899 I have the same problem.. Did you find the solution ?
@@SkyFluffyHusky I did not, would be really nice if someone could chime in! I did find another workaround method I can send you but I wasn’t able to fix this actual tutorial or his other tutorial. My guess is missing or somewhere or an extra or and it is taking the centering from a previous element. But I combed this and did not find anything missing/extra
I wish to learn from you - Why did you nest table tags? OR Why did you embed a table tag within another table tag? Couldn't the result be achieved without doing so?
The layering is necessary for the content to have padding and different sections in email clients though we don't include statements specifically for Outlook.
@@htmlemail thankyou. I learnt a lot from your video. I made my own html email.