Video instructions and help with filling out and completing Can Form 2220 Email

Instructions and Help about Can Form 2220 Email

In this video we'll learn how to develop a responsive HTML email template okay guys so let's take a look at the email template here so at the very top we have that gray bar with the option to view the template in our web browser which a lot of email templates are doing nowadays then we have the logo off to the left our social media buttons on the right followed by the big green banner image then we have a single column section with the button two column sections three column sections and then as we navigate down towards the bottom it's gonna go back to that gray color for our footer the same as the three column and the very top where we have the option to view it in our web browser now let's size down the width of the screen and see how the responsiveness is going to take place here so as you can see the logo and the social media buttons have gone to separate lines and centered themselves and then the two column and three column sections are going to turn into single column sections for the email template so here it is on how it's gonna look on say an iPhone 7 for example and in just a second we're gonna go over the compatibility and how it's going to work across different email clients using a really cool tool that I found online so this is a program called email on acid and I ran a few tests with a similar email template that I was working on so I have to say that this email template that we're going to be building here is not perfect email on acid tests across 91 or it might be 93 now different email platforms and most people have trouble getting email templates to work across every last one of them some of the most difficult ones seem to be Lotus Notes and outlook so with Lotus Notes and Outlook with the earlier versions you might have a little bit of trouble with compatibility with this email template layout but aside from that you're gonna have it work across a number of devices I know for example with all of my Apple products it looks great for Gmail Yahoo Mail and the inherent mail that you get with the iPhone for example with iOS so with email client compatibility in mind I didn't think that we could create a cool layout and make it so every single email client will work with a nice workflow here for a tutorial so what I've done is I've added a paid course and email templates that are made by other people as resources in the description of the video so you can see the description for that also in the description of the video will be the starter files for us to get started with this tutorial here so if you need to go ahead and just pause the video for a moment and go ahead and grab the starter files so I'm gonna pull them up real quick and then we can get started so here we have the email template starter files so what we'll find in here are a number of images that will be throughout the template as well as index.html so as you can see on the left hand side here I have the finished version of the template open in my text or sorry my web browser which I'm using Google Chrome for and then on the right I have it open in my text editor which I'm using sublime text for so go ahead and just open up your index dot HTML file from the starter files in your web browser as well as your text editor another great text editor you can use is called Adam or you can use a program called brackets okay so now let's go over the document itself so at the top we have doctype HTML for html5 then we have the HTML tag here and within that we our head section which is going to tell the HTML how we want it to display starting with our character set which is utf-8 then we have a compatibility meta tag for internet explorer edge and then we have our mobile device meta tag there followed by a little bit of a style here with some media query CSS to get us started so if we type something into the body section of the website it's going to show up in our web browser here so you can do that just to make sure that you're linked up to Google Chrome or wherever it is that you have your index.html file showing up for the version that you're working on with the tutorial here so let's go ahead and get started with our first tag so if we go back to the completed version here what we have surrounding and centering the whole template itself is going to be a wrapper so we're gonna give this a class and we're just going to call it div class wrapper and since our div class wrapper is going to span the entire body section of our HTML document here what I'm going to do is after closing the div let's create a note saying that this is the end of our wrapper so later when we have a bunch of space in between the opening and closing tags we can recognize it as the end of our wrapper there so now let's go up and just underneath our div class wrapper what we'll do is we're going to create another wrapper and we're just going to call this wrapper inner so go ahead and write div class wrapper - inner and don't get too concerned with the purpose of every last div and table that we create while we're laying out the HTML because it's