HTML EMail Coding: How to create an HTML email from scratch (Tricks and Tips) – Part 1

You know, some time ago, one of my clients asked me to make an email ad. “No problem” – I said, and made an HTML page with CSS, DIV and with validated XHTML 1.0 code. Then I put the whole thing into Outlook Express, emailed it to myself and got shocked! It looked nothing like the HTML page I just made.

I cruised the web for solutions and suggestions and I managed to find really good information regarding it; however, I could not find a detailed guide for it.

I cannot put all I’ve learned in 1 post, since it takes too much time, and I’ve been trying to do it and notice that it only slowed down my postings. So I’ll start little by little giving you some idea about how to code and HTML email.

So, let’s create an HTML email from scratch. There is a whole new HTML coding way for that.

So, now, here’s how it should be done:

1. Head Section
Just as a regular HTML page. You can change it to XHTML 1.0 validation and keywords and description <meta> if you’d like.

<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Your Title</title>
</head>

2. Body Section – not like a regular HTML or XHTML.
– Don’t use DIVs – some EMail clients just erase them, use good old TABLES.
– Do not set a background image
, it will not work either.
Use <bgcolor> for specifying the background color instead of anything else. For example, it should be “bgcolor=”#000000” rather than CSS styling. And do not shorten the colors like this: #000. Instead use the full color code #000000.
Do not use email width larger than 640px if you can. Notice how Yahoo or Hotmail shrink the email field by putting their menu on the left and advertising on the right.

<body>
<!-- Wrapper -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF" width="640" align="center">
<tr>
   <td>Sample text</td>
</tr>
</table>
<!-- Wrapper ends -->

</body>
</html>

 

Stay Tuned! More details coming soon!

Advertisements

About Nookeen

http://nookeen.com

Posted on October 22, 2010, in Articles, CSS, HTML5. Bookmark the permalink. 5 Comments.

  1. Hi Arkadi,

    What will this email look like, will it have nav bar at the top?

    How detailed will the explanation be? i.e. beginner or already HTML/table savvy?

    I’ve just started learning how to create html emails, I know a little html and css, but there’s a couple of things: ‘rowspan and colspan’ that are frustrating me. I know what they are and what they do, but I just can’t see that in the email examples I’m trying to understand.

    Your article could be just what I need to progress

    Cheers
    Laurie

    • Hi Laurie,

      Accidentally, I started writing this article and came across a rather detail explanation of how to create HTML emails on http://articles.sitepoint.com/article/code-html-email-newsletters. Somehow when I needed it, I didn’t find this article and had to learn on trial and error. However, this is the best way to learn, I believe, since then you become very fluent with the code. I am sure you will find some good answers there.

      Also, rowspans and colspans are super confusing, I totally agree. That is why I recommend using an HTML coder with the visual capability like Dreamweaver or MS Visual Studio (formerly known as MS Font Page). Simply build rows and columns visually, merging them and twisting them with your mouse clicks and see where colspan and rowspan are used. It’s rather simple once you play with it.

      Also, I can show you some of the samples I made, maybe you find it useful in some way:

      1) – http://www.bradfordsoftware.com/promos/WRE-2010-aug/ – I used a TABLE structure but made most of the BODY as an IMAGE. It is not entirely recommended since email clients have the “image blockers”, and the receivers will not see anything if there is no text until they unblock the images. However, it is much prettier in my opinion.

      2) – http://www.bradfordsoftware.com/promos/julysale2010/index4.html – This email has a large top IMAGE header, but the BODY is text. Notice, I almost never use ROWSPAN or COLSPAN. You can do easily without them.

      3) – http://www.bradfordsoftware.com/promos/2010-oct/thanksgiving/ – Nowadays, what I do is create a TEXT header with some nice font as a precaution, so that the viewers know what’s the email is about even before they unblock the images. Email ‘subject line’ will also give them a clue, but I like to make sure that it is visible. Then, it is followed by an image to make it pretty.

      NOTE: recently I stopped putting WIDTH and HEIGHT attributes to a single image on a line. If the images are blocked, and you provide a WIDTH of let’s say 600px and a HEIGHT of 300px, it’s only makes a blank space in Outlook 2007-2010 with the stated size, without really showing anything. Even an ALT attribute is blocked. Not providing WIDTH and HEIGHT in Outlook 2007-2010 simply creates a small square about 20x20px. However, Outlook 2003 gives it a WIDTH of about 300px automatically while images are blocked. And if you have several images in a row, your email is extended destroying all your design due to the images stretching it. So, if I have 2 or more images in one row, not separated by let’s say a BR tag, I give it a WIDTH and HEIGHT. And you gotta provide both of them. Do not just provide a WIDTH and leave off the HEIGHT. Outlook 2003 makes it a square image i.e. if you provide a WIDTH of 600px, and no HEIGHT, it will show you a box of 600x600px (when images are blocked). Nice, huh? =)

      Telling you, emails are complex. =)

      Hope it helps, Laurie!
      Good luck!

      – Arkadi (nookeen)

      • Thanks for the reply Arkadi.

        I’ve seen that article, it’s a sample of the book ‘HTML Email that just works’. I’m reading that and using it as a reference when I get stuck!!

        Thanks for the info about Outlook very interesting.

        One last thing. Where do you find the TIME to learn all this extra work? I’m not that busy a designer, and I really struggle to put the time in.

        Your a better man than me!

  2. One last thing

    I’ve had a quick look at your examples, there very good. I wish I could show you the sort of design template I’m trying to construct. It’s for a fashion exhibition.

    Laurie

    • Hi Laurie, sorry for the delay. Thank you for your feedback, I am very glad to hear that you liked my work. =)

      And as for the free time for side projects, well, I must admit it is tough!! I have to spend a lot of time in the evenings and weekends working on stuff. Particularly right now, I am putting an unbelievable amount of time and effort into my website, nookeen.com, I recently published it and now I am in the process of creating a blog, plus content updates. Soooo time consuming!! Not even funny… The good part, however, is that I really like doing it, so 5 hours fly by real fast!

      I will be more than happy to look at your work, you can publish the link here or send me links thru email: arkadi # nookeen.com. # = @ And also, please feel free adding me on Facebook, Twitter or Linkedin.

      Looking forward hearing from you!

      – Arkadi

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: