W3C Schools (via JCH) Beginner's Course in HTML for Emails

My first post about HTML emails was a bit premature. This list should have come first, then that post, then this one about sending HTML via Thunderbird. I realize my mistake and I apologize. I think that’s a good first step towards regaining your trust. I hope we can move on from this, I really do.

I also realize that I might be missing my audience by posting this potentially overly-technical information. I am, however, consciously taking the risk for a very important reason: I hope, like me, that you always want to learn more. Maybe you have no interest in putting an HTML email together from scratch, that’s just fine. This blog is about figuring things out, doing the best with what you have, and understanding the stuff that you might, in the end, contract out to another individual (hopefully me).

I bring to you the W3C (via JCH) Beginner’s Course in HTML for Emails. This list below links to classes on the W3C site along with instructions for how to use it. Because you use a limited subset of HTML and CSS to put together emails, it’s probably a good idea to just concentrate on this subset. Go ahead, learn everything, but if the point of learning HTML is strictly for emails, you might end up confusing what is allowed with what is not.

If you already know HTML and CSS, it might be a good idea to walk through these anyways. You might regain a long-lost HTML tag or element you never thought about anymore. It’s also a good idea to get am HTML table refresher (because you don’t use them hardly at all, right?).

I’m new to all of this… how will this post help?

One of the easiest ways to keep in touch with current/potential clients is through a regular email to a subscribed list. This is probably the easiest thing you can do as a boot-strapping business owner. Bulk-email services are very affordable and putting together an email is not difficult. Likely all of the HTML services out there offer you a few (or a lot of) different stock templates to send your email out on. Simply drop in your pictures and text, upload your list of emails, and blast away… but is it that simple?

Not in the slightest. The trick to HTML emails is getting them consistent across email clients and avoiding the ol’ spam filter (which can catch you even if you have your recipients’ permission). The best way to do this is to use valid, well-formed HTML markup and CSS styling.

OK, so it’s not too likely that you’re going to write one of these from scratch. In that case, use these tutorials to understand the stock templates that your using so you can modify them to your liking. If there are a limited number of stock templates to use, it’s a good idea to know how to at least change the font, color, header, and images to personalize the email to your business. You can also make the email look like your homepage to get that visual connection. Last but not least, you’ll want to make sure that the template is up to snuff before firing off all those mails. Remember, once you send, you can’t go back.

Walk through the classes below and try out a few of the techniques in the W3C Try-It editor (found on each page). It’ll take very little time and, in the end, you’ll have a better idea of what is actually going on instead of just praying and hitting send.

W3C (via JCH) Beginner’s Course in HTML for Emails

Basic HTML training

Introduction to HTML

Elements of HTML
For HTML emails, don’t worry about the “head” or “html” elements.

Basic HTML tags
Minimal elements are used in emails; headings are not used because of inconsistent handling across email clients.

HTML attributes
This is good information but we will be using styles (CSS) more than attributes.

Links to new documents and pages

HTML tables
This section is very important for HTML emails; all layout is completed using tables.

Lists and list items
The necessary elements are ul, ol, and li

Working with images
Pay close attention to floating images and “alt” text

HTML colors
Important but there is more flexibility available (see next link)

HTML colors (advanced)

HTML reference
Not everything on this list is used for emails but it still makes for a good reference.

Basic CSS training

Introduction to CSS

CSS syntax
This section is very important; many errors that occur are syntax errors.

CSS styles how-to
The only styles that are used in emails are in-line styles

Text formatting
Most of these work but some don’t; ignore letter-spacing, text-indent, word-spacing, white-space

Working with fonts
Note that “font-size-adjust” does not work in some email clients.

Borders in CSS
This works fine; can also be done in pixels (see link below)

CSS padding
Padding can also be done in pixels (se link below)

List formatting
Some markers work, some don’t (ignore everything but list-style-type and stick to the simple ones)

Pixel values

Additional resources

MailChimp – HTML Email Guide

MailChimp – HTML Email Tips for Web Designers

Sitepoint.com – coding HTML emails

< Take Action >

Suggest changes on GitHub ›

Comment via:

Email › GitHub ›

Subscribe via:

< Read More >

Tags

Newer

Older