Responsive HTML Email Development

1. Welcome!: Hi, my name is Vanessa Bias and I'll be teaching you responsive e-mail development. Your class project will be to take a static HTML e-mail template and make it scalable and mobile devices using the techniques that I use in my everyday work. This class is geared toward students who understand the basics of HTML, and CSS. But I'll explain the concepts used in this class as we go along. For a primer on developing static HTML e-mails, you can view my previous sculpture class, intro to HTML email development. Let's get started. Happy coding. 2. Project Step 1: Add the media queries: You can download these project files from below and the Skill Share class.So as you can see, this email file is not mobile responsive.So we're going to start by adding the media queries to this email. You can add as many breakpoints as you'd like. But for this class we'll just be covering one breakpoint. So inside the style tags, we're going to add a media query with a max-width equal to 480 pixels. So usually when you're designing for web, you want to make sure that you're designing mobile first and then moving on to your desktop breakpoints. But for email we usually do desktop first and then break it down for mobile. So if you want to make sure that your media query is working, a good test is to change background color or something of that nature so that you can actually see that the media query is ON and that'll help with troubleshooting later down the line if your CSS isn't working. So we are going to do a background color of red and here I added the universal selector, so it's going to change the background color of every element in the email. So then I'll "Save" that and go back to the browser and "Refresh". When I make the screen size smaller, you can see that it changed to a red background color. So that tells me that the media query is working. So we don't need that anymore, so we can erase that and I'll hit "Save" again. In the next video we'll start breaking down this email to a mobile size. 3. Project Step 2: Add the display block property: Now we're going to change the CSS to make this three-column layout so that every single column stacks on a mobile screen size. To start, we're going to create a row for tables, table rows, and tables cells and we're going to give it a width of 100 percent so it's scalable and we're going to give it a display property with the value of block. What this is going to do, this is the key right here to making sure that everything stacks on mobile. Then because we have some images that are wider than others and we have some images that are wider than the breakpoint, we are going to make these images scalable by giving that a width of 100 percent and we refresh and re-size the screen and you can see that the columns are now stacking below each other. But we're still getting a scroll bar for left to right and they're not really containing themselves inside of the table. What we can do now is to fix that is add a universal selector, so the asterisk, and we're going to give it a box sizing property with the value of border-box and what this does is it incorporates the padding and the border into the elements total width. So it's going to do that for everything. So we go back and hit Refresh, and you can see that we no longer have a scroll bar and the images are now contained within the table. 4. Project Step 3: Add CSS classes: There's specific elements that you want to target using CSS rather than just targeting every single image or every single table. So in this case, we have the image is set to 100 percent web, so they're scalable. But unfortunately, that also targets the social media icons that we don't want to be a 100 percent with at the bottom of the email. So we can use a CSS class to fix this. So if we scroll down to the bottom of the HTML, we can add a class, and we're going to give this class a name that's recognizable later on. So we're going to do social icons and we can just copy that so you don't have to rewrite it, and paste it onto every single one of these images. Save and scroll back up to the CSS and the head, and we can add inside the media query that class with a width of, I want to say about 30 pixels sounds right. We want them all to be able to fit into one row and save and then refresh the page, and you can see that the images or the social media icons are now all 30 pixels. So we only need to do that one CSS rule to target all of them. Sometimes it's not an image that you want to change, sometimes there's other things. For example, this three column layout here and this two column layout, this one has, when you resize it, less padding below the images or less of a margin below the images than the other column elements there. So I want to add a little bit of space above this sub-headline so that it's consistent with how the other ones look. So what we can do is, I think we should add a margin to this image here to push down this sub-headline. So if we go to find it in here, observatory, and we can give this a class of, let's say observatory image and save. Then back up in the CSS. Could add observatory image, and then we could do a margin bottom of, let's say about 15 pixels and save and refresh. Now you can see that the space above the subhead and below the image is consistent with the other columns. But when you resize to the full desktop width, there hasn't been any change. It only applies to the mobile size. So in the next video, will cover the use of display none for when we want to hide an element that we don't want to see on a mobile screen size. 5. Project Step 4: Hide Unused Elements: Sometimes, there's an element of your e-mail that you don't want to display on mobile sizes. That could be anything from, let's say, an image that's only there for decorative purposes on desktop and it'll take up too much screen space on mobile, or maybe there's a link that you want to hide that's of a desktop-only experience that you don't want your mobile users to click on. In this case, there is some extra space above the e-mail, above the view-in-browser link that is caused by some unused table cells here in the HTML. On the desktop size, this does serve a purpose if you want to have some left-aligned pre-header text here or maybe another link, and then, have your view-in-browser link right-aligned. That's where you would place it in this template. Since we need that there on the desktop size but not on the mobile size, what we're going to do is we're going to hide it using a display none property. I've named my display none rule, display none. It has a property of display and a value of none, and what this does is it's telling the browser or the e-mail client to hide this element when it comes to this break point. We can go to this first table cell here. We're going to give it the class of display none, and we are going to apply that class to this one as well, and save, and refresh, and resize. You can see that there is now no extra space above the view-in-browser link. 6. Thanks!: Thank you for taking this class. Don't forget to create a project in this class to show off your new responsive HTML e-mail. If you have any questions about any concepts covered in this class or anything I might have missed, leave a comment below or send me a tweet. As always, happy coding.