Join Tim Slavin for an in-depth discussion in this video Coding HTML tables, part of Effective HTML Email and Newsletters.
- View Offline
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.
- Understanding MIME types
- Reducing spam potential in an email or email list
- Creating content for email campaigns
- Understanding the design constraints of HTML emails
- Building email address lists
- Understanding the ideal coding process
- Designing a plain text email from an HTML email
- Deciding how and when to test an email
- Sending email with canned templates
- Troubleshooting layout, spacing, and image issues
- Adding video to email