Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
There are a few technical best practices that are handy to keep in mind when you start to code an email, especially when it comes to working with tables.
-
0:04
In stage one, we covered a lot of conceptual stuff
-
0:07
like the different kinds of email,
-
0:08
how to determine the purpose of your email,
-
0:11
and basic design principles and best practices.
-
0:14
Now we'll get into the nitty-gritty of it.
-
0:17
We'll take a look at the email we're building,
-
0:19
and we'll start playing with code.
-
0:21
So, there are a few technical best practices
-
0:23
that are handy to keep in mind when you start to code an email.
-
0:26
If there's just one thing you have to remember,
-
0:29
it's that tables rule the day.
-
0:31
Forget that separation of structure, presentation, and behavior nonsense
-
0:35
that you learned in standards-based web design.
-
0:37
Unlike modern web design, the table element
-
0:40
isn't used just for tabular data;
-
0:42
it's all there is for consistent structure.
-
0:45
Let's have a quick refresher on tables.
-
0:47
For the purposes of HTML email,
-
0:50
tables have three main components:
-
0:52
the table element, the table row element tag,
-
0:55
and the table data element tag.
-
0:59
The table element tag "table"
-
1:02
defines the start and end of the table itself.
-
1:05
The table row element tag "tr"
-
1:08
defines a row in the table.
-
1:10
Rows are how a table is horizontally structured.
-
1:13
Every table has at least one row,
-
1:15
and rows always span the full width of the table.
-
1:18
The table data element tag "td"
-
1:21
defines a data cell within the table.
-
1:24
These column cells are how a table is vertically structured.
-
1:28
The cell is the container that holds all your other stuff:
-
1:30
images, text, and pretty much any other HTML element.
-
1:35
Table cells are different in that there can be more than one per row,
-
1:38
and they can span multiple rows by use of the row span attribute.
-
1:42
And they can span the width of multiple cells with the call span attribute.
-
1:46
This email combines the three objectives we spoke about earlier:
-
1:50
read me, join me, and buy me.
-
1:52
There's an intro section that's conveying information
-
1:55
in a newsletter format, an event call-out section
-
1:58
featuring a call to action followed by a schedule of future events,
-
2:02
and finally, a section featuring purchasable products.
-
2:07
The finished product might look a little daunting,
-
2:09
but if we break it down to a simple grey box wireframe,
-
2:12
we get a better idea of just what we'll need to build out.
-
2:15
The email opens with a big hero image,
-
2:17
which is followed by the logo and main heading.
-
2:19
A clear intro paragraph follows those.
-
2:22
That's essentially the header of our email,
-
2:24
designed to be an attention-grabbing but concise funnel
-
2:27
into the rest of the email.
-
2:29
The call to action gets a largish heading
-
2:32
with some descriptive text and a button.
-
2:34
Following that, we have a short schedule
-
2:36
that consists of clearly-defined date displays,
-
2:39
headings, and short descriptions.
-
2:42
Finally, as the email closes,
-
2:44
there's a merchandise section,
-
2:46
and each of the items in this section
-
2:47
combine everything that came before it:
-
2:50
headings, images, descriptive text, and calls to action.
-
2:55
Now, instead of trying to code everything at once,
-
2:58
we'll split the work up into two phases: the scaffold and the blocks.
-
3:03
The scaffold is the overall structure of the email
-
3:05
and excludes anything related to content.
-
3:08
The blocks hold the content and are placed into the scaffold.
-
3:12
If we look at the email again,
-
3:14
we can get a general idea of the structure.
-
3:17
The email has six layers, and each of these layers will be a table row:
-
3:21
the intro section, the call to action section, the schedule section,
-
3:31
the merchandise section, and the footer.
-
3:35
We start with a regular old HTML file.
-
3:38
We use the xhtml1-strict doctype profile.
-
3:43
This doctype is used because Gmail and Outlook both use it by default.
-
3:47
By using it at the outset,
-
3:49
we can avoid some quirks native to those clients.
-
3:53
Next, we open with an HTML element followed by the head element.
-
3:59
Next, we include the UTF-8 character set meta tag.
-
4:07
and the title tag.
-
4:11
We'll get to the styling later, but let's go ahead
-
4:12
and drop in the style tag anyway.
-
4:16
And that does it for the head element.
-
4:20
Next, we add the body tag as usual,
-
4:22
and the first thing added to the body tag is a center tag.
-
4:26
Now we add our first table.
-
4:28
The purpose of this table is to mimic the body tag
-
4:31
since all of the major web-based email clients strip the body tag
-
4:35
and replace it with a div or some other element.
-
4:38
We'll ID this table as body table.
-
4:42
This table will only have one cell.
-
4:46
This cell will get an ID of body cell attached to it.
-
4:50
Within this cell, we'll place a container table for our email.
-
4:54
This is where all our content section layers will go.
-
4:57
We have six total sections, so we'll add a table with six rows,
-
5:02
each of those rows containing one cell.
-
5:05
Each of these rows will represent the section of our email.
-
5:09
Now let's give each of the cells in our rows ID's
-
5:12
corresponding to those different sections of our email.
-
5:15
There's hero image container,
-
5:19
introduction container,
-
5:22
call to action container,
-
5:25
event container,
-
5:27
merchandise container,
-
5:28
and footer container.
-
5:37
So here's our completed email scaffold.
-
5:40
It's a table containing six rows, each for one of our main sections.
-
5:45
All of the content can be placed in these rows,
-
5:47
and their structures will be independent,
-
5:49
allowing the email to be modular in nature.
-
5:52
So that's our completed scaffold.
-
5:54
Now that it's finished, we'll continue putting our email together
-
5:57
by coding the content blocks separately
-
5:59
in a way that makes them modular and easy to drop
-
6:01
in the designated areas of our email.
You need to sign up for Treehouse in order to download course files.
Sign up