Other considerations for your own HTML mailings: Personalization, smart tags and links
More tips for building freestyle mailings
In this series of how-to's, we're offering HTML tips to web designers who want to build their mailings from scratch. Here, we'll talk about personalizing your emails with contact fields (such as first name, location and more), formatting your links and more.
Just like you might use personalization in a mailing built using the editor, you can also add personalization to your freestyle HTML emails, using a set of special personalization tags. What about custom fields? To find the tag for a custom field, switch from the HTML view back to the normal view. Drag in a text box from the left sidebar of the mailing – you won't keep this text box in your final version; you're simply using it as a sample. Click to edit the text box and use the personalization dropdown menu in the toolbar to select the custom field by its shortcut name. Copy the tag that appears, then use it in your HTML.
If you're using special characters in your mailing, make sure to pick from these email-friendly characters.
Smart tags are what programs like MS Word, PageMaker and Dreamweaver use to generate curly quotation marks and apostrophes, instead of straight ones. While many programs can read and translate smart tags without any problems, some email clients have trouble with them and will either strip them out of your content entirely or render them as a string of random-looking characters. If you paste code from these programs, revisit your code and delete any curly quotations and apostrophes and replace with straight quotes (using your keyboard).
Use this link format in your code:
<a title="My Website" rel="Website link" href="full URL here" target="_blank">Click here to visit my Website</a>
Make sure to use the full URL starting with http:// to ensure your links are rendered and tracked correctly.
You can create jump links in your mailing -- also called bookmarks or anchor links -- which, when clicked, jump the reader down to an item somewhere else in the same email. This is particularly helpful in creating newsletter-style headlines at the top that link to longer paragraphs or stories below. (You can also set up jump links when using the WYSIWYG editor.) To set up jump links, name the anchor and then create the link to it.
To name the anchor, simply place the following tag around the word(s) to which you want the anchor to point:
To create the jump link, use the pound sign (#) followed by the anchor name as the link target. So, to link to the anchor created above, your code would look like this:
<a href="#MyFirstAnchor">Article 1</a>
Of course, if you'd rather not tackle your mailing's HTML code from scratch, use the drag & drop editor and choose a pre-designed (and solidly coded) template from our gallery.