We are in the process of making a short video series: 'How To Create HTML Emails’. Part 3 of the series takes you through the HTML which can be used as a starting point when writing the code. We’ve included the code here so that you can copy and paste it if you want to get started making an HTML email quickly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Demo Email</title> </head>
<body> <!-- EMAIL CONTENT GOES HERE --> </body>
</html>
Coding an HTML email is actually quite straightforward, despite the reputation that it has being difficult. There are a few things that are different from creating an HTML webpage though...
Doctype
If you are writing HTML for a webpage in 2015 it’s likely that you’ll use HTML5. For HTML emails this is not the case - you’re coding for a large variety of email clients, many of which are outdated. It has been found that HTML 1.0 Transitional is the most reliable doctype to use.Note that different email clients treat the doctype in different ways. Some strip out the doctype completely (including the Gmail Android App and Outlook 2010). Others respect the doctype that you set (iPad and iPhone Gmail Apps, Outlook Express and Thunderbird 6). Others strip out the doctype and replace it with XHTML 1.0 Strict (Gmail and Hotmail). This has a implications for testing which will be discussed at the end of the series - for now it is enough to know that XHTML 1.0 Transitional is the most reliable doctype.
Note that when we are working with XHTML we need to include an xmlns attribute in the opening html tag. We have also specified the language type here as it can be useful for screen readers and the sight-impaired.
Meta Data
We have included meta 'Content Type’ so that we can set the character set as UTF8 - specifying as much as possible can be a good thing when writing code for the whole range of email clients.Meta 'Viewport’ as seen above sets the viewable area to the width of the device screen - this is essential if you want your email to be responsive. If your email is intended solely for desktop users then don’t include this line of code.
The final bit of meta data to set is the title tag - this is worth including because it is used by Outlook when people use the 'View in Browser’ function and it can also appear in email preview snippets in some versions of Hotmail.
So that is all you need to know to get started making an HTML email - we’ll bet that it’s not as tricky as you thought. For full details see the 3 minute video: