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)
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!
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/
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.
why were you looking at this if you had something like MJML? I saw your comment and then found out about MJML. Curious why you were on this video if you already had a good tool. 🤔
@@williamadil Good question! This was only to get my hands dirty and see what methods others are using. MJML and other templating frameworks such as Foundation Framework is the way to go!
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.
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).
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?
@@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.
@@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.
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.
@@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.
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
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
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).
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?
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!
@@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 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.
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.
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!
Just one thing. When I used style tags in the head to write CSS, the email that was generated was fine but once I forwarded the mail to myself, all the css was gone. I had to then make all the styles inline.
We have little control over forwarding HTML emails but when using an ESP they sometimes have a feature where you can add a forwarding feature or link so style isn't lost or imposed on by the email client doing the forwarding.
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)
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.
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
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 😎.
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?
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.
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.
@@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?
@@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.
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
@@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;
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; } }
@@htmlemail Hi I had the same issue, there probably has been some updates on the side of how tables are used if I'm correct? (I redid the tutorial 3times to check if I made some typos but I didn't) using a display: flex; on top of the two-columns class gives a solution, but used on mobile it just stays horizontal aligned & will not flip to vertical 'top & bottom' view. hope this helps mate.
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.
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.
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!!!
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.
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.
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.
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.
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?
Hi, for the multi-column layouts to render across all email clients and meet your customer expectations it would need MSO conditional statements for Windows Outlook. I teach this in my course and there is a page on my website about it. This makes the HTML email columns render properly in Outlook while still being mobile friendly.
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.
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 UA-cam Tutorials? (Note: I know very well HTML5 & all most 80% of CSS3 with Responsive CSS. )
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.
@@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.
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.
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)
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!
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
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.
why were you looking at this if you had something like MJML? I saw your comment and then found out about MJML. Curious why you were on this video if you already had a good tool. 🤔
@@williamadil Good question! This was only to get my hands dirty and see what methods others are using.
MJML and other templating frameworks such as Foundation Framework is the way to go!
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.
THANK YOU for making this!! I don't enjoy writing HTML emails but this really helped me.
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
I really like your html email udemy course! This video is a great resource too. Thanks!
Incredibly knowledgeable and we'll-spoken teacher. Nice tutorials comfortableness with the subject makes starting soft real exciting!!
Im actually really impressed by how you choose the pixel sizes. Im assuming over time, these numbers get easier to decide on.
yes
Mannnn these videos are amazing. I am loving this and the way you're explaining everything.
17:00
30 * 5 is 150 .
Great tutorial overall thank you!
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.
THANK YOU SIR, YOU ARE FANTASTIC!!
you are so helfull man god bless you love from india
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 video and really helpful! I couldn't get a grasp on how the setuper works but it's all clear now.
Thanks very much
Awesome, great video!
Can anyone help me in understand in what is the condition to use table tag inside tr > td?
I have an doubt html5 under tag not is supported Then why you mention in template?
Great tutorial, please post more videos Sir
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, thank you.
Thank you sooo mch
great videos brother!
Thank you for this amazing content.
Best Tutorials
Mannnn these videos are amazing.
Thankyou so much. I learnt something new with this one.
great content, thank you.
Thanks a lot!
Just curious of why you use instead of tag
You have to use tables for best rendering in email clients.
Responsively App is much better at checking viewport sizes on different devices than Google. I use it all the time
Thanks for this reference.
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
I will definitely be purchasing thsi course on udemy ! Great job!
Awesome, thank you!
great tutuorial! thank you
Thanks for watching!
Great tutorial....
Wow
May ALLAH bless you..
Thanks and for you also.
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
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).
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?
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
Great video -- thanks!
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.
Thanks for the help.
you are literally the best
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.
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.
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?
@@crazykindor6439it won't work in email clients
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!
Very helpful. Thank you. :)
Thanks a lot
Just one thing. When I used style tags in the head to write CSS, the email that was generated was fine but once I forwarded the mail to myself, all the css was gone. I had to then make all the styles inline.
We have little control over forwarding HTML emails but when using an ESP they sometimes have a feature where you can add a forwarding feature or link so style isn't lost or imposed on by the email client doing the forwarding.
A1!
Thanks!
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)
Really Helpful. Thanks
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.
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
Did you manage to make it work, as I have got to this point and having the same error?
@@alfiehensman3799 unfortunately no.
@@alfiehensman3799 nope
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.
thankssssss
Great info. To be a freelance email developer do you need to pay for something like Email On Acid to test your work?
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/
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?
Thanks a lot!
great video!
Thank you
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.
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. ;)
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?
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.
can we use tailwind css for this?
No you can't, check out this video for the difference between html email and web development: ua-cam.com/users/shorts9DwAaA90wVQ
thanks it was really usefull
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;
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;
}
}
It didn't work for me I followed the video exactly and couldn't line up the Modern logo with social media icons, help please
Hi there, thanks for watching! Typically it's a simple CSS error or unclosed HTML tag. So long as the code matches you will get the same result.
@@htmlemail Hi I had the same issue, there probably has been some updates on the side of how tables are used if I'm correct? (I redid the tutorial 3times to check if I made some typos but I didn't) using a display: flex; on top of the two-columns class gives a solution, but used on mobile it just stays horizontal aligned & will not flip to vertical 'top & bottom' view. hope this helps mate.
Thank you for the intel
Any reason why you’re not putting aria role presentation to all tables to make sure screen readers read the content smoothly?
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.
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 !?
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.
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.
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!!!
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.
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.
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.
Thank you so much
Yesssss!!!
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.
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?
Is there available tutorial on how this template be release to user/clients who asked you to create. 💜
Hi, for the multi-column layouts to render across all email clients and meet your customer expectations it would need MSO conditional statements for Windows Outlook. I teach this in my course and there is a page on my website about it. This makes the HTML email columns render properly in Outlook while still being mobile friendly.
@@htmlemail thank you for the information 🙇♂️
glad I found this channel 😀
3 minutes in and still no information
i dint understand it either
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!
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.
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 UA-cam 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.
my logo and social media icon can not display in row, if i use this code, can you tell me what's problem
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.
Why do you use the table tag and not a normal div?
Tables are required for proper rendering in email. Please see the short I did on my channel comparing email development to web development.
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.
hello, how to use imgBB and place the images to our HTML code?