Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this video, we'll code the multicolumn product email. Typically, this design is used to advertise multiple products. Here's the email in JPEG format that we will code. As we did with earlier videos, let's convert this designed to a grid and call out the design elements: the logo, the header, the content area, the side column, and the footer. The way we do that is to focus our eyes about two inches off the computer screen and begin to see this design as a series of boxes and blocks and then we add a grid.
We have a larger email, which is the background color, which is our main box. Within that, we have a box for the email itself that contains all the elements of the email. Then we have a box for the header, the navigation links, for the special message area, and then for the products themselves as a table, and we have a box at the bottom for the footer. Let's see how this looks in code. To start with, we have the pseudo body table which acts like the HTML body tag, and we have within it the wrapper table that will contain HTML email.
These two boxes, the pseudo body table corresponds to the light blue background around the HTML design, and the wrapper table corresponds to the large table that contains the HTML email itself. Within the table that contains the email, we have a header and we have a navigation row. We have the navigation links here, and we have the header image already in place here.
In the next row, we have headline copy. This corresponds to this Special Occasion Bouquets and Baskets area of the email. After that, we need a table to hold each of the products. So we have set up a 3x2 product table. It has three columns and two rows. As you can see, it's very, very straightforward. In the planning stage, we set up our design, we measured out each of these products' cells, and we determined that they are 130 pixels wide and 165 pixels high. And within each, for now we've added 'Product here' as copy, so that we can see what this looks like.
At the bottom of this product table, we have another Special offer copy. Here, its mention code for 50% off delivery, and then the last row in our table is for the footer, and that also is very simple. It's a single-table data cell with an image. And then finally at the bottom, we have the company address. Finally, I have opened this HTML email in Firefox to show how all the different HTML tables go together to create our HTML multiproduct email.
Now that we've coded the layout of our multicolumn product email, in the next video, we'll add content.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 80764 Viewers
80 Video lessons · 132945 Viewers
52 Video lessons · 66401 Viewers
59 Video lessons · 52200 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.
Your file was successfully uploaded.