How to make an email template for gmail using HTML and CSS

Question

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 confirm

Answer 1

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:

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 ( and ). Tables can be nested within eachother:

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 , you can have multiple tables that will stack vertically without the need of rows. The content, such as text or images goes within a .

All CSS styling should be inline:

Hello