Build Responsive HTML Email Templates with HTML Tables & CSS

in this video we'll build a responsive HTML email template using tables okay guys so before we check out the index.html and image files that are in the video description that I'm going to provide you with for the tutorial let's check out the responsive HTML email template design here in Gmail so at the top of the template we have the logo with the blue background section followed by a banner image where it says company newsletter and then underneath that we'll have a three column section and then the connect with us section with the social media icons which will link to your social media pages and then this footer section with the email phone and unsubscribe links so a pretty good rule of thumb when you're testing for whether or not a email template is responsive is to just check it in the Gmail window so if you flex the window down and you see that the different sections reshape and resize in Gmail then that's a pretty good indication that it's gonna be responsive for you on mobile devices including the Gmail app and just to show you that it's responsive on mobile apps I'll show you on my iPhone just the Apple Mail app in dark mode here with landscape it's going to be the full width version with all three columns in line as I scroll down here you'll see and the email template is centered and we're going to we're going to go over how to Center it later in the video and then in the portrait mode you'll see that all of the three columns have their own single column width and the images are slightly larger when they're down to just a single column now let's take a look at how the email template will look in Google Chrome so we can resize the window from the full width down to the single column width using an extension for responsive layout so I'm just going to pull up the mobile version of it and the first thing that you'll notice is the company newsletter banner image in the background is actually going to be an image we're not going to place the text on top of the banner image because to actually place text on top of banner images and have the HTML email be compatible across email clients would take a large portion of this video to do it properly when it comes to adding conditional statements and the inline HTML and CSS that would be required for email compatibility and we'll cover a little bit more when it comes to compatibility later but for now let's take a look at the different widths so before it goes down to the single column width you're gonna see it have two columns and then a single column underneath where the image is slightly larger than the first two images and then once we get down to the single column width all of the images will increase in size a little bit to take up more space on the mobile devices so in order to get started with the tutorial in the description of this video will be a download that you see right here once you unzip the files where we'll have an index.html document which I have opened in my text editor and then an image folder including all of the images including the social icons which we'll be using to build the email template you'll also see this file right here which will link you to a bundle of email templates that I've recently developed and all of the email templates included in the bundle have been tested across 90 different email clients so if you check out that page you'll see the email client tests as well as a preview of all of the bundles I'm also considering building an advanced HTML email template course that would include conditional statements so the email template works across clients such as Microsoft Outlook so so if you think you'll be interested in the advanced to HTML email template course I'll put a link to a signup form so you can get notified in case I build it in the video comments so as for the download in the video description the index.html file that you see here I'm gonna open up in my text editor and i'm gonna be using the free program called visual studio code which is what you see in the background so if you're not familiar with Visual Studio code this is probably the best free available text editor that you can get and I'm going to be using a couple of shortcuts throughout the video and if you want to learn about these shortcuts you can check out the Visual Studio code text editor lesson that I have on the resources page at w3 new be calm and here if you scroll down the page you'll get links to Visual Studio code and you'll also see the two extensions that I use which is live server and then the Eagle organic next is the the color styling that I use as well as my complete settings which you'll learn about how to add in the video at w3 new beat.com /resources also I'll mention that late in this video we'll be testing the HTML email that we build by sending it to our own email address and we'll be using a CSS inliner tool in addition to the free email test at puts mail com okay so now that we're all set up let's go over to our text editor and with the live server extension that I mentioned on the resources page on my website we'll be using the live server so you just want to hit go live and then it's gonna open up your web browser in this case I'm using Google Chrome as I mentioned before and just a test that it's working we can add some testing text here inside of a heading one tag and then if I save it you'll see that it's going to show up in the browser automatically there so I'm going to do away with this text and let's start up at the top of the index HTML document which is in the video description starting with the doctype at the very top of the document so the document type here XHTML may seem ancient to web developers but with HTML email this is still one of the more widely used docx types for email client compatibility but you may see people use HTML 4 as well depending on where they want their emails or who their target email recipient is and then of course for the HTML tag will include the XHTML link or URL and then for the content type we'll have our character set which is the standard character set utf-8 and then for compatibility we'll include Microsoft edge and Internet Explorer and then for viewport width device-width initial-scale one that's for mobile devices and compatibility and then we'll have the title of our HTML email template which you don't really need when you're sending emails but if you want to send somebody to a live version you might want the title up here in the web browser tab for bookmarking and other purposes if you want to send somebody to a live version of your email template and then beneath that we have some internal CSS added for us here already in addition to the media query started for the different device widths and as I mentioned later in the video we're gonna make it so this internal style is made in line to go inside of the actual HTML tags so our two breakpoints as you see here are going to be at the 600 pixel mark and then the 400 pixel mark where the two columns go to a single column width and the CSS that you're seeing here is just a few basic reset styles to do away with any inherent styling that an email client wants to put on our email template design so now let's drop down to the body section of the document and the first thing that we're going to work on is centering the email template on the page so we're going to need to add a couple of different classes to do that so let's start off with the center tag which is still used in HTML email because we're using the old document type and then we'll add a class called wrapper and then inside of that we're just gonna add a div class and we're gonna call this div class WebKit then inside of these two classes will add our actual table which will be our main table holding the table rows for our email template so we're just going to say table class outer and we're gonna give this and alignment of Center which will help Center the email client so the WebKit and the outer classes here are going to have the actual 600 pixel width and the rapper class is just going to give us the the background color around it that you're seeing with the gray as well as help center it by giving it a width of 100% of the email client now let's add a little CSS so the body tag we're gonna apply a background color to this but it might not matter actually in an email client because that's page is already gonna have body style but we'll just add background color f6 f9 FC which is a hex value that's going to give us a little bit of an off-white color and a really light gray so if I save it you might it might be hard to see the difference here but if I add a color black with all zeros you'll see the change there then I'll just put it back to the light gray shade so we're gonna add this background color to the wrapper as well which is what will actually be seen inside of the email client since as I mentioned the email client will have its own body style already added to it so let's add the wrapper class here and we're gonna give this a width of 100% to make sure that the wrapper takes up the full width of the email client and gives us that gray or light gray background color along with some other style that we're gonna add here so we'll add with 100% and then we're gonna add table layout fixed and this is sort of a tricky style declaration to understand but basically we want to make it so the wrapper won't be any wider than the table that's set inside of it so for example when we flex the window down and then let's add the same background color that we gave to the body which is the hex value f6 f9f see that we see right here and then one other thing that I'd like to do is add some padding to the bottom of it so I always like it when there's a little bit of space in the email client underneath the actual email template so I'm just gonna add padding bottom and then 40 pixels so now what we can do is drop down and style the next class that was inside of our HTML which is the WebKit class and we're gonna set the actual width of the email template with this class so we're gonna say WebKit for the class and then we're going to give it a max width of 600 pixels and that's going to be the full width of the template and once we set the max width to 600 pixels this a background-color of white so that's just going to be the hex value ffff but for compatibility you might as well just make sure that you do all six digits in the hex value so now if we go back to the browser we're not going to see anything yet but if we start to add some content we'll start to get the shape of our email template so if I just write testing there you'll see the white outline of the email template width and then the last thing that will style before we add our first table row to the table is let's style the actual outer class that we gave our table so we're going to add some reinforcement to the centering of the email template and the width and the first thing that we're gonna do is we're gonna add margin:0 auto so with HTML email it's always good practice to have a capital m with margin for Outlook compatibility even though we're not developing for Outlook here because we're not going to include conditional statements so margin:0 auto centers elements with CSS and then we're also going to add a width to it so we're gonna give this a width of 100% and that'll be 100% of its parent element WebKit and then we're going to give it a max width of 600 pixels and then we're gonna also add border spacing 0 which will add a few times throughout the design which does away with any inherent border spacing that email clients want to add to tables and then let's also set a font family for our text so we're just gonna use the font family sans-serif which gives us kind of a nice rounded font and then the color of this font we're going to change we're gonna make it sort of a dark gray instead of a black font so we're going to choose the hex value for a for a for a so hash tag for a for a for a and if you want to change the color this is a pretty good hex value to base off of for fonts so if I just take a look at the colors surrounding it you'll see a little bit lighter and a little bit darker so 3d 3d 3d is pretty popular and then for a for a for a for font colors alright so now we're all set up to get started with our actual content inside of the table so I'm going to delete this heading one text and what we're going to do is each section will be comprised of a table row so this section up top with the blue background will be our first table row that we'll add so I'm gonna add TR and then inside of our table row we'll have our table data tag and then inside of that we'll have our table and then once you add table just hit enter and the Emmett feature here in Visual Studio code which you can learn about on the resources page on my website we'll lay out the HTML tags for us here so what we'll need to do because we want to add styling to inside of the table in the form of padding around the logo is we'll need to add a new set of table row and table data tags inside of this table that's already inside of a set of table row and table data tags but first we'll need to give our table a width of 100% and we'll also add the style border spacing 0 which I mentioned previously this way it takes up the full width of the parent elements and we'll see the background color that will give it take up the full table row so let's add a new table row and inside of that we'll have our table data tag and then we're going to wrap our image with a link so we'll add a and then inside of that we'll have our image and the anchor tag which is the a H ref tag if you're unfamiliar with HTML is the link tag and then the IMG tag is of course for images so let's add some style to the table data tag here which will be the actual style for the background color as well as the padding and then we'll align the logo since it's wrapped in a link we can use text align Center to Center our logo image so that's going to be inside of the inner table data tag here so we'll add style and then background color and the hex value for that blue shade is three eight eight CD a and before we add the image and the rest of our styling just so we can see something show up here I'll just add a paragraph tag and add some text inside of this and there we have our test text and now let's finish off our styling so we're going to add some padding all around of 10 pixels ad text-align:center and as you can see I'm not using any spaces here inside of the internal CSS which is recommended for HTML email and there we have our centered test text which we can replace with the logo so let's add the logo image from the image files so that's going to be inside of the IMG folder and it's going to be the w3 newbie dot PNG file so I'll add IMG forward slash which is inside of the image folder and then the w3 newbie PNG logo so once again I mg and then w3 newbie save it and whoops that's the blue one so that's going to be - white and there we go and then what we'll need to do is want to resize the logo so you can kind of tell or you may not be able to that it's going to be centered for us already but we'll really see it once we add a width to it so we're going to add a width of 180 which is 180 pixels and I'll just delete this paragraph text and there we have our Center logo so now if we toggle back and forth you're not going to be able to tell the difference at least in down until that point and then what we can do also is just add a link here that will wrap around the image so the purpose of emails or email marketing campaigns is just to get people to click to your website so I like to wrap pretty much all images with links and then if you want you can add alternative text and title text so when you hover over it you'll see the logo text appear right there with the title text and the alternative text is of course for if there's a problem with the image loading you'll see the logo alt text instead so now let's drop down to the next table row tag which will be for the banner image so since this image doesn't require any styling other than displaying the image which will take up the full width of the table at 600 pixels we can just add a simple table row table data and the actual image tag inside of it we don't need to double layer the table and table row table data tags so let's add table row table data and then inside of that we'll have our anchor text tag the link and then the image so for the link here if you want you can type out your website link or you can just add a hash tag to leave the link blank for now so I'll just type out my website address then for the image this is going to be IMG ford slash and this is going to be the 1200 by 700 image and then you can add the alternative text if you want so now if we save it and refresh we'll see that the image is actually taking up its full height and width so we'll need to set a width here of 600 pixels so with 600 and now we have it set to the rest of the email template width so now let's drop down to the three column layout which is going to be the responsive section of the email template so we're going to start this off like we would any other table row with TR TD and then table since we're going to have content inside of this and then I'll hit enter and we're going to give this table its width of 100% so with 100% and then we'll also add the border spacing zero to our table with the style of this similar to the first section that we added right here we're going to have a table row and table data tags inside of that and we're going to set a table data tag which will nest all three columns inside of it and then we'll need to add a new table inside of that for each column so we're gonna add TR TD and we're going to give this a class called three columns and once we have the table data tag set for our three columns class which will wrap around each of the three individual columns we'll need to add a table for the first column so that's going to include the Apple watch image the text and the link underneath it so we'll add a new table and we're gonna give this table a class that will call column and then inside of that we'll have a new table row tag with the table data tag that follows it that we're gonna give a class that will call padding and this is going to be padding to add around the image and the rest of our content so the columns aren't too close to one another at the full width and then inside of that will have an additional table that will have our actual content inside of it so this is going to be the content that sort of starts at the edge of the image and includes the Apple watch and the text in the link so we're going to add table and we're going to give this a class called content and then inside of that we'll have a table row and a table data tag and then a link that will wrap around our image which will be the first bit of our content so I'm just going to clean this up by making the link on a new line here and for the link in this case I'll just had a hashtag to leave it blank for now and the image for the Apple watch is going to be in the IMG folder and then the 380 by 280 and it's going to be the one without any numbers next to it so it'll be that last one so when we refresh there we have our image but it's displaying and it's full size of course so we'll need to add a width to it and we're going to give this a width of 150 pixels so I'll just write with 150 and then we're also going to apply a max width in the CSS so we'll add style max width 150 pixels and there we have it but it's pushed all the way off to the left because we haven't added the padding styling that goes around it just yet so let's start styling these classes that we've laid out the three columns column padding and the content classes so I'm gonna go back up towards the CSS styling section here and I'm gonna add the three columns class and we're gonna add text-align:center because all of our text here inside of the columns will be aligned centered and while we're not designing for Outlook I'm going to share a little snippet with you here if you were designing for Outlook you'd want to add font size zero and line height zero even two elements where there aren't any where there isn't any font or characters inside of it so we would add font size zero and line height zero I'll just add font size zero for now but it's not really going to make a difference since we're not styling for Outlook then next we'll add some padding to the top of our three column section so I'm just going to add padding top forty pixels and we'll also add some padding to the bottom and we'll use a little bit less padding with padding bottom 30 pixels so now if we go back to Google Chrome and refresh we'll start to see the padding applied on the top and bottom so before we add the padding all around we're going to need to specify the width of the column so if you remember we added that column class which is inside of the three column class and we're gonna have a column for each one of the three columns eventually but for now we're just going to reference that column class inside of the three columns class and we're going to give this a width of 100 percent and then a max width of 200 pixels so if you remember we gave the image width a width of 150 pixels so once we get down to the small screen at 400 pixels we'll make it so the image takes up all 200 pixels but before we get ahead of ourselves now we're going to add the actual style that makes it so we can't not line tables so this is the trick in making the tables responsive in our email clients and making them Center on the page so we're going to use a style that's called display inline - block and this is going to make the tables align next to one another and then we're going to use vertical-align:top and this will also in combination with display:inline-block make them align next to one another so without those two style declarations the columns will just be stacked on top of one another in email clients so next let's add some style to the padding class that we added to the table data tag which will wrap around the content inside of the column so we'll add padding and we're going to give this a padding all around of 15 pixels so now if we go back it's going to be hard to see but if we did away with the display:inline-block and vertical-align:top styles we should be able to see the padding applied also in HTML email you never want to apply padding all around like this or at least for Outlook you would want to add padding top padding bottom and so on 15 pixels all right so now let's move on to styling the content class that we have inside of the padding class right here so we're going to reference the wrapper parent which is the three columns class and then the content class afterwards and we're gonna add the font size that we have for our paragraph text here and then we'll style the Apple watch text separately so we'll give this a font size of 15 pixels and then we're going to give it a line height of 20 pixels just spaced out the text a little bit so now we're ready to drop down and add the next table row inside of our content table beneath the row for our watch image so we're going to be adding this content that we see right here so I'm gonna drop down underneath that closing table row tag right here and we'll add a new table row and inside of that we'll have our table data tag and before we add our text content let's add some padding to this table data tag to separate it from the image tag that sits above the text so we'll add style padding 10 pixels all around that's going to make it so that the the paragraph text isn't quite as wide as the image with also so for the Apple watch text let's add a paragraph tag and then we'll just write Apple watch and I'll do it in uppercase characters so we don't have to add the CSS for that and then underneath that I'm just going to copy the paragraph text and paste that in between the paragraph tags and then underneath that we'll have a link where it says learn more dot dot so just rate learn more dot dot and now we'll go about adding some styling because as we can see the Apple watch text will want to make bold and a little bit larger and then we'll style the link so we're going to say font size 17 pixels then font-weight:bold the text for the Lynx what we're gonna do is since we're gonna have several links we'll just style it up here and then it'll apply to all the links with our inline styling towards the end of the torch tutorial so we'll add text-decoration:none to do away with the underline and then the color for the links we'll just make the same color as the blue shade at the top of the email with the background color and then let's also make the learn more link text as well as the other lengths slightly larger at 16 pixels in font size than the regular paragraph text which is going to be 15 pixels I think is what we made it alright so now that we have the first column all set instead of typing out all this information for the full table for the column what we can do is just copy this because it's going to be essentially the same HTML just make sure you get all the way up to the column class for that table and then we can paste it in twice underneath and change the content for that accordingly to match the image as well as the text so now if we go and check it we'll see that ok the width of the image of the banner image I missed something there so we'll correct that in just a minute to get the responsive effect but first let's just change the text for the watchbands here for the third column as well as the image URL so that's just going to be - three after the 380 by 280 and then for the middle one we're going to change this text to say earpods instead of Apple watch in all caps and then we'll just change this image to be - to then if we go and take a look at it now it's going to look like the original at the full-width except for this image what we're going to need to do is set a max width for it so we're just going to add style and then max width 100% is with the window width so now if we save it and refresh you'll see that we'll start to have our responsive columns go into effect so now that we're all set with our three column layout let's drop down and start to style or add the HTML to rather the contact us section and then we'll get to the footer section so we'll add TR TD table and then inside of that will have an additional table row and table data tag so before we start adding our style for the inner table data tag let's add the width 100% and style border spacing zero to our table and I suppose we could have just added border spacing zero inline to each table but we don't need it on every table tag here so that's alright and then for our inner table data tag we're gonna add that blue background shade which is the three eight eight CDA hex value and then we'll add a padding of 15 pixels all around and text-align:center because the social icons will be wrapped in links so the text-align:center styling will take care of centering those images so first let's add the connect with us text inside of a paragraph tag and this paragraph styling is going to be different from any other paragraph styling so we'll just add it all internally here with font size 18 pixels and then we'll give it a color of white with the hex value FFF then to separate the text from the icons beneath it let's add margin bottom 13 pixels and this is sort of arbitrary but I think it looks pretty good with that spacing and then of course we can add the connect with us text inside of the paragraph opening and closing tags so there we have our connect with us textile centered and displaying how we want so let's add the social media icons from the image folder so as I said each icon image will be inside of a link so we'll start with the anchor text tag with a and then IMG for the image tag and I'm just going to leave the link blank and for the image source we'll have the image folder and then I'm just going to add the Facebook one here since that's the first and we'll need to resize it as you can see here so we're going to give this a width of 30 pixels and then what we can do to save some time is these are all going to have the basic the same basic HTML that we see here except for the actual image URL so I'm just going to paste this in here four times and then we can change the white Facebook image URL to Twitter and it's adding the dot PNG again so make sure you delete that and then YouTube and LinkedIn and then the last one is Instagram and then if we save it and go back and take a look there we have our social media icons laid out which you can add your links to and you don't have to do this but if you are creating new icons adding a little bit of space around them will make it a lot better and easier to style them especially in email clients when they want to push all the images right next to one another okay so now let's drop down to the last section which is sort of the footer of the email here with the logo and the text underneath so let's start a new table row and then inside of that we'll have our table data tag and our table tag and in this case we're gonna add a background color to the first table data tag because we don't need to add any padding to this we can do this on the outer one and we're going to give this a color of ef ef ef which is sort of that light gray shade a little bit darker than the actual wrapper background color and then we'll add table width 100% and style border spacing zero then inside of that can add our new layer of table row and table data so ad TR TD and we're gonna add some padding to our inner table data tag so we'll add padding all around of 20 pixels patting 20 pixels and then we'll want our text-align:center in here so text-align:center and inside of our table data tag we'll be able to add the logo wrapped with a link once again and the text-align:center class will take care of our style rather we'll take care of centering our image so let's add the link followed by the image tag so a IMG and I'll just leave this blank and then IMG ford slash w3 newbie PNG and then we're going to give our image a width of 160 pixels so with 160 and now if we go back there we have our logo displaying towards the bottom and now we can move down to the text that sits underneath that so we'll just use a regular paragraph tag for this and we're going to give this a style to increase the font size of 16 pixels and then we'll add some margin on the top to separate it from the logo with margin top 18 pixels you this says w3 newbie HTML email you text underneath this is going to be similar so you can copy and paste it or type it out I'll just paste it underneath and then change the text to the street address with one-two-three Street Road city-state is we're going to change the around slightly so we're gonna add margin-bottom pixels on here the margin-top for the street address that to a margin bottom 10 pixels as well instead of having the margin top and then let's drop down and add the link for the email address so we're gonna have this inside of a paragraph tag and then the link for the email address if you can see in the bottom left corner we're gonna add a mail to link so when somebody clicks on the email address it's going to prompt their email client on their desktop computer or their mobile device to send an email to that address so I'll just very mail at example.com and then we're going to do something similar with the phone number so we're gonna add a tell link for the phone number so once again we'll write P and then the anchor text and tell : then the phone number and make sure there's no dashes here and then when somebody clicks on this even if they're on their desktop computer it's going to prompt them if they have a feature for it at least to make a phone call the course and then lastly what we'll do is we're gonna add that unsubscribe link underneath this table row right here so I'm just gonna paste this and then get a do away with everything but the last link do away with the telephone number link to unsubscribe in all caps and then we're gonna give this a style of font size 13 pixels to reduce the size of the text and then let's adjust the padding here to be padding bottom 20 pixels instead of or 25 pixels instead of padding all around and let's take a look at it and it looks like the unsubscribe text is a little further down then I'd hoped once that I had down previously is to add a line Center here I'm not sure why I had that but I'm gonna add that anyways maybe it was because this is a top layer table data tag with the padding applied to it but anyways what I'm gonna do is reduce the padding from 20 pixels at least on the bottom to 10 pixels in the table data tag above so we can keep padding 20 pixels and I'll add semicolon which I missed and then padding bottom 10 pixels and then that will reduce the space above the unsubscribe text so that looks pretty good until we get down to the bottom and we're missing the little blue line there so let's add a table row and then a table data tag inside of that and we're just going to give this a height of 20 pixels and we don't have any content or padding needed inside of that so we'll just add background color 3 8 8 CDA all right so now if we go and refresh that does it for all the full width styling of the responsive HTML email template so now what we'll do is we'll add those few media query styles to transform the size of the image or the images inside of our columns as we flex down the window so here I'm just going to open it inside of this smaller window so we can take a look at the image size and as you can see they're all gonna be that same 150 pixel width no matter how wide or narrow the screen is but on the finished version as you can see we're going to have the images slightly larger so they take up more space on mobile devices at 200 pixels in width so when the template first drops underneath 600 pixels we're going to have the third image at that 200 pixel width mark and then when the template drops down underneath 400 pixels in width when they're all a single column we're going to add the 200 pixel width to the first two images so we're going to add an image and then we're going to reference that class it's going to be harder to see with the different colors here but that's going to be and the class so we're going to add a class called image - last or third - image - last year or the last of the three column images basically what we're gonna say is at screen widths underneath 600 pixels we want the third image last to have a width of 200 pixels and then we're going to give it a max width of 200 pixels as well so by just adding this style it would need to override the internal styling that we gave it for the width so if we say we're not going to see the effect until we add important so exclamation point important at the end of the width and Max with style declarations so that's going to override the 150 pixel width so as you can see now the third image is going to keep that width but it's going to be off centered because of the padding class so we'll take care of that in just a moment but first let's add a class for the first two images so we're just going to add a class that will just call third - image to make it easy on us and then all we'll need to do is get rid of the - last to apply the same styling to it so I'll just copy this class and add it to the image for the second column as well and then if we go back up we can just copy the CSS right here and add that to the style for under 400 pixels and width so this is going to make the images 200 pixels but if you look closely they're not going to be centered on the page if we go up to the full width they're still going to be centered but once we get down to the width where the 200 pixel image width is applied the padding that we added is going to mess up our spacing so they're going to be off centered so what we're going to do is we're just going to add padding right and padding left zero here so we'll still have the padding on the top and bottom and we're going to need to make it important to override the original padding styling just change this to left and then if we take a look at it on the smaller screen widths now they're going to be centered on the page so you won't be able to tell until they're the to hunt at the 200 pixel width but now the padding isn't going to be pushing them off to the right okay so that concludes all of the HTML and CSS styling for the completed HTML email template so what we're going to do is copy all this HTML and CSS so I'm going to do select all and copy and then we're going to go over to puts mail comm and check out there in liner tool and what you can do is all of this style that we added internally if we hit in line our CSS we're going to have it all in line here and this is ideally the HTML and CSS that you'd want to use when you're sending your email so all of the CSS that we added is now in line with the HTML and don't do the next step on your own yet but I'm going to show you what to do from here so here at puts mail we're going to go over to their new test link then you're going to add your email address where it says where we want to send your email to and then add a simple subject line so I'll just add test email for new template tastes the ss here and we can add move inline or move CSS inline if you're using the version before it's inline and then once it's sent I'm going to show you the issue so here is the problem we use local images so unless your images are uploaded to the Internet you're not going to be able to see them displaying inside of the email so there are a few resource resources for how you can upload your images to the Internet so one resource that would cost you a little bit but might be worth it to you is to get to get your own website server space so similar to uploading your website to the Internet you can just upload your images to the Internet even if you don't have a website and it's going to cost you but you can access your images that way to link to your email templates or you can use a free program like IMG bebe calm to upload your images where you can get direct links to them for free or you can use your email marketing service so for example MailChimp where you can get direct links to your images to add to your email template designs so just to show you I've uploaded my images to the Internet and add them to the template and here we have them after sending a test email with the litmus puts mail testing feature and that concludes the responsive HTML email template design I want to thank you for sticking around with me please remember to like this video subscribe and check out my 9 responsive HTML email bundle as well as if I end up making one my email course which I would put in the description of the video

Channel: w3newbie

Views: 103,430

Keywords: html email, responsive html email, email tables, html email for gmail, html, css, email development

Id: bWioL_nn9cI

Length: 47min 2sec (2822 seconds)

Published: Mon Apr 06 2020