Best Practices to follow during a HTML Mail Template design

Best Practices to follow during a HTML Mail Template design

In our day to day activity we send many mails to Friends, Users OR Customers. The most important thing is the way which we follow to send an email. There are several devices available in market. User can access their mails from any devices like mobiles, desktops, tablets OR ipads. So our first aim is to create an email which supports to all browsers & resolutions. In this session let us share few best practices to follow during mail template design.

Developing mail template

1. Always make your mail template Simple. Mail templates designing is one of the most important factor in email marketing. The main thing is that your template need to support all email clients browser & bile. For an example Gmail (Desktop/mobile), Yahoo (Desktop/mobile)…

2. Standard way to Create an mail Templates is the use of pure HTML’s table structure with inline CSS Styles.

3. The Email Clients has their own HTML rendering system. It is necessary that we have to develop a template which rendering properly in all Email Clients.

i.e. HTML rendering is depending on HTML attributes & CSS properties.

eg. Padding & margin will supports for Gmail & Yahoo but the same properties will create white spacing in Hotmail.

Difference between Browsers & Email Clients

Web browsers supports all HTML & CSS properties but Email Clients won’t. It has some limitations. Due to this dependency every Email Client render HTML or CSS in their own way.

For an Example : background property of CSS supports for Gmail, Yahoo but will not support for Outlook.

Best practices for mail template design

  • Use pure HTML table structure with inline CSS styling to develop basic layouts;
  • Fluid layout is the one where we give width in percentage so that design will look good on all devices even if we shrink or expand the browser.
  • Avoid using DIV elements.
  • Hotmail won’t support Padding & Margin. So ignore to use these attributes.
  • Write your CSS styles in-line.
  • Don’t use background-images; use basic ‘background’ html tags.
  • Give image dimensions, use ‘ALT’ & ‘TITLE’ attributes.
  • The standard width of email template is less than 650 pixels.
  • While referring an image use absolute path.
  • Avoid PNG’s files for email template. It create problem for Lotus Notes.

Limitations on bringing Responsiveness

  • Many Email Clients not supports Media queries.
  • Never use JavaScript like Scripting language while creating an mail Template.
  • Tag get strip down while rendering in some Email Clients.

Developing a Responsive mail Template

1. Using Media Queries – Only Apple mail client (in iOS devices) and BlackBerry OS is supporting Media queries fully.

2. Using Fluid Layouts – Fluid layout is the one where we give width in percentages so that design will look good on all devices even if shrink or expand the browser but that will be not responsive structure it’s a compressed layout.

Challenges for fixing text overlay Issue

  • Use VML Scripts.
  • VML script is an alternate method to achieve background-image in Outlook Client.
  • To achieving text over images is a challenge when we have a limitation on using background-image attribute.

Source of Image: http://www.sketchappsources.com