Skip to content Skip to sidebar Skip to footer
Home / Css / Email / Html / Html Email / Javascript

How To Make An Email Template For Gmail Using Html And Css

Post a Comment
I was wondering how I could design an email template using HTML and CSS and then incorporate that into an email. I want to do it as other companies do when they send confirmation e

Solution 1:

Whether you prefer to code an email by hand, or use a pre-existing template, there are a few rules to keep in mind in creating an HTML email:

  • Utilize Tables in your Layouts
  • Fixed-Width Positioning (for non-responsive emails)
  • Pixel Units
  • The Possibilities with CSS (check Ultimate Guide to CSS link below)
  • Inline CSS
  • Anchor Links Best Practices
  • Test in All Major Clients
  • Always Offer Web-Based Views
  • Adding Image Content
  • Avoid the Spam Folder!
  • Add Un-Subscribe Option

Take a look at these sites for more info on this subject:

How to Code HTML Email Newsletters

9 Tricks to Design The Perfect HTML Newsletter

How To Code An Email Newsletter in 6 Simple Steps

The Ultimate Guide to CSS - A complete breakdown of the CSS support for every popular mobile, web and desktop email client

Solution 2:

A very useful book that I used before I start a job is:

Modern HTML Email - Jason Rodriguez

There are very few books on writing HTML for email, so this is one of the only decent ones I found!

Whenever I start making an email, I use a starting point such as this below:

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title><styletype="text/css">body{-webkit-text-size-adjust:none;}
.ReadMsgBody{width:100%;}
.ExternalClass{width:100%;}
.ExternalClass, .ExternalClassp, .ExternalClassspan, .ExternalClassfont, .ExternalClasstd, .ExternalClassdiv {line-height: 100%;}
</style></head><bodystyle="padding:0px; margin:0PX;"bgcolor=""><tablewidth="100%"align="center"border="0"cellpadding="0"cellspacing="0"bgcolor=""style="table-layout:fixed; margin:0 auto;"><tr><tdwidth="640"align="center"valign="top"><!--Insert content here--></td></tr></table></body></html>

This includes some fixes, such as a 100% wrapping table on the outside which means that Yahoo! will not left align your email and a fix for the line-height issue in Outlook.com, where Outlook.com makes all line-heights 131%. The width included in here is 640, which gives the email a fixed width for desktop and is normally 600-700px.

Tables should be used at all times, and tables contain rows and columns (<tr> and <td>). Tables can be nested within eachother:

<tablewidth=""border="0"cellpadding="0"cellspacing="0"><tr><td><tablewidth=""border="0"cellpadding="0"cellspacing="0"><tr><td></td></tr></table></td></tr></table>

Each row within a table needs to have the same number of columns, otherwise columns within a row will need to be nested within a table. Tables can also be stacked, so within a <td>, you can have multiple tables that will stack vertically without the need of rows. The content, such as text or images goes within a <td>.

All CSS styling should be inline:

<tdalign="right"style="font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:14px; color:#fffffe; text-align:right; text-decoration:none; font-weight:normal;">Hello</td>

Post a Comment for "How To Make An Email Template For Gmail Using Html And Css"