Now that we have our data elements designed and a basic wireframe, building the HTML template is quick and easy. We're really just creating code to match what we've already designed on paper. The only thing we have to do now is create container tags for any elements that we need to map and write HTML that can be used for an e-mail newsletter.
Our example is an HTML newsletter that could be sent to a mailing list (through a third-party service or a TYPO3 extension), so we want to make our HTML as simple and clear as possible for all of the different e-mail clients that our subscribers might be using with a few rules:
- No CSS layouts. Floating and block layouts are either completely unsupported or non-standard in many e-mail clients, so we'll have to use tables instead.
- We'll use inline CSS when possible. If we need a border for a table or cell, we'll use
style="border: 1px solid #000;"in the HTML tag. - Anything that may not work in an inline CSS declaration such as fonts will be declared in the head of our HTML, and we are going to include those values in the TemplaVoila mapping later.
Note
There are more guidelines for designing an e-mail template than we can cover here. For more information, I recommend the articles on Campaign Monitor (http://www.campaignmonitor.com/resources/) or MailChimp (http://www.mailchimp.com/resources).
To create our HTML template, we only need to create a file named template_newsletter.html in the fileadmin/templates/ directory and start creating our HTML based on our wireframe and e-mail requirements. We are going to go through all of the HTML right here, but you can download the complete HTML file from the Packt site (https://www.packtpub.com/support).
First, we can add the header information with some basic CSS for our fonts and margins:
<!DOCTYPE html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
line-height: 18px;
}
p {
margin: 0px;
}
h2, h3 {
margin: 0px;
}
h2 {
font-size: 24px;
line-height: 36px;
}
h3 {
font-size: 18px;
line-height: 24px;
}
</style>
</head>
Next, we need to start adding the body our HTML. We'll use one main table for the entire template. We need rows for our banner and the date at the top, and we'll open up a new cell for the main content. Notice that we are using inline CSS to create our border under the date and setting the width of our main content section in the HTML tag:
<body> <table align="center" width="550" style="border: 1px solid #000;"> <tr> <td id="banner_image" colspan="2" align="center"></td> </tr> <tr> <td id="date" colspan="2" align="right" style="border-bottom: 1px solid #000;"></td> </tr> <tr> <td id="main_content" width="350" valign="top">
For the main content section, we are going to create a nested table for the main article and news snippets:
<table> <tr> <td id="main_article" style="padding-bottom: 15px;"> </td> </tr> <tr> <td id="news" style="padding-bottom: 15px;"> <h2 id="news_title"></h2> <div class="news_list"></div> </td> </tr> </table>
Now we can close the main_content cell, and create our cell for the sidebar. We will create another nested table for the sidebar:
</td> <td id="sidebar" width="200" valign="top"> <table style="border-left: 1px solid #000; padding-left: 10px;">
Now we will create our itinerary section to list upcoming events. We are adding HTML for each element of our itinerary (date and city) so that we can map them to fields in the page properties easier:
<tr> <td style="padding-bottom: 15px;"> <h3 id="event_list_title"></h3> <div id="event_list"> <div class="event"> <span class="event_date" style="font-weight: bold;"></span> - <span class="event_city"></span> </div> </div> </td> </tr>
We will add sections for our products and contact information:
<tr> <td id="product_list" style="padding-bottom: 15px;"> <h3 id="product_title"></h3> <div class="product"></div> </td> </tr> <tr> <td id="contact_info_section" style="padding-bottom: 15px;"> <h3 id="contact_info_title"></h3> <div id="contact_info"></div> </td> </tr>
Finally, we can close all of our tables and add a footer section at the bottom of the page:
</table> </td> </tr> </table> <div id="footer" align="center"></div> </body> </html>
As you can see the HTML is just like we designed in the wireframe. The entire template is based on tables, and we have used HTML attributes where possible to set the padding and border of the different cells. Like we talked about, we have also included some very basic CSS in the head section to set the font sizes and reset the margins to 0 for paragraph tags. We have also created a cell, div, or span container with a unique identifier or class attribute for each section that will need to be mapped to a data element. Finally, we have created h2 and h3 header tags with unique identifier attributes for the titles that we can map in TemplaVoila.