How to Setup Html Email Template
Designing an html email template is much different than designing a website.
The same design tools are used to make both email template and a complete Website,But there are some restrictions applied in html email template to make a perfect template that works perfect in all email clients like Outlook,Gmail,Gmail(Andriod),IOS email App,Thunderbird and Yahoo etc.
All these email clients have different standards,some provides support stylesheet and some did not. Today,we’ll go over some HTML email basics and introduce you to some specific information to help you get started.
Html Email Basics
If you’re new to email marketing, there are some basic principles and background information on HTML emails that every email designer and marketer should know.
Few things to keep in mind when designing an Html Email Template.
- Emails should be 600-800 pixels maximum width.
- Use grid-based layers and avoid complicated elements that require HTML floats or positioning.
- Assume images will be initially blocked by email clients, or that certain images—background images, for example—will completely fail to load.
- Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.
- Don’t forget to make it Mobile Responsive ,Keep these questions in your mind.Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?
There are some best practices to follow when coding an html email:
- Design all structure using the table element and nested tables for compatibility.
- Use element attributes like cellpadding, valign, and width to set table dimensions.
- Keep your CSS simple. Avoid compound style declarations (IE: “font:#000 12px Arial, Helvetica, sans-serif;”), shorthand code (IE: #000 instead of #000000), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)
- Inline all CSS before sending.
- Use only absolute links for images, and host those images on a reliable server.
- Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.
- Test, test, test. Create email accounts across various services, and send emails to yourself.
Designing and coding HTML emails can be a daunting task, so we’ve complied a list of resources to help you navigate the process as smoothly as possible.
- CSS Inliner Tool
- Email Blueprints
- Email Client CSS Support
- Email Marketing Guides
- HTML to Text Email Converter