13 tips for better HTML emails

Designing and sending HTML newsletters can be a little tacky sometimes. The output of HTML in email apps is still much more limited than in web browsers, which means that you have to adapt the way you are designing your email templates. Following are a few tips to improve the HTML of your newsletters.

1. Use inline CSS styles

Unfortunatly you’ll have to forget about external style for email template design. The best solution is to declare the CSS in your HTML tags like that: <p style=”color:#000;”>. If you declare your CSS in your header, Gmail will not read it which you do not want.

2. Limit the width of your template

When creating a template for your email campaigns, don’t forget that many of your subscribers will read it in an online email app like Gmail or Hotmail. Most email software will have a sidebar that takes away some space, so it would be safe to have a template that doesn’t overpass 600px wide.

3. Avoid using too many images

Most of the time email apps will block images unless the user allows them, so you should not rely too much on images for your email understanding or the readers will just see an empty (or almost) email.

4. Offer a link that lets the subscribers unsubscribe

This is just good manners, don’t force your newsletter subscribers to stay subscribed if they don’t want to. What would you think if sales people locked the door behind you when you enter a shop?

5. Let your subscribers access the web version of the email

This gives you a way to offer a well layed-out version of your email to readers who can’t read it in their email app.

6. Don’t use flash

Most email clients will not read flash objects, so it’s not a very good idea to include it. Sometimes it will even give you security alerts.

7. Suggest to your readers to add you to their contact list

By doing this, you’re inviting your subscribers to create a closer relationship, but you also avoid getting your email ending up in the spam folder and get a better chance to have your images displayed.

8. Don’t use forms in your emails

It will not work in most email readers, just link to a form on the web.

9. Add the dimensions to images

Adding dimensions will help by showing a placeholder when images are not displayed, which will help for not breaking your layout even when images are not shown.

10. Provide an alternate text to all your images

If the images are not shown, let the users know what they are missing.

11. Don’t use PNGs with alpha transparency

Some email apps will not display PNG transparency, Lotus Notes 6 and 7 will not even display PNGs at all, so why bother? I’m afraid that you’ll have to wait that email apps evolve.

12. Don’t use CSS images

CSS background images (example: background:url(image.jpg);) will not display in many email programs, so try to avoid them.

13. Have a text-only version of your email

For the readers who can’t access your HTML email, make sure they can read it by providing a text-only version of the newsletter.

This is indeed important to be more successful on your personal or business site. Effective communication from the readers and the webmaster is essential. And having a great web host would be very helpful in reaching this success. You don’t have to worry about spending too much for it. You can check the available cheap hosting plans in the market.