• Feed RSS

7 Exciting Web Development Trends for 2011

7 Exciting Web Development Trends for 2011: "
At the end of December, you read Andrew’s list of the hottest technologies, tools, and resources to come from 2010. Today, we’re going to look forward, and take a peek at some exciting emerging technologies and trends.


A Word from the Author


The tools and technologies that we, as web developers, work with is in a state of constant flux, much like every other industry. What separates us from the rest is that we have to learn, unlearn and relearn new developments at a much faster rate, much more frequently.


Today, I’d like to talk about a few technologies and trends that I think are going to be quite important in the coming year: a pseudo prediction/wish list/what we’re going to cover this year post of sorts.


The technologies listed below weren’t exactly hatched recently. In fact, some are quite old and have been in use for a while now, in their insular niches. That said, I do feel that this is the year they gain even more mainstream awareness. As a great man once said, An invasion of armies can be resisted, but not an idea whose time has come. Let’s get started!



1. noSQL


Tutorial image

Why are people excited about noSQL? And by people, I mean some of the big fishes including Google, Facebook and Twitter. For one, the concept of noSQL has redefined the way we perceive databases and the corresponding interactions.

Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability.


Databases, historically, have almost always been about implementing the relational model and being fully ACID-compliant. If your transactions weren’t ACID, or your database wasn’t relational, people scoffed at you for being a “kiddie” database.

The issue is the relational model isn’t really necessary everywhere. Neither is ACID, though many noSQL implementations enforce some sort of data integrity and consistency. Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability. Applications with massive amounts of read/write operations are an excellent choice.

Another big factor for me is the simplicity it brings to my schema: your data models can now become a lot more sane. I can’t wait to not muck around with my models just to make it fit into the relational model.



Implementations of Interest


noSQL at Facebook


Tutorial image

There maybe no better example than Facebook when it comes to how to handle enormous traffic. It’s no surprise that traditional methods of scaling won’t quite work for Facebook.

Now part of the Apache Foundation, Cassandra, a noSQL implementation, was developed in-house to help with searching data. Currently, it powers Facebook’s inbox search.

Facebook also makes use of another noSQL solution, HBase, for its messaging platform.

noSQL at Twitter


Tutorial image

Twitter’s reliability used to be, well, infamous. On of the main reasons was that their setup wasn’t really scaling all that well. Twitter now uses a mix of SQL and noSQL to manage their data.

Just like Facebook, Twitter uses a mix of Cassandra and HBase. Cassandra is used for all the front facing applications while HBase is used to data mining, analysis and analytics.



2. Serverside JavaScript


JavaScript is, arguably, the most important language for the next few years — and for good reason. Much of the cruft and idiosyncrasies associated with the language is more due to browser quirks, and less due to the design of the language itself.

It has been satisfied with residing merely in the browser for a long time, however, this trend is changing. Implementations and interest in server side JavaScript has been growing over the past year and I fully expect it to explode even further this year, thanks to the screamingly fast JavaScript engines to run your code on.

To the people questioning the need for JavaScript on the server side, I present you with this single situation, among lots of others.

Whatever your backend language of choice is, you’re ultimately going to come back to JavaScript for constructing the frontend. Wouldn’t it be easier to simply use JavaScript universally?




Technologies of Interest


node.js


Tutorial image

node.js makes creating real-time, high performance, scalable applications a cinch. It’s primarily event-driven and runs on V8, the JavaScript engine that powers Chrome and makes it freakishly fast.

It doesn’t spawn a separate thread for each connection like most others. Instead it works through asynchronous operation which significantly minimizes latency. If it has stopped making sense, remember to read a primer on node.js published right here on Nettuts+. We’ll also be covering this topic extensively over the next few months so stay tuned!



3. Easier Hosting, Deployment and Scaling


Tutorial image

Bottom line, scaling is a pain.


The rise of as a service businesses have only helped developer tangentially in the past. Most of them were ports of functionality that we required, with the exception of maybe project and bug tracking. Recently, a number of services have opened up that significantly ease up a developer’s life.

Deployment has always been an issue with non-trivial web applications since you need to do more than copy over the files to the server. Scaling, too, has been an issue — not just in bandwidth, but in computing capacity as well. We must setup load balancers, a caching system, maybe even a lightweight server to serve up static content. Bottom line, scaling is a pain. It’s a rather involved activity, especially when you’re strapped for time.

Platforms as a service, as they’re popularly called, remove almost all of the hassle for a developer. Deploying? Merely push to a git repo and everything is handled for you. Expecting a massive rush of traffic and worried whether your application will buckle down? Merely add more nodes or workers to your instance and you’re done.



Services of Interest


Heroku


Tutorial image

Heroku is a perfect example of the simplicity services like these can bring to the table. Deploying to my app is really just pushing code to my github repo. Computing capacity and memory, among others, can be dynamically allocated as well. As an added incentive, a lot of noSQL solutions are available as well to be used, including Redis and MongoDB.

Amazon’s Web Services


Tutorial image

Amazon Web Services is an umbrella term for a number of awesome services they run. The ones of interest today are:

  • Amazon Elastic Compute Cloud [EC2] let’s you create virtual servers that are incredibly scalable. You just need to choose the amount of power you require.
  • Amazon Simple Storage Service [S3] provides cheap, reliable web based storage. All Envato sites and marketplaces use S3 almost exclusively to store and serve content.



4. Utility JS Libraries


Even though we have a massive number of JavaScript libraries that abstract away some of the more mundane tasks, like DOM manipulation and AJAX, they leave a lot of functionality untouched.

We saw a number of utility libraries, such as Modernizr that gained immense popularity last year — a sign that developers are always looking for nifty libraries that let them use cutting edge technology whilst saving time. This year should be even. Here are a few tools that might pique your interest.



Libraries of Interest


Head.JS


Tutorial image

This library is a true powerhouse. It takes care of loading your scripts in a parallel nature, mimics Modernizr by adding specific classes to your document and much more. Definitely a much watch!

underscore.JS


Tutorial Image

This is pure utility library that brings a powerful set of utility methods to JavaScript without extending the native types underneath. Similar to how jQuery maps to the $ characters by default, underscore maps to the _ character. Check out the site for a full rundown of the utility functions it contains.

mustache.JS




This is a simple templating library that should make handling data much more simpler. You simply need to create a custom template, map it to your data and run the code. If you’re even the least bit interested, you should check out a quick tip we published a couple of months ago!



5. Better Unit Testing for JavaScript


Testing is an integral, intrinsic part of the software development process.

Unit testing, specifically, is the testing of individual software components.


The difference is that these tests are performed by the developer, since writing tests, in general, requires knowledge of the source.

JavaScript has lagged behind other development platforms when it comes to proper testing. Even now, unit testing is not an oft heard statement among typical JavaScript developers and part of the reason is the lack of proper tools to do so. Here are a few tools that should make it significantly easier for you to test your code:



Tools of Interest


QUnit


Tutorial image

Made by the jQuery team and used as the official test suite for the platform, QUnit is a powerful unit testing framework. It can test any generic piece of JavaScript code, even code that needs to be executed inside a JavaScript engine.

FireUnit


Tutorial image

FireUnit is implemented as a Firefox extension and requires Firebug. This may be good or bad depending on your perspective. For me, since Firebug already is a big part of my development workflow, this is a boon. FireUnit adds an additional test tab to Firebug through which you can access your tests and results.

JsUnit


Tutorial image

JsUnit is an open source testing framework for JavaScript. Inspired by JUnit, it’s written entirely in JavaScript and runs inside your browser. It also includes a platform for automating the execution of tests.



6. Raphael-esque Libraries for Canvas


HTML5 brought us the canvas element which opened up new vistas for us. It provided low level, per pixel control over the drawing area which was unheard of before. Previously, you’d usually have to resort to either rendering an image in the backend and relay it or using a browser plugin.

Canvas is a game changer in that aspect.


The issue here is that it is truly low level. Per pixel control is nice but when you’re trying to create something bigger, you’ll want these details abstracted from you. Kind of like how Raphael abstracts the details from the SVG element. And mind you, SVG is a lot more easier to work with.

Libraries like the one I’m looking for aren’t really limited to merely providing interfaces for shapes and so on. A number of game libraries have even been released which let you work at an ever higher level.



Libraries of Interest


Processing.JS


Tutorial image

Processing.JS is an excellent library that provides a high level interface to the canvas element. It’s a JavaScript port of the Processing, a fun, little language to help non-programmers understand programming.

The library completely abstracts you from the initialization and other trivialities of the canvas element and let’s you create incredibly suave content.

Akihabara



Akihabara is an extensive library that let’s you create games rapidly. As expected, it makes use of the canvas element.

It helps you with a large number of tasks including rendering, collisions and input. Even, relatively, esoteric features like z-indexed objects and double buffering* are supported.

* If you understand what this means, you get a cookie!



7. True JavaScript Frameworks


Server side development has it good.


Server side development has it good. You have plenty of choices, regardless of which language you’ve chosen to work with; you can choose anything between a modular pick-your-component frameworks, to all encompassing full stack frameworks, to everything in between.

In the front end though, we’ve had to work with libraries instead of frameworks, even though there is only one language to deal with: JavaScript. DOM manipulation and other assorted functionalities are abstracted away, sure, but when building a complete UI for an application, low level functions like these are but a fraction of your worries.

Usually, you’d have to choose something for your templating needs, UI and widgets, dependency management, DOM manipulation, MVC and other assorted functionalities. A number of frameworks have been slowly gaining momentum that, even though aren’t quite all encompassing, promise a much better front end development experience.



Technologies of Interest


SproutCore


Tutorial image

SproutCore is a JavaScript framework, originating from Apple, that lets users create desktop like web applications rapidly. Needless to say, the entire frontend requires only JavaScript.

The framework consists of a number of parts including a widget system to handle different parts of the UI and a key value observing system to wire up each part which significantly reduces the amount of glue code in your application.


One of the most public facing applications of SproutCore is Apple’s MobileMe.


Cappucino


Tutorial image

Cappucino, developed by 20North which is now owned by Motorola, takes a completely different approach to such a framework. Cappuccino introduces a focused, small superset of JavaScript called Objective-J.

The platform itself consists of the language itself, Objective-J, and a comprehensive library which is a port of the Cocoa frameworks on OS X.



And That’s a Wrap!


And there we go. I’ve listed seven trends that I’m hoping truly gains mainstream awareness this year. Did I miss anything important? Let us know in the comments. Thank you so much for reading
"
read more

Getting Started with HTML Emails

Getting Started with HTML Emails: "
HTML emails are a great way to keep clients posted 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.

1



Step 2: Planning Our Code


In my experiences, HTML email code gets very complicated, very quickly. It’s important to have a plan of attack. So here’s the plan (we’ll come back to this, don’t worry if you don’t follow).

First, we start off with one big 100% width table with a grey background, this is our “wrapper” table.

Next up, note that there are three more tables inside the wrapper table: one at the top for the “view in browser” link, one in the middle for the main content, and one at the bottom for the “unsubscribe” link.

2a

Finally, within the main table, each horizontal section of content will be within a table row and a table cell. These table cells, in turn, will contain another table to host each content section:

2b

Cellpadding and Cellspacing


Instead of using the margin and padding CSS properties, we’re going to be using the cellpadding and cellspacing HTML attributes. Think of cellpadding as being pretty much the same as CSS padding - space inside an element, around the content. Cellspacing is the space between data cells on a table.

Our #main table is going to have 15px of cellspacing, so that we’ll have 15px of whitespace around the whole main content section, and 15px between each horizontal group. Cellpadding and cellspacing only apply to the parent table, not the children. If we don’t want any cellpadding or cellspacing, we need to specify that for every table.



Step 3: Coding it Up


Now we can start the process of coding our newsletter, section by section. In opposition to best practices, we’re going to be doing some styling along with structure. We’re going to start with the layout, including all the spacing and padding, and background colours, after that, we’ll do typography and other CSS stuff.

Setup


Setup for an email is really simple: only the html, head and body tags are involved. Let’s add in the wrapper table and the three main tables we discussed previously.

As far as doctypes are concerned, there are a few different approaches, as detailed in this article. In our case, I’ve decided against using one, because we don’t need any of the stuff we would get by declaring a doctype. It will get stripped out in most cases anyways.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nettuts Email Newsletter</title>
</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- top message -->

<table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">
</table><!-- main -->

<table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
</table><!-- bottom message -->

</tr></td></table><!-- wrapper -->

</body>

</html>


Generally speaking, it’s better to assign widths to individual table cells than to the table itself.

Notice that the two message tables have cellpadding values of 20px. This will space out those paragraphs from the main content. The main table has 15px of cellspacing. This is to establish a consistent vertical rhythm. Since each section is within its own table cell, there will be 15px between them all.

Also notice that the tables are all set to align='center', and we have explicitly defined their widths. In HTML emails, it is generally best not to define widths for wrapping tables. You’re better off defining widths for each cell, but in this case we’ll break this rule because we have cellspacing/cellpadding to worry about.

Message Tables


These are super simple: just paragraphs within center-aligned cells.

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
<tr>
<td align="center">
<p>Trouble viewing this email? <a href="#">View in Browser</a></p>
</td>
</tr>
</table><!-- top message -->

Ê

The bottom message is exactly the same.

Header


The header is pretty simple, it’s only one column, with three rows. Since we have that nice blue background, we’re going to need some padding around each cell to get the text away from the edges.

<tr>
<td>
<table id="header" cellpadding="10" cellspacing="0" align="center">
<tr>
<td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
</tr>
<tr>
<td width="570" bgcolor="8fb3e9"><h2>News and Events</h2></td>
</tr>
<tr>
<td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
</tr>
</table><!-- header -->
</td>
</tr><!-- header -->

Remember to set the width of each cell, which in this case is 570px (600px-15px of cellspacing on each side). We’ve also set the align property for the date to right. Right now, we’re not adding in the background image, we’ll do that later. In the mean time, just use a lighter blue.

Notice that we’re using bgcolor instead of style='background:'. This is because html values are better supported in email clients than CSS properties.

3a

That’s what we’ve got so far, it looks pretty bad, but the layout is just what we wanted.

Content Section – 2-Column


Our first content section is a left-aligned image with two headlines beside it. Instead of using CSS floats like we normally would, we’re going to make a table with three cells:


  • one for the image,
  • one for the space between the image and the headlines,
  • and finally one for the headlines.

3b

For the image with the border, we’re going to nest another table within the cell and set the cellpadding to 5px and give it a grey background colour. Cellpadding adds to the width of the element, so we need to reduce the defined width of the cell by 10px.

<tr>
<td></td>
</tr>
<tr>
<td>
<table id="content-1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="170" valign="top">
<table cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
</tr>
</table>
</td>
<td width="15"></td>
<td width="375" valign="top" colspan="3">
<h3>All New Site Design</h3>
<h4>It's 150% Better and 40% More Efficient!</h4>
</td>
</tr>
</table><!-- content 1 -->
</td>
</tr><!-- content 1 -->

Notice:


  • We’ve added an empty table row and cell above the content. Because we have 15px of cellspacing, we can use an empty cell to add 15px of spacing between elements. In my testing, this works fine empty, but you could always add a non-breaking space to be sure.
  • We’re setting the v-align property to top. This is important, because it aligns each cell with the top of the row. The default is middle, which leads to some weird results.
  • We’re using dummy images from dummyimage.com because all images in HTML emails must be hosted (more on that later) and it’s much easier to use generated images. Check out the site, it explains how to specify the image you want with the URL.

Content Section – 1-Column


This is a really simple section: just a one-column table with a paragraph inside. Don’t forget to set the width of the cell and to set the table to centre align.

<tr>
<td>
<table id="content-2" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
</tr>
</table><!-- content-2 -->
</td>
</tr><!-- content-2 -->


Dividers


To add vertical space (more than the 15px of cellspacing we have) we have to use a spacer image. Just like the 90′s! We could use a spacer gif and upload it, but at the moment it’s faster to just use another dummy image. I’ll leave it grey so you can see it, but later we can set it to white on white.

<tr>
<td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>

Which gives us something like this:

3c

Content Section – 3-Column


For a 3-column section, we use five table cells, one for each column, and one between the columns to separate them.

3d

<tr>
<td>
<table id="content-3" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="180" valign="top">
<table cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
</tr>
</table>
</td>
<td width="15"></td>
<td width="180" valign="top">
<table cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
</tr>
</table>
</td>
<td width="15"></td>
<td width="180" valign="top">
<table cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
</tr>
</table>
</td>
</tr>
</table><!-- content-3 -->
</td>
</tr><!-- content-3 -->

Pretty straightforward, use the same method for the border as we did in the 2-column section. Don’t forget the v-align!

The three text columns are exactly the same process.

<tr>
<td>
<table id="content-4" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="180" valign="top">
<h5>Exciting New Products!</h5>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
</td>
<td width="15"></td>
<td width="180" valign="top">
<h5>A Newsletter Every Month</h5>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</td>
<td width="15"></td>
<td width="180" valign="top">
<h5>New and Improved Forum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table><!-- content-4 -->
</td>
</tr><!-- content-4 -->

Add in another divider at the bottom, and we’re almost there:

3e

The Rest…


Everything else is just repeating what we’ve already done: a 2-column section and a 1-column section with dividers between them.

<tr>
<td>
<table id="content-5" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="267" valign="top">
<table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>
<img src="http://dummyimage.com/267x200/e9e9e9/fff" />
</td></tr></table>
</td>
<td width="15"></td>
<td width="278" valign="top">
<h4>This is a heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</td>
</tr>
</table><!-- content-5 -->
</td>
</tr><!-- content-5 -->
<tr>
<td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>
<tr>
<td>
<table id="content-6" cellpadding="0" cellspacing="0" align="center">
<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p align="center"><a href="#">CALL TO ACTION</a></p>
</table>
</td>
</tr>

And the main layout is now complete:

3f

A Word on Images


Unlike regular web pages, you can’t just put all your images in a folder and then use relative pathways to link to them. All links must be absolute! When I’m developing an email, I usually host images on a subdomain or on Amazon S3. When I’m ready to send out the email for a client, I move all the images to a subdomain of their website.

All image links must be absolute!



Step 4: Styling the Email


We can’t use an external stylesheet, and we can’t embed the CSS in the head of the email, because some clients will strip out the entire head tag, or ignore style tags. We’re going to have to use inline styles, which is a huge pain. Fortunately, there are useful services available that will take embedded CSS and make it inline. I use a website called Premailer, where you can pasted in the code directly and it outputs the same thing with inline CSS.

We’re going to do embedded CSS for this tutorial, then we’re going to make it inline with premailer.

Premailer takes embedded CSS and makes it inline!

Basic Reset


We’re not going to do a hard reset with the * selector like you might do for a web page. Using the defaults will actually yield more consistent results. The only elements whose padding/margins we’ll need to reset are ones that will have space around them (from cellpadding/cellspacing) like our header headings, or our paragraphs.

You’ll also notice a margin around the wrapper table, which is just default styling on the body element.

<style type="text/css">
body, #header h1, #header h2, p {margin: 0; padding: 0;}
</style>

Typography


Nothing very special about the typography for an email since it’s pretty much the same is it would be for a web page. Don’t use shorthand declarations (like font: ) because you won’t get consistent results.

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; font-size: 24px; }
#header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
#header p {color: #ffffff; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; font-size: 12px;  }
h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; line-height: 1.5;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

And look: it’s significantly better now!

3g

Background Images


Background images work pretty much the same as in a web page, except that sometimes they don’t work! Make sure you have a fallback background colour, which is assigned to the cell as a bgcolor, for clients that don’t support CSS backgrounds.

<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:><h2>News and Events</h2></td>

Miscellaneous other styles


We need to style each link or they will inherit the default colour the email client has, and lets also add that border around the main table. We’re also going to add display:block to all our images, this solves a bug in Outlook and Hotmail.

Make sure to add “display: block” to all images to prevent a weird margin bug in Hotmail.

#main {border: 1px solid #cfcece;}
img {display: block;}
a {color: #4A72AF;}

3h

And we’re done with the easy part. Now on to the testing!



Step 5: Testing


The testing process is the most important and most obnoxious part of creating HTML emails. When I work on an email, I test frequently, at every stage, so I can pinpoint exactly what goes wrong. There are a lot of clients to test, and a lot of ways to test them, let’s go over it all.

Email Clients


These are the clients you should be testing for, at the very least:




How to Test


We’ll need to find a way to send HTML emails first. Your client will probably be set up with a service like Mailchimp or Campaign Monitor, which will allow you to test and send email campaigns.

You may think I’m complicating this unnecessarily, because some email clients let you paste in HTML code. However, this can lead to different results than when using an email campaign app. Test with an app to be on the safe side.



Testing with Mailchimp


My preferred method involves using Mailchimp for testing and sending test campaigns. Mailchimp is free for up to 500 recipients, so you don’t have to pay for testing. It has a simple and easy to use interface. Here is a quick step-by-step walkthrough:

  • Sign up for a free Mailchimp account, and add a recipient list of your test email accounts: Hotmail, Yahoo!, and Gmail, and sign into your new account.
  • Choose create a campaign and select regular ol” campaign from the main account page. Fill out basic info about the campaign, you really just need a name for testing purposes.
  • At the design page, select Import -> Paste in code and make sure you select Automatic CSS Inliner
  • If you’re not using Mailchimp, make sure you use Premailer to get your CSS inline
  • Proceed till you get to the confirm page, and select send test. You can send a few tests from here but after that, you need to actually send out the emails to your list.



Testing with Litmus


Litmus is a web app that tests HTML emails in all sorts of versions of all sorts of clients. The full service costs money, but if you can’t convince your client to pay, the free version still lets you test in old Gmail and Outlook 2003, which is still useful.



Results – The Good


Some of our tests turned out pretty well:

4a
Apple Mail


4b
Thunderbird




Results – The Bad-ish


Some were a little off, but more or less the same:

4c
Gmail (safari)


4d
Outloook 2007


4e
Outlook 2003


4f
Yahoo! Mail




Results – The Ugly


We also had a couple failures.

4g
Hotmail (GREEN???)


4h
Old Gmail (explorer)


Cleaning up the Mess


All things considered, this is a pretty successful test, because I tested a lot of the elements in Outlook and Gmail as I was going. The problems we have with old Gmail and Hotmail are related to default style sheets that the clients use. Microsoft’s special and unique brand of crazy has given us a default stylesheet that overrides all headings with a green text style with the !important designation. Sometimes I’m pretty sure they want to make me crazy.

4i

To solve this, we need to add the !important declaration to all our heading colour styles like this:

h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

For old Gmail, we have a similar problem in the header: Gmail is adding extra margin to the bottom of the heading tags. We just need to override margin-bottom specifically.

#header h1 {color: #ffffff !important; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; font-size: 24px; margin-bottom: 0!important; }
#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

And we fixed Hotmail:

4j

So there we have it, a functional, consistent (if a little plain) HTML email. It’s a pain, yes, but once you get a system going it goes a lot faster. Try to keep your code well commented and organized so that you can re-use parts of it later.

If you can talk your client into signing up for something like Litmus, your life will be much easier. You can also test lots of clients through the paid versions of Mailchimp and Campaign monitor.



Troubleshooting


You will certainly come across problems I haven’t covered here, but I have some general advice for cleaning up:

  • Check your math: I can’t remember how many times I’ve screwed up a layout by not adding up table cell widths accurately. Remember to account for cellpadding: it adds to the width of your cells.
  • Check for default stylesheets: use something like Firebug or Webkit Inspector to check if a browser client is overriding your styles. If this happens, adding an !important declaration should solve the problem.
  • Look it Up: there’s always a very good chance someone has experienced your problem before. If Google doesn’t help, try browsing tips and tricks on the blogs of popular email campaign services, some people do emails for a living, and they know their stuff!
  • Break it Down: If you can’t find where you went wrong, go back to the beginning and check your email bit by bit until you find what breaks it.



The Result


Here’s the final code for your reference:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nettuts Email Newsletter</title>
<style type="text/css">
a {color: #4A72AF;}
body, #header h1, #header h2, p {margin: 0; padding: 0;}
#main {border: 1px solid #cfcece;}
img {display: block;}
#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }
#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
</style>
</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
<tr>
<td align="center">
<p>Trouble viewing this email? <a href="#">View in Browser</a></p>
</td>
</tr>
</table><!-- top message -->

<table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">
<tr>
<td>
<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">
<tr>
<td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
</tr>
<tr>
<td width="570" bgcolor="8fb3e9" style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg);"><h2 style="color:#ffffff!important">News and Events</h2></td>
</tr>
<tr>
<td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
</tr>
</table><!-- header -->
</td>
</tr><!-- header -->

<tr>
<td></td>
</tr>
<tr>
<td>
<table id="content-1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="170" valign="top">
<table cellpadding="5" cellspacing="0">
<tr><td bgcolor="d0d0d0"><img src="http://tessat.s3.amazonaws.com/coins_small.jpg" width="170" /></td></tr></table>
</td>
<td width="15"></td>
<td width="375" valign="top" colspan="3">
<h3>All New Site Design</h3>
<h4>It's 150% Better and 40% More Efficient!</h4>
</td>
</tr>
</table><!-- content 1 -->
</td>
</tr><!-- content 1 -->
<tr>
<td>
<table id="content-2" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
</tr>
</table><!-- content-2 -->
</td>
</tr><!-- content-2 -->
<tr>
<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
</tr>
<tr>
<td>
<table id="content-3" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
<img src="http://tessat.s3.amazonaws.com/crayons.jpg" width="170" />
</td>
<td width="15"></td>
<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
<img src="http://tessat.s3.amazonaws.com/handshake.jpg" />
</td>
<td width="15"></td>
<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
<img src="http://tessat.s3.amazonaws.com/moo02.jpg" />
</td>
</tr>
</table><!-- content-3 -->
</td>
</tr><!-- content-3 -->
<tr>
<td>
<table id="content-4" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="180" valign="top">
<h5>Exciting New Products!</h5>
<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
</td>
<td width="15"></td>
<td width="180" valign="top">
<h5>A Newsletter Every Month</h5>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
</td>
<td width="15"></td>
<td width="180" valign="top">
<h5>New and Improved Forum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</td>
</tr>
</table><!-- content-4 -->
</td>
</tr><!-- content-4 -->
<tr>
<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
</tr>
<tr>
<td>
<table id="content-5" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="267" valign="top">
<table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>
<img src="http://tessat.s3.amazonaws.com/card18.jpg" />
</td></tr></table>
</td>
<td width="15"></td>
<td width="278" valign="top">
<h4>This is a heading</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</td>
</tr>
</table><!-- content-5 -->
</td>
</tr><!-- content-5 -->
<tr>
<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
</tr>
<tr>
<td>
<table id="content-6" cellpadding="0" cellspacing="0" align="center">
<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p align="center"><a href="#">CALL TO ACTION</a></p>
</table>
</td>
</tr>

</table><!-- main -->
<table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
<tr>
<td align="center">
<p>You are receiving this email because you signed up for updates</p>
<p><a href="#">Unsubscribe instantly</a> | <a href="#">Forward to a friend</a> | <a href="#">View in Browser</a></p>
</td>
</tr>
</table><!-- top message -->
</td></tr></table><!-- wrapper -->

</body>
</html>


Here’s what our final result looks like if we use real pictures:

4k

Nothing really special, but it should get you started on designing your own HTML emails. There are, of course, other ways to do everything I’ve done but with HTML email all that really matters is that it works. There isn’t much of a concept of web standards or best practices here.



Resources



I hope you’ve learned a bit today! I know I found my first HTML email project to be one of the most educational I’ve ever worked on. It only seems fair to share what I learned!"
read more

Getting Started with HTML Emails

Getting Started with HTML Emails: "

HTML emails are a great way to keep clients posted 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.

1

Step 2: Planning Our Code

In my experiences, HTML email code gets very complicated, very quickly. It’s important to have a plan of attack. So here’s the plan (we’ll come back to this, don’t worry if you don’t follow).

First, we start off with one big 100% width table with a grey background, this is our “wrapper” table.

Next up, note that there are three more tables inside the wrapper table: one at the top for the “view in browser” link, one in the middle for the main content, and one at the bottom for the “unsubscribe” link.

2a

Finally, within the main table, each horizontal section of content will be within a table row and a table cell. These table cells, in turn, will contain another table to host each content section:

2b

Cellpadding and Cellspacing

Instead of using the margin and padding CSS properties, we’re going to be using the cellpadding and cellspacing HTML attributes. Think of cellpadding as being pretty much the same as CSS padding - space inside an element, around the content. Cellspacing is the space between data cells on a table.

Our #main table is going to have 15px of cellspacing, so that we’ll have 15px of whitespace around the whole main content section, and 15px between each horizontal group. Cellpadding and cellspacing only apply to the parent table, not the children. If we don’t want any cellpadding or cellspacing, we need to specify that for every table.


Step 3: Coding it Up

Now we can start the process of coding our newsletter, section by section. In opposition to best practices, we’re going to be doing some styling along with structure. We’re going to start with the layout, including all the spacing and padding, and background colours, after that, we’ll do typography and other CSS stuff.

Setup

Setup for an email is really simple: only the html, head and body tags are involved. Let’s add in the wrapper table and the three main tables we discussed previously.

As far as doctypes are concerned, there are a few different approaches, as detailed in this article. In our case, I’ve decided against using one, because we don’t need any of the stuff we would get by declaring a doctype. It will get stripped out in most cases anyways.

<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Nettuts Email Newsletter</title>
</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
 </table><!-- top message -->

 <table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">
 </table><!-- main -->

 <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
 </table><!-- bottom message -->

</tr></td></table><!-- wrapper -->

</body>

</html>

Generally speaking, it’s better to assign widths to individual table cells than to the table itself.

Notice that the two message tables have cellpadding values of 20px. This will space out those paragraphs from the main content. The main table has 15px of cellspacing. This is to establish a consistent vertical rhythm. Since each section is within its own table cell, there will be 15px between them all.

Also notice that the tables are all set to align='center', and we have explicitly defined their widths. In HTML emails, it is generally best not to define widths for wrapping tables. You’re better off defining widths for each cell, but in this case we’ll break this rule because we have cellspacing/cellpadding to worry about.

Message Tables

These are super simple: just paragraphs within center-aligned cells.

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
 <tr>
  <td align="center">
   <p>Trouble viewing this email? <a href="#">View in Browser</a></p>
  </td>
 </tr>
</table><!-- top message -->

Ê

The bottom message is exactly the same.

Header

The header is pretty simple, it’s only one column, with three rows. Since we have that nice blue background, we’re going to need some padding around each cell to get the text away from the edges.

<tr>
 <td>
  <table id="header" cellpadding="10" cellspacing="0" align="center">
   <tr>
    <td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
   </tr>
   <tr>
    <td width="570" bgcolor="8fb3e9"><h2>News and Events</h2></td>
   </tr>
   <tr>
    <td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
   </tr>
  </table><!-- header -->
 </td>
</tr><!-- header -->

Remember to set the width of each cell, which in this case is 570px (600px-15px of cellspacing on each side). We’ve also set the align property for the date to right. Right now, we’re not adding in the background image, we’ll do that later. In the mean time, just use a lighter blue.

Notice that we’re using bgcolor instead of style='background:'. This is because html values are better supported in email clients than CSS properties.

3a

That’s what we’ve got so far, it looks pretty bad, but the layout is just what we wanted.

Content Section – 2-Column

Our first content section is a left-aligned image with two headlines beside it. Instead of using CSS floats like we normally would, we’re going to make a table with three cells:

  • one for the image,
  • one for the space between the image and the headlines,
  • and finally one for the headlines.
3b

For the image with the border, we’re going to nest another table within the cell and set the cellpadding to 5px and give it a grey background colour. Cellpadding adds to the width of the element, so we need to reduce the defined width of the cell by 10px.

<tr>
 <td></td>
</tr>
<tr>
 <td>
  <table id="content-1" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td width="170" valign="top">
     <table cellpadding="5" cellspacing="0">
      <tr>
       <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
      </tr>
     </table>
    </td>
    <td width="15"></td>
    <td width="375" valign="top" colspan="3">
     <h3>All New Site Design</h3>
     <h4>It's 150% Better and 40% More Efficient!</h4>
    </td>
   </tr>
  </table><!-- content 1 -->
 </td>
</tr><!-- content 1 -->

Notice:

  • We’ve added an empty table row and cell above the content. Because we have 15px of cellspacing, we can use an empty cell to add 15px of spacing between elements. In my testing, this works fine empty, but you could always add a non-breaking space to be sure.
  • We’re setting the v-align property to top. This is important, because it aligns each cell with the top of the row. The default is middle, which leads to some weird results.
  • We’re using dummy images from dummyimage.com because all images in HTML emails must be hosted (more on that later) and it’s much easier to use generated images. Check out the site, it explains how to specify the image you want with the URL.

Content Section – 1-Column

This is a really simple section: just a one-column table with a paragraph inside. Don’t forget to set the width of the cell and to set the table to centre align.


<tr>
 <td>
  <table id="content-2" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
   </tr>
  </table><!-- content-2 -->
 </td>
</tr><!-- content-2 -->

Dividers

To add vertical space (more than the 15px of cellspacing we have) we have to use a spacer image. Just like the 90′s! We could use a spacer gif and upload it, but at the moment it’s faster to just use another dummy image. I’ll leave it grey so you can see it, but later we can set it to white on white.

<tr>
 <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>

Which gives us something like this:

3c

Content Section – 3-Column

For a 3-column section, we use five table cells, one for each column, and one between the columns to separate them.

3d
<tr>
 <td>
  <table id="content-3" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td width="180" valign="top">
     <table cellpadding="5" cellspacing="0">
      <tr>
       <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
      </tr>
     </table>
    </td>
    <td width="15"></td>
    <td width="180" valign="top">
     <table cellpadding="5" cellspacing="0">
      <tr>
       <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
      </tr>
     </table>
    </td>
    <td width="15"></td>
    <td width="180" valign="top">
     <table cellpadding="5" cellspacing="0">
      <tr>
       <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>
      </tr>
     </table>
    </td>
   </tr>
  </table><!-- content-3 -->
 </td>
</tr><!-- content-3 -->

Pretty straightforward, use the same method for the border as we did in the 2-column section. Don’t forget the v-align!

The three text columns are exactly the same process.

<tr>
 <td>
  <table id="content-4" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td width="180" valign="top">
     <h5>Exciting New Products!</h5>
     <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
    </td>
    <td width="15"></td>
    <td width="180" valign="top">
     <h5>A Newsletter Every Month</h5>
     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum.</p>
    </td>
    <td width="15"></td>
    <td width="180" valign="top">
     <h5>New and Improved Forum</h5>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </td>
   </tr>
  </table><!-- content-4 -->
 </td>
</tr><!-- content-4 -->

Add in another divider at the bottom, and we’re almost there:

3e

The Rest…

Everything else is just repeating what we’ve already done: a 2-column section and a 1-column section with dividers between them.

<tr>
 <td>
  <table id="content-5" cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td width="267" valign="top">
     <table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>
      <img src="http://dummyimage.com/267x200/e9e9e9/fff" />
     </td></tr></table>
    </td>
    <td width="15"></td>
    <td width="278" valign="top">
     <h4>This is a heading</h4>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </td>
   </tr>
  </table><!-- content-5 -->
 </td>
</tr><!-- content-5 -->
<tr>
 <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>
</tr>
<tr>
 <td>
  <table id="content-6" cellpadding="0" cellspacing="0" align="center">
   <p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   <p align="center"><a href="#">CALL TO ACTION</a></p>
  </table>
 </td>
</tr>

And the main layout is now complete:

3f

A Word on Images

Unlike regular web pages, you can’t just put all your images in a folder and then use relative pathways to link to them. All links must be absolute! When I’m developing an email, I usually host images on a subdomain or on Amazon S3. When I’m ready to send out the email for a client, I move all the images to a subdomain of their website.

All image links must be absolute!


Step 4: Styling the Email

We can’t use an external stylesheet, and we can’t embed the CSS in the head of the email, because some clients will strip out the entire head tag, or ignore style tags. We’re going to have to use inline styles, which is a huge pain. Fortunately, there are useful services available that will take embedded CSS and make it inline. I use a website called Premailer, where you can pasted in the code directly and it outputs the same thing with inline CSS.

We’re going to do embedded CSS for this tutorial, then we’re going to make it inline with premailer.

Premailer takes embedded CSS and makes it inline!

Basic Reset

We’re not going to do a hard reset with the * selector like you might do for a web page. Using the defaults will actually yield more consistent results. The only elements whose padding/margins we’ll need to reset are ones that will have space around them (from cellpadding/cellspacing) like our header headings, or our paragraphs.

You’ll also notice a margin around the wrapper table, which is just default styling on the body element.

<style type="text/css">
 body, #header h1, #header h2, p {margin: 0; padding: 0;}
</style>

Typography

Nothing very special about the typography for an email since it’s pretty much the same is it would be for a web page. Don’t use shorthand declarations (like font: ) because you won’t get consistent results.

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; font-size: 24px; }
#header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; }
#header p {color: #ffffff; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; font-size: 12px;  }
h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; line-height: 1.5;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

And look: it’s significantly better now!

3g

Background Images

Background images work pretty much the same as in a web page, except that sometimes they don’t work! Make sure you have a fallback background colour, which is assigned to the cell as a bgcolor, for clients that don’t support CSS backgrounds.

<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:><h2>News and Events</h2></td>

Miscellaneous other styles

We need to style each link or they will inherit the default colour the email client has, and lets also add that border around the main table. We’re also going to add display:block to all our images, this solves a bug in Outlook and Hotmail.

Make sure to add “display: block” to all images to prevent a weird margin bug in Hotmail.

#main {border: 1px solid #cfcece;}
img {display: block;}
a {color: #4A72AF;}
3h

And we’re done with the easy part. Now on to the testing!


Step 5: Testing

The testing process is the most important and most obnoxious part of creating HTML emails. When I work on an email, I test frequently, at every stage, so I can pinpoint exactly what goes wrong. There are a lot of clients to test, and a lot of ways to test them, let’s go over it all.

Email Clients

These are the clients you should be testing for, at the very least:


How to Test

We’ll need to find a way to send HTML emails first. Your client will probably be set up with a service like Mailchimp or Campaign Monitor, which will allow you to test and send email campaigns.

You may think I’m complicating this unnecessarily, because some email clients let you paste in HTML code. However, this can lead to different results than when using an email campaign app. Test with an app to be on the safe side.


Testing with Mailchimp

My preferred method involves using Mailchimp for testing and sending test campaigns. Mailchimp is free for up to 500 recipients, so you don’t have to pay for testing. It has a simple and easy to use interface. Here is a quick step-by-step walkthrough:

  • Sign up for a free Mailchimp account, and add a recipient list of your test email accounts: Hotmail, Yahoo!, and Gmail, and sign into your new account.
  • Choose create a campaign and select regular ol” campaign from the main account page. Fill out basic info about the campaign, you really just need a name for testing purposes.
  • At the design page, select Import -> Paste in code and make sure you select Automatic CSS Inliner
  • If you’re not using Mailchimp, make sure you use Premailer to get your CSS inline
  • Proceed till you get to the confirm page, and select send test. You can send a few tests from here but after that, you need to actually send out the emails to your list.

Testing with Litmus

Litmus is a web app that tests HTML emails in all sorts of versions of all sorts of clients. The full service costs money, but if you can’t convince your client to pay, the free version still lets you test in old Gmail and Outlook 2003, which is still useful.


Results – The Good

Some of our tests turned out pretty well:

4a

Apple Mail

4b

Thunderbird


Results – The Bad-ish

Some were a little off, but more or less the same:

4c

Gmail (safari)

4d

Outloook 2007

4e

Outlook 2003

4f

Yahoo! Mail


Results – The Ugly

We also had a couple failures.

4g

Hotmail (GREEN???)

4h

Old Gmail (explorer)

Cleaning up the Mess

All things considered, this is a pretty successful test, because I tested a lot of the elements in Outlook and Gmail as I was going. The problems we have with old Gmail and Hotmail are related to default style sheets that the clients use. Microsoft’s special and unique brand of crazy has given us a default stylesheet that overrides all headings with a green text style with the !important designation. Sometimes I’m pretty sure they want to make me crazy.

4i

To solve this, we need to add the !important declaration to all our heading colour styles like this:

h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
 h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
 h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

For old Gmail, we have a similar problem in the header: Gmail is adding extra margin to the bottom of the heading tags. We just need to override margin-bottom specifically.

#header h1 {color: #ffffff !important; font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif; font-size: 24px; margin-bottom: 0!important; }
 #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

And we fixed Hotmail:

4j

So there we have it, a functional, consistent (if a little plain) HTML email. It’s a pain, yes, but once you get a system going it goes a lot faster. Try to keep your code well commented and organized so that you can re-use parts of it later.

If you can talk your client into signing up for something like Litmus, your life will be much easier. You can also test lots of clients through the paid versions of Mailchimp and Campaign monitor.


Troubleshooting

You will certainly come across problems I haven’t covered here, but I have some general advice for cleaning up:

  • Check your math: I can’t remember how many times I’ve screwed up a layout by not adding up table cell widths accurately. Remember to account for cellpadding: it adds to the width of your cells.
  • Check for default stylesheets: use something like Firebug or Webkit Inspector to check if a browser client is overriding your styles. If this happens, adding an !important declaration should solve the problem.
  • Look it Up: there’s always a very good chance someone has experienced your problem before. If Google doesn’t help, try browsing tips and tricks on the blogs of popular email campaign services, some people do emails for a living, and they know their stuff!
  • Break it Down: If you can’t find where you went wrong, go back to the beginning and check your email bit by bit until you find what breaks it.

The Result

Here’s the final code for your reference:


<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Nettuts Email Newsletter</title>
  <style type="text/css">
   a {color: #4A72AF;}
 body, #header h1, #header h2, p {margin: 0; padding: 0;}
 #main {border: 1px solid #cfcece;}
 img {display: block;}
 #top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
 #header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
 #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }
 #header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }
 h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
 h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
 h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
 h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
 p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
  </style>
</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
  <tr>
   <td align="center">
    <p>Trouble viewing this email? <a href="#">View in Browser</a></p>
   </td>
  </tr>
 </table><!-- top message -->

<table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">
  <tr>
   <td>
    <table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">
     <tr>
      <td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>
     </tr>
     <tr>
      <td width="570" bgcolor="8fb3e9" style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg);"><h2 style="color:#ffffff!important">News and Events</h2></td>
     </tr>
     <tr>
      <td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>
     </tr>
    </table><!-- header -->
   </td>
  </tr><!-- header -->

  <tr>
   <td></td>
  </tr>
  <tr>
   <td>
    <table id="content-1" cellpadding="0" cellspacing="0" align="center">
     <tr>
      <td width="170" valign="top">
       <table cellpadding="5" cellspacing="0">
        <tr><td bgcolor="d0d0d0"><img src="http://tessat.s3.amazonaws.com/coins_small.jpg" width="170" /></td></tr></table>
      </td>
      <td width="15"></td>
      <td width="375" valign="top" colspan="3">
       <h3>All New Site Design</h3>
       <h4>It's 150% Better and 40% More Efficient!</h4>
      </td>
     </tr>
    </table><!-- content 1 -->
   </td>
  </tr><!-- content 1 -->
  <tr>
   <td>
    <table id="content-2" cellpadding="0" cellspacing="0" align="center">
     <tr>
      <td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
     </tr>
    </table><!-- content-2 -->
   </td>
  </tr><!-- content-2 -->
  <tr>
   <td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
  </tr>
  <tr>
   <td>
    <table id="content-3" cellpadding="0" cellspacing="0" align="center">
     <tr>
      <td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
       <img src="http://tessat.s3.amazonaws.com/crayons.jpg" width="170" />
      </td>
      <td width="15"></td>
      <td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
       <img src="http://tessat.s3.amazonaws.com/handshake.jpg" />
      </td>
      <td width="15"></td>
      <td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">
       <img src="http://tessat.s3.amazonaws.com/moo02.jpg" />
      </td>
     </tr>
    </table><!-- content-3 -->
   </td>
  </tr><!-- content-3 -->
  <tr>
   <td>
    <table id="content-4" cellpadding="0" cellspacing="0" align="center">
     <tr>
      <td width="180" valign="top">
       <h5>Exciting New Products!</h5>
       <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>
      </td>
      <td width="15"></td>
      <td width="180" valign="top">
       <h5>A Newsletter Every Month</h5>
       <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
        deserunt mollit anim id est laborum.</p>
      </td>
      <td width="15"></td>
      <td width="180" valign="top">
       <h5>New and Improved Forum</h5>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </td>
     </tr>
    </table><!-- content-4 -->
   </td>
  </tr><!-- content-4 -->
  <tr>
   <td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
  </tr>
  <tr>
   <td>
    <table id="content-5" cellpadding="0" cellspacing="0" align="center">
     <tr>
      <td width="267" valign="top">
       <table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>
        <img src="http://tessat.s3.amazonaws.com/card18.jpg" />
       </td></tr></table>
      </td>
      <td width="15"></td>
      <td width="278" valign="top">
       <h4>This is a heading</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </td>
     </tr>
    </table><!-- content-5 -->
   </td>
  </tr><!-- content-5 -->
  <tr>
   <td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>
  </tr>
  <tr>
   <td>
    <table id="content-6" cellpadding="0" cellspacing="0" align="center">
     <p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
     <p align="center"><a href="#">CALL TO ACTION</a></p>
    </table>
   </td>
  </tr>

 </table><!-- main -->
 <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
  <tr>
   <td align="center">
    <p>You are receiving this email because you signed up for updates</p>
    <p><a href="#">Unsubscribe instantly</a> | <a href="#">Forward to a friend</a> | <a href="#">View in Browser</a></p>
   </td>
  </tr>
 </table><!-- top message -->
</td></tr></table><!-- wrapper -->

</body>
</html>

Here’s what our final result looks like if we use real pictures:

4k

Nothing really special, but it should get you started on designing your own HTML emails. There are, of course, other ways to do everything I’ve done but with HTML email all that really matters is that it works. There isn’t much of a concept of web standards or best practices here.


Resources

I hope you’ve learned a bit today! I know I found my first HTML email project to be one of the most educational I’ve ever worked on. It only seems fair to share what I learned!"

read more