Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author Tim Slavin shows how to design and code an HTML email newsletter, including setting the final dimensions and color palette, placing images and copy in the code structures of the file, and defining the newsletter's parameters with tables within tables. The course demonstrates each step of building an HTML newsletter, up to testing and sending the email.
In this video we'll begin to work on margin and padding issues in our e-mail. You'll see that the copy block for example is spread wall-to-wall in our content table. So go up to our heading, go up to our css prep code and we'll copy this style information and we'll adjust it to adjuster spacing, add a space, paste, add a space and paste.
What we will do here is we'll adjust the padding at the top and bottom of our heading, 20 pixels for the top and 5 pixels for the bottom.We'll set this to 0 for padding top of our subheading, but we'll set the padding bottom to 20 pixels, let's Save and take a look. So we need to increase the font size of our heading and subheading, but generally this works. Instead of 16 let's try 20 pixels for the heading, instead of 10 pixels for the subheading, let's try 14 pixels, we'll Save and check, it's much better.
Let's look at our design and we're pretty close for now. Next, let's look at the padding on the left and right of our copy block. We don't need to set the padding on the left or the right for the heading or the subheading, they're short enough, but we probably do at the paragraph level. So we'll go back to our prep code, Ctrl+C or Command+C to copy, Ctrl+V or Command+V to paste. I want to set the padding at the paragraph level, just in case the table data cell information doesn't translate to older e-mail software.
So we will set the padding right at 20 pixels and the padding left at 20 pixels, and let see how that works for this paragraph, that's close. We can go to our original design and we see that we have a little bit more space. We'll set it to 30 for padding left and 30 for padding right, save and check our work. In addition if we want, we can use break tags in our copy, this is not being used for search engine optimization, so if you want a different line break, you also can use the break or BR tags.
This looks okay for now, so we'll adjust the margin and padding for this To RSVP bit of copy, then we'll highlight and then copy this chunck of styles, we don't need it for the private tours line, we do need it down here, let's save and check. We can add more space for this line To RSVP, and we also need to add space below it, so let's set the padding right and left to 50.
We also want to control the padding bottom, let's set that to 25, save and check, there, that's much better. So let's check our e-mail. Again, if you want precision, you can add BR tags to get the copy block to break at exact points, for now I won't do that. With our copy block margin and padding figured out; let's tackle the headers and footers at the top and bottom of our e-mail.
There are currently no FAQs about Creating an HTML Email Newsletter.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.