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