HTML Email Template From Scratch with HTML Tables and CSS

in this video we'll build a responsive html email template with tables okay guys so i'm excited to share this responsive html email template with you my goal for this video is to get up to 300 likes and if you end up liking the video remember to subscribe and turn on your notifications for new tutorials alright so let's take a look at the email template design so from the top of it we have our social media icons followed by the logo then the gif banner background image and the text section underneath that with the centered heading paragraph text and button then we have our responsive two-column section with the image on the left and the text button on the right followed by the background color section and lastly the footer at the bottom so the easiest way to tell if an email template is responsive is to simply size the window down in gmail and if it transforms to the single column layout from the two columns you can tell that it's responsive and before we take a look at the email template in my browser let's look at it on my cell phone so on the right we have it in apple mail which is going to display a light background color so this is the color that we'll be seeing when we lay out the template in the web browser and on the left we have gmail which is displaying it in dark mode so if we scroll down it's going to appear a little wider in gmail because it doesn't have the black border off to the side like in apple mail but it looks pretty good nonetheless so with that now let's go over to google chrome and i want to show you how the responsive two column section resizes in google chrome because while it will show responsive in the gmail desktop window it's not going to resize the content with the media queries that we'll be adding so you'll notice that the content here on the right for the two columns section will be wider once we get underneath 600 pixels and as i said we'll be doing that with media queries using css that will work with our html tables for the email template okay so with that i'll put the smaller window aside and in order to get started with the tutorial in the description of this video i'll have a link so you can download the tutorial starter files so this will include the index.html file which i'll be opening in the free program called visual studio code which you see in the background as the text editor then it also has the image folder which will include all of the images for the email template including the gif banner image then you'll also see this blue file where it says html email course so this page will include a promotional video for my complete html email mastery course and a discount link to the course and if you check out the preview video of the 10 email templates and email signature included in the course the email template that we'll build in this tutorial will be most like the gif background image template that you see right here then the last thing that i'll mention before we get started is as i said we'll be using the free text editor called visual studio code and if you're not familiar with it i have a lesson on my website at the resources page so if you go to w3nubi.com forward slash resources you can check out the visual studio code text editor lesson that you see right here where i'll go over the extensions and shortcuts that i'll be using in the video okay so now let's go over to visual studio code and see what's already included for us inside of the starter files so as you see we'll have some head information some styling started and then the comments in the body section first i'll select the go live button in the lower right hand corner to start the live server feature covered in the visual studio code lesson on my website and with the gray background you can see that we're connected but if i just change this to black and save it you'll see the background color change so that tells us that we're connected to google chrome with visual studio code okay so with that let's go over what's already included for us starting with the doctype at the top so in html email we still use xhtml 1.0 transitional for the most compatible document type with email clients next we have our meta tag for the character type utf-8 which is standard for letters and numbers on the internet followed by a compatibility tag for internet explorer and microsoft edge then with device with initial scale 1 for mobile devices followed by the title tag which isn't necessary when sending html emails but if you want to send people to a live page where your email template is displayed you can use a title next we have some internal style included for us here including the body tag first where we have margin set to zero so we don't have any space to the top or the sides of our email template when the page is sized down in width and we have the background color set to the gray shade with all c's as the hex value then beneath that we have some resets to get rid of border spacing padding and borders with tables table data tags and images next we have a media query started for us at the 600 pixel breakpoint which is the responsive breakpoint where we'll go from a single column to two columns and we'll be resizing the responsive section underneath 600 pixels in width then in the body as you know we have html comments laid out for us for the different sections of the template okay so now we're ready to start laying out our html starting with centering our email template so the first thing that we'll do is we'll make sure that it stays centered inside of the body and email clients so we're going to use an html4 tag which is no longer with html5 but still works perfectly well for email and that's the center tag so i'll add center and i'm going to give it a class using the period called wrapper and then we'll take the closing center tag and move that all the way down to the bottom of our html comments just before the closing body tag and i'll indent this once then we can start the actual table which will include all of the different sections of the email template and i'm going to give this table a class called main to reference in the css then we'll also give our table a width of 100 percent to make sure that it takes up all of the space inside of that center tag that we added and similar to the center tag let's move the closing table tag down to just above the center tag underneath our html comments then i'll just change the indentation around here a little bit and remember to delete the closing tag up here and now we can go up to our css to reference the classes that we just added starting with the wrapper so i'll use the period and then add our wrapper text followed by the swirly brackets and for this center tag we'll want to make sure that there's no space off to the sides so we're going to give it a width of 100 percent similar to the table and then we're also going to add something called table layout fixed which is basically going to make it so this element will be no wider than the table element that's inside of our center tag next to make sure that email clients respect the background color that we gave to the body with the all seas hex value we're going to add that to the wrapper as well here by adding background color then the hex value all c's then lastly for the wrapper i like to add a little bit of space to the bottom of email templates to make them stand out so this is one of the optional parts of the tutorial but i'm going to add padding bottom of 40 pixels to the bottom of the wrapper okay so now we're ready to start styling the table but first i'm gonna add a little bit of dummy text here inside of a heading one so i'll just write test for the text and we'll come back to this in a moment once we start adding our content inside of the table but first let's style the main class for that table in our css so i want to reference it using a period again because that's a class and then let's set the background color to white using all fs for our hex value then to reinforce the centering of the email template we'll use margin 0 auto and we'll also give it a width of 100 in the css in addition to the attribute that we added then for the width we're going to set a max width of 600 pixels which is pretty much the standard width that you should use for email templates to make sure that they render and fit properly in all email clients next we'll add border spacing 0 because this is a table and then we can set our font family so i'm going to use the font family sans-serif to avoid the default times new roman and for the color of our font we're going to use a dark gray hex value of 4a 4a 4a all right with that set we're ready to address the test text that we added so you're not seeing the white background because we haven't added a layer of table row table data and table tags inside of our existing table so we'll add tr td and then a table for table row table data and then a table and we're going to give our table its width attribute of 100 okay so now once this is set if we add our test text back in the heading 1 and save it we'll see that we have the white background displaying for our table so with that we're ready to start laying out the first section which is the social media icons up at the top of the template so let's start with a new set of table row and table data tags then we can start adding our content inside of these so we'll add tr and inside of that we'll have our td tag then we can add some space and we're going to add our social media icons which will be inside of the image folder so for example we have white dash facebook.png which we'll start with and we're going to wrap our icons with links so we'll have our image tag inside of the anchor text tag with an a so a and then img and i'll leave the link blank with a hashtag then we can add img forward slash for the folder followed by white dash facebook.png then if we save it we're not going to be able to see the icon yet with the white background so let's add our background color with the blue shade to our table data tag wrapping around the images so we'll add style background color then the hex value is 4980 d2 and once we save it we can see our facebook icon now and what we can do is resize it so let's give it a width of 30 or 30 pixels but we don't need to add pixels because of the width attribute and then what we can do is add some padding around it and we'll align our text center so let's start with the padding so i'm going to add 8 pixels to the top 0 left right and 5 pixels bottom and then we'll also add text align center which is going to center our images because they're inside of the anchor text tag okay so let's add the rest of them we can just copy this first one and paste it in four times then all we'll have to do is change the image url so we'll add twitter then youtube then linkedin and lastly instagram and now if we save it we'll have our social media bar up top matching the finished version so we can drop down to the logo section next so let's move down to that html comment and we're going to use the same type of table and table row table data layout that we did for the social media icons because we'll want some space around our logo so once you have this set remember to add width and 100 for the table then inside of that we can add our new set of table row and table data tags followed by our logo image which will be wrapped in a link again so a then img and in this case i'll add a link just to show you so i'll add a link to my website then we can add the logo image which is img forward slash w3 newbie dot png and if we save it and take a look similar to the social icons we'll need to resize it so let's give it a width of 180 and once this is changed we'll also need to center it and we'll add some padding so we'll add style text align center and i'm going to add padding of 10 pixels all around okay so now what we can do is we have the option to add a title attribute so if we hover over the image we'll get the logo text and what we can do is just add that title attribute here and i'll write logo then if we take a moment to hover over it we'll get the logo text appearing and additionally we can add alternative text so if the image doesn't display so i'll just mess up the image link we'll see the logo text displaying where the logo image should be okay so next we can drop down to the gif background image and this section is going to be a little bit different with the html because we're not going to need any spacing around the image so we'll be able to do away with our second layer of table row and table data tags in addition to the table so we'll just add tr and td then inside of that we'll have our link followed by the image and i'll leave it blank for the link and then the image source will be img forward slash snow dot gif and if we go back and save it there we have our gif image then we can also add a banner alternative text here and i'm going to set the width to 600 then we'll need to set a max width for smaller screen so it doesn't span outside of the width of the screen by adding max width 100 so now if we flex the window down the gif image will resize with the window okay so now we're ready to move on to the title text and button section so let's work our way down to the html comment for that and we're going to start it off similar to how we did the first couple of sections with the table row table data and table and i'm going to give the table a width of 100 percent then inside of this we'll have a new set of table row and table data tags and inside of this we'll have our paragraph tag which we'll use for the html email template course text okay so let's add our paragraph tag and then i'll write html email template and since we want our course text to be a different color we're going to separate it with the strong tag for bold and then we can write course so now if we save it and take a look we'll have just our regular html email template then bold course text so what we'll do is let's increase the font size by adding style font size 20 pixels and in addition to adding this we're also going to make our text bold for the first bit of the text with font weight bold and then for the strong text we're going to make the coarse text appear in the same blue shade that we used earlier so let's add style to the strong tag and we'll give it the color four nine let me see where it is there it is four nine eight zero d two so hashtag four nine eight 4980d2 for the hex value and there we have our text appearing how we want it but we'll also want to center it and add some padding around it so let's use the table data tag that sits above the paragraph tag and we'll add style text align center and padding will give it a padding of 15 pixels all around and this is also going to take care of centering the text underneath it as well as the button so padding 15 pixels all around and now if we take a look it's starting to look similar to the finished version so let's move on down to the paragraph text that appears underneath that so i'll copy all this text if you want you can just use ipsum text here and what we're going to do is we're actually going to decrease the font size from 16 pixels which is the inherent font size in google chrome to 15 pixels which will look a little bit nicer on smaller screens when looking at the email and then we're also going to give it a line height of 23 pixels to space out the paragraph text and lastly we're going to add some additional padding to our paragraph text a little bit on top and mainly to separate it from the button underneath so let's add padding 5 pixels top then 0 left right and 15 pixels to the bottom okay so that looks good and we're ready to add our button so for the button we're going to use an anchor text a tag here and we're going to give it a class called button so we can style it in the css in the head section of the website and i'll just write view course for the text okay so now if we save it we're just going to have text appearing where the button is but when we style this button where you see the text right here the style that we give it will also apply to the read more button which we'll add later so let's take care of styling the button now with our css so we'll reference the class with the period then button and we'll use the same blue shade for the background color with the hex value 4980d2 so you can copy the hex value from beneath or type it out then for the color we're going to change it to white from the inherent blue hyperlink text or text color and once we've done that let's get rid of the underline with text decoration none and then we'll add some spacing around it with padding 12 pixels top bottom 20 pixels left right and we'll add some border radius to match the original with 5 pixels to make the edges a little bit softer then lastly we'll add font weight bold okay so now if we save it we're looking like the original other than the spacing that appears underneath the button so let's add some additional padding to that section using the first table data tag so we'll add style padding bottom and 40 pixels okay so that looks good and now we can add the blue border that appears underneath that so we do have an html comment for this blue border and all we'll need to add is a table row and a table data tag then we're going to give our table data tag a height so we'll give it a height of 5 or 5 pixels and then we can set its background color so we'll say background color and 4980d2 okay and then once we save it there we have our blue horizontal line appearing underneath that text and button section okay so now for the interesting part of the design which is the responsive two column section so we're going to start this off similar to how we did the previous sections using our table row table data and table tag then we'll give our table its width of 100 then inside of this we're going to have a new set of table row and table data tags but we're going to give this an identifier class which will wrap around the two sections so let's add table row and inside of that we'll give our table data tag a class called two dash columns which we can use to add our css to this tag and then we'll have a table for each one of the two columns which we're going to give a class name to as well so let's add table class column then inside of this table we'll have a new set of table row and table data tags and this table data tag we're going to use to add padding around the sections which we're going to remove using the media queries to make the image larger and the text section wider on smaller screens so let's add the class padding to the table data tag here then we'll need one additional table inside of this to identify the content so we'll simply write table class content and then our last tr and td tags before we're ready to add our actual content so let's start with the image which will be inside of a link and i'm going to leave the link blank then the cell phone image or iphone is going to be 560 by 420.jpg okay so once that's added if we save it and take a look similar to the other images we'll need to resize it and i usually make images twice the size for retina display and we're going to give this a width of pixels and we'll also set a max width with the style attribute so we'll add style max width 260 pixels and this value is going to change using our css when we remove the padding for the smaller screens with the media query so for now what we can do is let's add the content where it says create custom design so we're going to use this um whole table class column so we can simply copy this and paste it underneath then we'll remove the image and replace it with our paragraph text so i'll delete this and start off with the p tag and i'll write create custom designs for the text okay and once this text is added to match the original similar to what we did with the first set of bold text let's add some style here so let's increase the font size to 17 pixels and then i'll add font weight bold and now if we save it there we have our create custom designs text appearing so let's add the paragraph text that appears underneath it as well so i'll copy this or you can add lorem ipsum text and add a new paragraph tag and then with this paragraph text similar to what we did previously with the other button which we'll add with the class button here inside of our link is um i'm going to add some padding to the bottom of the paragraph text because if we look at it now we're not going to have the separation between that and the button so let's add style and padding bottom 15 pixels okay so now if we save it it looks pretty good except for we're going to need some space around this entire section which we'll include on top and underneath the button so what we can do is add that as we reference the two columns class which is the first class that we gave to this section for the table data tag here so i'm going to copy this two columns and add that to the styling in the head section so we'll add our period for the class then two columns and in order to center our columns on mobile will add text align center for underneath 600 pixels so for example if we size the window down there you see the centered tables and next we're going to add something called font size zero to do away with inherent font size that some email clients want to add to this table data tag and then lastly let's add the padding to the top and bottom so i'm going to add padding 40 pixels top bottom and then zero left right and now with that um you're going to see that our font has disappeared so we'll want to bring the font size back after adding font size 0 which we'll do in just a moment but first let's take care of the table class column that we added so first we'll want to reference the two columns class and then the column class for the table inside of it and we're going to give our table a width of 100 for smaller screens and then we're going to give it a max width of 300 pixels because it's a two column section inside of the 600 pixel template and in order to get our tables to display next to one another we'll add display inline dash block and we're also going to add vertical align top and now when we take a look if we size it down they'll stack vertically and align centered on screens smaller than the 600 pixels and then they'll go back to being in line so next let's add some padding around the sections to separate them from the edges by referencing the padding class so i'm going to copy the same style declaration and paste it in then change column to padding and we can set the padding to what we want up to 20 pixels because that's what we're left with on either side given that the image is 260 and we have 300 to work with so if we use 20 pixels that's going to take up all of the space that we have for that section okay so now let's bring back our font styling and we're going to align our text to the left so we'll want to reference the content class which is attached to our innermost table so we'll use two columns and then content then i'm going to align the text to the left and we'll add font size 15 pixels and i'm going to add line height 20 pixels so our paragraph text is spaced out a bit okay so now once we save it we should be matching up to the finished version and we can also stack our columns but we don't have the responsive changes to it yet with the different sized image and text section alright so let's move on to the second to last section with the blue background and white text so we'll scroll down to the blue background quote html comment and start our section off with our table row table data and table tags followed by the width 100 and then we'll have a new set of tr and td tags and inside of that we'll have our paragraph text so i'll add the p tag and i'm going to copy this text right here and paste it in then i'll add the text underneath it where it says jessica c so with that that's all the html for this section the rest will be styling so if we take a look our text is going to be aligned to the left so let's center it using the table data tag that wraps around the paragraph text by adding text align center then we can set the blue background color which we've been using so background color then the hex value 498 0 d2 and then we'll also add some padding around the section of 15 pixels all around and we'll set our text color to white and i'm also going to increase the font size of all of the paragraph text to 18 pixels then lastly we'll just style the top text so i'm going to give it a font weight of bold and we'll leave the jessica c text at the regular font weight alright so with that section matching the original let's move on to the last section which is the footer content so we'll drop down to that html comment and start off with our table row table data and table tag and i'll give it its width of 100 percent and then we'll have another set of table row and table data tags and inside of that we'll have our image for the logo to start with so a and img then i'll leave the link blank and we'll add img forward slash w3 newbie the same logo as in the header and then we'll give this a width of 100 160 pixels okay so once saved there we have the logo but let's first set the background color to match the finished version and we're going to give this a light gray background color with the hex value ef ef ef then let's add some padding so i'm going to add padding of 30 pixels to the top and 10 pixels left right then we'll center it with text align center which will also as we know take care of the text inside of this section as well okay so with the logo set let's add the text that appears underneath that with w3 newbie html email so we'll add that paragraph text and then a new set of paragraph tags for the street address and underneath this we're going to have an email link so we'll add p and then a for the link and then to prompt an email to open when somebody clicks the link we'll use mailto followed by colon and the email address then we can add the actual text which we'll display so i'll write email at w3 newbie and similarly underneath this for the telephone link we'll use tell colon followed by the phone number and then we can add the text which will appear for the phone number so when somebody clicks the phone number now it's going to prompt them to make a call or if they're on their computer open up something like facetime so if we save it there we have our two links and we'll add the last one as well where it says unsubscribe so we'll add paragraph and then link and then unsubscribe for the text and i'm going to change this font size to 13 pixels to make it a little bit smaller than the rest with font size 13 pixels and before we go about changing the color of the links let's add the last bit of content which is the blue border displaying at the bottom of the template so we'll add a new table row and table data tag and this will be similar to the blue line so we'll just need to add a height here and i'll give it a height of 10 or 10 pixels and then we can add the style for the background color which as we know is the hex value 498 0d2 okay so with that let's add some styling to our link text by removing the underline and we'll change the color so we just need to reference a for the link and we'll add text decoration none to get rid of the underline and then we can also add the color using the blue hex value that we've been referencing so now if we save it we have all of our content at the full width matching up to the original except for i think a little bit of padding is different around that section but that's okay so you can adjust the padding to you to your preference from 15 pixels or 20 pixels so now what we'll do is we'll add our media query css to resize the responsive section and make it larger on smaller screens so we'll drop down to the media query css and we'll want to reference the image which is inside of the content class for the two columns so we'll add two columns content and img and if you remember for this image we have a width set to 260 pixels with max width 260. so we're going to increase the image size to take up all 300 pixels of the table so we'll add width 300 pixels and exclamation point important to override the 260 pixel value and we'll do the same with the max width so max width 300 pixels and exclamation point important so now what we'll need to do is remove the padding around the section so the content matches the width of the image and that's also going to center the section because it's a little off center right now so we'll reference the padding class and we can reference it with or without the two columns class here so i'll just write padding with the class and we're going to remove the padding to the right with padding right 0 exclamation point important and we'll do the same for the left so padding left 0 and then important and now it's going to take up the full 300 pixels for that section and it's going to be centered so now we have our responsive html email template matching the original and i'm going to use a responsive website design tool here to open up the mobile version on the right so we can look at the difference between the full width and the mobile version here so as we size the window up we turn it into the two-column section layout instead of the single column on mobile okay so now that our template is completed we can test our email template by emailing it to ourselves with the tool that i'm going to show you but first i need to explain that our images that we're using inside of the template right now are local so in email or gmail for example we're not going to see the images because they need to be live links so what you can do is go to placeholder.com and you can simply use a placeholder image as one example so if i just copy the image address from one of the images at placeholder.com and then paste it in i can change the dimensions to 30 by 30 for the social media icon here and if we take a look we have a placeholder image and that's going to show up when you send an email alternatively you can upload your images to the web so you can use a free image hosting program like imgbb.com or you can use a web hosting account if you have one and once your images are uploaded to the internet we can send an email to ourselves using the free program at putsmail.com so putsmail has an inliner feature where we can inline our css or we can just send a new test to ourselves and it'll where it will inline our css4s as well so i'll add an email title or subject line by saying responsive html email template and if you're not familiar with it what i mean by inlining the css which we can do by using the feature where it says move my css inline is that's going to take the css right here and it's going to add it into our html tags in inline here inside of the actual tags instead of being an internal style sheet like we have in the head section so i have a file off screen with live image links and i'm going to paste that html in here for the template with the live images then select move my css inline and i'm not a robot and then i'll hit send mail because i added my email address that i'm going to send it to off screen and now if we go over to gmail there we have our email template displaying and if we scroll down we'll see the full template layout we can also size the window down the only difference between the gmail window and cell phones is the two column section isn't going to increase in size when we size the screen window down here but on mobile devices as we saw at the beginning of the tutorial it will display at the full 300 pixel width like you see right here so that does it for the complete tutorial i want to thank you for watching please remember to check out my full html email course which there will be a link to in the video description or you can check out the file that's included in the starter files to get a preview of the course and i'll see you inside of the course if you end up signing up thanks for watching you

Channel: w3newbie

Views: 20,213

Keywords: html email, email tables, html email template, email template, responsive html email, responsive email template, mjml email, foundation email, html email dark mode

Id: cOntBksJo_o

Length: 40min 4sec (2404 seconds)

Published: Sun Oct 11 2020