Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are three basic email designs: one-column, two-column, and multicolumn product emails. In this video, we'll code a two-column HTML email. Typically, this design is used to send an email newsletter. Here's the email in JPEG format that we'll code. The first thing we'll do is reduce this design into a series of boxes that we can then convert into HTML tables. So we'll focus on this design about an inch or two off of the screen, and then we'll reduce the elements of the design into boxes.
The first box, the largest box, is this brown color that it wraps everything. The second box wraps the entire HTML email. There are additional boxes for the header, for the content area, and for the footer. Within the content area, you'll see that we have a column that is the same height as five rows on the right, so we'll need to account for that. In the footer, you'll see that while we have one box, in fact the box is divided up into five different spaces. So let's look at the code.
First of all, we'll start with this pseudo body table. This acts like our HTML body tag. It corresponds to the dark brown box that wraps around our HTML email. In addition, we have a wrapper table for the email, and that corresponds to the box that contains the header, the content area, and the footer of our email. Within this wrapper table, we have a third table nested inside that contains all the elements of the email, starting with the header and then the content area and then when we scroll down, the footer table.
Within the email content area, we have a single left column that is the same height as five rows on the right. Within HTML tables, a rowspan is used to span several different rows, in this case five rows. We've typed in 'Content goes here', so we can see what that is. We've typed in the 'Tours Logo Here' so that we can see where that is placed. Here is what all our tables look like when I display it in Firefox, or any web browser. You can see, we have the table header, we have a content area, and we have a footer.
Within the content area, you can see that we have a left column that extends the height of five rows on the right. So everything appears to be set up for us right now. Now that we've coded the layout our two-column email, in the next video we'll add copy.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 87143 Viewers
80 Video lessons · 136256 Viewers
59 Video lessons · 54929 Viewers
52 Video lessons · 68808 Viewers
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.