Tips for creating HTML email

Posted: 04 March 2014, Category: Email

Creating email newsletter can be very tricky, sometimes impossible. Thankfully there are many email frameworks available to get you started.

But still, having the tool doesn’t safeguard you against different email clients’ quirks, so if you're going to make a HTML email , here are some tips to stick with.

HTML Newsletter

Use the most accepted doctype

HTML doctype tells browsers and email clients if a document is HTML, XHTML, HTML5, etc.

It is recommended to use XHTML 1.0 Strict doctype for email because experience suggests, many email clients render documents more accurately when they’re declared XHTML 1.0 strict.

Don't use JavaScript

Remember every single email application blocks JavaScript as a security measure to prevent viruses. So please make sure your code doesn't contain any JavaScript such as on form submit buttons, pop-up window links, image pre-loaders, widgets, etc.

Use inline CSS

It is best practice to use inline CSS. There are many services out there that will help you to convert embeded CSS into inline CSS such as Zurb inliner, Premailer and Emailology for free.

Always use "absolute" paths for all images and hyperlinks

With HTML email, you need to host all of your images on your server, then use absolute paths that point back to your server as shown bellow

HTML code for image:


<img src="http://www.mysite.com/email/images/photo.gif" alt="Photo of Joe Block"/>

HTML code for link:


<a href="http://www.mysite.com/index.html" title="www.mysite.com">Click here</a>

One little tip is to go ahead and upload all your email's graphics to your server at the very beginning of your project. That way, you'll have to use absolute paths from the beginning.

Use margin carefully

Most email clients ignore margin on table cells.These elements are the building blocks of email layout, you should only use cellpadding and CSS padding when controlling the space between sections of a message.

However, you can use margins on paragraphs. It is also OK to use hspace and vspace attributes for images.

Give every image a valid alt attribute

Gmail recenly shows images by default. Everyone else sees a blank spot — and the text you provide — unless the user’s chosen to allow images by default.

While you can’t control when that happens, we can control to give every image a valid alt attribute. Alt (alternative text )helps prevent people and email clients from thinking your email is spam.


 <img src="#" alt="photo of our latest amazing product" />

You can also control alt attribute font family, color and size with CSS3 properties.

Use six-digit hex codes for colors

Not every email client understands the three-character shorthand, like #ccc, or named colors, like “red” or “yellow”.

Therefore use full hex colors, like #007D9A which is fully supported

Resources

Zurb developers came up with Ink, an entire email framework designed to easily build responsive emails that work in any client, even Outlook.

Html Email Boilerplate will provide some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

Putsmail will let you test your HTML mails before sending them

Litmus offers preview across 30+ email clients and devices in minutes. See how your message looks in the preview panel, and with images on and off.

Emailology also provides template for loaded with examples for developing HTML emails

Back to Blog page

Blog categories

Twitter feed

(5 days ago)
Preparing for General Data Protection Regulation (GDPR) https://t.co/RS2J7YN7pJ via @driftingruby


(15 days ago)
ActiveRecord Tricks https://t.co/n5TfzS9s1Q via @driftingruby


(15 days ago)
Optimize your images and encode it in base64 https://t.co/e59VyAwp6B via @redpik


(20 days ago)
Great day at Classic Motorbikes show in Carlow. Well done to organizers for all effort #carlow https://t.co/cbZVUTRnBg


Top of page