WidthThe first thing I want to go over is setting the overall width of your template design. Many people want to create an email template in the same way they would build a web page and set the width to be fairly wide. Unfortunately, many contacts are limited by the width of the display window of their email client, such as Hotmail, Yahoo, AOL, etc. These display windows are usually fairly small and a wide email design forces the contact to have to scroll left and right to read the content of your message. We typically recommend building an email template design with a width of around 600 pixels or so. You can sometimes get away with a slightly larger width, but again, your contacts may have to scroll right to see the entire content.
Non-Supported HTML ElementsBuilding an HTML template for email is much different than building an HTML website. Many of the shortcuts we can use in web page design to cut down on coding are not supported by email clients that display the emails. A great resource for seeing which elements may not be supported by the various email clients is http://www.email-standards.org. Lucas Weber also did a great blog post explaining this site and how to use it, which you can find by clicking here. So, for example, let's say you want to create a simple table cell with some text and have 10 pixels of padding separating the text from the edge of the cell. In website design, the HTML might look similar to this: Unfortunately, the very popular Outlook 2007 email client does not support the padding style attribute and will ignore it, resulting in your text showing up incorrectly up against the edge of the cell. To write this code so that it correctly shows up in an email client that doesn't support the padding attribute, we must use table rows and columns to set the spacing we wish to use. Our corrected code will look something similar to this: Resulting in this: As you can see, we achieved the same result as above, but we used rows with their height set to 10 pixels and additional columns with widths set to 10 pixels to create the "padding" we need in this table cell. This code will render exactly the same, regardless of which email client you view the message in.
Inline Styles vs. CSS Style SheetsAnother helpful tool web designers use in websites is CSS style sheets. These are usually added into the header region of the page and define styles throughout the web page. When you try to use these in email, however, some email clients will strip any information contained in the header section, including style sheets. This will force the content of the email message to default to whatever fonts and font sizes are set by default by either the email client or web browser you are using. To make sure this doesn't happen in your emails, we recommend using inline styles throughout your HTML template. Let's say you wanted to set the font of one section of the template to 10 point Arial. Setting this as an inline style would look something like this: Resulting in: As you can see, the style attribute was added to the
tdtag to style the elements contained within it. You can add these styles throughout your template HTML code and the styles will hold in all email clients.
Required Bronto TagsThe last thing I want to talk about is adding the required Bronto tags for the unsubscribe link and physical address into your template design. The unsubscribe link and a physical address are required by CAN-SPAM in each of your email sends. If Bronto doesn't see the correct tags to generate this information, it will automatically add it into the message for you. Typically the version Bronto adds will not look consistent with the rest of your template design. In order to incorporate the unsubscribe tag into your message, you will need to use the tag
%%!unsubscribe_url%%as the URL in your hyperlink. The tag will be replaced automatically with the correct URL when you send out your message from Bronto. In the HTML code, your unsubscribe URL might look similar to this:
Click here to <a href="%%!unsubscribe_url%%">Unsubscribe</a>Resulting in: Click here to Unsubscribe. Adding the company address is very easy as Bronto has a tag that will add all of the required address information and format it in a popular style. The tag is
%%!account_address%%. This does not need to be inserted into a hyperlink like the unsubscribe link, as the tag will be replaced at time of send with the account address. The formatting will look like this: Bronto | 324 Blackwell Street | Suite 410 | Durham, NC 27701 | US
ConclusionsWrapping things up, these are just a few tips you can use in your custom HTML template designs. For example code and more tutorials on building custom Bronto templates, reference the help section in your Bronto account and search for "
Example Code For A Custom Template". Good luck with creating your custom templates!