Mailers are one of the oldest ways of promoting a brand and connecting to customers. As a layman, mailers might be similar to any other webpage but sometimes creating mailers are way difficult than creating a normal webpage.

The big question is what makes mailers difficult to create. So below are some points:

• Mailers are not standardized
• Mail clients use very different techniques to render mailers hence a developer need to code accordingly
• Mail clients do not understand normal HTML. Tables in HTML are the best they can understand
• CSS files cannot be used as mail clients render only contents inside body tag. Only inline styles are allowed

Below are some of the key points for designing create perfect mailers :

1. Mobile-first should be the approach– With advancement in smartphone technologies, users accessing internet on phones has increased considerably and therefore it becomes important to have mailers designed for mobile
2. System fonts should be used: Since web fonts are not supported by email clients, its the best practice to use system fonts like Arial or Tahoma
3. Do not use background images: Most of the email clients do not have support for background images.
4. Use 600 px as standard width for mailers: Creating mailers with 600px width has less impact when pane is minimized

As discussed in the earlier sections, mailers are not just simple webpages.

Following are some points we follow at naukri for creating mailers:

1. Only table structures should be used: Most email clients support only table structures for HTML mailers. Although some of the email clients like gmail have started supporting tags like <div> or <span>, it should be the best practice to use only table structures
2. Use inline CSS only: Since most email clients chop off the header section of the mailer HTML hence CSS files cannot be used. The best way is to use inline styles
3. Do not use shorthand for CSS: Most email clients do not support CSS shorthand, hence it should be the best practice to avoid them

In the points below we will be discussing some of the common issues that occur while creating mailers:

• One of the most common difficulties in mailers is to create buttons with background. A novice HTML developer might try to design it as follows:

But will this work on email clients? The answer is no. Viewing the mailer on normal browser will display the button perfectly but not on email clients like outlook.

For displaying buttons correctly on outlook, you need to style the td that accommodates the anchor tag.

View of button on browser

View of button on Outlook

• Use padding to provide height: To provide default height to any element, use padding. CSS “height” style will not work
• Use table nesting: Table nesting is always the best way instead of using margins or paddings in the table cells
• CSS style shorthands do not work: For example

The above font style will never work on email clients
Instead use styles individually:

• Default link colors added by email clients: Email clients provide a default color whenever a anchor tag is encountered. To overwrite the default color,add a redundant span

Below are some of the best mailers created at naukri:

Related Posts

• Tip-toe through Naukri, India’s No.1 job site #OneDayTale
• Web and Mobile Implicit Requirements
• Naukri Gulf optimizations – using base64 encoded images
• WEB WORKER – MULTI THREADING WITH JAVASCRIPT
• RESTful API calling With Angular $resource