HTML Mailer Design Guidelines

We know that most of the companies give less importance to Email Marketing as compared to other digital marketing stuff. But keep in mind that when done correctly, email is still one of the best ways to promote your product and services online. In fact, it is one of the most popular forms of Digital Marketing.

Designing an HTML email is bit tricky, so we thought to write an article about HTML Mailer Design Guidelines.

Making HTML Mailer is different from Making a Website:

Before getting into the more details, we should know that building an email is not like building for the web. HTML email is basically like coding a web page, only you’ve got to do it the old fashioned way. While web browsers continue their onward march towards standards, many email clients are following old standards. If you care about W3C standards, use the latest in CSS and use scripts to build your website, you need to forget all of that when approaching email design. Basically you can think as you are coding a decade back.

OK, so let’s discuss in Details.

HTML Mailer Design Guidelines:

Design Layout:

  •  Keep Simple: Keep your email simple, Focus more on the message not on the design of the mailer.
  • Mailer Width: The width of the mailer should be of 650px or less. This allows the email to display correctly in most of the email clients and with the most of the Email Service Providers.
  • Avoid DIV and use basic HTML Tables: Try to avoid DIV tags and CSS Properties, as it will not render the mail properly in all the email clients. Try using Basic HTML Table structures.
  • Table Cell Padding: While using table cell padding, be careful as Outlook may not render the email properly, It will take the padding from any cell in a row and apply it to all of the cells in that row.
  • Use proper Alignment: Give proper alignment for content inside table <td>. For Ex: <td align=”left”>, else mailer client browser will not get to know exact alignment and it will take the default.

CSS Styles:

  • Most of your CSS won’t Work: Yes most of the CSS don’t work in the email, no DIVs or CSS floats or positioning. Its difficult here to tell what works and what does not work but best thing can be done here to stick with the basics and code HTML email as we were coding web in the year 2000.
  • Use inline CSS: Don’t use external CSS as it won’t work in most of the email clients. Try using inline CSS only.

Fonts and Font Size:

  • Fonts: Use the fonts which are supported by most of the email clients. For Ex. Times New Roman and Arial fonts are supported by all the email clients.
  • Font Size: Give a specific font size, Avoid using <h1>, <h2>, <p> etc.
  • Paragraph Margin: Give a proper margin for paragraphs. For Ex: p { margin: 5px 0; }


  • Avoid using Image as Background: Try to avoid image as background in the mailer as it’s not supported by few email clients like – Lotus Notes. It won’t show that image.
  • Use Proper Image Name and Source: Always use proper image name, try avoiding space between image name. Also always use absolute image source URLs.
  • Use Alt Tags: As most of the email clients don’t display images by default so try using Alt Tag for all the images in the mailer.
  • Slice your Images: Large image will take more time to be displayed, Try slicing your image in smaller sizes.

Links and URLs:


  • Test your Email: The most important thing in mailer designing is that it requires lots of testing; you need to test your email properly with all the possible email clients before sending.
  • Test your Email for SPAM: Don’t forget to test your email for SPAM issues. Try avoiding SPAM contents from your email or your email will get filtered out and won’t serve its purpose.

We hope these points on HTML Mailer Design Guidelines will help you in designing your next HTML email which will work properly in all email clients and with all the email service provides.

So keep designing and keep reading our articles. Feel free to add your points in the comment section below.

4 thoughts on “HTML Mailer Design Guidelines”

  1. This is a very well written article on how to design a good emailer. Indeed Links to the actual path is very important for conversions but it is better to mention a proper and effective Call to Action in your email which directs your email readers (who clicks) to your/clients website.

    • Thank you Soumya for liking this article, Although this article is a Design Guidelines for Emailers, It does not talk about the content of the mailer. Truly an effective call to action along with a Landing Page is very important for better conversion.

      Thanks for your Input.

  2. A bit off-tpoic but we have seen so many companies simply blasting their emails to unknown email ids which actually do more harm than good. This will eventually mark the company email id as a spam and will also negatively effect the domain. We can send our emails only to our genuine subscribers and have to use proper service providers. Google or Yahoo are not designed for email marketing they are for personal messaging.
    And responsive emailer designing is very important today as mostly people access their email on-the-go from their mobile devices. Indeed, a strong CTA is must in all emails. Always add your website & blog address and your social links in the signature part. This will help tremendously.
    Author thanks for sharing these valuable tips.

    • Very True .. Companies should follow the proper practices of Email Marketing otherwise there could be adverse affect.
      Yes as approx 50% of the email users access their emails on mobile devices, Its important to send responsive emails. Thank you for adding points to this article.


Leave a Comment

Request For A Free Quote