Tips to Convert PSD Designs into HTML Email Templates/Newsletters

admin on May 6th 2010 with 10 comments

HTML Newsletters and e-mailers are some of the most common mediums of communication which every small and large organizations use, either to share information with its audiences or promoting their services. Publishers can easily track rates for email opens, forwards, and clickthroughs, and thus can easily measure reader interest in e-mailer or newsletter’s material; readers are also presented with the information in the form of a web page that is more visually appealing, and much easier to scan and navigate, than plain text email.

So there is no doubt that html emails are much better than plain text emails. But the main problem starts once we start coding our email design into HTML email template. As there are so many desktop email tools like Outlook, Thunderbird, Eudora etc and online email services like Yahoo!, Hotmail, Gmail etc that are used to read an email and each of the desktop tools and online email services render your HTML email in vastly different ways because CSS support across various desktop email tools and email clients varies. So it becomes a challenge to code your design into HTML email template in a way that it should be 100% compatible across various desktop email tools and major online email marketing platforms.

Whether you choose to convert your design into HTML email template by hand or you use an existing template, there are few fundamental tips to keep in mind:

• The most important thing is to keep your email simple, focus more on message rather than design.
• Never upload images in password protected server, security server or free hosting server that is extremely slow. Use codes that point exactly to the location of the images.
• Any code written within DOCTYPE, BODY, and HEAD tags will be stripped. The webmail servers such as Gmail, Yahoo!Mail do not want your codes to override their and hence they strip any threat.
• To introduce some specific effects Divs and Spans are to be used, while tables should be used for layout.
• Control background colours and fonts by using inline CSS.
• Use individual properties instead of using short hands.
• You cannot use loads of images and less content else you will be caught into spam filter. Also while writing codes you should be aware of avoiding sloppy codes otherwise it will be another reason for your spam arrest.
• CSS won’t work in browser servers: The browser server email clients such as Gmail, Yahoo!Mail, do not support CSS included in your HTML email. This is because the CSS will likely override the CSS included in rest of the page, so they disable it.
• Test your HTML email in different desktop email tools and online email services on different browsers before sending it.

Some quality service providers who can help you code your HTML email template 100% compatible for all major email clients:

If you are a self coder than converting your own PSD into HTML email template would not take much from you, except time. But if you are some one who does not have any idea about HTML conversion and do not want to use software to keep the sanity of your email alive then below are some of the fine service providers who can convert your PSD into HTML email template:

MarkupBox:

HTMLFIRM:

XHTMLCandy:

PSDSlicing:

PSDGator:

Hope you liked the post. Social Bookmarking and Comments are most welcome as ever.