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; }

Images:

• 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:

• Give a proper path to your hyperlinks. For Ex: https://digitaladquest.com/importance-of-digital-marketing/

Test:

• 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.