Getting Started with HTML E-Mails

Veröffentlicht: Januar 5, 2011 in CSS, HTML / XHTML, Tutorials

written by Tessa Thornton on

HTML emails are a great way to keep clients updated on the latest updates related to your business or product, but they’re a bit tricky. CSS support in email clients is inconsistent. As a result, we must resort to ancient techniques, such as using tables, and inline CSS. Today, I’m going to walk you through the process of creating simple HTML emails.

Intro: HTML Email

As a freelance web developer, coding HTML emails are one of the more challenging tasks that I have to deal with. Fortunately, when one of my first clients asked me to design and code his email newsletter, he was patient enough to let me go through the long and frustrating process of figuring it all out. You might not be so lucky, so prepare yourself with this tutorial.

The Problem: Email Clients

You think IE is a pain in the butt? Wait until you meet Outlook 2007. Because of the vast differences in HTML/CSS rendering between email clients, using modern coding techniques will result in a rather catastrophic mess in many popular email clients. Email clients simply don’t render HTML in the same way as browsers do — not even close in many cases. Things like floats, background images, and even margins are no longer part of your vocabulary. So what’s a standard-loving coder to do?

The Solution: Code like it’s 1997

That’s right. Tables. Cellpadding, cellspacing, colspan, all those gross things you thought you’d left behind. Tables are the only way to get consistent email layouts, so it’s time to (temporarily) forget your CSS-loving ways and embrace un-semantic, messy tables.

Step 1: The Design

Keep it Simple

When designing an HTML email, keep simplicity in mind. The design we’re using today has multiple column layouts, mostly for demonstration purposes, but consider sticking to two columns throughout when coding your own newsletter to save yourselves a lot of headaches.

Minimize Image Use

Remember to not get too fancy with your designs since Outlook doesn’t support background images. In fact, depending on your client’s needs, you may want to skip the Photoshop process entirely to force yourself to keep the design practical. That said, we’ll be using Photoshop here so you can get a better idea of our plan.

You can use background images for decorative reasons, as long as the email is legible and makes sense without them. For example, we’re going to add a little gradient to our header, but it’s no big deal if it doesn’t show up.

Thinner is Better

Because email client preview windows are often just a small fraction of screen width, you generally want to keep your design under about 600px. Nobody likes horizontal scroll bars.

Be Consistent

Remember that we’re going to be using inflexible properties like cellpadding and cellspacing for spacing out our elements. It’s prudent to try and keep the spacing between elements consistent.

Our Design

This design is similar to one I used for a client newsletter last summer, but simplified. It’s not beautiful, but that’s not the point here. It’s simple and consistent, and has a number of layout options so you can see how they differ.


Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

Du kommentierst mit Deinem Abmelden /  Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )


Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )


Verbinde mit %s