kamikazemusic.com

Main menu

Skip to content
  • Home
  • Portfolio
  • About
  • Get in touch

This is a bit old - you may or may not notice the date on this post but it's over a year old. That doesn't mean it's not useful but we all know how fast things chance on the web so there's a chance that techniques and technologies described here could be a little dated.

The 10 Basics of HTML Email Newsletters

Posted on October 25, 2009 by dave

HTML emails - Armitage Online background

They’re becoming ever more popular as a form of cheap, affordable and effective marketing but HTML emails can still be a pain in the arse mainly due to the dated rendering by most email clients. They’re something I’ve found myself doing ever more frequently recently (even getting an inclusion on the Beautiful Email Newsletters Gallery) so here’s my 10 basic tips for putting together your own HTML email newsletters.

1. Forget how to code HTML properly

Remember when you were told that tables were evil and not to be used for layout? When you finally took that on board and starting floating things around the page and banished your tables for good? Well that’s about to change, welcome back your friendly layout based on, yes, tables!

To be honest it’s not too difficult and I’m sure for most it’s tucked away in the back of your mind just cringe as you write it and remember background images are out.

2. Indent your code

All those nested tables can get quite hard to track so it’s pretty useful to make sure your HTML code is indented and neatly organised otherwise you can soon get lost in there.

3. Style inline

For most email clients this isn’t a problem anymore but you still get the odd few that won’t read external style sheets so stick a copy in the body of your HTML just to be safe.

4. Alt tag your images

HTML emails rely heavily on images to constitute a large amount of the content and nowadays most email clients don’t download images automatically. So as well as slicing your images up sensibly make sure you have alt tags that include any text that appears on the image.

5. Don’t stress about the details

There are that many email clients that it is very difficult to make sure that your email will appear 100% correctly in each one. The only real way to do so would be to just include one image for the entire email and you’re risking falling foul of a lot of spam filters by doing that.

So don’t stress if you’re emails aren’t pixel perfect in Lotus Notes or there’s a little extra padding when Hotmail users view it. As a general rule I’d suggest making sure your email can be read in Outlook and Hotmail and then keep an eye on your stats to see what client most of your readers are using and fix for that in future mailings.

The only place to make sure your email is pixel perfect is your web version (a hosted version of the email that people can view). At the end of the day there aren’t any excuses for that one not looking right!

6. Get a good mass mail client

Don’t send to 100’s of emails using the copy to field in Outlook! I’ve seen it done and apart from being unprofessional it lacks any form of feedback facility. Being able to view stats on bounce rates, opens and click throughs is invaluable to your email marketing strategy.

There is a great variety of email marketing software out there and if I detailed them all I’d need a whole other post! What to pick will depend on your available budget and the amount of emails you’ll expect to send. Personally I use Campaign monitor alot but there are plenty of others, a few I’ve used or looked at in detail are Mail Chimp, Interspire, Vertical Response and DotMailer, but that isn’t even scratching the surface of what’s available out there!

7. Test

Test the email, not just for appearance but for tell tale signs of spam. Most spam filter providers will have available rules for how they filter out emails such as Spam Assasin’s tips. Also make sure you’re adhereing to the rules regarding who you can send to and keep within the bounds of the law, a good starting point is CAN-SPAM.

This will also be helped by following tip number 6 as a good mailer will have inbuilt apperance and spam tests.

8. Make sure your links are in

Make sure you have unsubscribe links in for a start, a lot of spam filters will check for them and some readers may well mark your email as spam if they aren’t there.

Also include a “view web version” link, and make sure it’s at the top of the email before any content. If your email doesn’t look right users aren’t going to scroll through looking for the link, quite often they’ll only use the a preview pane, so put it where they can see it right away.

Apart from that a forward to a friend link and plenty of calls to action linking to relevant parts of your website are a must.

9. Text version

Again for most spam filters this is essential but also for mobile readers and some other email clients. Make sure all of your text is included in the text version, importing it from your HTML can easily miss out any text included on an image.

10. Read it again!

Send it to yourself and read it, and get someone else too, there’s nothing more embarrassing than rushing an email only to realise it’s full of typos, or repetitive phrasing or something similar. I’ve recieved an “Octomner” newsletter before today!

So there you go, your basics for HTML emails, I’ll be putting together a more thorough guide to designing and coding an email and the differences from normal website coding so anything you’d like to be included leave a comment below.

Previous post
Trading Eye Search Fixes (v5)

Next Post
TradingEye show search query string in URL

This entry was posted in General Stuff, Quick Tips, Web Design, Web Development and tagged design, development, HTML email. Bookmark the permalink.

57 thoughts on “The 10 Basics of HTML Email Newsletters”

  1. creativecheetah
    October 26, 2009 at 13:02

    Thanks for this post. This is just what I needed to read about. Cheers!

  2. Dave
    October 26, 2009 at 13:04

    Not a problem, glad to be of help. Keep an eye on the blog as I’ll hopefully be following this up with a few more in depth articles on specific areas of HTML emails.

    Any requests leave them in the comments here.

  3. Dave Fiore
    October 26, 2009 at 13:44

    Dave — Great post. As you pointed out, there is quite a chasm between cool design and deliverable product if not coded properly — and even then there is a lot that can go wrong. But if you are keeping it simple, coding it old school and testing it, it should look pretty consistent. I am using http://www.emailonacid.com for free testing and it works great.

    And, as you say, even if every email does not look identical for every person, email marketing remains an incredibly cost-effective and productive tool for building relationships and creating loyal customers.

  4. Amber Weinberg
    October 26, 2009 at 16:29

    LOL I absolutely hate coding e-blasts, as it reminds me of my table coding in middle school. 😉 I actually have problems coding in tables, because I’ve forgotten how to do them and have to sit there and think about it for a few minutes.

  5. john lowson
    October 26, 2009 at 19:57

    Excellent post, some good basic sense tips here.
    I use tincan’s php list.

  6. Brad Ball
    October 26, 2009 at 20:07

    I think the general mindset is that html emails are easy and should take no time at all to put together, but in all honesty unless you do it daily its very challenging due to the fact that the coding style is so different from typical website coding. I find myself spending more time tweaking an html email than just coding a regular web page! Great post!

  7. Dave
    October 26, 2009 at 21:08

    I agree Brad, there’s times I’ve spent more time tweaking an email for Outlook than I have a webpage for IE6!

  8. Eric
    October 28, 2009 at 17:39

    Good post and great info. This is must know stuff for anyone creating html emails.

    Before my current job I worked in the creative dept for a major online/mail order retailer with somewhere around 15 different online stores. My main workload there consisted of their email campaigns. It was slow going at first but believe me you get pretty quick at making these emails and the “rules” become second nature when you have to make 3 or 4 a day. 😀

  9. Igor
    October 28, 2009 at 19:34

    Great article but I would like to add something from my experience. I don’t use shortcuts when I write inline styles. It makes it longer but I am sure it will work
    Don’t use padding with – in thunderbird padding works but in Outlook it doesn’t:(
    Remember about hard spaces! –   saves you a lot of trouble because for example some words cannot stay at the end of the line and this is very helpful to avoid it.
    My 2 cents:) Thanks

  10. Igor
    October 28, 2009 at 19:35

    Don’t use padding with image tag – This sentence should look like this:)

  11. nubok
    January 16, 2010 at 08:41

    Good post and great info. This is must know stuff for anyone creating html emails.
    .-= nubok´s last blog ..??? ??? ?????????? ????? ????? ?????????????? ? ????????? =-.

  12. Kreon
    January 24, 2010 at 16:55

    Excellent article, added to bookmarks.

  13. Liquid
    February 1, 2010 at 10:28

    Thanks Dave very useful post!

  14. Bradbox
    February 7, 2010 at 08:35

    When designing and sending newsletters, be aware that a large number of recipients will read your newsletter on a mobile handset: http://bradbox.posterous.com/email-away

  15. Dibil
    February 13, 2010 at 04:57

    Thanks for interesting article
    .-= Dibil´s last blog ..?????????? ? ???????????? ????????? =-.

  16. html link
    February 27, 2010 at 20:44

    Number 2. says it all! Most problems stem from nested tables. I second the motion of making sure your HTML code is indented and neatly organised! It only takes a few minutes and it will save you heartache.

  17. Beautiful russian women
    March 19, 2010 at 19:46

    Thanks for helpful information. Using HTML emails is a great problem for me. I hope due to your tips I will cope with it.

  18. Hipolito M. Wiseman
    March 30, 2010 at 04:24

    Great. Now i can say thank you

  19. Kasey Sharifi
    March 30, 2010 at 05:19

    Hi, my name is Kasey Sharifi. I’m so glad to have found http://www.kamikazemusic.com/quick-tips/basics-html-email-newsletters/. I really enjoyed reading this post. This post provides the information that I need. I also have one comment to you. You should spend some time to email marketing solution.

  20. Indian handicrafts
    April 28, 2010 at 16:46

    Great resources and exactly what I was looking for. Thanks for the awesome post.

  21. Dima
    April 29, 2010 at 18:24

    enjoyed reading this post.

  22. Dima
    April 29, 2010 at 18:25

    When designing and sending newsletters, be aware that a large number of recipients will read your newsletter on a mobile handset:

  23. MK
    May 1, 2010 at 13:51

    Great work. I’ve just started my own blog on email marketing and I’m still learning 🙂

  24. Robert
    May 5, 2010 at 18:05

    These are some great tips, thank you. I’ve also been getting into emailing more recently and this is the area I was having trouble with. I just setup my first MTA and am getting configure to begin bulk mailing. Thanks for the tips.
    .-= Robert´s last blog ..TV Shows Again Dominate Facebook Growth on Our List of Top 20 Pages =-.

  25. David Peers
    May 15, 2010 at 21:12

    This blog aided me somewhat in narrowing down some problems with the latest release, Why do they always leave out vital documentation when they release a new version? It may be trivial to them but not for us! I’m sure i’m not alone.

  26. Carlos
    June 3, 2010 at 01:02

    Mailing can be such a confusing thing. I’ve been muddeling around reading articles and blog posts on tips etc, but I’ve still not had success. Once I finally do start mailing successfully, I can use some of your suggestions, thank you!
    .-= Carlos´s last blog ..The Art of Solo Travel: A Girls’ Guide (e-book review) =-.

  27. Jenny
    June 3, 2010 at 19:26

    You covered several area’s I was unsure about with mailing. I’m building a homegrown list and I’ve run into several issues. Off to try some solutions, thanks again!
    .-= Jenny´s last blog ..Are Adrien Brody and January Jones Dating? =-.

  28. Tom
    June 17, 2010 at 17:34

    It never ceases to amaze me how confusing mailing can be. There are so many factors that determine your delivery rate and 100 other things. Then there is the email subject, copy ,and so much more. This article helps me along my way, so thanks for it.
    .-= Tom´s last blog ..Hilton joins Florida hotels in offering "Beach Satisfaction Guarantee" =-.

  29. Shelly
    June 17, 2010 at 17:52

    I’m trying to get a newsletter started for all of my websites. I feel like I am missing out on possible upsells and customer retention. Thanks for the article, this will help me.
    .-= Shelly´s last blog ..Big Brother Star Causes Fatal Crash! =-.

  30. Erin
    July 20, 2010 at 04:16

    simplest thing can make the newsletter messy.
    if you don’t know where to start to design the newsletter, get some inspiration from http://www.email-gallery.com

  31. Web Design Hippo
    July 28, 2010 at 09:06

    Thanks for the tips, these will come in handy on the next email I send!

  32. Irene
    August 18, 2010 at 18:40

    Thanks, I want now to set up email newsletter (and not to call cald ;-)), so it is very nice

  33. Judy
    August 23, 2010 at 01:34

    I also think that customers are often more forgiving of less-than-perfect emails.  The smart ones realize that a single email cannot be properly rendered in every client.

  34. Kam
    August 24, 2010 at 11:01

    Oh, that’s wonderful.
    Keep it up!

  35. Louise Williams
    September 2, 2010 at 11:03

    I never did buy into that ‘must-not-use-tables’ snobbery. It works brilliantly and keeps things orderly.
    Got to say though, I would never of thought of ALT tagging my images in an email newletters! Thank you! I go out of my way to make sure I do it on my websites, but for some reason, I don’t in my emails.
    I’m sure you are getting a lot of this already, but genuinely, thank you for those tips, I have found them very useful indeed.

  36. Mike
    September 3, 2010 at 10:26

    Good list. Regarding point 5, you’re basically saying you won’t win them all, so don’t try too hard? Thanks

  37. Dave
    September 3, 2010 at 13:58

    I wouldn’t put it quite like that. There’s pretty much no way you’ll get your email looking perfect in every email client so you’ll need to accept the odd slight difference.

    But that’s no reason to send out an email that looks rubbish in certain clients, you should still be trying as much as possible to make it look good for all recipients, just no necessarily a pixel perfect copy of the original.

    Probably better to phrase it “you won’t win them all, but try to get them as close as you can” – the more you put emails together the more you’ll be aware of the quirks of certain software and be able to work around it.

  38. Online Silagra
    September 6, 2010 at 18:14

    The important parts are the analysis methods and the techniques. I’m sure that the image he

    chose was just a convenient example.

  39. SilverJewelryWorld
    September 12, 2010 at 17:52

    Yes! I agree with you!
    You are right!

  40. Gertrudis Kirberger
    October 25, 2010 at 00:46

    Great stuff, loved this article!

  41. Internet Marketing Cornwall
    December 14, 2010 at 06:43

    HTML is a shortcut to promote the business by internet site.HTML is a grate product thanks to this post.

  42. Kurzreisen
    January 16, 2011 at 20:31

    Nice List, we want to test out some new Email Newsletters for our site and will use these guidelines to avoid mistakes. Thanks

  43. Foodies Heaven
    March 15, 2011 at 12:34

    Excellent article I am in the process of setting up newsletters for my new blog.

    Many thanks.

    Ian

  44. Martha Mayers
    March 31, 2011 at 16:06

    I’ve tried Mail Chimp free account. It works well! I have not many subscribers yes, so I don’t need paid accounts on famous email marketing websites as Aweber. Thanks for article!

  45. Newsletter Templates
    June 27, 2011 at 11:27

    Good tips! For those who don’t have the needed skills to design and code his own newsletter, I recommend to use a premium email template from http://emailwear.net

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top

Subscribe to the RSS feed Follow me on twitter - @dsparks83

Recent posts

  • ChatGPT might be a game changer for coding
  • How to deploy a WordPress staging site with Duplicator
  • Theme my login and WordPress updates in general

Popular posts

  • We all dislike IE6 but lets not be childish 1 view
  • CSS3 Hover Tabs without JavaScript 1 view
  • HTML5 CSS3 starting template 1 view

Pingbacks and Trackbacks Click to show

  1. uberVU - social comments says:
    October 27, 2009 at 11:25

    Social comments and analytics for this post…

    This post was mentioned on Twitter by manicstate: The 10 Basics of HTML Email Newsletters : http://tr.im/D2tC…

  2. Guest Post on Six Revisions « Kamikazemusic.com says:
    November 18, 2009 at 20:09

    […] thinkingMopay Flash and GIF BannersStamford ClothiersTradingEye show search query string in URLThe 10 Basics of HTML Email NewslettersPopular PostsThe 10 Basics of HTML Email NewslettersWe all dislike IE6 but lets not be childishCSS3 […]

  3. Wittenberg Werbung » Blog Archive » HTML-Newsletter richtig coden ? says:
    January 5, 2010 at 13:04

    […] The 10 Basics of HTML Email Newsletters […]

  4. Ultimate Guide to HTML Emails – Basics, Tips, Tutorials and Resources | Cairns Web Design says:
    July 18, 2010 at 03:03

    […] 6. The 10 Basics of HTML Email Newsletters […]

  5. Ultimate Guide to HTML Emails – Basics, Tips, Tutorials and Resources | CG Stream says:
    July 18, 2010 at 05:52

    […] 6. The 10 Basics of HTML Email Newsletters […]

  6. Ultimate Guide to HTML Emails - Tips,Tutorials and Resources says:
    July 18, 2010 at 16:17

    […] 6. The 10 Basics of HTML Email Newsletters […]

  7. Ultimate Guide to Email Marketing Succes - Basics, Tips, Tutorials and Resources » FullView Design says:
    July 21, 2010 at 18:58

    […] 6. The 10 Basics of HTML Email Newsletters […]

  8. HTML邮件的终极指南 | PM.Camp says:
    July 29, 2010 at 05:56

    […] 6. The 10 Basics of HTML Email Newsletters […]

  9. e-mail newsletter 101 на български | Уеб дизайн,реклама,seo,e-магазини says:
    August 2, 2010 at 15:32

    […] съвети са преведени от статията The 10 Basics of HTML Email Newsletters публикувана в http://www.kamikazemusic.com […]

  10. 20 Helpful Tips even the Pros Use « the artist amber says:
    May 22, 2012 at 22:17

    […] http://www.kamikazemusic.com/quick-tips/basics-html-email-newsletters/ […]

  11. Email Tasarımı ve Kodlaması için 20 Altın Kural | Burak Çanga says:
    May 30, 2012 at 08:35

    […] http://www.smartbiz.com/article/view/2076/1/53 http://www.kamikazemusic.com/quick-tips/basics-html-email-newsletters/ http://www.mailchimp.com/articles/email_marketing_subject_line_comparison/ […]

  12. FullView Design – Ultimate Guide to Email Marketing Success says:
    December 30, 2013 at 10:28

    […] 6. The 10 Basics of HTML Email Newsletters […]

Twitter

Follow me on twitter @dsparks83

Don't be a stranger

Fancy working with me? Just want to ask a question? Feeling lonely and just fancy talking to someone? Why not get in touch by heading to the contact page.

Availibility

I'm currently available for work at around a months notice.