IntroductionWelcome| 00:04 | Hi! I'm Tim Slavin, and welcome to
Effective HTML Email and Newsletters.
| | 00:09 | In this course, I'll be covering
several main topics, the differences between
| | 00:14 | web pages and HTML emails,
display problems with email software,
| | 00:19 | email marketing basics, including how to
avoid creating spam, and common coding issues.
| | 00:25 | I'll also walk you through the creation
of single-, double-, and multicolumn HTML
| | 00:30 | email newsletters from beginning to end.
| | 00:33 | In addition, I'll show you how to send
email with several email delivery services.
| | 00:38 | Plus I'll show you how to automatically
create email newsletters from your web
| | 00:43 | site content using WordPress and
ExpressionEngine, as well as two services that
| | 00:48 | generate emails from your web site RSS feed.
| | 00:52 | If you have questions about email
content, design, and coding, you'll find
| | 00:57 | answers in Effective HTML Email and Newsletters.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you have access to the exercise file
for this course, you can drag the folder
| | 00:05 | to your computer desktop, as I have here.
I'll point out some key exercise files
| | 00:10 | that you might find useful.
| | 00:15 | In chapter 1 you can find the MIME
type exercise that we show in the fourth
| | 00:20 | video. Chapter 2 has an Editorial-
Calendar. Chapter 4 has all the files related
| | 00:29 | to our 1-column email project.
Chapter 5 has all the files for our
| | 00:34 | 2-column email project, and chapter 6
has all the folders and files for the
| | 00:41 | multi-product email project.
| | 00:44 | Chapter 7, chapter 7 has the text
email files, specifically examples of text
| | 00:52 | emails, as well as the project that we
created. Chapter 8 has the two templates:
| | 00:59 | one for automating email newsletter
creation in WordPress in chapter 8 the
| | 01:04 | third video, and the other for
automating emails in ExpressionEngine.
| | 01:11 | And finally, Chapter 11 has code
examples to fix a variety of problems that you
| | 01:16 | might encounter as you code email.
| | 01:19 | If you don't have the exercise
files, you can use your own files.
| | Collapse this transcript |
|
|
1. Exploring HTML EmailUnderstanding differences between HTML email and web pages| 00:00 | Here's a web page.
| | 00:02 | Here's an HTML email. Wouldn't it be
great if they were the same? You could pop
| | 00:06 | your web page into an email,
hit the Send button, and be done.
| | 00:10 | However, HTML email is not a web page.
| | 00:13 | In fact, while web pages and HTML
email look the same, they're very different
| | 00:17 | when you look at their code.
| | 00:19 | Let's explore some of the
differences between web pages and HTML email.
| | 00:23 | First, let's look at how they're viewed.
Web pages appear on computer screens with
| | 00:28 | web browsers; HTML email
is viewed in email software.
| | 00:32 | Email software is much more limited, visually, as
well; you see much less than you do of a web page.
| | 00:38 | Second, let's compare code. The web page
code is much more clean and easy to read
| | 00:42 | then the HTML email code, isn't it?
| | 00:45 | Let's look deeper into the code.
| | 00:47 | Web page styles are put into a style
sheet, while you see that HTML email puts
| | 00:51 | styles all over the place.
| | 00:53 | Finally, let's look at this HTML
email as it appears in different email
| | 00:57 | software. While web browsers today
display web pages mostly the same way,
| | 01:02 | that's not true for HTML email, as you
can see. They are big differences is in
| | 01:07 | how HTML email displays.
| | 01:10 | This course will explore these
differences in great detail as we show you how to
| | 01:13 | code HTML email, how to create and plan
email campaigns, and everything you need
| | 01:18 | to know to do email marketing.
| | Collapse this transcript |
| Seeing how HTML email displays in different email programs| 00:01 | In the prior video, we saw how HTML
email is not a web page sent as an email.
| | 00:06 | Now, let's dig more deeply into how
one email can be different when viewed in
| | 00:11 | different email software.
| | 00:13 | Here is one HTML email viewed in
several different email software clients:
| | 00:19 | Gmail, Outlook 2003, and Outlook 2010.
| | 00:25 | While they mostly look the same, there are
some key visual differences, aren't there?
| | 00:29 | For example, the background is
missing and one of these emails.
| | 00:33 | The key difference between email
software is the software they use to
| | 00:37 | display HTML email.
| | 00:40 | The older the software used to display
HTML in an email, the more problems you
| | 00:45 | will find when you send email
to people with that software.
| | 00:49 | Let's dig a little deeper into
the code of an actual HTML email.
| | 00:53 | In this case, we'll use Google
Chrome, so that we can view the code.
| | 00:57 | As you can see, here is the
text, "Link to web page version."
| | 01:04 | I'll scroll down, so you can see that's the
text right there. Push this back up.
| | 01:12 | This is the sum total of the code for the
email in the email software we saw a moment ago.
| | 01:20 | This single table contains
this entire plum-colored email.
| | 01:24 | Now, let's look at the code above and below it.
| | 01:29 | You'll notice that almost all of the code
around this HTML email, it can be variable.
| | 01:37 | There's no way to predict whether there will
be a little code around our HTML email or not.
| | 01:43 | What are the reasons for the differences
in the way that HTML email software renders?
| | 01:48 | HTML email, for one,
| | 01:51 | there are no standards for email display.
| | 01:54 | In addition, services like Gmail must
protect themselves from harmful code.
| | 01:59 | It's also the case that some
services have to fix broken HTML code in the
| | 02:04 | emails that are sent.
| | 02:07 | Finally, some email software use
old rendering software for HTML.
| | 02:14 | How can you code HTML email that
will work across all email software?
| | 02:19 | The answer is to use HTML tables.
| | 02:22 | You wrap HTML tables around your
email like nested Russian dolls.
| | 02:28 | You put one HTML table inside of another.
| | 02:30 | For example, with this HTML table, the
initial table is 99% wide and nested within
| | 02:39 | it is another table that is
the width of the actual email.
| | 02:44 | And if we were to click down, we would
find additional tables that contain all of
| | 02:50 | the content within the email.
| | 02:53 | Using HTML tables protects your email,
no matter what happens when your email is
| | 02:58 | displayed with an
inferior HTML rendering engine,
| | 03:01 | and no matter what happens with the code
that is wrapped around the HTML email you send.
| | 03:07 | We now have a greater understanding
about how HTML email is different from web
| | 03:12 | pages, and the challenges we face as we
create code and send email, and how to use
| | 03:17 | HTML tables to protect your emails.
| | 03:20 | In our next video, let's look at how to
keep up with the changes in how email
| | 03:25 | is displayed.
| | Collapse this transcript |
| Finding Acid tests and compatibility checklists| 00:01 | We've seen how HTML email is not a
web page sent as an email, and how HTML email
| | 00:07 | looks different in different email software.
| | 00:10 | Now, let's explore how to find out
what email software does with HTML email.
| | 00:15 | First, there are a few online resources
where you can find how email software
| | 00:20 | displays different HTML and CSS properties.
| | 00:23 | Here is the most comprehensive
resource for when you have questions about
| | 00:28 | whether or not Notes or other email
software supports a specific property.
| | 00:33 | This page is an article at the Campaign
Monitor email delivery service, and they
| | 00:39 | maintain a list of test results for
different web browsers for all different CSS
| | 00:45 | selectors and styles.
| | 00:48 | For example, you can see that the
border property works in Outlook 2000 and
| | 00:56 | 2003, is somewhat questionable in Live Hotmail,
but it displays fine in all of these others.
| | 01:03 | It doesn't display well in Lotus Notes 6 and 7.
| | 01:07 | This article is an excellent resource if
you have a very specific question about
| | 01:12 | whether or not a style works, or if
you're testing your HTML email software and
| | 01:17 | you see that a style is not working
and you want to confirm that in fact the
| | 01:20 | problem is with the email software.
| | 01:23 | Another useful resource is the Email
Standards Project web site which tracks how
| | 01:28 | different email software
supports CSS and HTML properties.
| | 01:34 | The Email Standards Project
also uses an acid test email,
| | 01:37 | a single email that contains the
most commonly used HTML and CSS.
| | 01:43 | The acid test is used to test email software
fairly across a range of HTML and CSS styles.
| | 01:52 | You can see how one email appears in
many different email software clients.
| | 01:58 | Here's what an acid test
report looks like for Lotus Notes 8.
| | 02:02 | It's easy to find an answer about what a
specific email software client does support.
| | 02:06 | For example, Lotus Notes 8 doesn't
support the border property or line-height.
| | 02:17 | The campaign monitor and email
standards web sites are some of the best ways
| | 02:22 | to find out if email software used by your
readers supports a given CSS or HTML property.
| | 02:28 | The next step in understanding HTML
email is to talk about what exactly
| | 02:32 | is email.
| | Collapse this transcript |
| Understanding MIME types: HTML vs plain text| 00:00 | So, what is email?
| | 00:02 | It's what shows up in my inbox,
right? Well, not exactly.
| | 00:06 | Like web pages, email is both content and code
used to organize and display that content.
| | 00:11 | In this video, let's explore exactly what
HTML email and plain text email are made
| | 00:16 | of, and how it impacts your email deliveries.
| | 00:20 | If you don't know, the Internet is
made up of interlocking standards for web
| | 00:24 | pages, email, video, and all the
rest. There are two types of email:
| | 00:29 | plain text and HTML.
| | 00:32 | These are called MIME types, for
Multipurpose Internet Mail Extensions.
| | 00:37 | MIME describes his standards for
creating and sending email on the Internet.
| | 00:42 | You might see the HTML version or the
plaintext version and not realize that
| | 00:47 | hidden in the exact same
email is the other version.
| | 00:50 | All email, whether it's text or
HTML, is made up of certain blocks.
| | 00:57 | The first block that you'll see
in the code is the header data.
| | 01:01 | The second significant block is the
content type description for the email, and a
| | 01:07 | boundary definition.
| | 01:09 | This definition number is unique to
each email, and you'll notice when I
| | 01:14 | highlight this number, Notepad++
highlights all the other instances.
| | 01:21 | In other words, this boundary is being
used to separate the text email portion
| | 01:25 | from the HTML email portion and
then end the definition of the email.
| | 01:31 | Here we have the first boundary, and
right beneath it we defined this portion of
| | 01:35 | the email as a text email.
| | 01:38 | Now, we put in text email here.
| | 01:41 | That content will look something like
this, a very straightforward text email.
| | 01:51 | Then we set the boundary again within our email.
| | 01:55 | This time we define it as text HTML,
and then we put the HTML underneath this
| | 02:01 | boundary, and that HTML
will look something like this.
| | 02:07 | Finally, we close off the
boundary for the bottom of the email.
| | 02:12 | Every single multipart email that
includes an HTML email and a text email has
| | 02:18 | this basic structure.
| | 02:20 | If you want to help yourself avoid
being labeled as a spammer, you will send a
| | 02:25 | text email version of every HTML
email you send, and the reason is that most
| | 02:30 | spammers don't bother to
send text email versions.
| | 02:34 | Now that we understand the basic
structure of a multipart email that contains
| | 02:39 | both text and HTML,
let's look at an actual email.
| | 02:43 | Now, this is not meant to frighten
anybody, but let's look at the structure.
| | 02:51 | If you notice--we'll scroll down
here, all the way down to here--this
| | 02:57 | corresponds in our
structure to the mail header data.
| | 03:01 | This information is simply giving you
the date the message was sent, where it
| | 03:05 | was sent, who it was sent to, all of
the information about this email.
| | 03:10 | And notice here we have our content type
defined as multipart, the same structure as here.
| | 03:18 | And if we were to scroll down in this
email, you would find the bottom of the
| | 03:23 | text email right here. This is the
border where the HTML email starts.
| | 03:32 | This is the border for the text email.
And down at the very bottom of the email
| | 03:41 | is the last instance of this marker
that defines the areas of our email.
| | 03:49 | Happily, we don't have to dig any further
into MIME types to understand that when
| | 03:53 | we send an HTML email, we also
should send a plain text version.
| | Collapse this transcript |
| Exploring the future of HTML email| 00:00 | Now that we have a greater idea of how
email works and how email differs from web
| | 00:05 | pages, let's talk for a few
minutes about the future of email.
| | 00:08 | One big change already happening is the
integration of social media with email.
| | 00:13 | Companies that deliver email have started to
integrate social media into email marketing.
| | 00:18 | You can see, for example, how people on
your list interact with email, Facebook,
| | 00:22 | Twitter, and other channels.
| | 00:24 | MailChimp and HubSpot are two
companies combining email marketing with
| | 00:28 | social media marketing.
| | 00:30 | Once HTML email software uses the
latest web browser software to display HTML
| | 00:36 | and CSS, the next big
leap will be in typography.
| | 00:40 | Web fonts allow web pages to show
fonts that are not part of the core fonts
| | 00:43 | included with web browsers.
| | 00:45 | For example, TypeKit allows you to put
fonts into your web pages that used to be
| | 00:50 | limited to print publications.
| | 00:53 | In the future, this font capability
also should be available in HTML email.
| | 00:59 | Another future trend has
to do with video and email.
| | 01:03 | Today you can send video in some
email software; for example, Mac Mail
| | 01:08 | will display video.
| | 01:09 | Later in this course, we'll explore a
particular solution for displaying video in email.
| | 01:17 | This article at Campaign Monitor, for
example, tests out all the different email
| | 01:23 | software and their ability to display video.
| | 01:26 | In the future, all of these email
clients should be able to display video.
| | 01:31 | While HTML email is somewhat limited
today compared with web browsers, in the
| | 01:35 | near future the two
media will begin to converge.
| | 01:38 | Email will still be
popular for its asynchronicity:
| | 01:42 | you can read email when you
want, and email is ease of use.
| | Collapse this transcript |
|
|
2. Email Marketing BasicsDefining spam| 00:00 | How did this innocent HTML
email wind up in my spam folder?
| | 00:04 | Let's explore spam: the email version.
| | 00:07 | Before 1978, spam was a bland
canned meat sold during World War II.
| | 00:12 | With the growth of the Internet
in the early 1990s, unsolicited emails started to
| | 00:16 | skyrocket and became known as spam.
| | 00:19 | What is email spam, and how does
it affect the emails we've sent?
| | 00:23 | Let's explore answers
to both these questions.
| | 00:26 | Email spam is obvious.
| | 00:28 | You didn't request the email and often
enough, responding to the email exposes
| | 00:32 | you to fraud and theft.
| | 00:33 | It's unlikely the email saying you've
inherited a million dollars is actually true.
| | 00:39 | Email spam is big business.
| | 00:41 | Enough people click and buy products that
warrant the minor expense spammers need
| | 00:45 | to create and send the emails to
hundreds of millions of people.
| | 00:49 | Hackers send spam by enslaving thousands of
private computers, perhaps even your computer.
| | 00:55 | These enslaved computer are called botnets, and
they're used to send millions of spam emails.
| | 01:01 | People like you who send legitimate emails
have to worry about being labeled as spammers.
| | 01:06 | The best way to avoid this
fate, don't do what spammers do.
| | 01:10 | Here are common ways spammers
reveal themselves in their emails.
| | 01:13 | For example, they send HTML email
alone with no plain text version, or they
| | 01:20 | include images in the email that tell
spammers your email account is real and
| | 01:25 | active, or they'll send links with
odd URLs that you can tell are clearly
| | 01:30 | false. And here are all the possible
layers your email must go through to
| | 01:35 | arrive at an email address.
| | 01:37 | With a better idea of spam and how it
works, let's look again at my innocent email.
| | 01:42 | Do you notice a few things that
might have triggered as spam filter?
| | 01:45 | Words like free, win, prize all got
out email trapped in a spam filter.
| | 01:52 | Spam is both a burden and an opportunity.
| | 01:55 | As we will see, many of the solutions
to spam involve working more closely with
| | 01:59 | people who receive your emails.
| | 02:01 | In this chapter, I'll show you
how not to be labeled as a spammer.
| | Collapse this transcript |
| Examining legal issues with permission-based email| 00:00 | Sending spam is illegal, and people
sometimes go to jail for spamming.
| | 00:05 | Even though I'm not a lawyer
and this is not legal advice,
| | 00:08 | I want to point out the guidelines
your emails must follow, and show where you
| | 00:12 | can get more information.
| | 00:14 | Emails sent in the United States
are governed by the CAN-SPAM law.
| | 00:18 | This law has numerous elements, but
they all boil down to a very simple
| | 00:22 | concept: be honest. Don't have false
or misleading From or Reply to addresses
| | 00:27 | in your email, for example.
| | 00:29 | Don't use deceptive subject lines.
| | 00:31 | Identify your message as
an ad if it's in fact an ad.
| | 00:35 | Tell readers where you are located, and
let readers opt out in a timely fashion,
| | 00:40 | usually at that moment that
they opt out or very soon after.
| | 00:44 | In Europe, the European Union has
several laws which follow the same guidelines
| | 00:49 | as CAN-SPAM. Basically, be honest.
In addition, the European laws require the
| | 00:54 | email sender to have a prior commercial
relationship with the recipient of their emails.
| | 00:59 | The primary takeaway from both the CAN-
SPAM law and the European Union laws is
| | 01:05 | to identify yourself and your
business in your emails while providing a
| | 01:09 | legitimate way for you readers
to opt out of your email list.
| | 01:13 | Tell readers how you got their address,
make the unsubscribe link easy to find,
| | 01:19 | and include your name, address and
phone number. With an idea of the minimum
| | 01:23 | that you need to include in your
emails to avoid being labeled as a spammer,
| | 01:28 | let's talk in the next video
about how to design an HTML email.
| | Collapse this transcript |
| Planning email campaigns| 00:00 | In this age of Facebook, Twitter,
Groupon, and many other "ons", email marketing
| | 00:05 | may seem old school, may seem a
less modern way to reach people.
| | 00:09 | However, email marketing is still
vastly bigger than social media in terms of
| | 00:13 | its impact, spending, and satisfaction.
| | 00:15 | While not everybody is on
Twitter, almost everybody has email.
| | 00:20 | In addition, if you're a local business,
the chances of every person walking
| | 00:24 | into your store having an email
address is far, far greater than those people
| | 00:29 | having Twitter accounts as well.
| | 00:31 | Reaching those customers with
email is far more effective.
| | 00:35 | Email marketing is like
any other marketing activity;
| | 00:38 | you need to plan ahead to
achieve success over time.
| | 00:41 | Here are the key steps to
plan an effective use of email.
| | 00:45 | First, what do you want to achieve?
| | 00:47 | How do you measure success and failure?
| | 00:49 | Next, who do you want to reach, and how often?
| | 00:52 | How will you track your results?
| | 00:54 | Where will you get your email addresses?
| | 00:57 | Also consider how you might tie
in your email marketing with other
| | 01:01 | marketing your business does.
| | 01:02 | For example, do you want to use
email to drive people to your web site?
| | 01:06 | Do you want to reuse content from your
emails on your Facebook page, or do you
| | 01:11 | want to keep your content separate?
| | 01:13 | Write down your answers to these
questions in a document and then come back
| | 01:16 | later to see how you did.
| | 01:18 | For example, you might come back every
month, or certainly once a year, to compare
| | 01:24 | your plan against your actual results.
| | 01:26 | Planning ahead will make your email
marketing efforts much more efficient
| | 01:30 | and more effective.
| | 01:32 | Next, we'll show how to create
content for your email campaigns.
| | Collapse this transcript |
| Creating content for email campaigns| 00:00 | Once you plan your email marketing
efforts, the next step is to make sure you'll
| | 00:04 | have enough content for your readers.
| | 00:06 | Great content doesn't happen by magic.
| | 00:09 | It also requires careful
planning and realistic goals.
| | 00:13 | The first step to creating great contents is to
be realistic about what you can and cannot do.
| | 00:18 | You may want to send a weekly email on
newsletter, for example, but only have
| | 00:21 | time to publish once a month.
| | 00:23 | It's better to plan for content once a
month than to fail to publish, or barely
| | 00:27 | publish, once a week.
| | 00:29 | The second key step is to find a way to
organize content you do want to create.
| | 00:33 | Your choices are paper or
calendar or spreadsheet.
| | 00:36 | If you use paper, you want to have a
single sheet of paper for each email you
| | 00:41 | send, and on each piece of paper you
write down these story ideas and any details
| | 00:45 | you need, like URLs and so forth.
| | 00:48 | If you use calendars, it's pretty
much the same way. For each date on the
| | 00:52 | calendar that you plan to send an email,
| | 00:53 | you write out the information,
your story ideas, any other data.
| | 00:57 | For spreadsheets, you would have columns for
each of the elements that you want to track.
| | 01:02 | Organizing your story ideas and
managing them in a single place is called
| | 01:06 | an editorial calendar.
| | 01:08 | One big question is, what to track?
| | 01:11 | Story ideas you want to track, at the
very, very least. You also want to track
| | 01:14 | the due date and the publication date.
| | 01:17 | You might or might not
want to track the writer name.
| | 01:19 | For example, if you're the only writer,
it's really not useful to keep writing
| | 01:23 | your name into a spreadsheet or
a calendar over and over again.
| | 01:28 | You also might want to track clicks to find
out over time what content performs the best.
| | 01:34 | But it's important to note that not
every detail has to be tracked; you should
| | 01:38 | only track what matters absolutely the
most to you to get content out the door.
| | 01:43 | Once you have a way to organize and
track your ideas for email content, you will
| | 01:47 | need to think about where to get
ideas and content for your emails.
| | 01:50 | This mostly depends on your readers.
What will make your emails valuable to them?
| | 01:55 | Ask your readers and your
customers, what do they need to know?
| | 01:59 | Create lists of sites that cover
your topics and then review those sites
| | 02:03 | periodically to find stories that
you can link to from your emails.
| | 02:06 | Create Google News alerts for your
topics, and organize all of your ideas into
| | 02:12 | themes to find more ideas.
| | 02:14 | For example, you might want to
interview people who are subject matter experts.
| | 02:18 | Great content for email doesn't happen.
| | 02:21 | Creating an editorial calendar and
keeping it current is the best way to ensure
| | 02:26 | your emails stay relevant to your readers,
and relevant content is the best way to
| | 02:30 | meet the needs of your
readers and to meet your own goals.
| | Collapse this transcript |
| Understanding design constraints of HTML email| 00:00 | If you like a good design challenge, HTML
is an interesting design problem to solve.
| | 00:06 | The main design constraint with email is
the window size you use to view an email.
| | 00:11 | Typically, there's not much room to see
anything in your email. And think about
| | 00:15 | when your email first arrives in
your reader's inbox--that's part of your
| | 00:19 | design problem as well.
| | 00:20 | Email design is not simply creating
pretty stuff; email design also includes the
| | 00:25 | copy, the From name, the subject line--
it's all of these details, and more.
| | 00:29 | For example, if you start your subject
line with the same text, your readers
| | 00:34 | will find it easy to sort by subject
line and find your emails in their inbox.
| | 00:38 | There are other issues to design around as well.
| | 00:41 | For example, an email with a dark
background has to be sure the fonts stayed
| | 00:45 | lighter colored no matter what
software is used to view the email. And what
| | 00:49 | happens if images are turned off?
| | 00:51 | In this email, for example, we
cannot see all of the images.
| | 00:56 | If we click here, however,
our email displays perfectly.
| | 01:01 | In addition to these practical problems
that have to do with the email software,
| | 01:05 | there are also three basic HTML
design layouts you'll work with.
| | 01:09 | There is a single-column design,
which is typically for announcements.
| | 01:14 | There is a two-column design, which
typically is used for newsletters, and
| | 01:19 | there's a multicolumn, three columns,
sometimes four columns, that's used for
| | 01:22 | products, typically a 3x3 or 3x5 grid.
| | 01:27 | What layout design you work with
depends on your goals, the same as your web
| | 01:31 | page design or print ad or brochure design.
| | 01:34 | But email design is limited by number
of factors, for example, how the email is
| | 01:40 | first viewed as a list when it
is received in someone's inbox.
| | 01:45 | That determines if readers will open
your email and if your email is opened, what
| | 01:50 | it looks like in the viewport.
| | Collapse this transcript |
| Designing effective HTML email| 00:00 | Email design is limited primarily by
the software used to view your email--
| | 00:05 | most times images will be off by default,
for example--and your design needs to
| | 00:10 | make it easy for readers to scan
content whether your email is HTML or text.
| | 00:16 | The first place to start with possible
email designs is your own web site design.
| | 00:21 | Distill the web page design
into a grid and key elements,
| | 00:25 | for example, logo, top
navigation, and content columns.
| | 00:29 | Your goal is to convert your web
page design into a grid and a series
| | 00:34 | of interlocking boxes.
| | 00:36 | If you want to start from scratch
with an email design, there are three
| | 00:40 | essential designs used in email:
| | 00:43 | one column, which is typically for
announcements; two-column designs, which
| | 00:47 | are typically for newsletters;
and multicolumn product emails, which have
| | 00:52 | multiple columns and rows.
| | 00:54 | All three essential email designs use
a single HTML table to wrap around HTML
| | 01:00 | tables and rows and columns
that will make up your email design.
| | 01:03 | In this case, for example, we
have a single box around the email,
| | 01:09 | we have a box around the header, a box
around the navigation area, boxes to hold
| | 01:14 | the products, and at the
bottom, a box for the footer.
| | 01:17 | Each of these boxes will be in HTML
table or in a HTML table cell or a table row.
| | 01:24 | Not everything should go into the email design,
| | 01:27 | however. You have less
horizontal width in an email,
| | 01:30 | so you might need to shorten the number of
links in the top navigation of your email.
| | 01:35 | The tight horizontal space also
limits the width of any side column if you
| | 01:39 | choose a two-column design.
| | 01:42 | Here's a plain text email design.
| | 01:44 | The main changes here have to do with
no images and displaying navigation links
| | 01:49 | vertically instead of horizontally,
| | 01:51 | yet both the web page and the
plaintext version have to use whitespace
| | 01:55 | effectively to succeed.
| | 01:57 | A clean design for your emails is one
of several must-haves for an effective
| | 02:01 | email and email marketing campaign.
| | Collapse this transcript |
| Building email address lists| 00:00 | Your list of email addresses is a key
element of successful email marketing.
| | 00:06 | Let's talk about how to create
that list of email addresses.
| | 00:10 | First, one common way to collect email
addresses is to add a sign-up box on your web site.
| | 00:16 | Most, perhaps all, email delivery services
make it easy to use their code on your web site.
| | 00:21 | Here we will look at iContact,
which is one email delivery service.
| | 00:26 | Once logged in to iContact, click the My
Contacts tab. On the right, click Sign-up Forms.
| | 00:34 | We've created a sign-up form already.
| | 00:37 | If you need to create a sign-up form,
click the Create HTML Form button.
| | 00:43 | In this case, we click the View HTML.
| | 00:46 | This calls up a text area with all
the code we need for the sign-up box.
| | 00:51 | I'll highlight it, right-mouse-click,
Copy, and then open Notepad++. Into a file
| | 00:57 | that I've already created, I'll paste the code.
| | 01:00 | I will save the code and
go over to the web browser.
| | 01:06 | I have here this page that I called up in
Notepad. Right-mouse-click, hit Reload.
| | 01:12 | I now have the sign-up form.
| | 01:15 | Typically, the sign up box will
be somewhere on your web site,
| | 01:18 | for example, on the right column or in
the top right of your web page design.
| | 01:25 | Let's add an email address.
| | 01:30 | And we click the Submit button
as if we were on your web site.
| | 01:34 | iContact returns this confirmation
page with information about how to stop
| | 01:39 | receiving email and how to
ensure email gets to you.
| | 01:44 | Another way to collect email addresses,
perhaps the best way to collect email
| | 01:48 | addresses, is in person.
| | 01:49 | For example, a restaurant might have a
small postcard that they tuck into their
| | 01:54 | bill when they hand it to customers, or
a flower shop might have postcards or a
| | 01:58 | notebook by the register and then encourage
people to sign up while they wait in line.
| | 02:03 | In addition, it's also extremely
important to practice good email hygiene.
| | 02:08 | For example, if an email address
bounces more than twice, remove it.
| | 02:14 | Chances are that email address no longer works.
| | 02:17 | In addition, you might remove email
addresses that don't open your email in the
| | 02:21 | past three to six months.
| | 02:23 | Chances are they are no longer interested.
| | 02:25 | Finally, you might also consider
removing email addresses that did not click a
| | 02:30 | link in the past six months,
whether or not they opened their email.
| | 02:35 | The single most important fact
about lists of email addresses has to do
| | 02:39 | with reader interest.
| | 02:41 | A list of 50 readers who email you back,
blog your content, share your emails
| | 02:47 | with friends, and buy your products,
those 50 readers will beat 5,000 readers who
| | 02:52 | will never open your email.
| | 02:54 | Numbers really don't matter.
| | 02:55 | What matters is interest and
activity generated by your emails.
| | 02:59 | The final message on email addresses is
to never buy a list from someone else.
| | 03:04 | Many email delivery services won't
let you send emails to those lists, and
| | 03:09 | many of the addresses are no longer used, or
the people are not interested to hear from you.
| | 03:14 | Bottom line: be careful how you collect your email
addresses and do what you can to keep
| | 03:19 | your readers interested, opening your
emails, clicking your links, and sharing
| | 03:23 | your emails.
| | Collapse this transcript |
|
|
3. Getting Started with ProjectsChoosing tools for coding HTML email| 00:00 | To begin coding our HTML email projects,
we will need to choose a software tool
| | 00:05 | to create your emails.
| | 00:07 | What are your options?
| | 00:09 | You can use a template from
an email delivery service,
| | 00:11 | you can do the coding yourself, or you
can use a web site publishing tool like
| | 00:15 | WordPress or ExpressionEngine to
automate the creation of your HTML emails.
| | 00:21 | Which option to create emails works best?
| | 00:24 | That depends on you.
| | 00:25 | Let's briefly discuss each option.
| | 00:28 | With an email delivery service, you can
start with a template, then modify it
| | 00:32 | to meet your needs,
| | 00:33 | for example, to add your logo and links.
| | 00:36 | This works great if you find a
template that meets your own needs.
| | 00:39 | If you use software to publish your
web site, for example, like WordPress, you
| | 00:44 | can use a template to display
your site content as an email.
| | 00:47 | We will show you how, later in this video course.
| | 00:50 | The third option is what I do, hand code.
| | 00:53 | Well, I might start with a web page file,
| | 00:55 | I adapt it in an HTML editor by hand.
| | 00:59 | You certainly can use Dreamweaver and
other more complex tools, but a simple HTML
| | 01:05 | editor often works best and
provides the most control.
| | 01:09 | Some HTML editors to look at are Coda,
Notepad, Notepad++, Crimson Monkey,
| | 01:15 | TextEdit, TextWrangler, and there
are perhaps 3,000 other options.
| | 01:20 | This course assumes you want to
create, then code, your own unique HTML
| | 01:25 | email designs.
| | Collapse this transcript |
| Coding email versus coding web pages| 00:00 | Before you begin coding an HTML email,
it's important to keep in mind these
| | 00:05 | critical differences
between HTML email and web pages.
| | 00:09 | For example, in an HTML email, all
CSS is coded inline down to the lowest
| | 00:16 | possible level as table data cells,
paragraph tags, image tags, and so forth.
| | 00:22 | In a web page, however, all your CSS can be
rolled up neatly into one or more style sheets.
| | 00:28 | And HTML uses nested HTML table layouts,
while web pages use div layouts with CSS.
| | 00:35 | Emails cannot have JavaScript, and
image links must be absolute, with images
| | 00:40 | stored on a remote server.
| | 00:42 | Your fonts in an email also are
limited to Arial, Helvetica, Times New Roman,
| | 00:47 | and whatever might be on the reader's computer.
| | 00:49 | It's a very, very small set.
| | 00:51 | With web pages, almost any font is
possible if you use services like TypeKit.
| | 00:56 | Email software often is not standards
compliant and you need to keep that in
| | 01:01 | mind when you make choices
about what to use with CSS or HTML.
| | 01:07 | If you keep these differences in mind
as you code HTML emails, you should save
| | 01:12 | lots of time and stress.
| | Collapse this transcript |
| Preventing problems with email coding| 00:00 | Before we start to code HTML emails, here
are a few tips to keep in mind as you code.
| | 00:06 | You want to set margins to the lowest
possible level within your HTML tables.
| | 00:10 | For example, you want to set
your margins not at the table level;
| | 00:15 | you want to set it at all the TD levels.
| | 00:18 | For example, if you have white space
around the paragraph tag or white space
| | 00:22 | around an image, most likely you want to
start by putting your margins at the TD level.
| | 00:28 | If that doesn't work in your testing then try
it at the paragraph level or the image level.
| | 00:34 | Also be aware that floats don't work
with most email software, and padding
| | 00:40 | doesn't work with some email software.
| | 00:42 | When you design your HTML table layout,
use as few HTML tables as possible.
| | 00:48 | The less complexity there is,
the less there is to break.
| | 00:52 | All your image tags will
need to have these styles:
| | 00:55 | borders set to none and display is set to block.
| | 00:58 | Hotmail, for example, will add a gap
below images that don't have display set
| | 01:03 | to block, and Outlook email software
often will set borders around images
| | 01:09 | unless you set border to none.
| | 01:11 | If you see something broken in your
testing that is related to cascading
| | 01:15 | style sheets, check your semicolons
and check that you have double quotes to
| | 01:20 | start and end your style declarations.
| | 01:22 | If your layout is broken, always use
border = 1 in the table tags as you build
| | 01:28 | your HTML email layout.
| | 01:31 | I always set border = 0 and set
it to 1 while I create my layout.
| | 01:37 | In addition, and this will sound crazy, you
want to alphabetize your CSS definitions.
| | 01:43 | Color, for example, is defined before
font, and the reason is very, very simple:
| | 01:48 | HTML emails become clotted with
a massive amount of inline CSS.
| | 01:54 | If you need to go into a particular
part of your HTML email to find and correct
| | 02:00 | a CSS style, if is far easier if you know
that all of your style definitions are
| | 02:06 | neatly alphabetized.
| | 02:07 | Finally, when you define your
Inline CSS, you cannot use shorthand.
| | 02:13 | These are the most common inline CSS
styles that you will use that are often
| | 02:18 | turned into shorthand in web pages, and I
encourage you to type out or copy these
| | 02:25 | declarations somewhere in your text
editor, so you can quickly copy and paste
| | 02:29 | them into your code and adjust them as needed.
| | 02:32 | For example, fonts needs to be
broken out in the font-family, font-size,
| | 02:37 | font-weight, and line-height.
| | 02:39 | And your margins and paddings need
to be set to zero for margin top,
| | 02:44 | right, bottom, and left.
| | 02:46 | Let's get started with our projects.
| | Collapse this transcript |
| Understanding the ideal coding process| 00:00 | Before we start creating emails, let's
look at the ideal process to create emails.
| | 00:05 | This process will minimize errors and
make it much easier for you to create emails.
| | 00:10 | The first step is to
plan your HTML email layout.
| | 00:14 | This involves converting your design
into a grid, identifying what colors are in
| | 00:18 | the design, for example background
colors, and sizing the widths and the heights
| | 00:22 | that you'll need to
replicate in your HTML tables.
| | 00:26 | The second step is to code your layout
in HTML tables, then you add content to
| | 00:31 | your HTML table layout, then you add
inline styles. And you can add inline styles
| | 00:36 | either by hand, which is my preferred
method because I like total control, or you
| | 00:40 | can create CSS styles within
your file and use Premailer.
| | 00:45 | Premailer is an online service that
takes CSS styles and puts them inside of
| | 00:51 | paragraph tags, table data tags, and so forth.
| | 00:54 | It converts your class and ID
declarations into actual inline CSS.
| | 01:00 | My preference, however, is to do inline
styles by hand, so that I have complete
| | 01:05 | control. I can organize my
styles alphabetically, for example.
| | 01:09 | In this course, all styles
will be added inline by hand.
| | 01:13 | Let's look at this
email-creation process in detail.
| | 01:17 | The first step is to plan your layout.
| | 01:19 | Essentially, you take your
design and you turn it into a grid.
| | 01:23 | This grid then is converted into an HTML table.
| | 01:27 | For example, this is the table layout code
for one of the projects we'll do shortly.
| | 01:32 | Once you have your table layout,
then you add content, for example, your
| | 01:36 | navigation links with basic HTML tags.
After that, you add the inline styles,
| | 01:43 | again by hand or with
Premailer--it's your choice.
| | 01:47 | In this course, all inline styles
will be done by hand. That's it.
| | 01:52 | That's the process that we will
follow in each of our projects.
| | 01:55 | Now, let's get ready to create some emails.
| | Collapse this transcript |
|
|
4. Creating a Single-Column Email NewsletterPlanning| 00:00 | As we saw in earlier videos,
there are three basic email designs:
| | 00:04 | one-column, two-column,
and multicolumn product emails.
| | 00:08 | In this video, I will show you the
planning process before you code.
| | 00:14 | When I start to plan a design, to
turn it into code, I begin with the JPEG
| | 00:19 | image of the email, and then I use
Photoshop to determine the different
| | 00:23 | elements of the design.
| | 00:25 | For example, what is the
plum-colored background,
| | 00:29 | its hexadecimal color?
| | 00:31 | I also use the Marquee tool to
determine the widths of different elements,
| | 00:35 | including the email.
| | 00:36 | The email width needs to be under
600 pixels, so in this case it's fine.
| | 00:41 | And then I determine the widths of all
the different boxes. And what this does
| | 00:45 | is this gives me an idea of where
the design will need to go in terms of
| | 00:51 | coding tables, how many tables,
which tables are nested inside of other
| | 00:54 | tables, and so forth.
| | 00:56 | Now that we've planned out the code
and the basic elements, colors, lengths,
| | 01:02 | widths, et cetera, of this design,
we will begin to actually code.
| | Collapse this transcript |
| Coding HTML tables| 00:00 | In this video, we'll code
a one-column HTML email.
| | 00:04 | Typically, this design is used to send an
announcement or advertise a single product.
| | 00:09 | Here's the email, in JPEG format, that we'll code.
| | 00:13 | Now, as we did in earlier videos, let's
convert this design to a grid and call
| | 00:17 | out the design elements: the logo,
header, content area, and footer.
| | 00:21 | The first step is to focus our eyes an
inch or two off the screen, so we can begin
| | 00:26 | to see this design not as a
design, but as a set of blocks.
| | 00:31 | Then what we'll do is put a grid around the
most common elements, and we have a set of boxes.
| | 00:37 | So, let's look first at this large box
that goes around all of the email itself.
| | 00:43 | You'll also notice that the plum color
is a box in itself, so the email is a box
| | 00:49 | and the plum color is a box.
| | 00:50 | So let's look at these boxes in
HTML code. We'll start there.
| | 00:54 | I'm using Notepad++, and I'm using
it to highlight different tables.
| | 01:01 | So here we have the pseudo body table,
which represents the plum-color area that
| | 01:07 | is around the email box.
| | 01:09 | The next table that gets nested
inside is a wrapper table that contains the
| | 01:14 | email itself, and this represents
this box that goes around the footer and
| | 01:19 | around the News area.
| | 01:21 | Now let's look at the News area and the
footer as they sit within this box that
| | 01:27 | contains the HTML email.
| | 01:29 | In Notepad++, let's unclick this table,
and you'll see that we have a table here
| | 01:35 | that represents the start of the actual email.
| | 01:37 | Above it, we have generic information,
a link to a newsletter version if one
| | 01:42 | exists, and a brief note about how
people became readers of your email and how
| | 01:48 | they can unsubscribe.
| | 01:49 | So at the start of the email, you'll notice
that we have HTML tables and table data cells.
| | 01:57 | This first table data cell contains a
background image, so that's the entire
| | 02:01 | design that we have attached to this larger box.
| | 02:06 | So instead of cutting up the image
into many images, we've created a single
| | 02:10 | background image to make it simple.
| | 02:12 | Now let's focus on the News box.
| | 02:15 | Here's the News table, and it's
nestled within that larger HTML email.
| | 02:21 | And you can see that it's very straightforward.
| | 02:23 | It has a width, just whatever is needed.
| | 02:26 | You'll see here in this design, we
don't need the width to be the full length.
| | 02:30 | It only needs to go across perhaps
halfway. And then the other point to
| | 02:35 | mention here is that we've started HTML tags,
in this case the paragraph or P tag, on one line,
| | 02:42 | we put the content on the second line,
and we've closed the paragraph tag on a third line.
| | 02:47 | This is simply good coding practice,
as you'll discover, because this allows
| | 02:52 | non-technical people to update code
in your HTML email without getting
| | 02:57 | tripped up with the HTML.
| | 02:59 | They can focus simply on typing content here.
| | 03:02 | So let's look at the last element
of this design, which is the footer.
| | 03:06 | Here in our design we created four
boxes within a larger footer table. In fact,
| | 03:13 | however, we only need three.
| | 03:14 | We need one area for the links on the
left, we need a middle table to give us
| | 03:20 | some space over this image of the
bottles, and then we need a third area, which
| | 03:24 | are the links off to the right, that are wider.
| | 03:27 | So let's see what that'd look like in code.
| | 03:29 | Let's scroll down, and here's the footer table.
| | 03:33 | This is the first area where we have
the links that go here in the lower-left
| | 03:39 | corner of the footer for
Tours, Find a Store, et cetera.
| | 03:42 | The next area, we've created a blank
space, and we've put in the HTML code for
| | 03:48 | that, the ASCII character code,
and we've forced it to be a width of 70 pixels,
| | 03:55 | and that represents this middle space
with the bottle images, so we're basically
| | 03:59 | layering our table over
the images in the footer.
| | 04:03 | Finally, we have a wider area here in
our table that has a pixel width of 200,
| | 04:10 | so that we have plenty of room for our links.
| | 04:12 | Now, it's not expected that you know HTML
brilliantly to understand all of this HTML.
| | 04:19 | There are other courses on lynda.com
that can help you learn basic HTML.
| | 04:23 | At this point, however, we've
created a very basic table structure that
| | 04:27 | corresponds to our design as a grid.
| | 04:30 | In the next lesson, we will take this
basic HTML table code and we will begin
| | 04:36 | to add content.
| | Collapse this transcript |
| Adding content| 00:01 | In the last video, we coded the
layout of this one-column email.
| | 00:05 | We used HTML tables to create boxes so that
we can begin to put content into those boxes.
| | 00:11 | Let's now work on adding content.
| | 00:14 | If you remember, we used
Notepad++ to code the tables.
| | 00:18 | One of the features of Notepad++ is
that it allows you to roll out tables.
| | 00:23 | So we started first with this pseudo
body table, then we had a wrapper table to
| | 00:28 | contain the email, and
then the email code itself.
| | 00:34 | So, let's begin to add content.
| | 00:36 | As we noted in a prior video, we
have basic HTML p, or paragraph, tags on one
| | 00:42 | line, the content on the second line, and
the paragraph tag closed on the third line.
| | 00:48 | This allows non-technical people to
come in and add content and change content.
| | 00:53 | If you were to put it all together as
a single stream, it becomes very, very
| | 00:56 | difficult to maintain your
content within an HTML email template.
| | 01:01 | So the first type of content we add is
at the top of the wrapper table for HTML
| | 01:06 | email, and it's typically two pieces of content.
| | 01:09 | If you have a link to a web page
version of your newsletter, it's very good
| | 01:13 | idea to put that at the very top, in
case people don't get the rest of your
| | 01:17 | email for some reason.
| | 01:19 | In addition, it's a good practice to
create a message that tells people how you
| | 01:24 | got their email address and
where they can unsubscribe.
| | 01:29 | Both of these messages tend to calm
people down and keep them from hitting the
| | 01:33 | spam button in their email software.
| | 01:35 | So let's scroll down a little bit
further into our HTML table, to the content.
| | 01:41 | So if you recall, we had divided our
design into a series of boxes, and we've now
| | 01:47 | added content into this box in
the upper left, directly under News.
| | 01:52 | We've created a heading1 tag, and you
see that we close it on a second line, and
| | 01:58 | in between is the actual heading.
| | 02:00 | We've done the same thing for paragraph
tags and for the anchor tags, for the links.
| | 02:07 | I also would point out that we're
using, for bold, we are using the b tag.
| | 02:12 | In the same way that HTML email
newsletters require you to use HTML tables to
| | 02:18 | structure the layout of the email, you
also need to use the older HTML tags for
| | 02:23 | bold, italics, break, etc.
| | 02:27 | So here we've got the bold tag around a
phone number, and we're using break tags.
| | 02:33 | The reason to use these older HTML tags
has to do with the fact that some HTML
| | 02:38 | email, like Lotus Notes, requires the older tags.
| | 02:42 | So here we have added in the content
to our News section in the HTML table.
| | 02:47 | Now let's look at the footer.
| | 02:49 | If you recall, we have in the
footer a set of links over here:
| | 02:54 | Tour, Find a Store, Contact, Shop Online.
| | 02:57 | Then on the right, we have
the FAQ and Support links.
| | 03:01 | In between, we just have dead space to
layer over the bottles, to make sure that
| | 03:06 | our footer links don't
fold over the bottle image.
| | 03:11 | So let's look at the footer/end code.
| | 03:12 | You can see that again we have the
paragraph tag on a single line, the link
| | 03:19 | anchor tag on a single line,
| | 03:21 | we've got the text,
and then we close them all off.
| | 03:24 | We've simply repeated this process
for each of these links on the left.
| | 03:27 | We again have our blank space 70 pixels
wide to accommodate the picture of the
| | 03:33 | bottles that we're layering this over.
| | 03:37 | Then finally, on our third and right-hand
table in the footer, we follow the same pattern.
| | 03:42 | We have a paragraph tag on one line.
| | 03:45 | We have the text wrapped in bold.
| | 03:47 | If we really wanted to, we could put
this, or break this up, into single lines.
| | 03:52 | We have our anchor tag here in a single line.
| | 03:55 | We can type in the link.
| | 04:00 | As before, you'll see that we close the
anchor tag and the paragraph tag on separate lines.
| | 04:05 | You want to repeat this process for all
of the links in the footer, and then the
| | 04:09 | last piece of content is down here.
| | 04:12 | We again start with the
paragraph tag on its own line.
| | 04:16 | We have individual lines for the content.
| | 04:18 | We use the old-style HTML break tags.
| | 04:21 | We have the link, and we have
copyright and privacy policy information.
| | 04:26 | The final thing to note about copy
is that the email service you use to
| | 04:31 | deliver your emails will add the
unsubscribe link at the bottom of all of your
| | 04:36 | emails automatically;
| | 04:37 | therefore, you don't need to
worry about it at this point.
| | 04:40 | With these basic copy elements in place,
the next video will show how to style
| | 04:45 | this HTML email to make it already to send.
| | Collapse this transcript |
| Adding inline CSS| 00:01 | In the prior two videos, we worked
to code this one-column HTML email.
| | 00:06 | Let's finish coding this email.
| | 00:08 | Because email software can display HTML
email code differently, the next step is
| | 00:13 | to style parts of the email, so that
it will display fine no matter what
| | 00:17 | email software is used to display it.
| | 00:20 | We use Cascading Style Sheets
styles, or CSS styles, to make this happen.
| | 00:25 | First we'll look at our code for our email.
| | 00:28 | If you notice in the head area of our email,
we don't have a reference to a CSS style sheet.
| | 00:36 | The reason is that HTML emails do not
use style sheets, either inside the email
| | 00:42 | or outside as a reference,
the way that web pages do.
| | 00:45 | The reason for that is very simple.
| | 00:47 | Quite a lot of HTML email software
gets rid of style sheets, or ignores an
| | 00:52 | override style sheets.
| | 00:54 | Instead, we need to use our CSS styles
within each of our HTML tags within the
| | 00:59 | body of our email, and
that's what we'll begin to do.
| | 01:02 | If you recall, we took our one-column email,
| | 01:05 | we turned the design into a set of HTML tables,
| | 01:09 | we had a large box, this plum-colored area,
and we had a box that contained the email,
| | 01:16 | and against that, we have the background image.
| | 01:19 | Then we had a box for News content,
and we had a box for the footer links.
| | 01:23 | So let's tackle first styling the
background image for this larger box.
| | 01:29 | The first thing we'll do is
we'll create an inline style.
| | 01:32 | We'll actually use HTML table code for this.
| | 01:36 | We're going to do use this simple
background= element for the HTML table.
| | 01:42 | In addition, because of Outlook 2007,
2010, and Google Mail not handling
| | 01:48 | background images well, or the same, what
we'll do is we'll code specifically for
| | 01:53 | those situations, and that
starts up here with the body tag.
| | 01:57 | We'll add this style with these values.
| | 02:01 | The second step is to add specific
code for Microsoft Outlook, and that's
| | 02:07 | what this code is here.
| | 02:08 | A key point in this code is that there
are two instances where you need to note
| | 02:13 | the height and the width of the image:
| | 02:15 | here for the height, and you see it
replicated up here, highlighted up here, and
| | 02:20 | then also for the width up here.
| | 02:23 | All the rest of this code can remain the
same, and these are all in the exercise files.
| | 02:28 | Now, we put this code for Outlook above
where our content begins, as I've noted
| | 02:34 | in the actual file.
| | 02:36 | So then we add our content, we've added
our copy, and then down here at the end
| | 02:41 | of our content, we will finish off this
Outlook-specific code by adding these three lines.
| | 02:48 | Next, let's style another part of our design.
| | 02:52 | Let's look at this News box.
| | 02:54 | There's content in it that needs to be
styled, and then in the box itself we'll see
| | 02:58 | has been styled to make it work.
| | 03:00 | So let's go back up here to the start
of our News content and you'll see here
| | 03:06 | this is the beginning of the News box.
| | 03:08 | You'll see that we've added CSS styles here.
| | 03:13 | Specifically, we've set the
margin-top to 170 pixels.
| | 03:18 | This represents the distance from the
top of the large box all the way down to
| | 03:22 | the top of our content box.
| | 03:25 | Then we've also set the margin-left
to 17 pixels, and this represents the
| | 03:31 | distance from the left edge of
this large box to the content box.
| | 03:36 | So, we've styled the table box for the News.
| | 03:40 | Then for the content inside of
our News box, or HTML table, we have
| | 03:44 | a heading1 style, and we've defined
a whole series of styles.
| | 03:48 | They look very complex, but in
fact they are really quite simple.
| | 03:52 | We've defined the color, then we
defined all the font styles, all the elements,
| | 03:57 | so what's the font-family, the font-size,
the font-weight, the line-height of the fonts.
| | 04:02 | In addition we've set all the margin
and padding all to 0, except for the
| | 04:07 | padding-bottom of 10%, and if you
look at our design, you'll see that in
| | 04:12 | fact there's a thin amount
of spacing between there.
| | 04:17 | Then we have our content for the heading in a
single line, and we close off our heading tag.
| | 04:23 | You see that we follow the same approach
for the paragraph tags in our content area.
| | 04:27 | We define a whole set of styles
here, starting with the color, then the
| | 04:32 | font-family, the font-size, the line-
height, and then the margin and padding settings.
| | 04:38 | As an aside, what I do for CSS
styles, I tend to alphabetize them.
| | 04:43 | So color here begins with a letter C,
that goes at the beginning, line-height
| | 04:47 | that goes after fonts, etc.
| | 04:49 | It makes it lot easier to find what you
need to change if you in fact you have
| | 04:53 | to come back and change your code.
| | 04:54 | So we close off our paragraph tag there.
| | 04:57 | So the third element that we're
going to style is the footer table.
| | 05:01 | You'll see that we do the same strategy.
| | 05:04 | On the table data cell, we
have a whole set of styles.
| | 05:07 | You'll see up here for the table itself,
| | 05:11 | we set the margin-top to
125 and the margin-left to 90.
| | 05:16 | If we go back to our original image,
you'll see that this represents this space
| | 05:21 | from here, the bottom of the news, to
the top of the footer, and this is the
| | 05:25 | indent for the footer table.
| | 05:27 | So this is all calculated in that
planning session where I take a single page of
| | 05:31 | paper and I map out all of the
height and width and everything.
| | 05:34 | It makes it easy when actually sit down
to code to figure out what to put in
| | 05:38 | for these CSS styles.
| | 05:41 | Then we go to the paragraph tags
within the footer, and again they should look
| | 05:45 | very familiar by now.
| | 05:47 | We define the color, we define the
font-family, the size, the margin-left, and
| | 05:51 | padding, and all of those values set to 0.
| | 05:55 | The anchor tag, we set to a color
because we want it to be a little bit
| | 05:58 | different in its design.
| | 06:00 | We can also set up a link here, and then as
we scroll down, we'll repeat these CSS styles
| | 06:09 | for every one of the paragraph tags and
then as appropriate for each of the links.
| | 06:15 | Again, we keep our content on its own
separate line so that it makes it easy to
| | 06:20 | keep content separate from all
of this heavy-duty inline CSS.
| | 06:24 | Finally, we get down here, and you
can see we've done the same thing.
| | 06:28 | We've styled the paragraph tags,
we've styled the anchor tags, and we have a
| | 06:32 | complete one-column HTML email in code.
The process we followed is used every time
| | 06:39 | you need to create an HTML email,
no matter how complex the design.
| | 06:43 | In future videos, we'll show how to
design a two-column HTML email, as well as a
| | 06:48 | multiproduct HTML email.
| | Collapse this transcript |
|
|
5. Creating a Two-Column Email NewsletterPlanning| 00:00 | In this video, we'll look at how to
plan to code a two-column HTML email.
| | 00:06 | Typically, this two-column design is
used to send an email newsletter.
| | 00:11 | The first step in planning a two-column
HTML email design is to print out the JPEG,
| | 00:17 | or to call it up in Photoshop
with a lot of white space around, and
| | 00:21 | then use Photoshop to pick out the
colors, to use the Marquee tool to determine
| | 00:26 | the width of all the elements, and to
note all the details on the side of the
| | 00:31 | printout or on the side of your Photoshop file.
| | 00:34 | Now, that we know all of the details
about our two-column HTML email, in the next
| | 00:39 | step, we'll begin to turn it into code.
| | Collapse this transcript |
| Coding HTML tables| 00:01 | There are three basic email designs: one-column,
two-column, and multicolumn product emails.
| | 00:06 | In this video, we'll code a two-column HTML email.
| | 00:10 | Typically, this design is used
to send an email newsletter.
| | 00:15 | Here's the email in JPEG format that we'll code.
| | 00:18 | The first thing we'll do is reduce
this design into a series of boxes that we
| | 00:23 | can then convert into HTML tables.
| | 00:26 | So we'll focus on this design about an
inch or two off of the screen, and then
| | 00:30 | we'll reduce the elements
of the design into boxes.
| | 00:36 | The first box, the largest box, is this
brown color that it wraps everything.
| | 00:42 | The second box wraps the entire HTML email.
| | 00:45 | There are additional boxes for the header,
for the content area, and for the footer.
| | 00:50 | Within the content area, you'll see that
we have a column that is the same height
| | 00:54 | as five rows on the right, so
we'll need to account for that.
| | 00:58 | In the footer, you'll see that while we
have one box, in fact the box is divided
| | 01:03 | up into five different spaces.
| | 01:06 | So let's look at the code.
| | 01:07 | First of all, we'll start
with this pseudo body table.
| | 01:10 | This acts like our HTML body tag.
| | 01:13 | It corresponds to the dark brown
box that wraps around our HTML email.
| | 01:19 | In addition, we have a wrapper table
for the email, and that corresponds to the
| | 01:24 | box that contains the header, the
content area, and the footer of our email.
| | 01:29 | Within this wrapper table, we have a
third table nested inside that contains all
| | 01:36 | the elements of the email, starting with
the header and then the content area and
| | 01:43 | then when we scroll down, the footer table.
| | 01:48 | Within the email content area, we have
a single left column that is the same
| | 01:53 | height as five rows on the right.
| | 01:56 | Within HTML tables, a rowspan is used to span
several different rows, in this case five rows.
| | 02:04 | We've typed in 'Content goes
here', so we can see what that is.
| | 02:07 | We've typed in the 'Tours Logo Here' so
that we can see where that is placed.
| | 02:11 | Here is what all our tables look like when
I display it in Firefox, or any web browser.
| | 02:18 | You can see, we have the table header,
we have a content area, and we have a footer.
| | 02:24 | Within the content area, you can see
that we have a left column that extends the
| | 02:29 | height of five rows on the right.
| | 02:32 | So everything appears to
be set up for us right now.
| | 02:35 | Now that we've coded the layout our
two-column email, in the next video we'll
| | 02:40 | add copy.
| | Collapse this transcript |
| Adding content| 00:01 | In the last video, we coded the
layout of a two-column HTML email.
| | 00:05 | Let's work now on adding content.
| | 00:07 | This is where we left off.
| | 00:09 | We had a very straightforward HTML
table layout, with the header, the content
| | 00:14 | area, and the footer all clearly defined.
| | 00:18 | If we go back to our original design,
you'll see some differences of course.
| | 00:21 | For example, the EXPLORE CALIFORNIA
block should be aligned to the right.
| | 00:26 | We need all of these images and content.
| | 00:28 | We need smaller fonts, et cetera.
| | 00:30 | But let's begin with the content.
| | 00:32 | We begin with the pseudo body table
and the wrapper table for the HTML email.
| | 00:38 | Next, we'll add copy, so we add a
link to the web page version of the
| | 00:44 | newsletter if it exists.
| | 00:46 | It tells readers how you got their email
address and where they can unsubscribe
| | 00:50 | if they want to do so.
| | 00:52 | In the email itself, we add
copy for the left-column area.
| | 00:58 | We know, if we go back to the original design,
that the W is to be large and to have color.
| | 01:04 | We won't deal with the color or the size
today, but we can add a span around the
| | 01:09 | letter W to remind us that
we need to style this later.
| | 01:12 | In addition, there is a pale
green MONTHLY SPECIALS box.
| | 01:16 | I have created a single image that
will link to a MONTHLY SPECIALS page.
| | 01:21 | Alternatively, you could code this as a
table, but we'll leave it as an image.
| | 01:26 | We add in the Tour header Package image
that is at the top of the right column
| | 01:32 | in the content area.
| | 01:34 | Then we'll add each of the
tours, their logo, and their copy.
| | 01:39 | You can see that each instance of a
Tour Package image copy and EXPLORE link
| | 01:45 | make up a single HTML table that is
nested within the table data cell.
| | 01:51 | If you go back to the table here where
we left off, you'll see that we have the
| | 01:56 | tour image as a block and the tour copy
as a block, but it's still nested within
| | 02:01 | the larger table data cell.
| | 02:03 | After we add all of the images and the
copy and the links for each of the tours,
| | 02:09 | we then move down to the footer table.
| | 02:11 | If you recall, in our design the
footer has two blocks of text and links and
| | 02:18 | three blocks on the right-hand side for
books with a BUY button for each book.
| | 02:23 | Here in the footer, you
can see we've added content.
| | 02:25 | We've put the paragraph tag and the
anchor tag on their own individual lines,
| | 02:29 | the copy on its own individual line, and
| | 02:32 | then we close off the anchor tag
and close off the paragraph tag.
| | 02:35 | This allows non-technical people to
easily go into your email newsletter
| | 02:39 | template to change headings, links,
et cetera, without getting involved in the code.
| | 02:45 | Scroll down here.
| | 02:46 | You'll see that we've added the second block
of content and links, the FAQs and Support.
| | 02:52 | Then we've added content for each of the books.
| | 02:55 | This code is very much the same for
each of the books; the only difference are
| | 02:58 | the images and the URLs.
| | 03:01 | We also use a target="_blank" for each
of the links, so that if this email is
| | 03:06 | viewed in Hotmail it will open a
brand-new window instead of opening your web
| | 03:10 | site within Hotmail.
| | 03:12 | Finally, at the bottom we've added the
copy for EXPLORE CALIFORNIA. This is all
| | 03:17 | the information that email marketers
need to add to comply with the US CAN-SPAM
| | 03:22 | law to avoid being labeled as spammers.
| | 03:25 | This is the final result once
we've added all of our copy.
| | 03:30 | If you compare this with our final
design, you'll see, for example, the EXPLORE
| | 03:34 | links are to the right.
| | 03:35 | This is what we'll deal with in the next video.
| | Collapse this transcript |
| Adding inline CSS| 00:01 | In two earlier videos, we've worked
to code this two-column HTML email.
| | 00:05 | Let's finish the coding of
this email by adding CSS styles.
| | 00:10 | This is the email that we are trying to code.
| | 00:13 | If you recall, this is where we left
off with our HTML coding. We had created
| | 00:18 | tables to hold our email design
together, and we had added copy.
| | 00:24 | However, there's a lot of styling
that needs to be done before our design looks
| | 00:29 | like our finish result.
| | 00:30 | For example, we need a large
colored W, so let's go into the code.
| | 00:35 | Earlier, we had set a span around the
letter W, because we knew we were going to
| | 00:41 | come back and add these styles.
| | 00:43 | We've added color, and we've
added the font-size to 20.
| | 00:47 | We've also gone up to the paragraph
that holds this letter W and we've made the
| | 00:52 | line-height to 18 pixels.
| | 00:54 | This ensures that even though the
letter W is bigger than other letters in
| | 00:58 | that content area, in fact, it won't throw
off the spacing between the lines of content.
| | 01:04 | The next area we needed to work on as
to do with the tour descriptions on the
| | 01:09 | right side of the content.
| | 01:11 | Each tour description has a logo,
copy, and then an Explore link that when
| | 01:16 | clicked, provides more information.
| | 01:18 | So let's work on that area next.
| | 01:21 | If you recall, when we set up the table
layout in HTML, we put each of these tour
| | 01:26 | descriptions as a table
within a larger table data cell.
| | 01:30 | So in our table that represents our
tour information, we have a table data cell
| | 01:36 | that includes an image that we've added.
| | 01:38 | The second table data cell in our
table that explains each of these tours
| | 01:44 | contains the copy, and so we've added
the copy earlier, but now we've added these
| | 01:48 | styles. We've defined the color of the
font, the font-family, the font-size,
| | 01:53 | line-height, and then the
margin and padding values.
| | 01:57 | In addition, for the Explore link
we've also defined the paragraph style,
| | 02:03 | and we've set text-align to right.
This will ensure that the small explore
| | 02:07 | links float to the right. And we repeated this
for every single one of the tour descriptions.
| | 02:14 | Another area that we
needed to style is the footer.
| | 02:18 | The link colors, for example, are too dark.
| | 02:21 | So let's go to our footer table in our code.
| | 02:24 | You'll see that we still have the link
names, but now we've added a whole set of
| | 02:29 | styles above for the paragraph tag,
including the color set to white and the
| | 02:34 | font-size set to 10 pixels and the
margin and padding set to 0, and then we
| | 02:40 | repeat this for each of the
links in the footer boxes.
| | 02:43 | When we go back, you'll see there are
three books and our BUY buttons are fine,
| | 02:49 | so we don't really need to do anything more
than to define very basic styles for them.
| | 02:55 | We've set the margin and paddings
to 0, and we've included the images.
| | 03:00 | Finally, the last bit of content to
style is in the footer. Where we left off,
| | 03:05 | all of this information was centered.
| | 03:07 | Now, it needs to be floated to the
right to meet our final design. So here we
| | 03:12 | have added a style to the paragraph
tag and as with the Explore buttons, we've
| | 03:17 | put text-align equals right.
| | 03:20 | We've also defined the font-size, the
font-family, and the color, and then we
| | 03:25 | repeat the CSS styles for
the final copyright paragraph.
| | 03:30 | Now that we've coded the CSS styles,
we have a design of our HTML email that is
| | 03:37 | very, very close to the original design.
| | Collapse this transcript |
|
|
6. Creating a Multi-Product Offer EmailPlanning| 00:00 | As we saw in earlier videos, there
are three basic HTML email designs:
| | 00:05 | one-column, two-column, and
multicolumn product emails.
| | 00:08 | In this video, we'll show how to
plan for a multicolumn product email.
| | 00:14 | The first step is to take a JPEG of
the HTML email to be coded and take this
| | 00:20 | JPEG into Photoshop, set it against
a white background, and print out the
| | 00:25 | result--or you can
continue to work in Photoshop.
| | 00:29 | In either case, you use the Photoshop
Eyedropper tool to determine the background
| | 00:33 | colors, border colors, and other
colors used within the HTML email.
| | 00:39 | In addition, in Photoshop you use the
Marquee tool to determine the height and
| | 00:44 | width of different elements.
| | 00:45 | For example, in this multiproduct email,
the height and width of the product is
| | 00:52 | 130 pixels wide and 165 pixels high.
| | 00:56 | I've also defined the color for the
pink in Special Occasions Bouquets
| | 01:01 | and Baskets heading.
| | 01:03 | When you have all of the details
defined for your HTML email, the next step is
| | 01:08 | to define the HTML table layout for that email.
| | Collapse this transcript |
| Coding HTML tables| 00:00 | In this video, we'll code the
multicolumn product email.
| | 00:03 | Typically, this design is used
to advertise multiple products.
| | 00:07 | Here's the email in JPEG format that we will code.
| | 00:11 | As we did with earlier videos, let's
convert this designed to a grid and call
| | 00:15 | out the design elements:
| | 00:16 | the logo, the header, the content
area, the side column, and the footer.
| | 00:19 | The way we do that is to focus our
eyes about two inches off the computer
| | 00:25 | screen and begin to see this design as a
series of boxes and blocks and then we add a grid.
| | 00:33 | We have a larger email, which is the
background color, which is our main box. Within
| | 00:39 | that, we have a box for the email itself that
contains all the elements of the email.
| | 00:44 | Then we have a box for the header, the
navigation links, for the special message area,
| | 00:49 | and then for the products themselves
as a table, and we have a box at the
| | 00:54 | bottom for the footer.
| | 00:55 | Let's see how this looks in code.
| | 00:58 | To start with, we have the pseudo body
table which acts like the HTML body tag,
| | 01:03 | and we have within it the wrapper
table that will contain HTML email.
| | 01:08 | These two boxes, the pseudo body table
corresponds to the light blue background
| | 01:13 | around the HTML design, and the wrapper
table corresponds to the large table that
| | 01:20 | contains the HTML email itself.
| | 01:23 | Within the table that contains the email, we
have a header and we have a navigation row.
| | 01:31 | We have the navigation links here, and we
have the header image already in place here.
| | 01:38 | In the next row, we have headline copy.
| | 01:42 | This corresponds to this Special
Occasion Bouquets and Baskets area of the email.
| | 01:48 | After that, we need a table
to hold each of the products.
| | 01:53 | So we have set up a 3x2 product
table. It has three columns and two rows.
| | 01:59 | As you can see, it's very, very straightforward.
| | 02:03 | In the planning stage, we set up our
design, we measured out each of these
| | 02:08 | products' cells, and we determined that
they are 130 pixels wide and 165 pixels
| | 02:14 | high. And within each, for now we've added
'Product here' as copy, so that we can
| | 02:18 | see what this looks like.
| | 02:21 | At the bottom of this product table,
we have another Special offer copy.
| | 02:27 | Here, its mention code for 50% off
delivery, and then the last row in our table
| | 02:33 | is for the footer, and that also is
very simple. It's a single-table data cell
| | 02:38 | with an image. And then finally at
the bottom, we have the company address.
| | 02:46 | Finally, I have opened this HTML email
in Firefox to show how all the different
| | 02:52 | HTML tables go together to
create our HTML multiproduct email.
| | 02:57 | Now that we've coded the layout of our
multicolumn product email, in the next
| | 03:02 | video, we'll add content.
| | Collapse this transcript |
| Adding content| 00:00 | In the last video, we coded the layout of a
multi-column product email using HTML tables.
| | 00:06 | Let's work now on adding content.
| | 00:09 | This is where we left off,
| | 00:11 | a series of nested HTML tables that
generally form the structure and the design
| | 00:16 | that we want for our HTML email.
The next step is to add copy.
| | 00:21 | The first copy we add are the two little
bits of copy at the very top of the email.
| | 00:27 | This is a link to the web page
version of the email, if it exists, and a
| | 00:33 | short note to the reader to remind
them how you got their email address and
| | 00:37 | how they can unsubscribe.
| | 00:41 | And the next bit of copy we
add are the navigation links.
| | 00:47 | In addition, after the navigation
links, we add the heading for Special
| | 00:53 | Occasion Bouquets and Baskets, and we
add the tagline, 'Send them that perfect
| | 00:58 | gift to brighten their day'.
| | 01:01 | Within the three-column, two-row
product table that we set up, we add each of
| | 01:07 | the images, and we add the name of
the product, and we add the price.
| | 01:15 | If you recall in our original design,
the price has a different color from the
| | 01:19 | name of the product.
| | 01:21 | For each product, we need to type in the
name of the product, the amount of the
| | 01:26 | product, and we need to put
a span around the amount.
| | 01:30 | Once we have the copy for one product, then
we repeat that for the other five products.
| | 01:38 | We have a paragraph tag. We have the image.
| | 01:40 | We have the product name, a very simple
break tag, a span around the price, and we
| | 01:46 | close the paragraph tag.
| | 01:50 | Underneath the product table, we
have a very short bit of offer copy.
| | 01:55 | In addition, part of that copy is
colored, so we add a span around that
| | 02:02 | special promo code.
| | 02:07 | In this design, the footer has no copy,
so we don't need to worry about that.
| | 02:12 | And the final bit of copy we add is the
company name and phone number and email
| | 02:16 | address, as well as the
copyright and the privacy policy.
| | 02:20 | And this is the result of
adding copy to our HTML table layout.
| | 02:25 | In a later movie, we will tighten up
this design further using CSS styles to
| | 02:30 | make this HTML email identical to the
original JPEG of our multiproduct email.
| | Collapse this transcript |
| Adding images| 00:00 | In this video, we continue to
code the multicolumn product email.
| | 00:04 | Specifically, I want to talk
about images in HTML email.
| | 00:09 | So far, to make it easier to maintain
your HTML email, we've placed our p tags,
| | 00:16 | or paragraph tags, on a single
line, as well as our anchor tags.
| | 00:21 | Images are a little bit different,
however. If you put an image on the same line
| | 00:27 | within an HTML table data cell, Lotus
Notes, and older versions of HTML email
| | 00:34 | software, will add a gap.
| | 00:36 | So it's best to in-line all of your
image tags within the table data cell, so
| | 00:43 | that it is a single string of copy.
| | 00:46 | The second point to make about images
in HTML emails is to point out that all
| | 00:50 | images should be placed on a web
server available over the Internet.
| | 00:55 | This will ensure that your images can
display whenever someone opens up your email.
| | 01:00 | In the next video, we will finish
off our multicolumn product email by
| | 01:05 | adding inline CSS styles.
| | Collapse this transcript |
| Adding inline CSS| 00:00 | In the prior videos, we've work to
code this multicolumn product email.
| | 00:04 | Let's finish coding this email.
| | 00:06 | Here is where we left off.
| | 00:08 | As you can see, we have all of the elements:
| | 00:10 | We have the copy. We have the email
structured as a table so our layout works.
| | 00:16 | However, our final result has a number
of differences that are very important
| | 00:21 | that we need to code.
| | 00:22 | Specifically, we need to use CSS styles inline.
| | 00:26 | Let's begin with the navigation links.
| | 00:29 | The navigation links are made up of
a single HTML paragraph, or p, tag that
| | 00:34 | surrounds several anchor tags, or links.
| | 00:38 | We start by styling the
paragraph tag, and we define the color,
| | 00:45 | we define the font-family, font-size,
the line-height, and then we have the
| | 00:49 | typical margin and padding settings to 0.
| | 00:51 | In addition, we have set the text
alignment to center, so that the navigation
| | 00:56 | links center within that area of the HTML email.
| | 01:01 | For each link, we set the color of the
link to white, we align it in the center,
| | 01:10 | and we set the margin-right to 25 pixels.
| | 01:14 | We also set the text-decoration to none.
| | 01:17 | With HTML email, unlike web pages, you
cannot set code so that hover makes the
| | 01:24 | link underlined or not underlined.
| | 01:27 | Therefore in HTML email, you have a
choice of either using underlines or not,
| | 01:32 | text-decoration set to none or underline.
| | 01:36 | The second part of the HTML email
will refine with CSS styles our colors.
| | 01:42 | The original email design has
several colors used for the copy.
| | 01:47 | For example, this heading about Special
Occasion Bouquets and Baskets is pink,
| | 01:52 | the tagline underneath is blue,
and then for each of the products,
| | 01:56 | the product names are blue
and the prices are red to pink.
| | 02:01 | Finally, with colors there is a promo
code below the products that is a color
| | 02:06 | and needs to be styled.
| | 02:08 | Let's start with the heading. We have our h1,
| | 02:11 | heading1 style, and we style the color
to the pink, and we set the font-family,
| | 02:18 | the font-size, to a large size,
| | 02:20 | the font-weight to normal
instead of bold, so it looks clean.
| | 02:24 | We set the line-height, and we
set the margin and padding to 0.
| | 02:29 | One brief mention about line-height:
| | 02:31 | the space between Special Occasion
Bouquets and Baskets and the tagline
| | 02:35 | underneath can be defined in any number of ways.
| | 02:38 | We can use margin, we can use
padding, or we can use line-height.
| | 02:42 | In this case, I've chosen line-height
because it seems more reliable to me in Outlook.
| | 02:48 | The next bit we color is the actual tagline.
| | 02:53 | As with the heading, we define a
color, the font-family, the font-size, the
| | 02:58 | font-style--in this case italic.
| | 03:00 | We set the font-weight to normal, as
we did with the heading, and we set the
| | 03:04 | line-height to 14, the same as the font size.
| | 03:11 | The next bit to color are the product
names and the product price. Because each
| | 03:17 | of our products are wrapped
in a single paragraph, or p, tag,
| | 03:23 | we define the color of the
product name at the paragraph level.
| | 03:28 | So we define the color, the font-family;
font-size, we want font-weight as normal,
| | 03:34 | not bold; and we set the line-height;
and we set margin and padding to 0.
| | 03:39 | In addition, we set the text-align to center.
| | 03:44 | To color the price, we take the span
that we had added earlier and this time we
| | 03:49 | add the actual color.
| | 03:51 | Then we add these inline CSS
styles to every one of the products.
| | 04:06 | In addition to coloring the heading
the tagline, each of the product names, and
| | 04:10 | the product prices, we also
need to color the promo code.
| | 04:14 | We set up earlier a span around our promo
code of flowers4u, and now we add the style color.
| | 04:23 | Your last bit of coloring has to do with
the background color behind the email.
| | 04:29 | We've added a bgcolor value, which is
an HTML table element, a very pale blue.
| | 04:38 | We've added a very light blue
background color that comes from these
| | 04:42 | flowers, hydrangea deluxe.
| | 04:44 | The last bit of styling we need to do are
the borders around each of the products.
| | 04:50 | For now, we have set these border styles
at the image level, so that every image
| | 04:57 | will have a thin two-pixel border around it.
| | 05:00 | And this is the result of our HTML
table layouts, adding the copy, adding
| | 05:07 | the CSS styles.
| | Collapse this transcript |
|
|
7. Creating a Plain Text EmailDesigning a plain text email| 00:00 | In addition to knowing how to design
and code HTML email, it also is important
| | 00:05 | to learn how to design
and code a plain text email.
| | 00:08 | Both plain text and HTML email
design have severe limitations that
| | 00:12 | designers must work around.
| | 00:13 | For example, with plain text
email, the limitation are no images.
| | 00:18 | All the content is vertical.
| | 00:20 | You cannot move content around
to emphasize important content.
| | 00:23 | You can't increase font sizes, for
example, and you can't use color.
| | 00:27 | For example, this is the two-column HTML email
that we created earlier in one of our projects.
| | 00:34 | This is the HTML email version,
and this is the raw output as text.
| | 00:39 | For example, here at the top of our
HTML email, we have a link to web page
| | 00:45 | version. In the notepad, it's the
same text size as all of the copy.
| | 00:52 | In addition, the large W that's colored
over here with the copy is the same as all
| | 00:59 | of the other characters and all of
the other text in that bit of copy.
| | 01:03 | Furthermore, the header,
the logo, is non-existent.
| | 01:07 | Furthermore, when we scroll down to
each of the tour descriptions, we have a
| | 01:11 | logo, we have a description, and we
have a link to explore more information.
| | 01:16 | Here, in the text version, we simply
have artifacts about the images,
| | 01:21 | we have the text, and then we have a link
to the Explorer button, but not the link
| | 01:26 | itself, just a mention of the image.
| | 01:31 | So, how do you design a plain text email?
| | 01:34 | I would start with the headings.
| | 01:35 | For example, you can put headings in
all caps, or you can put headings mixed
| | 01:40 | case, or you could have
all your headings lowercase.
| | 01:44 | You even can add characters to
the right, in this case a dash.
| | 01:53 | In addition, you can use divider characters.
| | 01:56 | Dividers are any of the
non-alphabetic characters on your keyboard,
| | 02:01 | for example, single quote,
exclamation point, et cetera.
| | 02:06 | A number of these might be
interesting, visually, as ways to divide the space
| | 02:11 | within a plain text email.
| | 02:14 | You can even use numbers.
| | 02:18 | The final constraint you face as a
designer has to do with the width of your text.
| | 02:23 | With Notepad++, you can tell the
number of characters width that your text
| | 02:28 | email is by looking at the column information
down at the bottom of the Notepad++ editor.
| | 02:35 | You want to be somewhere between 60
and 80 characters wide on your plain text
| | 02:39 | email to avoid line wraps that HTML email
software often puts in with plain text email.
| | 02:46 | It's better to do the line wraps
yourself then to have email software do it for
| | 02:51 | you and wreck your design.
| | 02:52 | I tried for 65 characters
wide on all my plain text.
| | 02:56 | In this case, we can see
that it is 68 characters wide.
| | 03:00 | So now we are ready to apply
some of these design ideas.
| | 03:04 | Let's say that we start
with a few dividers.
| | 03:18 | You can see that if we use a lot of
white space, this gives us a lot more room
| | 03:24 | and makes it easier to scan.
| | 03:26 | We also, if we wanted to put it up
closer, we could do that as well.
| | 03:30 | Furthermore, if there's a link here, we can add
white space, or we can put it directly under.
| | 03:36 | We can wrap the link in a divider,
or we can remove the dividers.
| | 03:42 | In addition, we can use characters here,
the divider characters, to set off the
| | 03:47 | link, and we can actually use more text.
| | 03:50 | The only difficulty with this approach
is that the links sometimes are so wide
| | 03:54 | that they may be wider
than your 60 to 80 characters.
| | 03:57 | You don't want links to break
into the next line, in other words.
| | 04:03 | And down here, finally, is a third way
to treat links, which is to treat them as
| | 04:08 | footnotes, to wrap characters around
them and assign a number, and then to put
| | 04:12 | the links down at the bottom.
| | 04:14 | This only works however, for my taste,
if the links are close to the description
| | 04:19 | so that if a reader finds information
they want to learn more about, they can
| | 04:23 | click immediately on a link to
go to a web site to learn more.
| | 04:27 | If you put all of your links down at the
bottom of your text email, the problem is
| | 04:31 | the reader then has to remember
the number as they scroll down.
| | 04:36 | Designing a plain text email
requires skill and thought to succeed.
| | 04:40 | In the next video, we'll apply some of
these solutions to a natural plain text
| | 04:43 | email based on our two-column email
project which we completed earlier.
| | Collapse this transcript |
| Designing a plain text email from an HTML email| 00:00 | In addition to knowing how to design and
code HTML email, it's also important to
| | 00:04 | learn how to code a plain text email.
| | 00:07 | In the video earlier, we learned some basic
design techniques for our plain text email.
| | 00:12 | We'll start with the same copy we used to
create our HTML two-column email in an earlier video.
| | 00:19 | If you recall, this email has text at
the top, a header image of course, copy on
| | 00:25 | the left, and then a series
of tour package information.
| | 00:29 | Here's the plain text version output as is.
| | 00:32 | As you can see, there is a lot to be done.
| | 00:34 | We can begin by separating the link to
the web page version of the newsletter
| | 00:40 | and the notice about where we got their email
address. Let's use some dashes as a divider up here.
| | 00:49 | Next, we'll turn the Explore California tags
into an actual headline, call it New Tours.
| | 00:58 | We've added some space here to make
it a little bit more legible to read.
| | 01:05 | In the MONTHLY SPECIALS, we're using
all caps for the MONTHLY SPECIALS, down
| | 01:12 | here, and we have a link,
and we're using the phrase 'link:'
| | 01:19 | to make it easy for people to find links.
| | 01:24 | For TOUR PACKAGES, which is another
section up here in our HTML email design,
| | 01:29 | we'll also use all caps. For the
headline for each tour, we're using mixed case
| | 01:36 | and we have description underneath,
and then we have a Learn More link.
| | 01:40 | We also have double space
between each of the tours.
| | 01:44 | In our HTML email, the footer has a whole set
of links that are text links, as well as books.
| | 01:51 | Here we simply have the link title
and then underneath it, the link.
| | 01:58 | For the books, we have a buy message
with a link where people can buy the book.
| | 02:05 | Finally, at the bottom, we have the
information about Explore California as a
| | 02:10 | single block of text.
| | 02:12 | We treat the Contact Us for More
Information as a section heading, and we have
| | 02:17 | the copyright message.
| | 02:19 | We also can link to a
privacy policy if we wanted.
| | 02:23 | Finally, we'll use the dividers that
we had at the top and we use them to
| | 02:26 | separate out the legal disclaimer.
| | 02:29 | For me, designing plain text email is
a lot more engaging a problem to solve
| | 02:34 | than designing a web page, or even an HTML email.
| | 02:37 | Once you have design solutions that
work, converting the text of an HTML
| | 02:41 | email is quite simple.
| | Collapse this transcript |
|
|
8. Creating Email AutomaticallyAutomating HTML email creation| 00:00 | If you publish a web site using
software and your emails include content from
| | 00:05 | your web site, it is possible to
automate the creation of your email
| | 00:09 | newsletters, both in HTML and plain text.
| | 00:13 | When should you automate?
| | 00:14 | Automating email creation
does take time to set up.
| | 00:17 | If you publish emails every few
months, it might not be worth the effort.
| | 00:21 | What tool should you use?
| | 00:23 | Almost any web site publishing
tool works if it uses its templates to
| | 00:27 | display your web pages.
| | 00:28 | For example, earlier we
created this two-column HTML email.
| | 00:34 | In one possible web site publishing tool
called WordPress, we can use categories
| | 00:39 | to organize all of our
content for email newsletters.
| | 00:43 | We simply categorize all the content we
want to appear in our email newsletter
| | 00:48 | with the Email Newsletter category.
| | 00:51 | Then we create a page called Newsletter.
| | 00:59 | We then use a template assigned to
this newsletter page, Email Newsletter, we
| | 01:09 | update, and then when we view the
page, you see that we have the Explore
| | 01:16 | California two-column ad, in this case
with one piece of content, and all of
| | 01:21 | this content has been generated dynamically.
| | 01:24 | We could have four completely different
stories in six months, but each week when
| | 01:28 | we want to generate each email
newsletter, we just go to the URL for our
| | 01:33 | newsletter that is
generated by our publishing tool,
| | 01:37 | we view source, copy and paste all of
the code, and then copy and paste into our
| | 01:43 | email delivery service.
| | 01:45 | Some email delivery services also let you
just use the URL, which makes it even simpler.
| | 01:50 | Automating the creation of
your emails might be useful.
| | 01:54 | If so, the next few videos show you
how to use categories to organize content
| | 01:58 | for your emails, and then how to
automate your email creation with specific web
| | 02:02 | site publishing software.
| | Collapse this transcript |
| Automating HTML email by category| 00:00 | In an earlier project, we hand-
coded this HTML two-column email.
| | 00:06 | If you publish a web site with software
then you might want to automate the
| | 00:10 | creation of your emails using the same
publishing software, both HTML and plain text.
| | 00:15 | Instead of hand coding, you want to let
your web site publishing tool do the work.
| | 00:20 | To explain how to automate the creation
of your emails, for now, we'll show the
| | 00:24 | process in WordPress.
| | 00:26 | Here's how easy you can make
newsletter creation once you set up the system.
| | 00:30 | Later on, we can look at how to do the task
in more detail with other publishing tools.
| | 00:35 | Automating email creation
has three parts at least:
| | 00:38 | categories, pages, and templates.
| | 00:41 | Categories are used to tag content.
For example, here we have a story Cycle
| | 00:46 | California Tours, and we've tagged it
with the category Email Newsletter.
| | 00:50 | Templates display content tagged with
the Email Newsletter category, and the
| | 00:54 | pages then use the
template to display their content.
| | 00:58 | With an understanding of how to
automate email now, let's look at step-by-step
| | 01:02 | instructions for common
web site publishing tools.
| | Collapse this transcript |
| Automating HTML email with WordPress| 00:00 | Having discussed concepts, let's
look at using WordPress to automate the
| | 00:04 | creation of emails.
| | 00:06 | To automate email newsletters with
WordPress, we will follow these steps.
| | 00:10 | We will create a category called
Newsletter, and we will get the ID.
| | 00:13 | We will create posts, tag each post
with the Newsletter category, and add custom
| | 00:18 | fields, two of them: one called explore
link icon and the other, image thumbnail.
| | 00:23 | Third, we will create a template
with the name Email Newsletter.
| | 00:25 | We will use query_post to display
their most recent entries tagged with
| | 00:30 | category Newsletter.
| | 00:32 | And finally, we will create a page, we
will assign the template Email Newsletter
| | 00:35 | to that page, and we will publish.
| | 00:38 | Let's look at each of these steps now.
| | 00:40 | The first step is to create a
category called Email or Email Newsletter.
| | 00:45 | In this case we've used
the phrase Email Newsletter.
| | 00:48 | If we click the Email Newsletter link,
we see the Edit Category page, and up in
| | 00:53 | the URL there is a value call tag_ID =3.
| | 00:58 | This is WordPress's unique ID for this category.
| | 01:01 | We will need this later when we code or
template. For now, let's remember the ID
| | 01:06 | for this category is 3.
| | 01:08 | The second step will be to create a post.
| | 01:11 | We have a post here, Cycle California
Tours, and if you recall, this is the two-
| | 01:17 | column email that we will automate,
and we had, for each tour, a logo, a
| | 01:22 | description, and a link to explore
more information about that tour.
| | 01:26 | Now, we will replicate that a little bit.
| | 01:28 | We will create a post for the Cycle Tour.
| | 01:32 | Once we have our copy in the Edit box,
then we go over to Categories, we select
| | 01:37 | the Email Newsletter, we scroll down,
and we create two custom fields. One is
| | 01:43 | called to EXPLORE Link Icon, and that refers
to the EXPLORE Link with the little start.
| | 01:49 | The stars are either blue or red or gray.
| | 01:53 | In this case, our Custom Field,
explore link icon, we'll choose red.
| | 01:58 | The second Custom Field
we add is Image Thumbnail.
| | 02:02 | This corresponds to the Cycle Tours logo here.
| | 02:06 | To get the value for the image thumbnail,
we upload the image using WordPress's
| | 02:13 | Add an Image pop-up.
| | 02:15 | Since we've already added it, it's in our
gallery. There is the logo. We scroll down.
| | 02:21 | We look for the link URL.
| | 02:25 | We highlight it, Copy, close Add an
Image pop-up, scroll down, and now we have a
| | 02:32 | value for our image thumbnail
Custom Field, and we click Update.
| | 02:37 | So now we have a post that is one tour
description with its logo image and a
| | 02:44 | choice of explore button. We've also
tagged it with the Email Newsletter
| | 02:49 | category, and we've added to custom
fields, one to define the explore button we
| | 02:54 | want and the other to define the
thumbnail logo that we want to use.
| | 02:59 | The next step is to work on the template.
| | 03:01 | If you recall, our category ID was the number 3.
| | 03:05 | So when we scroll down, in PHP we are using
the query_posts function. We use showposts.
| | 03:13 | We want four posts.
| | 03:15 | If you recall our original
email, we had one, two, three, and four tours,
| | 03:21 | so we have four posts. Our category ID is
the number 3, which we retrieved earlier.
| | 03:27 | The next thing in our code does is
retrieve the custom field for image thumbnail.
| | 03:32 | We've typed in here the custom field name as
it appeared on the post form we saw moment ago.
| | 03:37 | We retrieved the explorer icon, which
works exactly the same way as the image
| | 03:42 | thumbnail. You type in the custom
field name as it appears on the post form.
| | 03:46 | Then we retrieve the excerpt, and
because the excerpt comes packaged with a
| | 03:50 | paragraph tag, HTML p tag, before and
after the excerpt, we need to remove that,
| | 03:56 | because in our HTML email, it
will mess up our formatting.
| | 04:00 | Once we have our image thumbnail, then we
build the actual image code for our logos.
| | 04:05 | Then we use a custom field to define the
explore button to define which image to call.
| | 04:11 | In this case, it's red, so we know
that the explore red button will appear.
| | 04:16 | Finally, we have one instance of our
table that contains tour logo, the tour
| | 04:22 | description, and the explore link. And
within this one instance, we have PHP code
| | 04:28 | to display the thumbnail at the right
spot, display the tour description as an
| | 04:33 | excerpt at the right spot, and
then the permaLink at the right spot.
| | 04:37 | Finally, with our template, so that we
can find it with the page, at the very top of
| | 04:42 | the template we define the
template name as Email Newsletter.
| | 04:46 | The last step is to create a page.
| | 04:48 | We have a page called Newsletter.
When we open it, we have selected a template
| | 04:54 | over here on the right called
Email Newsletter, and when we update it,
| | 05:00 | you see that we have automated the
two-column HTML email with WordPress
| | 05:05 | using the first post.
| | 05:07 | If you want to see a little bit about how
this works, we will go back to our post.
| | 05:11 | We will use the blue explorer icon.
| | 05:13 | We will update it, update our post.
| | 05:16 | Now we have the red explorer icon.
| | 05:19 | Now we have the blue.
| | 05:20 | This video only shows a general way to
automate the creation of emails with WordPress.
| | 05:24 | You will to need to refer to other
online documentation for the software if you
| | 05:29 | want or need more technical details.
| | Collapse this transcript |
| Automating HTML email with ExpressionEngine| 00:00 | You can automate the creation of
email, both HTML and plain text.
| | 00:04 | In this video, we will show you how to automate
emails with ExpressionEngine, a web site publishing tool.
| | 00:11 | To automate an HTML email with
ExpressionEngine, we will follow these steps.
| | 00:16 | First we will create a Custom Field
group with three fields: Story, which is a text
| | 00:21 | area; Logo, which is an image; and the
Explorer Icon, which is an image. Then we
| | 00:26 | will write down their field names.
| | 00:28 | The Logo corresponds to the logo
in our HTML email for each to tour;
| | 00:33 | story corresponds to the description,
or story used for each entry; and the
| | 00:38 | Explorer Icon relates to the
explorer button for each tour entry.
| | 00:43 | After we create our Custom Field
group, we will create a channel called
| | 00:46 | Newsletter, and ExpressionEngine
channels are simply buckets into which you can
| | 00:51 | collect a whole set of data.
| | 00:52 | Then we create content for the
channel called Newsletter, and we will add a
| | 00:57 | Story, Logo, and Explorer
Icon for each of our entries.
| | 01:01 | Finally, we will create a template
group called Newsletter, and then we will
| | 01:04 | add our HTML email code, and we will
update the code with ExpressionEngine
| | 01:09 | template code, so that it displays the latest
four entries for more channel called Newsletter.
| | 01:15 | Let's begin. The first step is to
create the custom field groups.
| | 01:20 | To do that, we click the Admin button at the
top > Channel Administration > Custom Fields.
| | 01:27 | We have created a channel field group
called the Basic Story, and in this group
| | 01:32 | we have three custom fields.
| | 01:34 | If you need to create a channel field,
click the red button at the top Create a
| | 01:40 | New Channel Field Group. Click Add/
Edit Custom Fields to see our three fields.
| | 01:47 | We have Story, Logo, and Explorer Icon.
The field name gives us the names that we
| | 01:53 | will need in our template code later;
| | 01:55 | therefore probably we should write
these down. And within the Story field,
| | 02:01 | it's important to note that the default
text formatting for this field is set to None.
| | 02:07 | That prevents ExpressionEngine from
adding paragraph tags or any other HTML.
| | 02:11 | You also might want to select Yes
underneath, so that you can override the
| | 02:16 | default text formatting at the story level.
| | 02:19 | The next step after we create our
category fields is to create a channel.
| | 02:24 | We click Admin > Channel
Administration > Channels.
| | 02:28 | We have created a channel called
Newsletter. If you need to create a channel
| | 02:33 | yourself, click the red Create
a New Channel button at the top.
| | 02:38 | Our channel Newsletter allows us to
collect Stories and other data that
| | 02:42 | relate to our newsletter.
| | 02:44 | The third step will be to create a
template group so that we can add our code.
| | 02:49 | To do that, we click Design > Templates > Edit.
| | 02:53 | We have a template group called
Newsletter, and we want to look at the index file
| | 02:58 | within that template group.
| | 02:59 | If you need to create your own template
group, click Design > Templates > Edit > Create Group.
| | 03:07 | Each default template group includes
an index file and a full story file.
| | 03:12 | In this case, we already have a
Newsletter template group, and we are in the index
| | 03:18 | page for our template group.
| | 03:20 | We have added our HTML code and
if we scroll down, we have added the
| | 03:25 | ExpressionEngine code.
| | 03:27 | It pulls entries from the channel
called Newsletter, which we set up.
| | 03:31 | It limits entries to four entries.
| | 03:34 | We've put in with curly brackets the
field name for our logo, the field name for
| | 03:40 | our story, the URL for our story if
someone clicks the Explorer icon, and finally,
| | 03:45 | the URL for our Explorer icon field.
| | 03:49 | And down here we close our
ExpressionEngine tag. Click View Rendered Template
| | 03:55 | to see our template.
| | 03:56 | Now we've created our HTML email template
in ExpressionEngine so that it is automated.
| | 04:03 | Right now, we have four stories.
| | 04:05 | We can update these stories at any time,
and they will appear above or below the
| | 04:10 | stories we currently have assigned
to our channel called Newsletter.
| | 04:14 | This video shows the general way
to automate the creation of emails
| | 04:18 | with ExpressionEngine.
| | 04:19 | You'll need to refer to any online
documentation by ExpressionEngine if you
| | 04:24 | want or need more technical details.
| | Collapse this transcript |
| Automating HTML email with FeedBurner from an RSS feed| 00:00 | This video shows how to use your
web site or blog RSS feed with the
| | 00:05 | FeedBurner to send your emails automatically
every time you update content on your web site.
| | 00:10 | Here is how it works.
| | 00:12 | To automate your email newsletters with
the FeedBurner, we will follow these steps.
| | 00:16 | First we will call up the RSS feed URL for your
web site, and we will copy it to the clipboard.
| | 00:22 | Second, we will call up FeedBurner and
paste in your RSS URL. Then we will burn
| | 00:27 | your RSS feed with the FeedBurner.
And finally, we will use of the FeedBurner
| | 00:31 | Publicize tab to get your email sign-up
form code and to define another parts of
| | 00:36 | your automated emails.
| | 00:38 | The first step is to
find and copy your RSS feed.
| | 00:42 | In this case, we're using
WordPress and so the feed is simply /feed.
| | 00:48 | We will copy and then go over to FeedBurner.
| | 00:52 | We will paste in our feed URL and click Next.
| | 01:02 | On this page, we need to name our feed.
| | 01:05 | We'll call it Explore California. And the
feed address at FeedBurner we will also
| | 01:15 | call Explore California.
Click Next to save these settings.
| | 01:21 | This page simply confirms our
FeedBurner URL for our feed, which we can open in
| | 01:28 | a new tab if we want to check it.
| | 01:32 | So it has picked up all four our
stories that we used in our HTML email.
| | 01:40 | To get to the next step, we click Next.
| | 01:46 | This page gives us several
settings for traffic statistics.
| | 01:50 | We will add Clickthroughs, and we will
add the additional statistics and click
| | 01:56 | Next to save these settings.
| | 01:58 | We now have created our feed for Explore
California, and this is the homepage for that feed.
| | 02:04 | We click the publicize tab at the top,
and on the left, click Email Subscriptions
| | 02:10 | to define our email.
| | 02:12 | We click Activate so that our
readers can give their email address to
| | 02:18 | FeedBurner so that FeedBurner will
send them emails every time our web site
| | 02:22 | content is updated.
| | 02:26 | The first page we have here
is for subscription management.
| | 02:31 | We can either copy and paste in code for
our web site, to be placed into our web
| | 02:37 | site pages, or you also can add a link.
When people click the link they will be
| | 02:43 | sent to FeedBurner and
FeedBurner will collect their email address.
| | 02:49 | The last option with subscription
management is to have FeedBurner send you an
| | 02:54 | email every time people unsubscribe.
| | 02:58 | We click Save to save these settings.
| | 03:01 | The Communication preference
sets the email from address and the
| | 03:08 | confirmation email subject.
| | 03:11 | Whenever people give their email
address to FeedBurner, FeedBurner will send
| | 03:15 | them a confirmation email.
| | 03:17 | You can define the email here, as well as a
subject line. Click Save to save your settings.
| | 03:24 | The Email Branding page allows you to
define a generic subject and title of
| | 03:31 | every email that would be sent out
whenever your RSS feed is updated.
| | 03:36 | In addition, you can add your logo.
| | 03:39 | You also can set some basic settings
about font size and the font size for the
| | 03:45 | excerpt from your RSS feed.
| | 03:48 | Click Save to save your settings.
| | 03:50 | The last option are delivery options.
| | 03:54 | You can set the time of day that
FeedBurner will check your RSS feed.
| | 03:59 | If FeedBurner finds new stories,
FeedBurner will roll up those news stories into
| | 04:04 | an email and send them out to
everyone who has subscribed to your RSS feed
| | 04:09 | through their service.
| | 04:15 | Click Save to set the Delivery Options.
| | 04:19 | These are the basic steps
needed to send email with FeedBurner.
| | 04:23 | You can refer to their
online help for more details.
| | Collapse this transcript |
| Automating HTML email with FeedBlitz from an RSS feed| 00:00 | This video shows how to use your web
site or blog RSS feed with FeedBlitz to
| | 00:05 | send your emails anytime
your web site content is updated.
| | 00:10 | Here is how it works.
| | 00:11 | To automate email newsletter sending
with FeedBlitz, we will follow these steps.
| | 00:16 | First, we will call up an RSS feed URL
and we will copy it. Then we will call it
| | 00:20 | FeedBlitz, and we will create
an automatic list newsletter.
| | 00:24 | Then we will paste in the RSS feed
URL to create an automatic mailing.
| | 00:28 | Finally, we will pick their newsletter
to get the email sign up form code and
| | 00:32 | define other parts of the automated email.
| | 00:35 | The first step is to click
the Newsletter tab in FeedBlitz.
| | 00:39 | Then click New Automated Mailing
List on the Newsletter Mailings page.
| | 00:44 | This opens a page that allows you to
create a new automatic newsletter mailing.
| | 00:49 | We click the Create Automatic Mailing button.
| | 00:51 | Then we go to our blog.
| | 00:55 | We have our RSS feed. We copy it.
| | 00:57 | In this case, it's from WordPress.
| | 00:59 | We paste it in here.
| | 01:01 | Now, we set the time zone.
| | 01:03 | Then click Create to create our new newsletter.
| | 01:06 | We're allowed to set our
daily delivery schedule.
| | 01:09 | You can set it nightly, on
demand, or the fastest method possible.
| | 01:14 | In addition, we can set it
to for weekly and monthly.
| | 01:17 | Click Next to save our
delivery schedule options.
| | 01:21 | Click Customize to begin
the personalization process.
| | 01:24 | The first personalization step in
FeedBlitz is to set up the Email Template Builder.
| | 01:30 | You can define whether not to have a
logo, table of contents, and a page layout.
| | 01:35 | Let's save the template.
| | 01:36 | The next page allows you to set what
they call an Email Envelope Settings.
| | 01:43 | These are the From Name and the
Sending Address whenever someone wants to hit
| | 01:47 | Reply to your email
and wants to get in touch with you.
| | 01:55 | In addition, we can set Advanced Subject
Line Settings if you want to explore those.
| | 02:00 | For now, we'll simply click Save
Envelope to save these settings.
| | 02:05 | The next page allows us to define the
subscriber and lead data capture settings.
| | 02:09 | We'll click Next and accept the default.
| | 02:12 | You can always go back
and change these settings.
| | 02:15 | The next page allows us to import subscribers.
| | 02:19 | We'll check off, I don't have
existing subscribers, and click Next.
| | 02:23 | This page provides us with basic form
code that we can use on our web site.
| | 02:29 | You can copy/paste it into your web
site and save it off as a text file.
| | 02:34 | Click Continue to see the main
page for our new newsletter feed.
| | 02:40 | If we need to change settings, for
example, click Settings and we can change
| | 02:44 | Email Envelope Settings,
the sender/reply-to addresses.
| | 02:48 | We can change our email design.
| | 02:50 | We can change the confirmation email
and a whole host of other settings.
| | 02:55 | In addition, we can click Forms to
customize our subscription form.
| | 03:00 | These are the basic steps needed to
send email automatically with FeedBlitz.
| | 03:05 | Refer to their online help for more details.
| | Collapse this transcript |
|
|
9. Testing Email Before DeliveryDeciding when and how to test email| 00:00 | Testing HTML email before you
send it out is a critical step.
| | 00:04 | You don't know, for example, how your
email will appear in different email software.
| | 00:10 | This video shows basic ways to test
your HTML email. Because most software
| | 00:15 | used to open and display HTML email
uses web browsers on the computer,
| | 00:22 | the first way to test your HTML
email is to use different web browsers.
| | 00:26 | Start with Firefox, Chrome, or
Safari to see how your email displays with
| | 00:30 | standards-compliant email software.
| | 00:32 | So, call up your email locally as you
build your email in Firefox to confirm
| | 00:39 | that your email displays fine.
| | 00:40 | Do the same with Safari. For example,
Mac Mail some or all of the Safari web
| | 00:47 | browser to display HTML email.
| | 00:50 | Google Chrome is another
standards-compliant web browser that can help you
| | 00:54 | identify any problems, as well as
confirm that your email displays fine.
| | 00:59 | If you're on Windows, whatever version
of Internet Explorer is on your computer
| | 01:03 | you might want to test in
that environment as well.
| | 01:07 | We can see here with Internet Explorer 9
that we have borders around two of the images.
| | 01:12 | Once you test your HTML email locally,
the next step is to test with a service
| | 01:18 | like BrowserLab at Adobe.
| | 01:21 | BrowserLab is a free online service
from adobe.com that allows you to see how
| | 01:26 | your HTML email will display in a
range of web browsers, including Internet
| | 01:31 | Explorer 6, which is used in
older versions of Outlook.
| | 01:36 | BrowserLab provides you with a little
bit more insight into how your code might
| | 01:41 | or might not display with older email software.
| | 01:45 | Once you log in to BrowserLab, you
click the Browser Sets link at the top, you
| | 01:49 | select from the list of available browsers,
| | 01:52 | then you click the Test link.
| | 01:56 | You type in the URL to your HTML email
as a web page, and BrowserLab displays it
| | 02:01 | in whatever browsers you have selected.
| | 02:04 | In this case, we've selected Internet Explorer 6.
| | 02:06 | We can scroll down, and we see
that images also have borders.
| | 02:15 | Explorer 7, everything displays
fine, except a few of these images have
| | 02:20 | borders, and finally, Internet Explorer
8. That's the only issue are the borders
| | 02:30 | around the Explorer buttons and
the Buy buttons and the Book buttons.
| | 02:35 | This raises the key question
about testing: How far do you go?
| | 02:39 | Only the most primitive email will
display perfectly in all email software.
| | 02:44 | It's also true that most of your
readers may not use older versions of Lotus
| | 02:48 | Notes, which is a very primitive email software.
| | 02:52 | How far you test is up to you.
| | 02:54 | How far you test depends on the email
software your readers most commonly use.
| | 03:00 | Most people test locally on their
computer with a few web browsers as they
| | 03:04 | build their HTML email.
| | 03:06 | Then they use online testing services
to confirm their email display is fine
| | 03:10 | across many kinds of email software.
| | 03:12 | The next video describes how to
use more comprehensive online email
| | 03:16 | testing services.
| | Collapse this transcript |
| Using testing services| 00:00 | Once your HTML email tests out fine with
a few web browsers, the next step is to
| | 00:05 | use an online testing service.
| | 00:08 | We'll look at MailChimp's
Inbox Inspection Service.
| | 00:11 | While the next chapter shows the
complete campaign creation process, here we will
| | 00:15 | focus on the last step:
| | 00:17 | testing how the email
displays in different email software.
| | 00:21 | We'll start from the MailChimp dashboard.
Click Campaign. Under Hansel & Petal,
| | 00:28 | we'll click Edit to get the campaign details.
| | 00:31 | At the bottom of the Campaign details
page is they run inbox inspection. Click
| | 00:37 | the gray run inbox inspection button.
| | 00:40 | Clicking the run inspection button
displays this results page. Click the reports
| | 00:46 | dashboard link. Then click the View
Report button next to your campaign.
| | 00:53 | MailChimp's Inbox Inspection Service,
like similar services, takes anywhere from a
| | 00:59 | few minutes to a few hours to
run the complete suite of tests.
| | 01:03 | These tests will show you how your
email displays in actual email software.
| | 01:07 | For example, let's look at Outlook 2003.
| | 01:13 | All the elements appear to be here.
For example, the header and footer display fine.
| | 01:19 | The colors for the heading, the tagline,
the prices, the product names, and the
| | 01:24 | offer code all display fine. All the
images have their borders around them.
| | 01:29 | We can say that in Outlook 2003
this HTML email will look fine.
| | 01:35 | Next, let's looked at Outlook 2007.
| | 01:41 | Here, the header image and footer image
also display fine. The heading color, the
| | 01:47 | tagline color and the offer
code color also display fine.
| | 01:51 | However, the spacing between the top
navigation links would need to be adjusted.
| | 01:56 | In addition, the background color for
the content area did not display properly.
| | 02:03 | So we know that if we care about
Outlook 2007, we will need to go in, tweak
| | 02:08 | our code, and come back and run the
Inbox Inspection Service again to confirm
| | 02:13 | that our changes work.
| | 02:16 | Let's look at one more difficult email software.
| | 02:20 | Gmail often displays email in
different ways than you might intend.
| | 02:25 | In this case, however, the header
displays fine, the footer displays fine, the
| | 02:31 | navigation link spacing is fine, and
the colors for the heading, tagline,
| | 02:36 | product names, prices, and offer code
at the bottom all display fine, and
| | 02:41 | every image has a border.
| | 02:43 | So we know that this HTML
email will look fine in Gmail.
| | 02:47 | Online testing services are an
inexpensive way to test thoroughly how your HTML
| | 02:52 | email will display in many
different kinds of HTML email software.
| | 02:56 | It's an important step to
take before you send any email.
| | 02:59 | Let me also add that there
are other testing services.
| | 03:03 | For example, litmus.com,
browsercam.com, and campaignmonitor all
| | 03:10 | provide services to test how your HTML email
will display in a variety of email software.
| | 03:16 | Whatever service you choose, testing
is a critical step to ensure your email
| | 03:21 | displays well for all of your readers.
| | Collapse this transcript |
|
|
10. Sending HTML EmailOutsourcing your email campaign| 00:00 | If you do decide to go with an email
delivery service, here are some things to look for.
| | 00:05 | Pricing, for example. You can either pay
by the month, or you can pay by email sent.
| | 00:10 | If you send infrequently, paying by the
email sent might be more cost effective.
| | 00:15 | Another question to ask: Do they
fire customers for spamming activity?
| | 00:20 | For example, one of my customers uses
MailChimp and when they have too many
| | 00:24 | unsubscribes every year or so,
MailChimp sends an email to my client alerting
| | 00:29 | them that they have too many
unsubscribes for their email newsletters compared
| | 00:34 | to other clients of MailChimp.
| | 00:36 | Another question to ask: Do they have
at least one staff person who actively
| | 00:40 | works with spam blacklists and whitelists?
| | 00:43 | Equally important, can you talk to that person?
| | 00:46 | Do you like their reporting tools?
| | 00:48 | Do you like working with their
application, and who are their customers?
| | 00:52 | You might even ask for
references if that's important to you.
| | Collapse this transcript |
| Sending email with MailChimp| 00:00 | In this video, we'll show how to use
one email delivery service, MailChimp.
| | 00:05 | They are located at mailchimp.com.
| | 00:07 | Once you log in, you will see the dashboard.
| | 00:10 | The process of sending an email in
MailChimp, and most other services, has
| | 00:15 | several very clear steps.
| | 00:16 | The first step is to create a list,
and you do that in MailChimp by pressing
| | 00:21 | the create a list button, where
you'll be ask to import or manually add a
| | 00:26 | range of email addresses.
| | 00:28 | In this case, we've already
created a very simple email list.
| | 00:32 | The second step is to create a campaign.
| | 00:34 | We press the Create Campaign.
Now, we have several options.
| | 00:38 | We're going to create a very basic campaign.
| | 00:40 | We could also send a plain-text email.
| | 00:43 | We could send something called an A/B
Split Campaign, which allows us to test
| | 00:47 | how two different emails fare with readers,
and we could test a campaign that is based on RSS.
| | 00:54 | In this case, we want a regular campaign.
| | 00:56 | We'll use our Two Olive Tree Oil list
that we set up, and then we click Next to
| | 01:01 | proceed to the next step.
| | 01:03 | In this step, we'll name our campaign.
| | 01:05 | It's Two Olive Trees Oil.
| | 01:09 | For now, we will put in a test message
subject, and on the right side, we have
| | 01:14 | a series of options.
| | 01:15 | For now, we'll simply track opens.
| | 01:18 | We click Next to select your HTML email.
| | 01:22 | In this case, we want to paste in code.
We'll call up Notepad++ with our Olive Tree email.
| | 01:30 | We'll copy and then we'll paste
into the form here in MailChimp.
| | 01:38 | We can have MailChimp automatically
take our CSS styles and in-line them, but
| | 01:44 | since we've already done
that, we don't need that step.
| | 01:47 | MailChimp automatically
creates a text version of our email.
| | 01:51 | We'll leave it for now, but you should
paste in whatever text email version you
| | 01:56 | create of your own email.
| | 01:58 | Click Next and we have the
confirmation page for our campaign.
| | 02:02 | At the bottom of the Campaign
details page, we have two options for
| | 02:07 | publishing our email:
| | 02:08 | one is to send now and the
other is to schedule delivery.
| | 02:11 | Let's Schedule Delivery.
| | 02:13 | We have today's date, and we
can set it at whatever time we want.
| | 02:17 | Set it for 8 PM, and you'll see that
the time zone is US/Eastern time.
| | 02:21 | We'll click Schedule, and the email is
scheduled, and it confirms what time.
| | 02:27 | And you can see we can either go to
the campaign dashboard, start a new
| | 02:31 | campaign, or eat a banana.
| | 02:33 | While this video shows how to send
email with MailChimp, the process is similar
| | 02:37 | for all email delivery services.
| | Collapse this transcript |
| Sending email with Campaign Monitor| 00:00 | Today we'll show how to use the
email delivery service Campaign Monitor.
| | 00:05 | As with most email delivery services,
the process of sending an email involves
| | 00:10 | creating a list, then creating a
campaign, adding your email to the campaign,
| | 00:15 | and then choosing the list for your
campaign, and then sending your email.
| | 00:19 | We'll see how this works in Campaign Monitor.
| | 00:22 | The first step in Campaign Monitor is
to click the Create/Send tab at the top.
| | 00:27 | Click Create a new campaign.
Type in the campaign name.
| | 00:38 | Then we type in our email address, and we
give a Reply To address for the campaign.
| | 00:46 | Click Next. In this step we'll choose
an HTML and plain text email. Click Next.
| | 00:54 | We'll click the Browse button to import
from our computer. Click Get my campaign.
| | 01:03 | We click the Preview link to view in a
new window, and this is the single-column
| | 01:08 | email we created earlier.
| | 01:11 | Campaign Monitor asks us whether or not the
unsubscribe link is to be added by them or by us.
| | 01:16 | We'll choose them. Click Next.
| | 01:19 | We'll click 'import it from your HTML to
get our text email', and now that we've
| | 01:25 | defined our email, both the HTML and
the text, we click Define Recipients.
| | 01:30 | We'll select sample list. Click Next.
| | 01:33 | The final step is to test
and define the delivery.
| | 01:37 | We'll click to skip the test, and we
will send the campaign immediately.
| | 01:42 | Click the green button.
| | 01:44 | While this video shows how to send
email with Campaign Monitor, the process is
| | 01:48 | similar for all email delivery services.
| | Collapse this transcript |
| Sending email with Constant Contact| 00:00 | Today, we'll show you how to use one HTML
email delivery service, Constant Contact.
| | 00:06 | As with other email delivery
services, the email delivery service is
| | 00:10 | fairly straightforward.
| | 00:12 | First you create a list, then you
create a campaign, you add your email to the
| | 00:16 | campaign, and then you connect a
list to your campaign and send.
| | 00:21 | We'll see how to do this in Constant Contact.
| | 00:23 | The first step is to create a list.
| | 00:26 | In Constant Contact, click
the Contacts link up at the top.
| | 00:30 | We have a list already
created called General Interest.
| | 00:33 | If you need to create a list, you can
either manually add addresses or import
| | 00:38 | your email address list.
| | 00:40 | Now that we've created the list with
the Contacts tab in Constant Contact, we
| | 00:45 | click the Email Marketing tab to
create our campaign. Click Create.
| | 00:50 | We enter a name for our email. Click Next.
| | 00:59 | We want to use our own code, so we
scroll down, on the left, Use My Own Code.
| | 01:05 | We'll click the Use My Own Code button.
| | 01:08 | The email format is HTML. Click Next.
| | 01:11 | On the left side, we click Advanced Editor.
| | 01:17 | We enter the subject line
and highlight their code, delete it,
| | 01:32 | go to Notepad, highlight, copy the code,
and paste the code into Constant Contact.
| | 01:41 | We Save & Return.
| | 01:43 | If we want we can preview the email.
It displays fine. Close that off. Click Next.
| | 01:52 | We don't want personalization.
And this last step, we click Save & Next.
| | 01:59 | We select a list to send this email to,
and Constant Contact asks us to send it
| | 02:05 | now or to schedule it. We'll send it now.
| | 02:09 | Click the Finish button to send
the email now in Constant Contact.
| | 02:13 | While this video shows how to
send email with Constant Contact,
| | 02:16 | the process is similar for
all email delivery services.
| | Collapse this transcript |
| Sending email with iContact| 00:00 | Today, we'll show you how to use one email
delivery service, iContact, to deliver an email.
| | 00:06 | As with other email delivery services,
the process is very similar. First you
| | 00:11 | create a list, then you create your
campaign, you assign your email to the
| | 00:16 | campaign, you assign your
campaign to the list, and you send.
| | 00:19 | Click My Contacts. Click
Lists. We'll create a new list.
| | 00:30 | Click Save. Click Add to add subscribers.
| | 00:35 | We'll add contacts one by one, so click
Add Contacts One by One. Click Add Contact.
| | 00:50 | Now that we have a list to send
our email to, we'll click Create.
| | 00:56 | We'll create a message.
| | 00:58 | We have the HTML code. Click MessageCoder.
| | 01:01 | We'll go to Notepad.
| | 01:08 | We copy our code for our email.
| | 01:12 | We highlight the email in the iContact
Editor, paste our code, scroll down, click
| | 01:19 | Copy Text to create a text version.
| | 01:22 | For your emails you should already have a
text version of your email to paste in this spot.
| | 01:29 | Click Proceed To Send, select Two Trees
as the list, uncheck Archive Message to
| | 01:42 | the Community, click the
green button Proceed to Send.
| | 01:47 | Type your Initials to confirm that
you authorized sending of this email.
| | 01:52 | Click Deliver Immediately to send the email.
| | 01:55 | While this video shows how to send
email with iContact, the process is similar
| | 02:00 | for all email delivery services.
| | 02:03 | And don't forget to return to click the
Track link for reporting on your email.
| | Collapse this transcript |
| Sending email with VerticalResponse| 00:00 | Today, we'll show how to use one delivery
service, Vertical Response, to send HTML emails.
| | 00:06 | As with other email delivery
services, the process is similar.
| | 00:10 | First you create a list, then you
create a campaign, attach your HTML email to
| | 00:15 | your campaign, and then you assign
a list to your campaign, and send.
| | 00:20 | The first step is to create an
email. Select Emails > New.
| | 00:30 | Click Next. Vertical Response gives us
a series of choices to create the HTML
| | 00:35 | email. Select Freeform HTML. Click
Next. In Notepad, we copy all of our HTML
| | 00:44 | code, Vertical Response,
paste or code, click Next.
| | 00:53 | We can see that the HTML email has
been uploaded to Vertical Response in HTML
| | 00:58 | format, and that it displays fine.
| | 01:01 | We click Preview Text.
| | 01:03 | If we want to edit our text email, we can do so.
| | 01:09 | Scroll down. We select mailing lists.
| | 01:12 | We select our list.
| | 01:14 | If you will need to send a test,
click Send Test. Click Next.
| | 01:20 | The next step is to select
recipients for our email. Click Next.
| | 01:25 | At the bottom of the email,
you are given a send date;
| | 01:28 | if you want to change it, click
Change to specify the specific date.
| | 01:32 | We will choose As Soon as
Possible. Click Send email.
| | 01:36 | Vertical Response also provides you
with a link to view email reporting or to
| | 01:40 | create another email.
| | 01:41 | While this video shows how to send
email with Vertical Response, the process is
| | 01:46 | similar for all email delivery services.
| | 01:48 | And be sure to check back
reporting on your email.
| | Collapse this transcript |
| Sending email with canned templates| 00:00 | Almost every email delivery service
includes templates that can be used to
| | 00:04 | create HTML email very easily.
| | 00:07 | The question is whether or not a
template fits your needs, or if it doesn't, can
| | 00:11 | you adapt the template easily.
| | 00:13 | In this video, will show you how to use a
canned template from one email delivery service.
| | 00:18 | The general directions apply to most,
if not all, email delivery services.
| | 00:23 | In this case, we are using iContact.
| | 00:25 | From the main iContact screen, you
click Create, and you click Create a Message,
| | 00:34 | and we have two types. In this case, we
want the Message Builder because we want
| | 00:39 | to use their canned templates.
| | 00:42 | iContact then presents us
with a choice of templates.
| | 00:46 | We will scroll down to
find one that's fairly simple.
| | 00:53 | These templates are all tested out to
display well in most email software.
| | 00:59 | In this case, we will use
this basic invite template.
| | 01:04 | Near the bottom of this iContact page is the
editor for the email template we've chosen.
| | 01:11 | We click on the part of
the email we want to edit.
| | 01:16 | We type in the information we want.
| | 01:18 | We click the Next part. We also edit
that and then click away to deactivate.
| | 01:29 | We can create a text version by
clicking the Copy Text button and then scroll
| | 01:36 | down to the bottom where we
can proceed to send this email.
| | 01:41 | While canned email templates can be
limiting, in some cases they work fine, or are
| | 01:45 | close enough, that a little
tweaking makes them serviceable.
| | 01:48 | While this video shows how to use a
canned template with the iContact service,
| | 01:53 | the process is similar for
all email delivery services.
| | 01:57 | In fact, the "Sending HTML Email" chapter
later in this video series shows you how
| | 02:04 | to do so with a variety
of email delivery services.
| | Collapse this transcript |
|
|
11. Dealing with Common Coding ProblemsSolving layout and spacing problems| 00:00 | This video shows common layout and
spacing problems you might encounter as you
| | 00:04 | code HTML email, along with solutions.
| | 00:07 | The main layout problem people find
when they test their emails have to do with
| | 00:11 | gaps and the alignment of their tables.
| | 00:14 | Both of these issues, gaps and alignment,
can be addressed with the HTML table code.
| | 00:20 | All HTML tables that you create, for example,
should have this set of code as a model.
| | 00:27 | For example, every instance of table
that you use, you should set border = 1
| | 00:32 | while you are designing and coding the layout.
| | 00:35 | You should set cellpadding to zero
and the cellspacing to zero, and you
| | 00:39 | should define the width.
| | 00:41 | In addition, when you create your table
data cells, you should set the valign, or
| | 00:46 | vertical align, to top. You should set
your align, in this case it's to left, but
| | 00:51 | in some cases it may be to the center or
to the right. And you also absolutely, at
| | 00:56 | the TD level, should set the width; this
will help with most alignment issues.
| | 01:02 | In addition, sometimes you'll see gaps
around images in older email software.
| | 01:08 | Specifically, you might have your
code this way with the table data cell
| | 01:12 | opening and defined on one line, your
image on the next line, and the close of the
| | 01:17 | table data cell on the next line. This looks
nice and clean and is fairly easy to maintain;
| | 01:23 | however, some older software will add a
gap underneath the image to account for
| | 01:28 | the table data cell being underneath the image.
| | 01:31 | The way to correct that if you find it
in your testing is to simply turn this
| | 01:36 | into a single string of code, like this.
| | 01:40 | It looks more complicated, it's a little bit
more difficult to maintain, but it will
| | 01:44 | fix the gap underneath an image.
| | 01:47 | The other issue people find with
images can be resolved with these two style
| | 01:52 | declaration: setting border
equal to None and display the block.
| | 01:56 | Specifically, Hotmail will add a gap if
you don't set display to block for images.
| | 02:02 | Finally, for layout issues, if you are
trying to get pixel-level control, you may
| | 02:08 | find that you need to remove your
paragraph tags, your p tags, and move the style
| | 02:13 | declarations up into the nearest
table data cell, as we show here.
| | 02:17 | Here is the text that would normally be
wrapped in p, or paragraph, tags, in HTML,
| | 02:24 | and here's a style declaration for
the font that normally would be in those
| | 02:29 | paragraph tags. Instead, we've
moved it up to the table data cell.
| | 02:33 | Layout problems with an HTML email
often can be identified easily when you set
| | 02:38 | the HTML table border to 1.
| | 02:40 | This lets you x-ray your table rows and
columns. For example, you can also see
| | 02:45 | gaps underneath images if you can see
where the bottom of the table row is.
| | Collapse this transcript |
| Solving image problems| 00:00 | This video shows common image-related
problems that you might encounter as you
| | 00:04 | code and test your HTML
email, along with solutions.
| | 00:08 | The most common image-related problems
that you will see have to do with gaps,
| | 00:13 | borders around images, and setting the
background to a table or table data cell.
| | 00:18 | Let's talk about each of those.
| | 00:20 | First of all, of your image
tags should have this basic code.
| | 00:26 | In addition to the source, obviously,
which should be an absolute URL to a
| | 00:30 | specific image on a web server
somewhere on the Internet, you also should
| | 00:35 | specify the height and width, as well
as the alt tag. The alt tag will display
| | 00:41 | if images are turned off.
| | 00:43 | In terms of image-gap problems you
want these styles at a minimum. You want
| | 00:47 | display set to block
| | 00:49 | for Hotmail, and you want
borders set to none for Outlook.
| | 00:54 | The borders set to none will also solve
the problems related to Outlook showing
| | 00:58 | borders around all images regardless.
| | 01:01 | In addition, you may want to style
your image tags to have the margins and
| | 01:07 | padding set to zero, and don't use
shorthand--you'll need to specify margin-top,
| | 01:13 | padding-top, etc.
| | 01:15 | Another image-related problem that has to
do with gaps involves older email software.
| | 01:22 | In old versions of Lotus Notes
email, for example, you may find a gap
| | 01:26 | underneath the image tag.
| | 01:28 | Sometimes this is caused by the
table data cell being on a new line.
| | 01:33 | The solution is to bring
everything up into a single line,
| | 01:37 | like this. The third-image related
problem has to do with background images.
| | 01:45 | This solution that I will show you is
from the Campaign Monitor blog, and the
| | 01:50 | URLs are in the exercise files.
| | 01:54 | The main problem with background images
is the Gmail and Outlook 2007 and Outlook
| | 02:00 | 2010 will not display background images.
| | 02:04 | You have to do a little bit of a workaround.
| | 02:06 | For Outlook, you need to add VML code,
which is this block of code, and you put it
| | 02:13 | before the content and you put it after
the content to close off their VML tag.
| | 02:21 | The most important aspect of the VML
code is to get the source of the background
| | 02:27 | image correct and to specify the two
instances of height and the two instances
| | 02:33 | of width, and those height and width
values need to match the height and width
| | 02:38 | value for the table data cell and for the image.
| | 02:43 | If you are careful, this approach
will display background images in Outlook
| | 02:47 | 2007, Outlook 2010, and Gmail.
| | 02:52 | Some image-related problems within
HTML email often can be identified easily
| | 02:58 | when you set the HTML table border to 1.
| | 03:01 | This will let you x-ray your table
rows and columns to find any gaps.
| | 03:05 | These are the most common solutions to
image problems that you may find while
| | 03:09 | testing HTML email code.
| | Collapse this transcript |
| Solving Gmail display problems| 00:00 | This video shows common problems you
might encounter when you send an HTML email
| | 00:04 | to Gmail, along with solutions.
| | 00:07 | The primary issue with Gmail is simply
that it only responds to inline CSS.
| | 00:13 | You cannot have CSS outside of any
HTML table tag, td tag, or paragraph tag,
| | 00:21 | image tag, anchor tag, and so forth.
| | 00:23 | Gmail will ignore all other
definitions of CSS, unless it is in an HTML tag.
| | 00:29 | The three issues related to Gmail have
to do with background images on tables
| | 00:35 | and table data cells,
font sizes, and font colors.
| | 00:39 | Let's look at solutions for
each of these, starting with fonts.
| | 00:43 | When you test your HTML email in Gmail,
what you might find is that if you have
| | 00:48 | a dark background for example,
and your color is not coming out,
| | 00:52 | if it's too dark, one solution
is to simply force the font color.
| | 01:00 | In this case, we are specifying white.
| | 01:07 | You nest the font tags inside of your
anchor tags to make everything crystal
| | 01:12 | clear to Gmail as it displays your email.
| | 01:16 | In addition, if you have a problem with
the font size and you cannot correct it
| | 01:21 | with a style declaration, you also can
use the size= value in the font tag.
| | 01:33 | So this is how you can adjust, or
force, the color and the size of a font in
| | 01:38 | Gmail if you need to.
| | 01:40 | If you don't force the font color, you
should always define the color of your
| | 01:44 | links, just to be sure.
| | 01:47 | To display background images in Gmail,
I'll explain this solution published in
| | 01:53 | the Campaign Monitor blog.
| | 01:54 | The URLs are at the top of the exercise file.
| | 02:00 | A solution for Gmail uses
the background= property.
| | 02:05 | We also have code here for
Microsoft Office, which is VML.
| | 02:10 | You can find the latest on Gmail
compatibility with CSS at this Campaign
| | 02:15 | Monitor CSS support page.
| | Collapse this transcript |
| Solving Lotus Notes display problems| 00:00 | This video shows common problems you
might encounter when you send an HTML email
| | 00:05 | to Lotus Notes, along with solutions.
| | 00:08 | The most common problems with Lotus
Notes are related to table layouts and fonts.
| | 00:13 | To have your email display well in a
Lotus Notes environment, even in older
| | 00:18 | versions of Lotus Notes, the best
solution is to use a very well-defined
| | 00:23 | HTML table structure.
| | 00:25 | Specifically, every HTML table tag
should specify border="1" while you are
| | 00:32 | designing your layout and
fine-tuning it. 0 when you're done.
| | 00:36 | cellpadding should be set to 0,
cellspacing should be set to 0, and you
| | 00:41 | should define the width.
| | 00:43 | In addition, for every table data
cell, you should define the valign to top
| | 00:48 | unless it needs to be bottom or middle.
| | 00:50 | But top is a nice safe setting.
| | 00:53 | Align should be set to left, center, or
right, and your width absolutely must be set.
| | 00:59 | This helps older versions of Lotus Notes know
exactly the width to display your content in.
| | 01:06 | The other issue that older versions of Lotus
Notes have involve font colors and font sizes.
| | 01:13 | You may find, for example, that
headings and paragraphs display the
| | 01:19 | generic system font.
| | 01:21 | If you want to override that, one way
to try is to use the font tag and specify
| | 01:28 | the color of the font tag.
| | 01:30 | You also can specify the size if you need to.
| | 01:35 | In addition, even if you don't force
a font color, you should always define
| | 01:40 | the color of your links
with the style color value.
| | 01:44 | You can find the latest on Lotus Notes
compatibility with CSS at the guide to
| | 01:50 | CSS support that Campaign Monitor
has published on their web site.
| | Collapse this transcript |
| Solving Outlook 2007/2010 display problems| 00:00 | This video shows common problems you
might encounter when you send an HTML email
| | 00:05 | to Outlook, along with solutions.
| | 00:08 | The typical issues you might find with
Outlook have to do with borders around
| | 00:12 | images, background images,
floats, and margins versus padding.
| | 00:18 | Let's start with image borders.
| | 00:20 | By default, Outlook appears to
attach borders to all images.
| | 00:25 | As a result, you need to add the style
border:none to every image that you don't
| | 00:31 | want a border around.
| | 00:33 | This will fix the problem.
| | 00:35 | The next image you might find with
Outlook has to do with background images.
| | 00:40 | Outlook 2007 and 2010, for example,
do not display background images.
| | 00:46 | Here is a solution from the Campaign
Monitor blog, and the URLs are in the
| | 00:51 | exercise file, but here's the code.
| | 00:56 | You need to add Microsoft VML code.
| | 00:59 | You open the code up here and you
close it down here after the content.
| | 01:05 | So you need to put content
between two chunks of VML code.
| | 01:09 | Within the VML code there
are several important details.
| | 01:13 | One, you need to define where the
background image can be found. Two, you need
| | 01:18 | to define the height and the width in
two separate places within the VML code.
| | 01:23 | It's up here, and it's down here,
and this height and width must match
| | 01:29 | the height and width of the TD cell
and the image that's being used as
| | 01:33 | the background image.
| | 01:35 | This approach will display background
images in Outlook 2007 and Outlook 2010.
| | 01:43 | The final issues you might find
with Outlook have to do with floats and
| | 01:47 | margins versus padding.
| | 01:49 | It's never a good idea when you
code HTML email to use floats.
| | 01:53 | Instead, at the TD level, the table-
data level within your HTML tables, use the
| | 01:59 | valign and the align elements to define
whether data floats to the left, to the
| | 02:05 | right, or the center, the top, middle, or bottom.
| | 02:09 | In addition, Outlook is more likely to
respond to margin settings than it is
| | 02:14 | to respond to padding.
| | 02:16 | You may find, for example, that
you use padding in your email design.
| | 02:21 | When you test it in Outlook, however,
the padding setting is ignored.
| | 02:25 | If that's the case, simply switch
padding for margin to see if that works.
| | 02:30 | You can find the latest on Outlook
compatibility with CSS at the Guide to CSS
| | 02:35 | support that Campaign Monitor
publishes on their web site.
| | Collapse this transcript |
| Adding video to email| 00:00 | Adding video to email is
both easy and impossible.
| | 00:04 | Only Mac Mail, MobileMe, and other
Apple software lets readers play a video
| | 00:10 | embedded in their email.
| | 00:11 | But there is a way to
gracefully include videos in email.
| | 00:15 | I'll show it you now.
| | 00:16 | This is from a Campaign
Monitor article in their blog.
| | 00:20 | Here is the code, and the exercise
file also includes the URL to this post.
| | 00:26 | The solution to add video in your HTML
emails is to use the HTML5 video tag.
| | 00:33 | Specifically, in the video tag, we
specify width and height and we specify what
| | 00:38 | is the fallback image if the video
cannot display in the email software.
| | 00:44 | In addition, we set the source for our
video file, the type of our video file,
| | 00:50 | and we set a link around an
image, which is our fallback image.
| | 00:54 | This approach will allow you to
include video, whether or not the email
| | 00:58 | software can display video.
| | 01:01 | In addition, you may find that if you
use FeedBurner and you include video in
| | 01:06 | your blog posts, people who subscribe
to your FeedBurner account and use Apple
| | 01:11 | Mail and use their iPhone will be
able to see your video and click on your
| | 01:16 | video and play it within their email.
| | 01:19 | While playing a video in your email is
impossible for most people who read your
| | 01:23 | emails, there are ways to
include video with your content.
| | 01:26 | This method is great because it
includes a fallback image that can represent
| | 01:31 | your video at the same size and width,
and readers simply have to click the
| | 01:35 | image to actually see the video.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Thanks for watching this course.
| | 00:02 | Hopefully this course has helped you learn
more about coding and designing HTML email.
| | 00:07 | To continue your training in the design
and coding of HTML emails, here are a
| | 00:12 | few sites that I find useful.
| | 00:15 | MailChimp has an excellent resources
page, as well as a blog that's worth
| | 00:19 | reading and keeping up with.
| | 00:21 | In addition, Campaign Monitor also has
an excellent resources page, and their
| | 00:26 | blog also covers topics, as we've shown
in the course here, that address common
| | 00:32 | issues people have as they use and create email.
| | 00:36 | If you're interested to learn more
about editorial calendars, this Wikipedia
| | 00:40 | entry has a good description, as well
as links at the bottom to a number of
| | 00:48 | articles on the topic,
| | 00:50 | if you want to learn more about how to
organize content so that you can publish
| | 00:55 | it in your email newsletter, Facebook,
Twitter, and all these other places.
| | 00:59 | The last resource I would mention is
an article that I published starting in
| | 01:04 | 2003 or 2004 when I couldn't find
information about how to design and code
| | 01:09 | HTML email newsletters.
| | 01:12 | My focus is to be vendor-neutral
and to link and describe articles and
| | 01:17 | information that I find every year or
so that cover topics about email design
| | 01:22 | and email coding very well.
| | 01:25 | There are many, many, many other web
sites that discuss email marketing online,
| | 01:30 | and I encourage you to use Google. Good luck, and
| | 01:33 | thank you again for your time.
| | Collapse this transcript |
|
|
