Sending HTML Emails with Gmail

HTML email newsletters have come a long way in the past five years since this article was first written. They’re still a useful way to get a web page delivered to interested readers to encourage them to visit your website or have your readers perform an action. The email marketing process also has become routine.

This article brings you up to date on how best to code HTML email so that it will display well in most email software. It provides an exhaustive overview of how to code html email newsletters (even in Outlook) with links to free html email templates, CSS compatability tables, services that test your html email, and much more. As a result, this article strives to provide a comprehensive overview of all possible resources online compared to other articles on this topic which may be vendor-specific or incomplete.

The Building Blocks

Whether you use a template or hand code (my preference), there are two key building blocks for html email:

• HTML tables control the design layout and some presentation
• Inline CSS controls presentation, for example, colors for backgrounds and fonts

The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download templates from Campaign Monitor and MailChimp, two email delivery services that provide free templates (links are below in the Where to Learn More section).

When you open up their templates, you will notice several things we’ll discuss in more detail later:

• CSS style declarations appear below the BODY tag, not between the HEAD tags.
• No CSS shorthand is used: instead of “font: 12px/16px Arial, Helvetica” break this shorthand into its components of font-family, font-size, and line-height.
• SPANs and DIVs are used sparingly to achieve specific effects while HTML tables do the bulk of the layout work.
• CSS style declarations are basic with no hacks required.

Step 1: Use HTML Tables for Layout

Determining the layout design is the first step in coding an html email. Single column and two-column layouts work best for emails because they control the natural chaos that results when a lot of content is pushed into such a small space as email.

• With a one column layout, typically there is a header that contains a logo and some (or all) navigation links from the parent website. Below that are the intra-email links to stories further down in the email. At the bottom of one column layouts are the footer (often with links that repeat the top navigation) and detailed unsubscribe instructions.
• Two-column email layouts also use a header and footer. They also typically use a narrow side column to contain features and links to more information. The wider column holds the main content of the email.
• Promotional emails follow the same rules but with much less content and links. They often include one to two messages and sometimes one big image with small explanatory text and links below the image.

No matter how your email is designed, the most important content (or reference to that content) should appear at or near the top of the email design, so it is visible immediately when a reader opens your email. The top left of an email often is the first place people look when they open an email.

All of these email layout possibilities can be coded easily with html tables to divide up the space into rows and columns. Using html tables also helps with problems caused by different email software and how they can read the same email code differently.

The basic approach follows these steps in coding the email layout with html tables:

• For a two-column layout, create one table each for the header, the center two content columns, and the footer. That’s three tables. Wrap these tables into another table that “wraps” or “frames” the other tables. Use the same approach for one column layouts except the content table has one column. This approach helps with email designs that break images into multiple table cells. Otherwise, a single table with TD rows for header (with colspan=2 if the design is two column), content, and footer should display fine for all but Lotus Notes email software.
• Use the HTML table attributes within the TABLE and TD tags, for example, to set the table border=0, the valign=top, the align=left (or center, if that is the design), cellpadding=0, cellspacing=0, and so on. This primarily helps older email readers to display the html email in a minimally-acceptable way.
• Set the HTML table border=1 to help debug any problems with the internal alignment of TR and TD tags in development. Then change it back to border=0 for testing and production.

Read more http://annanta.com/web-world/sending-html-emails-gmail/