Tips and tricks to coding Email Template

The best practices of designing and coding email templates. Following are the basic tips and tricks:

Keep it simple

Email campaigns should focus more on message, not the look and feel of email.  Just like it is with website, content will always be king. Though Email design is not always easy, but if you stick with a basic table layout and pretend that you’re designing an older web page, you should have a much greater degree of success. Try to maintain a higher text-to-image ratio, because email programs look for that and you don’t want your email to end up in spam due to too many images. They also look at the overall HTML character count, so try to limit the template to a few articles, and don’t throw in a bunch of span tags or spaces that just add unnecessary characters.

Use in-line styles

In-line styling is a must when it comes to designing HTML emails. Of course, adding external CSS is way more efficient and time-saving, but since there’s such limited support for that in the different email programs, styling your elements in-line is the best way ensure that your intended design will display correctly. If you want to see what types of CSS are currently supported in the popular email programs, take a look at the Email Standards Project website, as they have a comprehensive list of which CSS (Cascading Style Sheets) properties work reliably and which ones don’t. Bottom-line though – code your emails like you would an old webpage from the ’90s. This means using basic HTML tags and in-line styling.

7a675edf-b139-42bd-9688-a1f359abaa2b
 

 

 

Keep email width under 650 pixels

This ensures that users of email clients such as Outlook can view your email in their vertical preview pane. Hubspot’s default email templates are already within this max width, so feel free to duplicate one of those templates as a starting point.

Abide by CAN-SPAM rules
You must include an unsubscribe option in every email, as well as your company name and address. In HubSpot, you cannot save an email template unless it includes this element.

Use code-friendly software
When editng your template code, use software like Sublime Text 2, Dreamweaver, or Notepad, or even HubSpot’s email template creator. Word and other WYSIWYG editors typically add extra code that will cause your email to display poorly in certain email clients.

Design with tables
While it’s no longer best practices to design web pages with tables, they’re essential when designing emails. It’s the only way to have your design render correctly across multiple email clients.

Avoid complex colspans and rowspans
These will make revisions a nightmare as you try to reuse templates. Use these very sparingly, and never together on the same table unless you know that the content itself will be consistent in future emails.

Avoid body attributes
Some email clients ignore body attributes. If, for example, you want to make your email background blue, use a 100% width table with a blue background and next your content in the table.

Avoid CSS shorthand

  • An example of CSS shorthand: <p style=”font: italic 14px Verdana; color: #000”></p>

  • An example of correct CSS:  <p style=”font-style: italic; font-size: 14px; font-family: Verdana; color: #000000”></p>

Avoid external or internal CSS classes or IDs
Anything that starts with <style> will have mixed results across email clients. Instead, use inline CSS.

Avoid Javascript or other dynamic scripts
Even if a SPAM filter allows your email through, most email clients will not allow these scripts to function.

Avoid Flash or video embeds
The ability to view rich media in email is turned off by default in most email clients. Instead, include an image of your video player (with a play button) that links to the rich media on a website page.

Use plain text-style bullet points
In addition to images, another element that tends to break in HTML email renderings are HTML-style bullets. To avoid the recipient seeing invisible or wonky bullets, use a plain text alternative such as asterisks (*) or dashes (—) that are more likely to show up no matter what.

Use Hotmail glitch fix
If you want to center an email on a solid colored background, Hotmail will not render this properly unless you include the following code:

.ReadMsgBody {width: 100%}
.ExternalClass {width: 100%}

 copy right from (http://help.hubspot.com/articles/Best_Practice/email-templates-design-code) 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s