Basic guidlines to develop an html emailer
Mailers are very important element of digital marketing unlike webpages to target online users. We only need to use basic html elements and there basic properties to develop email templates.
Before start developing an html email template there are a few things to keep in mind, which are basic guidelines to develop an html mailer:
Best Practises: Mailer Design
Mailer width should not exceed 600px - 800px maximum. Which is a good width for a mailer to behave properly in differente view pane sizes provided by different mail clients.
Layout should be as simple as possible, make use of grid-based layout, keep avoiding the complex layout which requires additional floating and positioning.
Images are blocked by default in emailers by most of the mail clients, keep avoiding making use of background images.
Make use of basic fonts like Arial, Verdana, Georgia, and Times New Roman for emailers which are supported across many platforms.
For animations we should avoid making use of scripting and flash animations, instead *.gif files can be used for animations.
Best Practises: Mailer Development
To code a Mailer make use of <table> element. For complex layout <table> can be used for nested blocks.
Make use of basic attributes of an emelent as much as possible.
Make CSS inline by making use of style attribute of an element.
Use absolute paths for anchors and images.
Steps to develope responsive mailer
Download the basic template by clicking the "Share and Download" button or click here
Copy all the css form style.css and paste it in the html file under
<link>given to include css file
Use any of the CSS inliner tool available online. Like. mailchimp's css inliner tool
Copy the generated code by the css inliner tool
Save it in an HTML file
Remove body, head and html tags from the template
Now you have mailer ready