1. Building a Complete Email Newsletter in HTMLShowcasing the finished project| 00:00 | This chapter will show you all
of the steps to create this email.
| | 00:04 | Notice the border background, the logo,
the copy, and the address information.
| | 00:10 | This is the email we'll end up
creating by the end of this chapter.
| | 00:14 | If you don't have the exercise files
you can follow along with your own files.
| | 00:19 | First let's get our tools ready.
| | 00:21 | You'll need Photoshop or other image
editing software, you'll need a Text
| | 00:25 | Editor of course, you'll need web
browsers, you'll also need prep files for CSS and HTML.
| | 00:31 | In addition we're going to talk a
little bit about the background image
| | 00:34 | exercise file that have VML code, and
you'll also need FTP software and a remote web server.
| | 00:40 | Let's start with the design.
| | 00:44 | Our goal is to take this design and
to evaluate it so that we can turn it
| | 00:48 | into HTML table codes.
| | 00:51 | Looking at this design I can see that
we will need three main nested tables and
| | 00:56 | then we'll have two minor
tables up top and bottom.
| | 00:59 | The Wrapper table will take the
place of the HTML body tag in a webpage.
| | 01:05 | Then we'll have a table for the
background border and we'll have a table for the content.
| | 01:10 | At the top we're just going to add a
very simple table to add the links to the
| | 01:14 | web version and at the bottom we're
going to add an equally simple table to
| | 01:18 | handle the Unsubscribe link.
| | 01:20 | This will ensure from top to bottom
our email will be centered in the same width.
| | 01:25 | In addition within our content
table we're going to have each row as a
| | 01:30 | table data or td cell.
| | 01:32 | Note at the bottom here with the
Facebook icon in the lower right we have Find
| | 01:37 | us on Facebook, Copy, and we have the Copyright.
| | 01:40 | All three elements will
require three table data cells.
| | 01:44 | But we'll deal with that in
detail when we add images.
| | 01:48 | With an idea how to build our email
with HTML tables, next we'll define the
| | 01:53 | colors, dimensions, and
other details we will need.
| | Collapse this transcript |
| Getting your dimensions and color palette| 00:00 | In this video we'll begin to learn then
write down all the little details we'll
| | 00:05 | need to code our e-mail.
| | 00:07 | This includes colors, dimensions of
key parts, and cutting out images.
| | 00:12 | We'll create a worksheet that
will service as a map that we'll use
| | 00:16 | throughout this chapter.
| | 00:18 | We'll begin by extracting color
information from key blocks of our HTML e-mail.
| | 00:24 | To do that click the Eyedropper
Tool on the left and we'll start with
| | 00:30 | our background pattern.
| | 00:32 | Because older e-mail software may not
show our background image, we'll need to
| | 00:37 | pick a dark color to substitute for the image.
| | 00:40 | Click, go down to our color chip and we
can see that this background image color
| | 00:46 | has the hexadecimal value of b6b596.
| | 00:52 | The next color value we need is
behind the logo, it appears to be white, but let's check.
| | 00:59 | That color value is indeed white;
| | 01:01 | it's FF, FF, FF, then we'll
get the color for the copy area.
| | 01:09 | Our goal with all of this color
information is to come up with a printout or an
| | 01:14 | electronic file perhaps you set this up
in a wire-frame software program, like
| | 01:18 | Balsamic, but you want to create a
single piece of paper or page that has all of
| | 01:23 | this color information,
height and width information.
| | 01:27 | So let's continue to extract colors.
| | 01:31 | And finally the last big area is the
footer, it appears to be black, but we need to check.
| | 01:36 | In fact, it's a different color,
so you should write this down on your worksheet.
| | 01:42 | Now we're ready to begin to extract
the color of the headings, subheading, and copy.
| | 01:48 | To do that we'll do Ctrl++ or Command++.
| | 01:52 | For the heading, let's pick a nice
solid dark color area, go down to our color
| | 01:57 | chip and we have our hexadecimal
value for the heading, it is 35411d.
| | 02:02 | Now you'll notice that the color
value for the copy itself also is the same
| | 02:10 | color, so we don't need to grab that.
| | 02:13 | The subheading however is gray, so let's
pick a solid color area and this number
| | 02:19 | is a little confusing, it's
9b as in boy, 9d as a dog, 9a.
| | 02:25 | In addition, we had some copy in
the footer that I want to check.
| | 02:28 | This is not pure white, so we
need to extract this color as well.
| | 02:33 | And finally, we have the link down here,
which appears to be a hot green, so
| | 02:39 | let's get that color.
| | 02:42 | We'll type Ctrl+0 or Command+0
to return to the full screen.
| | 02:46 | Now after we've extracted our color
information and written it down on our
| | 02:51 | worksheet, the next step is to
measure out parts of our design.
| | 02:55 | We'll start with the width of the design,
we'll select the top area, select the
| | 03:01 | Navigation panel, select the Info.
| | 03:05 | Our design is 550 pixels Wide,
so let's write that down.
| | 03:10 | And this content area
happens to be 504 pixels wide.
| | 03:16 | What I do, I tend to round down or up
as necessary to make the math easy as
| | 03:22 | I'm coding an e-mail.
| | 03:23 | And instead of being precise encoding
to 504 pixels wide for each content row,
| | 03:29 | I'm going to code to 500 pixels wide,
that means that each of these borders will
| | 03:35 | be 25 pixels wide, so 25 for a border
on the left, 25 for the border on the
| | 03:41 | right plus 500 will get me the 550
for the width of the entire e-mail.
| | 03:46 | It will make the math much,
much easier as we code.
| | 03:50 | So let's write down that our content
area will be 500 pixels wide and that our
| | 03:55 | border is 25 pixels wide.
| | 03:58 | We don't really need to do any other
measurement, because we know each row is
| | 04:01 | 500 pixels wide and the height
will be determined by the copy.
| | 04:06 | Our goal is to come as close as
possible to the visual look of this design,
| | 04:11 | rather than having 100% pixel
perfect with respect to height.
| | 04:16 | Because our content area is 500 pixels
wide, we also know that the images will
| | 04:21 | be no wider than 500 pixels, so
let's begin to cut out images.
| | 04:26 | We'll start with the logo;
| | 04:28 | we have a couple of options.
| | 04:30 | We could either cut out the logo
tightly or we could cut out the logo to force
| | 04:34 | the height of the table data cell that
it will be in, or we can make the logo
| | 04:39 | the full width, 500 pixels wide and
however tall we want, let's do that.
| | 04:46 | You can see in Photoshop that I can't
be 100% precise, so what I'm going to do
| | 04:50 | is I'll select this area, I'll type
Ctrl+C or Command+C to copy, Ctrl+N or
| | 04:56 | Command+N to create a new file, this
is OK, and Ctrl+V or Command+V to paste.
| | 05:04 | To get the size that I want, I'll go up
to Image>Canvas Size, I'll set the Width
| | 05:10 | to 500 and the Height to 200.
| | 05:15 | I'll then Save this image for Web &
Devices, we'll set at a High value.
| | 05:22 | As you can see here on the lower-left
is a kilobyte, so it's probably fine.
| | 05:29 | We'll need to add an images Folder,
we'll Name this file, logo-two-trees, we'll save.
| | 05:39 | Next, we'll cut out the
photo of the olive branch.
| | 05:43 | This image also needs to be
no more than 500 pixels wide.
| | 05:47 | We'll type Ctrl+C or Command+C to copy,
Ctrl+N or Command+N to create a New
| | 05:53 | Image file and Ctrl+V or Command+V to paste.
| | 05:57 | We'll save for Web Devices, we'll
check the size of the image, we don't want it to be too high.
| | 06:06 | We'll save, and we'll call this olive branch.
| | 06:10 | The last image we need to cut out is
the Facebook icon in the lower right of our design.
| | 06:16 | We'll type Ctrl++ or Command++ to zoom in.
| | 06:20 | We don't need our Info panel anymore.
| | 06:23 | As with the logo, we have a couple
of options when we cut out this image;
| | 06:28 | we could for example, cut out
information below the image to force the height of
| | 06:33 | our table data cell.
| | 06:34 | In this case, I simply want the
logo, I don't do anything fancy.
| | 06:37 | So I will select the
Marquee Tool and be pretty close.
| | 06:42 | Ctrl+C or Command+C to copy, Ctrl+N
or Command+N to create a New image, and
| | 06:50 | Ctrl+V or Command+V to paste.
| | 06:52 | I will then Save for Web
Device, and then save the file.
| | 06:58 | In this case I'll it icon-facebook, we'll save.
| | 07:05 | I'll type Ctrl+0 or Command+0
to return to the original view.
| | 07:10 | With all the details we need
written down on our worksheet, let's begin
| | 07:14 | coding our e-mail.
| | Collapse this transcript |
| Creating your tables for the email| 00:00 | In the last video we extracted color
information dimensions and other details
| | 00:05 | and wound up with a worksheet
that look something like this.
| | 00:09 | To start coding we'll have in our
interface a blank HTML file, we have our
| | 00:15 | prep code file for HTML;
| | 00:17 | we've added the doc type, body etcetera.
| | 00:20 | We've got our CSS prep code, we have
our email copy to save us a lot of typing,
| | 00:26 | and for our discussion later when we
add the background image we have our VML
| | 00:31 | code for Outlook 2007 and Outlook 2010.
| | 00:36 | So we'll start with our email invitation.
| | 00:38 | We're going to start off very simply.
| | 00:41 | No big scary leaps, we're going to
add code in layers not all at once.
| | 00:46 | The first step is to go to our HTML prep
code, highlight, Ctrl+C or Command+C to
| | 00:53 | copy, Ctrl+V or Command+V to paste.
| | 00:57 | What I do want to add is an HTML
comment that tells us this is our Wrapper, our
| | 01:03 | pseudo BODY tag table.
| | 01:08 | As we add layers and layers of code
these comments will help us understand where
| | 01:12 | things begin and where they end.
| | 01:14 | It will save us a lot of time.
| | 01:16 | I'll copy and paste and this is
the close Wrapper pseudo BODY table.
| | 01:25 | We have our Wrapper pseudo BODY table,
we need another table for the background
| | 01:30 | border and for the content, and in
addition we're going to need to create these
| | 01:34 | very simple tables at the
top and bottom for links.
| | 01:38 | Here's how we code all of these tables.
| | 01:41 | We'll highlight, Ctrl+C or Command+C
to copy, Ctrl+V or Command+V to paste,
| | 01:48 | we'll indent, two stops.
| | 01:52 | This minor table handles the view to
web version link, I mentioned of the
| | 01:57 | Unsubscribe link at the bottom of the
email and any other data of that sort.
| | 02:01 | So we'll call this basic links.
| | 02:06 | Next, we'll create our background table.
| | 02:10 | I'll highlight, copy, paste, we'll
type Background table and the other major
| | 02:22 | table I'm going to do here is for the
bottom links, the unsubscribe links.
| | 02:27 | I'll highlight, copy, paste.
| | 02:29 | As I mentioned earlier we want these
tables to manage our links to ensure
| | 02:35 | everything is centered.
| | 02:40 | Now let's go back to our background
table, we'll highlight, copy, and paste.
| | 02:48 | We'll indent this table, two stops,
and this is our content table.
| | 02:57 | We'll go back to our original design
and you see that in our content table
| | 03:06 | we have several rows.
| | 03:08 | We have a row that holds our logo image,
a row for the copy, a row for the olive
| | 03:12 | branch image, and we have
two rows for the footer.
| | 03:16 | So let's create those rows.
| | 03:19 | This row will be for the logo.
| | 03:20 | We carefully select just the table
row, not the entire table, Ctrl+C or
| | 03:27 | Command+C to copy, Ctrl+V or Command+V to paste.
| | 03:31 | This will be our copy area.
| | 03:34 | Next we need an area for the olive branch.
| | 03:39 | We need an area for the top of the
footer, so this was the address information.
| | 03:48 | And finally, we need an area
for the copyright, Facebook icon.
| | 03:54 | So now we have accounted for all of our tables.
| | 03:59 | The next step is to go back to our
worksheet and to begin to add the width to
| | 04:03 | all the different elements.
| | 04:05 | Let's begin with the background
table and the 25 pixel wide borders.
| | 04:11 | We want a background table, what
we'll do is we'll make the cellpadding 25
| | 04:16 | pixels wide, that will give us
plenty of space for our background image.
| | 04:21 | We also know that our background image
is 550 pixels wide, so we will add that
| | 04:26 | both at the table and at the td tag level.
| | 04:31 | It's important especially for older
browsers to specifying both locations.
| | 04:36 | We know the width of our content
table is 500 pixels wide, so let's simply
| | 04:42 | highlight copy and paste our width
for all of these table data cells.
| | 04:51 | Our final step in this video will be to
check our work in a local Web Browser on this computer.
| | 04:58 | Let's go to the File Browser and open
the saved HTML file in a Web Browser,
| | 05:03 | we'll open this with Firefox.
| | 05:06 | We can see that we have all of our
elements for our table and we see that we
| | 05:11 | have plenty of room for the background
table but we can see several adjustments
| | 05:15 | that we need to make.
| | 05:17 | The Wrapper table needs to have its
width set, and we need to center all of the
| | 05:22 | table data cells within our content
table, so let's make those changes quickly.
| | 05:26 | We'll set this width at 99% for
webmail software to give us a gutter around our email.
| | 05:37 | And we want to change all of
these alignments from left to center.
| | 05:42 | We'll highlight, copy, and then paste.
| | 05:50 | And we can see because of our
bookmarks we are at the bottom of the content table.
| | 05:55 | We miss the alignment for the Wrapper
table, let's make that last tweak, and there we go.
| | 06:06 | We have all of our tables all lined up,
everything is centered with plenty of room.
| | 06:10 | With our email structure
coded out, next we'll add images.
| | Collapse this transcript |
| Adding your images to the code| 00:00 | The next step is to add images
and other color details to our HTML table structure.
| | 00:07 | In this video we will build out our e-mail.
| | 00:10 | We will add more layers of code.
| | 00:12 | This is where we left off in our last
video with our table structures set up.
| | 00:18 | The first thing we'll do is
to add a background image.
| | 00:21 | Let's scroll down to our Background
table, we will select background equals, we
| | 00:29 | know that our images are in the images
folder, which is here, I will click Copy
| | 00:36 | and Ctrl+V or Command+V to paste
and then I'll add the file extension.
| | 00:42 | You can see that our background image works.
| | 00:47 | Now let's discuss this code.
| | 00:51 | This is vml code, it's Microsoft
proprietary code that shows background images
| | 00:56 | in Outlook 2007 and 2010.
| | 01:00 | However, when I tested for this project,
it doesn't work if you wrap this vml
| | 01:04 | code around a table.
| | 01:06 | You can't put an image behind a background.
| | 01:09 | But that's not really a problem in our
case, because we have a background color
| | 01:13 | that we are going to add.
| | 01:15 | So let's add our background color,
we do that with a BG color tag.
| | 01:21 | If you recall, we have a
worksheet with everything marked out.
| | 01:25 | So we look at our worksheet for this color.
| | 01:27 | On a worksheet, the color for the
background was b6b596, so let's add that.
| | 01:36 | Your colors may vary of course, because
within your image editing software you
| | 01:41 | might use the Eyedropper tool to
extract color from a slightly different area.
| | 01:45 | So don't worry if these
colors are not 100% accurate.
| | 01:48 | You can use the colors I use of
course, because they will work as well.
| | 01:54 | To test whether or not this color
shows, let's break the Image Reference by
| | 01:59 | adding the number 2 to the image file.
| | 02:01 | So you see we have a color pretty
close to our background color, and it will
| | 02:08 | ensure that our e-mail looks nice and clean.
| | 02:12 | Let's go back before we forget and
change the file name to the correct image file name.
| | 02:19 | Next, let's look at each of
the rows in our content table.
| | 02:23 | Notice that their backgrounds are transparent.
| | 02:26 | Let's set those background colors to
white at least to start, and for copy
| | 02:31 | and for address information in the
copyright Facebook lines, we will set it
| | 02:36 | to the darker color.
| | 02:38 | Once again, we will use our
worksheet to get these values.
| | 02:42 | To add color backgrounds,
we will use the bgcolor tag.
| | 02:46 | In this case the color is white.
| | 02:49 | As we did when we set the width of the
content table, we will adjust both the
| | 02:54 | table and the table data cells.
| | 02:57 | For the copy, we know
that the color is different.
| | 03:00 | Looking at our worksheet, the color is e2e7d3.
| | 03:07 | We used the same color value
for the olive branch image.
| | 03:12 | For the footer, we will set
the color in our worksheet. That's 211b05.
| | 03:22 | Let's save our file and look at the browser.
| | 03:26 | We have now set the background image
and the background color of different rows of our tables.
| | 03:31 | The next step will be to add
images, let's start with the logo.
| | 03:35 | We will start with in our CSS prep file;
| | 03:38 | we will copy the image Ctrl+C or
Command+C to Copy, Ctrl+V or Command+V to Paste.
| | 03:49 | We know the logo is in our
Images' folder, which is here.
| | 03:54 | I will click Copy and then Paste, and
then we will add the file extension.
| | 04:01 | We will add the Alt tag value in
case the image does not display.
| | 04:10 | Our worksheet tells us that the
height of this image is 200 pixels and the
| | 04:15 | width is 500 pixels.
| | 04:18 | Let's Save and check our work.
This look great!
| | 04:24 | Next, we want to add the olive branch image.
| | 04:27 | Our CSS prep code file, Ctrl+C or
Command+C to copy the image, and we
| | 04:33 | will replace this text.
| | 04:37 | In the Images folder, Copy and
then Paste and add the file extension.
| | 04:46 | We will also fill out the Alt tag, and
our worksheet tells us that this image is
| | 04:54 | 177 pixels high and the
width is 500 pixels wide.
| | 05:00 | Let's save and check our work.
There we go;
| | 05:06 | the next step will be to add the
Facebook item in the bottom right row.
| | 05:12 | If you recall, when we took this email
design apart and defined a structure, we
| | 05:16 | decided that the bottom footer row
needs to be three table data cells.
| | 05:21 | Now let's turn that into code.
| | 05:23 | We will scroll down to our copyright
facebook row, we need to copy this table
| | 05:31 | data reference and paste it two more times.
| | 05:34 | So this will be the copyright, this
will be find us on Facebook and this will
| | 05:45 | be the Facebook icon.
| | 05:47 | To add the icon, we will go to the CSS
prep code file, copy our image tag, paste it in here.
| | 05:55 | Our source file is found in the Images
folder, we will copy the file name and to
| | 06:04 | add the file extension.
| | 06:06 | Fill out the Alt tag, our worksheet
tells us, this image file is 28 pixels
| | 06:13 | high and 28 pixels wide.
| | 06:16 | So let's Save and let's see what happens.
| | 06:21 | Notice how these two table data cells
on the lower right are separate off by themselves.
| | 06:27 | With HTML tables, we will need to
specify that each of these content rows is
| | 06:32 | able to span three columns.
| | 06:35 | The specific tag is called a call span tag.
| | 06:38 | So let's add that to each of these
table data rows in our content table.
| | 06:44 | So we will add it here.
| | 06:45 | We will highlight, Copy and Paste.
| | 06:50 | We will Save and check our work.
| | 06:59 | So now everything fits tightly.
| | 07:01 | Let's finish off the Facebook icon by
specifying the width in the alignment of the copy.
| | 07:07 | Specifically, the copyright will need
to be aligned to the left, to find us on
| | 07:11 | Facebook copy, we will need to be
aligned to the right and the Facebook icon can
| | 07:15 | either be center or right.
| | 07:18 | So we will work first here on copyright,
we want the alignment to the left, this
| | 07:24 | alignment to the right and this
alignment we will leave alone.
| | 07:30 | We want to specify the
width here as 250, 200 and 50.
| | 07:38 | Remember our image is only 28 pixels wide.
| | 07:41 | Which width you set will depend on
the copy, but we'll do that in the next
| | 07:45 | video, and we may refine these values.
| | 07:48 | Let's Save and for now we can see
that our copy fits, and we are generally in the ballpark.
| | 07:55 | Our images are now in place.
| | 07:58 | In the next video we will add
headings and copy and code them to match the email design.
| | Collapse this transcript |
| Placing your copy in the code| 00:00 | In this video will I copy to our
email and go to work on spacing that
| | 00:04 | surrounds our content.
| | 00:06 | This is where we left off in the prior video.
| | 00:09 | Now let's get to work on copy.
| | 00:11 | We will go to our email copy text file,
typically, when I code an HTML e-mail I
| | 00:17 | will extract all the content out into a
separate file, so that I don't actually
| | 00:21 | have to type in the code.
| | 00:22 | Most in my coding then is simply Copy+Paste.
| | 00:25 | We will start at the top of the email.
| | 00:28 | Ctrl+C or Command+C to copy,
Ctrl+V or Command+V to Paste.
| | 00:33 | I'll bring it up a line, and we
will go to our copy table data cell.
| | 00:42 | Select this, and our copy
extents from here, down to here.
| | 00:47 | So we will Copy and Paste.
| | 00:53 | For our address information,
we need this line of copy.
| | 01:04 | Our copyright is a little bit different;
| | 01:07 | we have it here, Copy and Paste.
| | 01:15 | Just make sure I copy this, maybe the
same, but I just want to be sure, because
| | 01:21 | I was careful to copy the
text correctly the first time.
| | 01:24 | We will save our work and check our display.
| | 01:29 | What we will do next, is we will add
paragraph tags and we will begin formatting
| | 01:33 | some of these bits of copy.
| | 01:37 | Start again at the top.
| | 01:39 | For this small table, I want to add
the font styling information at the table
| | 01:44 | data level, and the reason is
to reduce the amount of code.
| | 01:47 | We are going to add a link here, and
therefore, I don't want to have to code
| | 01:52 | the paragraph tag and then code the link,
so I will separate the two chunks of style information.
| | 01:57 | I will close it off, and I will go to
my CSS prep file, I will select, Ctrl+C
| | 02:05 | or Command+C to Copy.
| | 02:06 | Ctrl+V or Command+V to Paste.
| | 02:09 | I will add the link at this point.
| | 02:15 | Notice that I set a target ="_
blank" value that is for webmail.
| | 02:20 | We don't want any link to
open up in your email client.
| | 02:25 | You wanted to open a new browser window,
and because these top and bottom links
| | 02:30 | will be mouse print effectively,
we will set the font size to 10.
| | 02:34 | We will keep the line-height is fine,
and we will go back and style the link layer.
| | 02:42 | Next, we scroll down to our copy.
| | 02:45 | This line is our heading, so
let's set it with the H1 tag.
| | 02:49 | We also could use spans or divs, but I
try to avoid them in HTML email code,
| | 02:55 | because older email software isn't
guaranteed to acknowledge a span or div.
| | 03:01 | For our subheading, I will set it at H2
and down here, I will set p or paragraph
| | 03:10 | tags and I will create a close p
tag, highlight, Copy and then Paste.
| | 03:19 | This chuck of copy is a single
block, so we need break tags.
| | 03:23 | For older email software, we need
the old HTML break tag, not XHTML.
| | 03:28 | We'll Save and then scroll down.
| | 03:34 | Here let's do the same thing we did up above.
| | 03:36 | We will set the style for the font at
the table data cell level, and that will
| | 03:41 | allow us to set the style for the link
separately, and it will save us a little
| | 03:46 | bit of code, make it easier to read.
| | 03:47 | We will scroll up here, and we
will start with this for now.
| | 03:53 | We can always change it later layer.
| | 03:54 | We will go back to our address
information, and for now we will set it at 10
| | 04:01 | pixels, and we will set
the anchor tag links later.
| | 04:06 | We will take the same strategy here;
| | 04:09 | we will set the font
information at the table data level.
| | 04:14 | We don't need to set the font for the
Facebook image however, so let's save our
| | 04:18 | work for now and see what we have.
| | 04:21 | All right, several things, first of
all we need to change the color of our
| | 04:27 | heading and our subheading, and we need
to define the font information for them
| | 04:31 | a little bit better.
| | 04:34 | Let's also take a quick
look at the original design.
| | 04:36 | You'll notice that the phrase Private
Tours & Tastings in October is bold, and
| | 04:42 | you will notice that the line that
beings To RSVP please reply also is bold.
| | 04:47 | So let's remember to add those values as well.
| | 04:50 | In addition, we can also set
the color for the footer copy.
| | 04:54 | So we will start at the top, we will
begin with this font information, we will
| | 05:03 | scroll back down, Ctrl+V or Command+V to Paste.
| | 05:08 | We probably want the font size for our
heading to be around 16 pixels, we want
| | 05:14 | the font weight to be bold, and we
want a Serif font, we will start with
| | 05:20 | Georgia, Times and Serif.
| | 05:24 | This allows older email software to degrade.
| | 05:27 | If it doesn't have Georgia, it will
select Times, if it doesn't have Times, it
| | 05:31 | will select Serif, and because this
whole copy block uses Serif fonts, we will
| | 05:37 | simply copy it for our subheading as well.
| | 05:40 | We will go to our worksheet and we will
figure out what our colors are for the
| | 05:46 | headings, subheading and copy.
| | 05:49 | For our heading we have our
color as 35411d in hexadecimal.
| | 05:55 | For our subheading, we have as a color 9b9d9a.
| | 06:02 | Now we can copy the style information
for the heading into the paragraph tags.
| | 06:07 | We will of course adjust the
font size and the line-height.
| | 06:13 | Up here I notice that the line-
height is actually set incorrectly.
| | 06:16 | It should be at least equal to the font-size.
| | 06:18 | We will set it at 16.
| | 06:19 | The addition if you remember,
the subheading is Italicized.
| | 06:26 | So we will set that as <em> for
emphasis and we will close it off here.
| | 06:32 | If you recall Private Tours &
Tastings also was Bold, so we will set that in Bold.
| | 06:41 | And this To RSVP line also was set in Bold.
| | 06:45 | I forgot to reset the font-size.
| | 06:47 | Let's go back and set this.
| | 06:50 | It's 12, 12 and 12.
| | 06:56 | We also can increase the
line-height to 16, 16, and 16.
| | 07:05 | So let's save our work and see what we have.
| | 07:07 | Let's close, let's look at our original design.
| | 07:14 | I see that actually in our original
design our font is San-serif for the actual body copy.
| | 07:19 | So we will make that change, and I
see that we have more space in between the lines;
| | 07:24 | it's a little bit bigger.
| | 07:26 | So let's go back and make those changes.
| | 07:28 | So we will make the leading 18
pixels, 18 pixels, 18 pixels.
| | 07:37 | So I will scroll down to the paragraph
tags, and I will change this definition
| | 07:41 | to Arial, Helvetica, and San-serif.
| | 07:45 | Then I will copy this change to the
other paragraph tags, not the heading or subheading.
| | 07:53 | I also need to set this line-
height to 18 to make everything equal.
| | 07:58 | Let's go back and change our
paragraph definitions to make the
| | 08:01 | font-weight normal.
| | 08:02 | We are only updating the
paragraph tags at this point.
| | 08:11 | That's much better.
| | 08:12 | Now that we have our content figured
out, let's work on issues of margins and padding.
| | Collapse this transcript |
| Adjusting the margins and padding| 00:00 | In this video we'll begin to work on
margin and padding issues in our e-mail.
| | 00:06 | You'll see that the copy block for
example is spread wall-to-wall in our content table.
| | 00:12 | So go up to our heading, go up to our
css prep code and we'll copy this style
| | 00:19 | information and we'll adjust it to
adjuster spacing, add a space, paste, add a space and paste.
| | 00:31 | What we will do here is we'll adjust
the padding at the top and bottom of our
| | 00:35 | heading, 20 pixels for the top and 5
pixels for the bottom.We'll set this to 0
| | 00:43 | for padding top of our subheading,
but we'll set the padding bottom to 20
| | 00:47 | pixels, let's Save and take a look.
| | 00:53 | So we need to increase the font
size of our heading and subheading, but
| | 00:57 | generally this works.
| | 00:59 | Instead of 16 let's try 20 pixels for
the heading, instead of 10 pixels for the
| | 01:06 | subheading, let's try 14 pixels,
we'll Save and check, it's much better.
| | 01:15 | Let's look at our design and
we're pretty close for now.
| | 01:20 | Next, let's look at the padding on
the left and right of our copy block.
| | 01:26 | We don't need to set the padding on the
left or the right for the heading or the
| | 01:29 | subheading, they're short enough, but
we probably do at the paragraph level.
| | 01:34 | So we'll go back to our prep code,
Ctrl+C or Command+C to copy, Ctrl+V
| | 01:39 | or Command+V to paste.
| | 01:40 | I want to set the padding at the
paragraph level, just in case the table data
| | 01:46 | cell information doesn't
translate to older e-mail software.
| | 01:50 | So we will set the padding right at 20
pixels and the padding left at 20 pixels,
| | 01:57 | and let see how that works for
this paragraph, that's close.
| | 02:03 | We can go to our original design
and we see that we have a little bit more space.
| | 02:10 | We'll set it to 30 for padding left
and 30 for padding right, save and check our work.
| | 02:20 | In addition if we want, we can use
break tags in our copy, this is not being
| | 02:26 | used for search engine optimization, so
if you want a different line break, you
| | 02:31 | also can use the break or BR tags.
| | 02:34 | This looks okay for now, so we'll
adjust the margin and padding for this To
| | 02:39 | RSVP bit of copy, then we'll highlight
and then copy this chunck of styles, we
| | 02:46 | don't need it for the private tours line,
we do need it down here, let's save and check.
| | 02:56 | We can add more space for this line To
RSVP, and we also need to add space below
| | 03:02 | it, so let's set the
padding right and left to 50.
| | 03:08 | We also want to control the padding
bottom, let's set that to 25, save and
| | 03:15 | check, there, that's much better.
| | 03:19 | So let's check our e-mail.
| | 03:22 | Again, if you want precision, you can
add BR tags to get the copy block to break
| | 03:27 | at exact points, for now I won't do that.
| | 03:31 | With our copy block
margin and padding figured out;
| | 03:34 | let's tackle the headers and footers
at the top and bottom of our e-mail.
| | Collapse this transcript |
| Formatting the headers and footers| 00:00 | We're ready in this video to finish
off our e-mail by coding the headers and
| | 00:05 | footers at the top and bottom of our e-mail.
| | 00:09 | We did set the font size here, but
we'll also need to set the margin and padding.
| | 00:14 | Go to our css prep file, Ctrl+C or
Command+C to Copy, Ctrl+V or Command+V to Paste.
| | 00:21 | We want the padding top and
bottom probably 5 pixels is fine.
| | 00:26 | We set the padding top and bottom
instead of margin top and bottom, because
| | 00:31 | older e-mail software often ignores
margin while paying attention to padding, so
| | 00:37 | let's save and see what we
did, the spacing looks good.
| | 00:43 | Let's also, while we're
adding, adjust the color.
| | 00:47 | If we go to our worksheet, we'll see
that the color in hexadecimal is cfce96, so
| | 00:56 | let's save our work and see
what we have, that looks good!
| | 01:01 | We'll set the anchor tag information last.
| | 01:04 | Next, let's worked at the
copyright and find us on Facebook.
| | 01:10 | To adjust the other bits of footer copy,
we'll simply put this information about
| | 01:15 | color and paste it in here and here.
| | 01:21 | We also need to grab the margin and
padding values, Copy, Ctrl+V or Command+V to
| | 01:27 | Paste, and here, and Save,
that looks pretty good!
| | 01:36 | We need to set the margin or
padding for the copyright notice.
| | 01:41 | So we use padding for the older
browsers and we'll set it to 20 pixels.
| | 01:50 | Now that we're down here, let's adjust
these width a little bit, let's tighten
| | 01:54 | the space around our Facebook icon.
| | 01:58 | We had the width for our Facebook
icons set to 50, let's set it to around 40,
| | 02:05 | and up here, let's reduce this by 10 to 190;
| | 02:09 | we'll Save and check, that's
make it a little bit tighter.
| | 02:15 | The next thing we'll work on
are the anchor tags styles. We'll scroll up;
| | 02:20 | here we'll need to set the color mostly.
| | 02:23 | If we look at our worksheet where we
define the colors and dimensions of our
| | 02:28 | e-mail, we can see that the color
for this link is c3e85d in hexadecimal.
| | 02:37 | save and check, great!
| | 02:40 | And finally, let's work on these
minor tables at the top and bottom, we'll
| | 02:46 | scroll up, we need to set the width to
550 pixels at the table and TD level,
| | 02:54 | let's scroll down to the bottom, we'll
also set the width here, 550 pixels, and
| | 03:04 | we will add basic font
styles and then add the copy.
| | 03:08 | We go to our css prep file, highlight,
copy, paste, this is mouse print, so
| | 03:17 | we'll set it to 10 pixels high,
we'll leave the line-height.
| | 03:20 | For now we'll set basic
unsubscribed information.
| | 03:27 | We'll Save and check, great!
| | 03:33 | With our header and footer complete
we're ready to begin testing formally.
| | Collapse this transcript |
| Testing the email in BrowserLab| 00:00 | This is where we left off with our HTML e-mail;
| | 00:03 | it's fully coded and ready to test.
| | 00:06 | To begin our test, we need to put our
HTML e-mail file on a remote web server
| | 00:12 | along with its images.
| | 00:14 | Our current file is number 4 and we'll
copy our Image folder and we'll drag them over.
| | 00:20 | Then I double-check if this file does
display over the Internet, it does, we're
| | 00:27 | ready to begin testing.
| | 00:29 | To begin our testing, let's start with
browser lab, this is currently a free
| | 00:33 | service that Adobe offers where you
can test how your HTML e-mail displays
| | 00:38 | against various web browsers.
| | 00:41 | We've created a browser set of just
Internet Explorer browsers, and we go to
| | 00:46 | the Test page, we'll go back to the
URL where our HTML file is located, we'll
| | 00:54 | paste it into the URL.
| | 00:59 | We can see that at the top, the
HTML e-mail displays fine, including
| | 01:03 | our background border.
| | 01:05 | We also can see that our spacing
and alignment generally is okay.
| | 01:10 | The copyright line and find us on
Facebook line might be pushed down a little
| | 01:14 | bit, but otherwise it displays perfectly.
| | 01:18 | With Internet Explorer 7, we have this
same result and with Internet Explorer 8,
| | 01:26 | as we expect, everything looks great,
and 9 as well, because both 8 and 9 are
| | 01:33 | pretty much standards compliant.
| | 01:37 | The only issue we found has to do with
spacing of the copyright line and the
| | 01:41 | find us on Facebook line, let's see
if we can tweak this just a little bit.
| | 01:47 | We'll scroll down to our copyright;
| | 01:50 | let's see if padding will help us out.
| | 01:52 | Let's do 10 pixels of padding,
and we'll do 0 on the bottom.
| | 01:57 | 10 pixels of padding on
the top and 0 on the bottom.
| | 02:04 | I also notice here, for this table data cell.
| | 02:07 | we have not defined margins and padding at 0.
| | 02:10 | For older e-mail software we
might want to play it safe.
| | 02:13 | So let's copy this information from
css prep file, we'll make a simple style
| | 02:20 | declaration, and we'll type Ctrl+V or
Command+V, just a little bit of safety.
| | 02:27 | Probably, we could set it at 7 or even
8 pixels of padding on the top, with the
| | 02:33 | changes made, we'll, FTP the new
version over and we'll go to browser lab,
| | 02:40 | scroll here to the top, hit Refresh,
and scroll down, and that looks great!
| | 02:48 | We have good vertical height and
the text is aligned to the middle of the Facebook icon.
| | 02:53 | Let's double-check with
Internet Explorer 6 and 7;
| | 02:57 | to be sure, we get the same
results, that's much better.
| | 03:04 | Now that our HTML e-mail has passed
browser lab, and we can be certain that any
| | 03:09 | older e-mail software that uses Internet
Explorer 6 or Internet Explorer 7, will
| | 03:15 | display our e-mail fine, the next
with testing is to use an e-mail delivery
| | 03:20 | service to test how our e-mail
looks in different e-mail software.
| | 03:26 | The e-mail delivery service that I want
to use for testing is Campaign Monitor,
| | 03:31 | but there are other ways to test your e-mail.
| | 03:34 | MailChimp for example has a similar service.
| | 03:37 | I create a campaign called Two Trees Test;
| | 03:41 | we need to update the HTML, we go back
to our remote server, we Copy the URL and
| | 03:50 | we Paste it here, with Ctrl+V or
Command+V and we click Get my campaign.
| | 03:59 | We want to preview the campaign to
make sure we've got the right e-mail, and we do.
| | 04:05 | Next, we want to click the
link Design and spam testing.
| | 04:10 | On the right we want to click Run a
new test, we click Test this draft.
| | 04:16 | At the bottom click Submit
payment and run the test button.
| | 04:21 | Now we wait a few minutes for the results.
| | 04:23 | On the right hand column you'll see a
series of Web-based e-mail clients that
| | 04:28 | our e-mail is tested against, Desktop
e-mail clients, Mobile e-mail clients, and
| | 04:33 | then they also have Spam filter results.
| | 04:36 | As you wait, on the right, you'll see
the different names of the e-mail clients
| | 04:42 | fill in and become dark as the test complete.
| | 04:45 | Now we've got some of our results, so we
can check those while we wait for Apple
| | 04:50 | Mail and other e-mail clients to come
back, let's check first with AOL Web.
| | 04:55 | The top appears great, it picked up
the background tables, and the vertical
| | 05:01 | alignment on our footer, our
copyright copy looks great!
| | 05:07 | Next, we'll check Gmail, that also
shows the background table, and our vertical
| | 05:13 | alignment in the footer also works.
| | 05:17 | Hotmail, we can see that Hotmail has
changed the font color, there is a way to
| | 05:23 | address that if we want to test further.
| | 05:26 | Let's see what other issues come up however.
| | 05:29 | MobileMe is problematic, both because
it's going away, and because it doesn't
| | 05:33 | respect the background color.
| | 05:36 | So you can see that our copy block is
see-through our logo only works, because
| | 05:40 | it is wall-to-wall, and the
footer table doesn't work at all.
| | 05:46 | So there's really nothing
we can do in that instance. With Yahoo! Mail
| | 05:50 | we get results similar to Gmail.
| | 05:54 | So far the only real issue is Hotmail
changing the color of our subheading.
| | 06:00 | There are times when e-mail code
works perfectly on every e-mail software,
| | 06:05 | except one, as in this case.
| | 06:07 | You have to decide how far to go with testing.
| | 06:11 | If you want to continue testing in e
-mail forever, until you solve the
| | 06:14 | problem, you either need the e-mail
software or pay additional amount of money for testing.
| | Collapse this transcript |
| Designing and coding a text email| 00:00 | Creating a text version of our
e-mail should not take much time;
| | 00:04 | it's also one of the more
interesting design challenges.
| | 00:08 | Text e-mail cannot use color, font
size and HTML links, for example.
| | 00:12 | To begin we'll start with our e-mail
copy text file, we'll type Ctrl+A or
| | 00:17 | Command+A to select everything, Ctrl+C
or Command+C to Copy and we'll create a
| | 00:23 | new file and Ctrl+V or Command+V to Paste.
| | 00:28 | One of the key challenges with text
e-mail design is how to differentiate
| | 00:32 | headings from links, important
information from non-important information.
| | 00:37 | In this case, it's important to tell
people how they subscribed, and how you got
| | 00:41 | there e-mail address.
| | 00:43 | It's also important to include
a link to view the web version.
| | 00:46 | However, it's not as important as
they heading or subheading, so let's
| | 00:50 | build this text e-mail.
| | 00:53 | Put this on a new line, we have
in our exercise file a series of character lines.
| | 00:59 | This represents how we might use
different characters on the keyboard to create
| | 01:03 | dividers, to help our
readers, skin our text e-mail.
| | 01:08 | In this case, you see we have plus
signs, double equal, and I'm looking for
| | 01:13 | stars, so I'll select this, copy and then paste.
| | 01:19 | The other important point about text e
-mail is that it can only be about 60
| | 01:23 | to 65 characters wide.
| | 01:26 | E-mail software typically cuts off
text e-mails at about 70 to 80 characters.
| | 01:33 | In this case, our borders are about 40
characters I'll add a border underneath,
| | 01:39 | and I will use the heading to give
me an idea where to do a line break.
| | 01:42 | I'll shorten this up a little bit;
| | 01:46 | I'll add the link to the web version.
| | 01:50 | Next, I want to tackle a heading here,
I like the idea of an underline, so
let me do this.
| | 01:58 | I'll push this over to roughly the
right edge of our top divider line and I'll
| | 02:05 | do the same, and I'll use it to line up.
| | 02:07 | Then I'll go through my copy and pick
breakpoints based on the right edge,
| | 02:16 | doesn't have to be perfect,
it just has to look good.
| | 02:20 | I'm also separating out that we look
forward to seeing you, because it will be
| | 02:24 | much stronger this way than on a webpage.
| | 02:28 | This chunk of text looks fine;
| | 02:29 | I need to break this up a little bit.
| | 02:36 | Here with the address, I'm going to
do this on multiple lines and I'll
| | 02:41 | remove the HTML code.
| | 02:46 | Finally, I'll change this
symbol for copyright to the word.
| | 02:52 | I'll add a link for Facebook, because
the copyright, and to lesser extent the
| | 02:58 | Facebook URL are less
important than the actual message.
| | 03:02 | I want to create a divider here.
| | 03:04 | I'll go to my file with e-mail dividers,
so I'll select this, scroll down, hit
| | 03:14 | Enter and there's our text e-mail.
| | 03:17 | As you can see we've taken a couple of
very simple ideas, and we've created some
| | 03:22 | visual differentiation, so people can
tell what are headlines, what's copy,
| | 03:26 | what's extremely important
and what's less important.
| | 03:29 | Now we'll save this.
| | 03:30 | Now that we have a text version and an
HTML version of our e-mail, we're ready
| | 03:38 | to send our e-mail, the
last step in this project.
| | Collapse this transcript |
| Sending the final email out | 00:00 | In the last video we created a text
e-mail version of our HTML e-mail.
| | 00:06 | In this video we'll go back to Camping
Monitor to show how to send both, text
| | 00:10 | and HTML versions of our e-mail.
| | 00:12 | The first step is to rename our email-
invitation file that we've used to test.
| | 00:18 | We'll rename this as email-
invitation-final.html, and we'll save it.
| | 00:28 | After that we'll refresh our FTP
and we'll send it over to our server.
| | 00:35 | At Camping Monitor we want to click on
the Two Trees Test campaign, and now we
| | 00:43 | can update both our HTML and text e-mails.
| | 00:47 | The name is changed to HTML invitation
-final, click Get my campaign, we'll
| | 00:54 | preview the campaign, it
looks like everything is working.
| | 00:57 | Now I'll go back to Saved Drafts,
and we'll update our Text e-mail.
| | 01:06 | For that we'll return to our code
editor or e-mail invitation file Ctrl+A or
| | 01:11 | Command+A to Select, Ctrl+C or Command+
C to Copy, we'll highlight everything
| | 01:18 | here, we do need to leave the
unsubscribed link, make some space below so that that's clear.
| | 01:25 | We'll scroll down and click
I'm done, return to the snapshot.
| | 01:29 | Now we are ready to send.
| | 01:32 | We scroll down and click Test and
define delivery, we'll scroll down we'll Skip the test.
| | 01:39 | We want to deliver the campaign immediately;
| | 01:42 | we'll scroll down and click
Send campaign immediately.
| | 01:47 | Now let's see our results.
| | 01:49 | We'll check in Google mail, and here,
in Gmail, we see that our e-mail
has arrived.
| | 01:59 | The images are all turned off,
however, it still displays fine.
| | 02:05 | Let's turn the images on, we click
Display images below, and everything looks good!
| | 02:13 | This chapter has shown all the key
steps needed to code, both HTML and text
| | 02:18 | e-mails, as well as
testing and sending our e-mails.
| | 02:21 | You should be able to code almost any
e-mail using the techniques you've seen in this chapter.
| | 02:26 | Good luck with your projects!
| | Collapse this transcript |
|
|
