In stage one, we covered a lot of conceptual stuff

like the different kinds of email,

how to determine the purpose of your email,

and basic design principles and best practices.

Now we'll get into the nitty-gritty of it.

We'll take a look at the email we're building,

and we'll start playing with code.

So, there are a few technical best practices

that are handy to keep in mind when you start to code an email.

If there's just one thing you have to remember,

it's that tables rule the day.

Forget that separation of structure, presentation, and behavior nonsense

that you learned in standards-based web design.

Unlike modern web design, the table element

isn't used just for tabular data;

it's all there is for consistent structure.

Let's have a quick refresher on tables.

For the purposes of HTML email,

tables have three main components:

the table element, the table row element tag,

and the table data element tag.

The table element tag "table"

defines the start and end of the table itself.

The table row element tag "tr"

defines a row in the table.

Rows are how a table is horizontally structured.

Every table has at least one row,

and rows always span the full width of the table.

The table data element tag "td"

defines a data cell within the table.

These column cells are how a table is vertically structured.

The cell is the container that holds all your other stuff:

images, text, and pretty much any other HTML element.

Table cells are different in that there can be more than one per row,

and they can span multiple rows by use of the row span attribute.

And they can span the width of multiple cells with the call span attribute.

This email combines the three objectives we spoke about earlier:

read me, join me, and buy me.

There's an intro section that's conveying information

in a newsletter format, an event call-out section

featuring a call to action followed by a schedule of future events,

and finally, a section featuring purchasable products.

The finished product might look a little daunting,

but if we break it down to a simple grey box wireframe,

we get a better idea of just what we'll need to build out.

The email opens with a big hero image,

which is followed by the logo and main heading.

A clear intro paragraph follows those.

That's essentially the header of our email,

designed to be an attention-grabbing but concise funnel

into the rest of the email.

The call to action gets a largish heading

with some descriptive text and a button.

Following that, we have a short schedule

that consists of clearly-defined date displays,

headings, and short descriptions.

Finally, as the email closes,

there's a merchandise section,

and each of the items in this section

combine everything that came before it:

headings, images, descriptive text, and calls to action.

Now, instead of trying to code everything at once,

we'll split the work up into two phases: the scaffold and the blocks.

The scaffold is the overall structure of the email

and excludes anything related to content.

The blocks hold the content and are placed into the scaffold.

If we look at the email again,

we can get a general idea of the structure.

The email has six layers, and each of these layers will be a table row:

the intro section, the call to action section, the schedule section,

the merchandise section, and the footer.

We start with a regular old HTML file.

We use the xhtml1-strict doctype profile.

This doctype is used because Gmail and Outlook both use it by default.

By using it at the outset,

we can avoid some quirks native to those clients.

Next, we open with an HTML element followed by the head element.

Next, we include the UTF-8 character set meta tag.

and the title tag.

We'll get to the styling later, but let's go ahead

and drop in the style tag anyway.

And that does it for the head element.

Next, we add the body tag as usual,

and the first thing added to the body tag is a center tag.

Now we add our first table.

The purpose of this table is to mimic the body tag

since all of the major web-based email clients strip the body tag

and replace it with a div or some other element.

We'll ID this table as body table.

This table will only have one cell.

This cell will get an ID of body cell attached to it.

Within this cell, we'll place a container table for our email.

This is where all our content section layers will go.

We have six total sections, so we'll add a table with six rows,

each of those rows containing one cell.

Each of these rows will represent the section of our email.

Now let's give each of the cells in our rows ID's

corresponding to those different sections of our email.

There's hero image container,

introduction container,

call to action container,

event container,

merchandise container,

and footer container.

So here's our completed email scaffold.

It's a table containing six rows, each for one of our main sections.

All of the content can be placed in these rows,

and their structures will be independent,

allowing the email to be modular in nature.

So that's our completed scaffold.

Now that it's finished, we'll continue putting our email together

by coding the content blocks separately

in a way that makes them modular and easy to drop

in the designated areas of our email.