Guide to HTML Emails
by Ayush on Jul.11, 2009, under CSS, XHTML
This guide will tell you exactly what HTML emails are, how to make them and how to design your HTML emails.
What are HTML emails?
HTML emails are emails send with mark-up. Most of the time, an email just contains letters and words to bring over a message to the recipient. It doesn’t need any fancy colors or tables. HTML emails can be used to make the user experience more entertaining and can be used to focus the visitors’ attention to the most important parts.
Why should you use HTML emails?
When you are in the blogging or publishing industry you might want to send a newsletter to inform your regular visitors of new articles, updates and/or news. Most of the time, to keep your subscribers entertained, a more professional look is required. Or you want to point visitors in the direction of a great headline. This all can be achieved by using HTML emails with CSS in a proper way.
Do HTML emails always look good?
To give your HTML email a proper look, we should watch out for a couple points. As you might know, HTML and CSS are rendered slightly different by different browsers. Email clients have this problem as well. All Web-based (Gmail, Hotmail) and standalone clients (Outlook, Thunderbird) will react different.
When you have designed a website, you have to check for browser-compability by simple checking your webpage in different browsers. What we are going to with HTML has the same principle. We will test the email in different clients.
Designing HTML emails
Designing emails has the same principles as designing websites. You should grab the users’ attention, without loosing accessibility and usability out of sight.
To make sure your email looks as good as possible in as many clients as possible, it is advised to use the simplest elements. Validating your email is a good step in the right position!
Simple elements
Some elements are used for a longer time, and usually an email client will have a better support for those elements. For example, Div’s will not get supported by most clients, but tables are supported much better. The reason is simple; div’s are relative new compared to tables.
<table border="0"> <tbody> <tr> <td> </td> </tr> </tbody> </table>
Stylesheets
Because we are using CSS to style our HTML elements, we have to add style declarations. Strangely, his is not possible in the regular way. Extern stylesheets are ignored by most of the email clients. Extern stylesheets are stylesheets called for via a tag in the HTML, or via the @import attribute. We have to use inline CSS to style our elements.
Styles can be declared as <style> in the <head></head> area as well. Some email clients doesn’t read those, so it is advised to use inline styles.
<a style= color:#333; text-decoration:none;"></a>
Images
Images aren’t something that you should use to show important information in your email. Spammers abuse images to bring over the spam message and as a result, email clients usually give the recipient the choice to show images. Therefore, always add an ALT tag so people can recognize what the image is about, and so does the email client. Otherwise your email might get flagged as spam and will not get to your receiver.
The fold
The fold in websites is the area of that website you can view without scrolling. In email messages, a fold area is important as well, and you have to make sure the most important information and headlines are above the fold. Remember an email client (especially web-based) has a lot of buttons above your email, which makes the fold higher as a website. Remember to place the most important information as high as possible in your email to make sure people sees the important parts first by using contrast!
All points in a list
You should…
- Validate your email
- Use inline styles
- Use tables
- Test your email in different email clients (Web-based + Standalone)
- Place the most important information as high as possible.
You should not…
- Use external or embedded stylesheets
- Use to many images (Don’t display your whole email in images)
- Make your email to hard to read (contrast should be alright)
- Use div’s with style declaration ‘float’.
- Put headlines and important information under the fold.
-
Howdy. Welcome to Ayush Jain!
Thanks for dropping by! Feel free to join the discussion by leaving comments, and stay updated by subscribing to the RSS feed. See ya around!
Did you like this site?
Latest on Fri, 08:38 am: Thank you for post. It is very good read. I enjoy to browse ayushjain.in. port charlotte teeth whitening
: Sir! your site is superb.i really liked the concept.
