You have probably googled all kinds of web pages about this because I also did when I was building HTML email. So instead of googling lets look at the fundamental principles regarding HTML emails:-
Prerequisites:-
You really need to know how to code HTML. If you should be able to code your web pages “from scratch” without using any WYSIWYGs (like DreamWeaver or Front Page ) then you don’t have to worry about rules. Just being able to understand basic fundamentals will save you lot of time and frustration.
Introduction:-
An HTML email is nothing but a webpage. So if you can code your own webpage you can code your own HTML email, Just you have to code like it’s 1996.
Fundamental Principles:-
1. Simplify:-
Just keep the whole thing as simple as possible. Focus on your message not your designing skills.
2. CSS Support:-
This is important because not all CSS properties are supported. CSS support in all HTML email clients is limited and even worse than IE6. For example background-image and float property doesn’t supported by Outlook 2007, Windows live hotmail, etc. So you need to know what is supported and what not. Visit this link to know about CSS support.
3. Be a part of design:-
Some designer are not familiar with email clients. So a developer has to take part in the design phase if a designer has never designed an HTML email before.
4. Images should be posted on your public accessible web server:-
In your code use absolute path for images. One common mistake is to post your image files on an intranet, extranet, password-protected server, a secure server that’s extremely slow, or a free hosting site (images my not show due to bandwith issues). Post images on your fast, public-accessible web server.
5. Use inline CSS:-
You have to use inline CSS (CSS within the attributes) because classes and id are enemies of all email clients, they will not work. Use CSS reset for fixing consistency issues on different email clients. This CSS reset was introduced in HTML email boilerplate. Also read about margin and padding in HTML emails here.
6. Use HTML Table and shim.gif :-
Just Imagine you live in the year of HTML 1.0 where div with float property is not supported as a result your layout has to be made with TABLES only. Just remember few things when using tables in HTML email:-
- Set cellspacing and cellpadding to 0.
- Set correct align and valign.
- Always set the height and width of TD.
- Wrap the email inside a 100% width table. One of the reason to do it is setting the background color. In some email clients, background-color/bgcolor in BODY tag won’t work, therefore, you need to wrap your email with a 100% width table and set background color to the table. Read more about this on mailchimp.
Shim.gif is a 1x1px transparent gif and we can use it to fill in empty TD or to create blank spaces. This is particular useful to add space between two blocks.
7. Watch the width:-
The width of the HTML email should not exceed 600px because most of the email clients has a sidebar or some even using 3 column view plus the width of the scrollbar and common screen resolution. The preview pane in AOL 9 is less than 200 pixels wide. So think small and make your html email to the best width i.e. 600px.
8. IMG tag:-
Some points to remember while dealing with image tag:-
- Use style=”display:block”. This is a killer trick to fix the extra space issue below image in Gmail and hotmail.
- Always put the description in ALT tag so that if the image is not loaded then the user should be able to read about it.
9. Use BR instead of P for line breaks:-
Don’t use P for line breaks because p has default margin and on different email clients they have different values for it. Use 2 BR instead of P for line breaks.
10. Do not use JavaScript:-
Don’t use JavaScript because it will not work and your HTML email would possibly get labelled as SPAM.
11. Take care of spam filters:-
You have to think like spam filters. You have to consider spam filters and spam firewalls when you code. If you will use spammy words then it’s pretty obvious that your hardwork will go in spam. Spam filters also look for stuff like, “do you have too many images, and not enough text?”. Read more about how spam filters think.
12. Test Test Test:-
Your HTML email will be rendered differently in different email clients. So testing is a must. Here I am talking about Outlook, Outlook 2007, Outlook 2003, Outlook Express, Thunderbird, Apple Mail, Eudora, Lotus, Gmail, Yahoo!Mail, AOL, AOL Web, Hotmail, MSN, Comcast, Earthlink, and on and on and on. So how to make such a email which will work in all of the above mentioned clients. Don’t worry keep it simple, make it 600px wide (use fluid width) and you can also test how your email renders in major programs with the Mailchimp inbox inspector or campaign monitor.
Conclusion:-
So once you understand about what you should do and what you shouldn’t then it can be a really easy task. So follow these principles and become expert in creating HTML emails. Keep coding … 🙂
Yet Another Geek 