Create Stunning HTML Email That Just Works 1st Edition Mathew Patterson pdf download
Create Stunning HTML Email That Just Works 1st Edition Mathew Patterson pdf download
https://ebookname.com/product/create-stunning-html-email-that-
just-works-1st-edition-mathew-patterson/
https://ebookname.com/product/sustaining-change-leadership-that-
works-1st-edition-malcolm-higgs/
https://ebookname.com/product/the-ultimate-marketing-toolkit-ads-
that-attract-customers-brochures-that-create-buzz-websites-that-
wow-2nd-edition-paula-peters/
https://ebookname.com/product/how-to-write-a-cv-that-works-3rd-
edition-paul-mcgee/
https://ebookname.com/product/losing-bin-laden-how-bill-clinton-
s-failures-unleashed-global-terror-4th-edition-richard-miniter/
The English Mummers and Their Plays Traces of Ancient
Mystery Alan Brody
https://ebookname.com/product/the-english-mummers-and-their-
plays-traces-of-ancient-mystery-alan-brody/
https://ebookname.com/product/the-dog-shogun-the-personality-and-
policies-of-tokugawa-tsunayoshi-beatrice-m-bodart-bailey/
https://ebookname.com/product/challenges-in-central-banking-the-
current-institutional-environment-and-forces-affecting-monetary-
policy-1st-edition-pierre-l-siklos/
https://ebookname.com/product/music-therapy-in-the-treatment-of-
adults-with-mental-disorders-theoretical-bases-and-clinical-
interventions-1st-edition-robert-unkefer/
https://ebookname.com/product/becoming-a-midwife-in-the-21st-
century-1st-edition-ian-peate/
The Chemistry of the Morita Baylis Hillman Reaction 1st
Edition Min Shi
https://ebookname.com/product/the-chemistry-of-the-morita-baylis-
hillman-reaction-1st-edition-min-shi/
iv
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted
in any form or by any means without the prior written permission of the publisher, except in the case
of brief quotations included in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein.
However, the information contained in this book is sold without warranty, either express or implied.
Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors, will be held liable for any
damages caused either directly or indirectly by the instructions contained in this book, or by the software
or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only
in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of
the trademark.
ISBN 978-0-9805768-6-3
Printed and bound in Canada
v
Active on the Web since GeoCities was cutting edge and the horizontal rule was king,
Mathew Patterson has worked as a web designer for companies that include the Australian
Stock Exchange and Priceline Europe, in addition to freelancing and contracting in Australia
and the UK.
Currently Mathew looks after all the customers for Campaign Monitor, the popular email
newsletter web application, where he’s involved in writing, community management, and
intense table tennis sessions. Since joining Campaign Monitor, Mathew has spoken at con
ferences in Australia and the US about HTML email and the role of web designers, and once
famously had a public disagreement with Jeffrey Zeldman about whether email should actually
be designed.
Based just outside of Sydney with his wife and son, Mathew has reviewed more email
newsletters than you could possibly imagine, including a surprising number that feature
alpacas. Find out more (except about the alpacas) at http://mrpatto.com.
Louis Simoneau joined SitePoint in 2009, after traveling from his native Montréal to Calgary,
Taipei, and finally Melbourne. He now gets to spend his days learning about cool web tech
nologies, an activity that had previously been relegated to nights and weekends. He enjoys
hip-hop, spicy food, and all things geeky. His online home is http://louissimoneau.com, and
his latest project is http://isitgoingtobeok.com/.
As Chief Technical Officer for SitePoint, Kevin Yank keeps abreast of all that is new and
exciting in web technology. Best known for his book, Build Your Own Database Driven Web
Site Using PHP & MySQL, he also co-authored Simply JavaScript with Cameron Adams and
Everything You Know About CSS Is Wrong! with Rachel Andrew. In addition, Kevin hosts
the SitePoint Podcast and co-writes the SitePoint Tech Times, a free email newsletter that
goes out to over 240,000 subscribers worldwide.
Kevin lives in Melbourne, Australia and enjoys speaking at conferences, as well as visiting
friends and family in Canada. He’s also passionate about performing improvised comedy
theater with Impro Melbourne (http://www.impromelbourne.com.au/) and flying light aircraft.
Kevin’s personal blog is Yes, I’m Canadian (http://yesimcanadian.com/).
vi
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for Web
professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles,
and community forums.
Table of Contents
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
What’s in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xviii
Where to Find Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
The Book’s Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
The SitePoint Podcast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Building the Modern Henchman Newsletter . . . . . . . . . . . . . . . . . . . . . . . 96
Building the Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Adding the Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
How Low Will You Go? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Testing the Modern Henchman Layout . . . . . . . . . . . . . . . . . . . . . . 106
More Resources for Building Email Templates . . . . . . . . . . . . . . . . . . . . . 108
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Foreword
For a lot of designers, the job ends the moment the site launches. You’ve polished
the design, built the CMS, and the happy client’s check is in the mail. Next, please.
Launching a great website is one thing. But as a designer, you can also play a key
role in ensuring that website achieves the actual goals for which it was designed.
As well as leading to a more satisfied client, it can provide an additional revenue
stream for your business and help set you apart from your competition.
Whether your client’s goal is to sell widgets, drive membership, or build a passionate
audience, email marketing (done correctly) is one of the most effective ways to
achieve it. It’s that “done correctly” bit that is often overlooked, and it makes all
the difference in the world.
When we launched Campaign Monitor in 2004, email marketing truly was a dark
art. Tips on designing emails, getting them delivered, and offering the service to
your clients were nonexistent. Since that time, we’ve spent countless hours research
ing the best way for designers to plan, design, and build email marketing programs
that achieve the best results possible for their clients.
For the first time ever, all of this research and experience has been collated, updated,
and refined into a single resource. Not only will you learn how to offer results-
driven email marketing to your clients, you’ll also find practical tips on selling this
service to your clients and creating a passive income stream for your design business.
And who isn’t interested in doing that?
■ HTML email is evil. It should never be used, and I feel a little ill for even hearing
the words spoken.
■ HTML email doesn’t really work; the designs never look like they’re meant to.
In the business world, on the other hand, people neither know about nor care about
“HTML email”; they just want a nice-looking email newsletter that drives people
to open it and read, click, or buy.
This book is for web designers who are looking for a way to design and build effective
HTML emails for their clients or bosses. In the following chapters, we’ll cover how
to plan, design, and build HTML emails that produce real results.
Why should you trust me to tell you about it? Well, I’m a web designer too, and
these days I’m part of the Campaign Monitor team, where we spend all day research
ing and reading some terrific email newsletters. I can tell you without a doubt that
it’s possible to produce truly excellent emails that work whether read using Gmail
or Pine (a text-based email client that had its heyday in the early nineties).
My goal is for you to reach the end of this book with all the skills and information
you need to be able to confidently offer your clients email newsletter design that
they’ll be happy to pay for. Let’s get started!
xviii
This book comprises the following six chapters. Read them in order from beginning
to end to gain a complete understanding of the subject, or skip around if you only
need a refresher on a particular topic.
when designing HTML emails, and this chapter is your guidebook to that exotic
new land.
1
http://www.sitepoint.com/forums/
2
http://www.sitepoint.com/books/htmlemail1/code.php
3
http://www.sitepoint.com/books/htmlemail1/errata.php
xxi
techniques for all aspects of web development. Sign up to one or more SitePoint
newsletters at http://www.sitepoint.com/newsletter/.
Your Feedback
If you’re unable to find an answer through the forums, or if you wish to contact us
for any other reason, the best place to write is [email protected]. We have a
well-staffed email support system set up to track your inquiries, and if our support
team members are unable to answer your question, they’ll send it straight to us.
Suggestions for improvements, as well as notices of any mistakes you may find, are
especially welcome.
Acknowledgments
Making this book possible were Jarrod Taylor (the ultimate modern henchman),
Dave Greiner, and Mark Wyner for their email research, and Ros Hodgekiss for her
design gallery work. I gratefully thank them all. Thanks also to the Campaign
Monitor support team who bore the load for me, and to my wonderful wife and son
who now know far more about HTML email than they ever wanted.
xxii
Code Samples
Code in this book will be displayed using a fixed-width font, like so:
If the code is to be found in the book’s code archive, the name of the file will appear
at the top of the program listing, like this:
example.css
.footer {
background-color: #CCC;
border-top: 1px solid #333;
}
If only part of the file is displayed, this is indicated by the word excerpt:
example.css (excerpt)
If additional code is to be inserted into an existing example, the new code will be
displayed in bold:
function animate() {
new_variable = "Hello";
}
Chapter
1
Why Email?
Email has been around forever, it seems. In this age of shiny web applications and
mobile computing, is there still a role for email? If there is, how and why should
web designers be a part of that?
The same study showed that 89% of those same internet users are sending or reading
email, the highest percentage of the study.
Whether at work or home, almost everyone who’s on the Internet at all is using
email, and there are no signs of that number declining. Certainly some activities—like
photo sharing and status updates—that used to occur via email are now separated
1
http://www.pewinternet.org/Trend-Data/Online-Activites-Total.aspx
2 Create Stunning HTML Email That Just Works!
out into other applications, but email still remains the one online communication
tool that everyone understands.
Where websites rely on you visiting them, email comes right to your inbox, and
because of this it feels somehow more important and personal. Businesses every
where know this, and so a relatively small but outperforming email marketing in
dustry has grown. Wait, don’t panic! Email marketing is a lot more than mail-order
brides and genuine replica watches.
In 2010, with the world still recovering from a global financial scare, email is a low-
cost, high-return medium that appeals to businesses. For web designers, there’s the
opportunity to add email design to their services and give clients another way to
reach their goals.
Jeanne S. Jennings, in her email marketing bible, The Email Marketing Kit (Mel
bourne: SitePoint, 2007), provides one of the best summaries on the benefits of
email marketing. I’ve paraphrased it here:
■ Email is cost-effective. While there are costs involved in email marketing, such
as copywriting and design, your production and delivery costs are significantly
cheaper than that of direct mail. For the same amount, you can send out around
a hundred emails for every direct mail letter.
2
http://directmag.com/magilla/1020-e-mail-roi-still-slipping/
Why Email? 3
■ Email builds relationships. While email may not be the only method that helps
connect you with your audience, it’s the least intrusive—enabling the recipient
to respond at their leisure. A well thought-out email plan can create and
strengthen customer loyalty.
■ Email is active. Email marketing actively sends your message to interested people,
rather than relying on them to find you each time.
■ Email provides timely results. The time between distribution and delivery of an
email marketing campaign can be measured in minutes rather than days. This
allows you to choose the time you deliver your messages with more precision,
and also means results will become evident quickly after you start your campaign.
■ Email is quick to produce. Once you’re set up to run email campaigns, you can
easily launch a major marketing initiative to all your customers in a few hours.
There’s no other direct marketing source that could be implemented in this sort
of time period.
■ Email accommodates hyperlinks. With just a click of the mouse, a customer can
go from reading your marketing message to purchasing at your online checkout.
This speedy one-step process is what marketing dreams are made of.
■ Email plays well with others. Email works well when part of an integrated direct
marketing campaign. While other methods can come across as disruptive or
pushy, email is able to prepare your customers for a sales call—or as a follow-
up to a face-to-face sale—without getting in a customer’s face.
4 Create Stunning HTML Email That Just Works!
Email Newsletters
As a basis for an ongoing business relationship, there’s nothing better than an email
newsletter providing reliable, regularly delivered, quality information on relevant
and interesting topics. By their very nature, newsletters are sent regularly. A company
will usually set a schedule to mail subscribers weekly, every two weeks, or monthly,
enabling the company to regularly promote its news and events in a timely way.
Catalog Emails
Catalog emails are the electronic newsletters of the online retailer. Where a service
organization might send an email newsletter, a company that sells products may
prefer mailing an electronic catalog to subscribers on a regular basis.
Depending on the retailer, the catalog can contain the same sections each time, or
each issue might vary from the last. In building a catalog email, you should agree
on a set number of items to include in each issue, as you would in an email news
letter. This will keep the preparation of the creative as straightforward as possible
each time, while keeping your client’s email budget on track. Bear in mind though
Why Email? 5
that laying out catalogs can be more finicky, time-consuming work than producing
a simple electronic newsletter.
Announcement Emails
Announcement emails are usually commissioned and produced on an ad hoc basis,
when the client has time-critical information to tell their subscribers. Perhaps your
client has a limited-time offer that they want to promote. They might have been
invited at the last minute to speak at a conference or industry event, and want to
encourage clients to attend. A host of possibilities can spark the need to send an
announcement email.
One-off announcement emails are usually short and contain just one call to action.
Often, there’ll be minimal lead time for the announcement, so there’s a need to turn
the job around quickly. If your client believes they’re likely to use announcement
emails often, you might offer to prepare a suitable template in advance; this will
reduce the time it will take to get their announcements out to subscribers.
Press Releases
Although they sound like announcements, press releases are more public relations
than sales. Companies from all industries prepare press releases around corporate
and governance developments, product or service launches and upgrades, community
contribution and involvement, and so on.
Your clients might produce media releases frequently, but they’re unlikely to write
them on a regular basis—every Monday, for example. In fact, time frames around
media release mailing tend to be tight at best, and unpredictable at worst. Again,
offering to prepare a media release email template for clients who have active public
relations strategies might save time and hassle when it comes to distributing the
release. This type is likely to differ from one used to make announcements.
from visitors who want to register their interest in an activity that the company’s
undertaking—there’s the potential for you to add value.
As well as helping your client plan an email sequence, you might design email
templates and create landing pages to support the sales or sign-up process. A
landing page is the first page of a site that a visitor sees after clicking through from
an email. Perhaps you’ll also set the messages to mail through an email
autoresponder, and test the sequences before they’re made live. Why not tie in
monitoring to help your client assess the success of each email? Although sales
process emails may seem cut and dried, you can see there’s a lot of scope for design
ers to show off their skills here.
Competition for web design work is immense, but right now there are few web
design firms and freelance designers willing to offer HTML email design as part of
their service. Many refuse to do it, or will leave their clients to work it out for
themselves. As noted designer Jeremy Keith of Clearleft told me, “I’ve never done
an HTML email in my life, and I don’t intend to do so.”
Since you have at least picked up this book, you are already well ahead of the
competition. As you work through the chapters you’ll see that it’s relatively easy
to produce emails that are far better than most of what’s being sent out right now.
Check out Chapter 6 in particular for the rundown on how to encourage your clients
to be really involved in effective email marketing and communication.
So, now that I’ve outlined why you should learn to design and build HTML emails,
it’s time to dirty our hands with the how. As with all design, the first step is to plan,
plan, and plan some more.
Chapter
2
Planning an Email Campaign
How hard can it be to design and build an HTML email, really? I mean, even my
mom can send emails (though she still has some problems with the caps lock key).
Sending emails may be easy, but running an email campaign that delivers the desired
results can be a lot more complicated. Using a simple planning process, we can
build a solid base from which to design, and save ourselves a lot of time and hassle.
In this chapter, we’ll go through the all-important planning phase of an email
campaign. Then, in Chapter 3, we’ll work from that plan to create our email’s design.
Planning Is Essential
As designers, we might consider the planning phase to be outside our scope and
handled by the client instead. Often a client will have the same opinion, relegating
a designer to the technical work and the pretty pictures. Although this is a valid
approach, it can lead to a beautifully designed but ineffectual email. That’s bad for
your client, and for your prospects of future work.
Exploring the Variety of Random
Documents with Different Content
THE FULL PROJECT GUTENBERG LICENSE
PLEASE READ THIS BEFORE YOU DISTRIBUTE OR USE THIS WORK
1.D. The copyright laws of the place where you are located also
govern what you can do with this work. Copyright laws in most
countries are in a constant state of change. If you are outside the
United States, check the laws of your country in addition to the
terms of this agreement before downloading, copying, displaying,
performing, distributing or creating derivative works based on this
work or any other Project Gutenberg™ work. The Foundation makes
no representations concerning the copyright status of any work in
any country other than the United States.
1.E.6. You may convert to and distribute this work in any binary,
compressed, marked up, nonproprietary or proprietary form,
including any word processing or hypertext form. However, if you
provide access to or distribute copies of a Project Gutenberg™ work
in a format other than “Plain Vanilla ASCII” or other format used in
the official version posted on the official Project Gutenberg™ website
(www.gutenberg.org), you must, at no additional cost, fee or
expense to the user, provide a copy, a means of exporting a copy, or
a means of obtaining a copy upon request, of the work in its original
“Plain Vanilla ASCII” or other form. Any alternate format must
include the full Project Gutenberg™ License as specified in
paragraph 1.E.1.
• You pay a royalty fee of 20% of the gross profits you derive
from the use of Project Gutenberg™ works calculated using the
method you already use to calculate your applicable taxes. The
fee is owed to the owner of the Project Gutenberg™ trademark,
but he has agreed to donate royalties under this paragraph to
the Project Gutenberg Literary Archive Foundation. Royalty
payments must be paid within 60 days following each date on
which you prepare (or are legally required to prepare) your
periodic tax returns. Royalty payments should be clearly marked
as such and sent to the Project Gutenberg Literary Archive
Foundation at the address specified in Section 4, “Information
about donations to the Project Gutenberg Literary Archive
Foundation.”
• You comply with all other terms of this agreement for free
distribution of Project Gutenberg™ works.
1.F.
1.F.4. Except for the limited right of replacement or refund set forth
in paragraph 1.F.3, this work is provided to you ‘AS-IS’, WITH NO
OTHER WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO WARRANTIES OF
MERCHANTABILITY OR FITNESS FOR ANY PURPOSE.
Please check the Project Gutenberg web pages for current donation
methods and addresses. Donations are accepted in a number of
other ways including checks, online payments and credit card
donations. To donate, please visit: www.gutenberg.org/donate.
Most people start at our website which has the main PG search
facility: www.gutenberg.org.
Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.
ebookname.com