28 tips for designing effective html emails.pdf

8/10/2019 28 Tips for Designing Effective HTML Emails.pdf

1/18

Searc

Ads by surf and keep

biZvPXdzYXImZD0mdD0mYT05MTAwJnM9MTAwNSZ3PXd3d y5kdGVsZXBhdGh5LmNvbSZvb3U9aHR0cDovL29vdS5tYW53YWxraW5zdHJhaWdodC5jb20vb3B0X291dC8zJmI9YmQyJnJkPSZyaT0=)

pssst...

SIGN UP AND GET FIRSTOUR FRESH POST

your email

ARCH IVES /BLOG/ARCH IVES

W RITE FOR US /BLOG/W RITE

ABO UT THE BLOG /BLOG/AB

OUR FAVORITE ARTICLES

(http://www.dtelepathy.co/blog/filam ent/the-tyler-durden-philosophy-

The Tyler DuPhilosophy oProduct Desi(http://www/blog/filame/the-tyler-duphilosophy-

of-product-de

Join our team and create some of the best user experiences on the web!

6FLARES (https://twitter.com /intent/tweet?url=http://www.dtelepathy.com /blog/design

28-tips-for-designing-effective-html-emails&via=dtelepathy&text=28 Tips for Designing Effective

TM L Emails)39 (https://www.facebook.com /sharer/sharer.php?u=http://www.dtelepathy.com

blog/design/28-tips-for-designing-effective-html-emails)17 (https://www.linkedin.comcws/share?url=http://www.dtelepathy.com /blog/design/28-tips-for-designing-effective-

tml-emails)12 (https://plus.google.com /share?url=http://www.dtelepathy.com /blog/design

28-tips-for-designing-effective-html-emails)8 (http://filam ent.io/flare?utm_source=flare_lite&

tm_medium =deployment&utm_campaign=filament&utm_content=www.dtelepathy.com

blog/design/28-tips-for-designing-effective-html-emails)076FLARES

eve created a fair number of emails in our time, here at dt. After countless product updates,

ewsletters, special offer announcements and multiple other newsworthy events, weve picked up

ots of tidbits along the way that help us ensure were getting the best possible response from our

mail efforts and todays your lucky day, because were going to share them!

ep, all of them.

LL (H TTP://W W W .DTELEPATHY.CO M /BLO G) DESIGN (H TTP://W W W .DTELEPATHY.CO M /BLO G/CATEGO RY/DESIGN )

Ads by surf and keep

biZvPXdzYXImZD0mdD0mYT05MTAwJnM9MTAwNSZ3PXd3dy5kdGVsZXBhdGh5LmNvbSZvb3U9aHR0cDovL29vdS5tYW53YWxraW5zdHJhaWdodC5jb20vb3B0X291dC8zJmI9YmQyJnJkPSZyaT0=)

ps for Designing Effective HTML Emails http://www.dtelepathy.com/blog/design/28-tips-for-designing-effe

8 17/12/20


2/18

/blog/inspiration/secret-ingredients-productive-offic )

/blog/inspira/secret-ingredients-productive-o(http://www.dtelepathy.co

/blog/business/evolution-

lean-startup-interview-eric-rie)

Eric Ries onBuilding a NeBreed of Bus(http://www/blog/busine/evolution-

lean-startupinterview-eric-ries)

(http://www.dtelepathy.co/blog/design/interview-jeff-gothelflean-ux)

Dialogue witGothelf on LeUX(http://www/blog/design/interview-jeff-gothelf-lean-ux)

(http://www.dtelepathy.co/blog/philosophy/how-bauhaus-design-helping-build-better-we )

How BauhauDesign Is HeTo Build a BeW eb(http://www/blog/philos/how-bauhaudesign-helpinbuild-better-

(http://www.dtelepathy.co/blog/resources

/the-ideal-bookshelf-for-designer)

The IdeaBookshelf forDesigners(http://www/blog/resour

/the-ideal-bookshelf-for-designers

(http://www.dtelepathy.co/blog/design/50-photoshop-tricks)

50 PhotoshopTricks for aFast-Paced WEnvironment(http://www/blog/design/50-photoshotricks)

(http://www.dtelepathy.co/blog/filam ent/destiny-a-product-design-teardow n-of-the-biggest-video-game-in-history)

Hooked OnDestiny: Pr

design teardothe biggest vigam e in histo(http://www/blog/filame/destiny-a-product-deteardown-ofbiggest-videogame-in-hist

Images & content

Production & finesse

ead on for instant email design enlightenment!

ust like with web pages, the layout of an HTM L email is critical in determining where your readers

ocus is directed. However, given the strict constraints of the email landscape, an even greater

mphasis should be placed on how all the elements of your message fit together.

. Keep everything w ithin 600px w idf there were just one email design guideline we could give you, it would be this one. Forcing your

ubscribers to scroll from side-to-side is the kiss of death for an emails response rate. W hy?umerous eye-tracking studies (http://books.google.com/books?hl=en&lr=&id=EeQhHqjgQosC&

i=fnd&pg=PR6&dq=nielsen+eye+tracking+study+participants&ots=kqVtCB85c0&

ig=DbzDfdmtH2L0rpSQIFHEM bPPBGY#v=onepage&

=nielsen%20eye%20tracking%20study%20participants&f=false) have discerned that the average

eb users reading habits skew more towards scanning (more on this shortly) rather than

ord-for-word reading. This means that stuff on the left gets more attention than stuff on the right

nd stuff that doesnt appear at all might as well not even exist.

. Keep Your Calls-to-Action High

ince the m ajority of your subscribers likely only see the very top portion of their email messages

hus making snap judgements about whether the content is worthy of their time, youve got precious

ittle time to elicit a response. If your message passes muster, make sure to give your readers the

pportunity to act immediately.

. Tell us a story

he most effective emails weave a compelling and cohesive story (http://unbounce.com /email-arketing/the-6-point-guide-to-an-irresistible-email-teaser-campaign/) between the subject line,

he header and the content. Each of them should dovetail with the other, and provide just a little

ore info than the previous item. Check out this amazingly creative em ailhttps://email.brooksbrothers.com /pub/sf

FormLink?_ri_=X0Gzc2X%3DW QpglLjHJlTQGjoldAkScvjS9yyEGzfCIAnjNTKzfiW Tp7EFaj9R

ei_=EijEetq7vsFC9NK7pj93bBAOrKhEGM Y) from Brooks Brothers that perfectly illustrates a

ight interaction between the headline, the hero image and the content, with the result being a truly

emorable m essage.

. Use HTM L text/font

nfortunately, the wrathful email gods have decreed that web-em beddable fonts shall not set foot in

our recipents inboxes for the foreseeable future. So stick with the basics Arial, Verdana, Georgia,nd all the other usual suspects.

LL (H TTP://W W W .DTELEPATHY.CO M /BLOG ) DESIGN (HTTP://W W W .DTELEPATHY.COM /BLOG /CATEGO RY/DESIGN )


8 17/12/20


3/18

(http://cta-service-cms2.hubspo

/cs/c/?&cta_guid=f659da06-

d59c-48f8-b132-94cf1e24ec28&

placem ent_guid=3e762311-127d

449b-b8fa-167def8cb32d&

portal_id=376323&

redirect_url=M NIYoxXeJ1bm 3n

/M YzxRM bDlO26hijtPdV4bIB

/SiM ttnc1M 3xAePW rDacusICiv=TaJgGUslM tY%3D&hsutk=

canon=http%3A%2F

%2Fwww.dtelepathy.com%2Fb

tips-for-designing-effective-

html-emails&

__hstc=95604995.8edf9171e60d

__hssc=95604995.1.1418810786

__hsfp=4163143201)

. Plan for no im age

he vast majority of email clients block images in messages unless the user opts to see them that

eans your beautiful im ages w ill never get seen unless the rest of the content (i.e. the

TM L text) is descriptive enough to persuade recipients to allow im ages from you to be

how n. Headlines and body copy play crucial roles in this decision, so avoid em bedding critical

ontent in images, or at least back them up with alt-tags which display even with images turned off.

. Clear, large CTA

esign isnt art everything we create is intended to elicit action on the part of the user. To this end,

rom inent calls to action are critical for virtually every kind of email. M ake sure they stand out,ake sure theyre powerful, and make them look clickable. Everything about your CTAs should m ake

eople want to click on them to do something, see som ething, make som ething happen. As a sideote, larger CTAs may be more than a cosmetic consideration, now that mobile email consumption

s on track to surpass that of desktop use (http://www.campaignmonitor.com /blog/post3726/m obile-email-set-to-surpass-desktop-and-webm ail-client-usage-by-july/) nows a great

ime to m ake sure those buttons are big enough for touchscreen use.

. Repeat your CTA

ont force your subscribers to scroll all the way to the top of your email just to take the action

ouve spent the last 600 pixels trying to persuade them to. A brief repeat of the main call-to-action

t the end of your email can be super-effective at getting that elusive click.

. M ake it clear w hos sending the m essag

ost people are a little suspicious of strangers who dont clearly identify themselves, and the same

oes for email make sure its clear right from the get-go who exactly is talking to your email



8 17/12/20


4/18

ubscriber. M ake sure your logo is prom inently displayed at the top of the email, and even better if

our email ties in with your overall brand.

. Quick Getaw ay Treat your em ail like a hom epag

iven how limited a window of time/space you have to persuade subscribers that your email isorthy of their time and attention, your goal should be to get them away from the email as soon as

ossible. M ake sure to review your email design, and remove anything that keeps them lingering.

verly com plex layouts, long copy paragraphs and superfluous design elements should almost always

et the axe in favor of clean, simple m essages that get straight to the point.

0. No m ore than 3 colum ns m ax

iven that you have a max of 600 pixels in width to work within, creating a layout with more than 2

olumns limits what youre able to create thats still visually impactful. Do yourself a favor and keeptto no more than 2-3 content areas laying side-by-side.

1. Im ages on the left, text on the righ

ssuming you followed our advice about the number of colum ns above, your next question may be

ow to arrange said columns. Studies have shown (http://usableworld.com.au/2009/03/16/you-

ook-where-they-look/) that readers eyes are attracted m ore strongly to striking imagery over text ven if the text is important. W ith this in mind, put the image on the left, so its the first thing your

eaders see once theyve satisfied their visual curiosity, they can continue reading your oh-so-mportant headline.

2. F is for Fast Rem em ber the F Reading Pattern

ou can thank W eb usability guru Jakob Nielsen for this gem. Nielsen tracked 1.5 m illion eye

ovements (http://books.google.com/books?hl=en&lr=&id=EeQhHqjgQosC&oi=fnd&pg=PR6&

q=nielsen+eye+tracking+study+participants&ots=kqVtCB85c0&ig=DbzDfdmtH2L0rpSQIFHEM bPPBGY#v=onepage&

=nielsen%20eye%20tracking%20study%20participants&f=false) of 300 W eb users, and found an

stonishing thing: they dont read!

ell, not everything, at least. Nielsens study found that W eb users skip over content that appears

nimportant, resulting in an F-shaped reading pattern. Relevant words and images on the left side of

he screen tended to get more attention than things on the right. So what conclusions can we draw

rom this?

ead with most important/relevant content

tart with keywords in subheads, and use bolded words & type treatments on the far left to break up

he content



8 17/12/20


5/18

ts one thing to get your emails layout tuned just right, but the actual content that fills those spots is

qually, if not more important. Set yourself up for success in creating an engaging m essage.

3. Stay on target keep the m essage focused

hink about when you send a colleague an email how many topics do you typically cover in oneessage? If you answered m ore than 3, you should probably rethink your (ab)use of the medium

mails are focused m essaging channels meaning that the most effective content is limited in scope.

rying to cram too many different topics into one message results in a diluted response. Limit youressage to no more than 3 different topics to concentrate your subscribers responses. Remember,

ou can always send a separate email.

4. Beauty is in the bandw idth of the beholde

ts tough enough that your email likely appears to subscribers sans-images at first the last thing you

ant is to successfully persuade them to trust you by opting to show your beautiful imagesonly to

it there waiting for your gargantuan hi-res photos to download.

ake sure you optimize your images for output but dont downgrade them so m uch that the

om pression introduces artifacts. As broadband penetration grows around the world, this is

ecoming less of an issue, but for now, exercise a little restraint with the file size.

5. Dont use background im age

ust how sweet does that lovely CSS3-shadowed type look when laid against that awesom e wood

exture you just yanked from iStockphoto? Hate to break it to you, but its actually pretty un-sweet,

iven that background images are stripped out of many of the major email clients. Avoid setting type

gainst gradients, photos, patterns, or anything else that would require an image file to render.

emember: solid-color backgrounds only.

6. The m agic of anim ation

id you know that despite the many limitations of email you can embed animations in your emails?ait, wait, close down Flash, and archive that Javascript snippet. If you want to do this, youll need

o em brace that favorite medium of meme-fiends, the animated GIF. You could be forgiven foraising a quizzical eyebrow the use of animated GIFs is, after all, pretty rare given the

ime-intensive nature of creating them frame-by-frame, and how easy it is for their file size to

alloon with even simple effects.

ut they say that restrictions foster creativity (http://www.dtelepathy.com/blog/articles/why-web-

esigners-should-code-limitations-open-doors), and the few exam ples that are around literally grab

our attention with their uniqueness:

The m ovie Twilight used an animated GIF to em bed a video trailer(http://stylecampaign.cmail5.com/T/ViewEmail/y/D8503D71961F98A2

/1533BB6B4506A62CC67FD2F38AC4859C) in their email

CampaignM onitors genius animated header (http://campaignmonitor.createsend2.com

/t/ViewEm ail/y/4533F2EF262E5D2C/4B40B5A80823E5CC44D0DD5392A9C75A) isstunningly simple, and yet effectively drives home its point

This awesom e example from Harry & David Chocolatiers, literally drags readers attention

(http://stylecampaign.com/blog/blogm ails/animation2010/bunny.htm) down through the

message



8 17/12/20


6/18

7. M ake your buttons button-y

s with any of your call-to-actions, make sure your buttons have weight and presence above all

ther elements in the message especially since you dont even have hover or down states to rely on

nthis context.

Image credit The Bridal Photographer (http://www.campaignmonitor.com/gallery/entry/3687/the-bridal-

photographer)

Image credit St. Theresa Catholic School (http://www.campaignmonitor.com/gallery/entry/3683/st.-

theresa-catholic-school)

8. Paint a pictur

se large, stunning photographs and imagery to visually convey your main point in the message his is especially important for retail em ails, since image quality have adirect impact on your

onversion potential (http://conversionxl.com /how-images-can-boost-your-conversion-rate/).

his makes a lot of sense when you think about it. W hile shopping online, the only things a



8 17/12/20


7/18

ustom er has to go on before clicking that chunky orange Buy button are the images and words on

he page. They cant touch the product or inspect it from any angle. Human beings tend to be tactile

reatures, so the better your images, the closer youre getting your customers to a real experience

ith the product. Tons of examples of retailers using top-notch product photography are popping up

ll over the W eb these days, and a lot of these techniques are finding their way into the emails:

TurningArt (http://TurningArt.com)

Fab.com (http://fab.com )

Park & Bond (http://parkandbond.com)

JackThreads (http://jackthreads.com )

9. Look them in the ey

sing awesom e images is great, but using awesom e images of people is even better the numbers

rove it (http://www.getelastic.com /people-in-photos/).

0. M ake it quick

eep your copy sections short preferably 3 lines or less. Remember, theres a whole landing page

head of your recipients that can take on the whole burden of fully explaining your message, so you

nly need to tell them enough to decide to click through in the email.

n addition to the design tips above, knowing som e of the challenges and pitfalls of their production

an save you a lot of headaches down the road.

1. Test it on-the-go

s CampaignM onitor compellingly explains, as of this very month, your emails are now more likely

o be viewed on a smartphone or mobile device (http://www.campaignm onitor.com/blog/post

3726/m obile-email-set-to-surpass-desktop-and-webm ail-client-usage-by-july/), than on a desktop

so youd better be making sure they look their best under those circum stances. Grab a colleagueith an iPhone or iPad, and check it out!

2. Encourage engagem ent on other platform

ets face it, no m atter how awesom ely designed your email is, its just not going to resonate with

ome folks. So give them a soft out: add links or icons for them to follow you and/or subscribe to

our other main communication methods. Let your audience choose how they want to hear from

ou.

3. (Dont) keep em separated

ake sure the overall look and feel of your email ties in with the aesthetics of the page youre driving

hem to. Give your subscribers overt visual cues that theyve arrived at the right place things like

utton styles, typography and color scheme all factor into this.

4. A glim pse of w hats to com

anner blindness is everywhere and its the fault of marketers everywhere. Over the last 12 years of

nline m arketing, W eb users have learned to tune out the blinking, flashing, swooping and fading ad

anners of yesteryear, instead honing in on areas of interactivity on the page. Take advantage of this

y changing the perception of your images by presenting them as the gateways to interactive

lements in the email like, for exam ple, a content slider, or a video.

e tried this approach in a previous banner ad campaign, by creating an ad that resembled a contentlider check it out:



8 17/12/20


8/18

anner ads typically convert at around 0.15% this one converted at nearly 10 times that. Other

vidence lies in heatmapping studies weve conducted on the hom epage for SlideDeck.com

http://slidedeck.com) each time, we see large hotspots over anything resembling an interaction

utton, even if theyre embedded within an image. Use this knowledge for good, not evil!

5. Step right this w ay

rrows are a fundamental part of all UX design, as theyre used to explicitly direct the users attention

owards important elements or actions in fact, we use them so m uch that we even m ade our own

ont to create arrows more efficiently (http://arrrows.com

?&km i=N6vpLkwIwv5j8PercjBipEQctJI%3D). W ithin the context of email design, you can userrows help lead your recipients by the nose to your most important info.

6. Large typography

ften with email, it can be difficult to find high-quality photos that convey your messageppropriately, or you may find yourself crunched for time, and unable to stage a proper photoshoot.

n cases like these, consider leading with an interesting and engaging typographic arrangem ent. Of

ourse, youll most likely need to embed it within an image, thanks to the limited CSS capabilities inTM L emails, but its still possible to well-converting HTM L emails even without dazzling photos.

7. W atch your border

eb designers love their modules, sidebars and callout sections, and with good reason they help

istinguish important or related pieces of content to emphasize their points. Often, these sections are

reated with types of borders to further separate them from the main body of the layout, however in

mail designs, this can require the use of excessive image slices, which add weight and com plexity to



8 17/12/20


9/18

http://digital-telepathy.hs-sites.com /how-to-get-hired-in-ux-esign?__hstc=95604995.8edf9171e60d4df88e13638c2aee9fdd.1418810786916.1418810786916.1418810786916.1&_hssc=95604995.1.1418810786917&__hsfp=4163143201)

EAVE A RESPONSE

your name [email protected] www.website.com

enter your comment here

Subscribe to future comment

he produced em ail. Do your developer a favor m inimize the use of tricky border styles, and drop

hadows, which only serve to take up the limited width you have available for the layout.

8. Dont forget the View in Brow ser link

ts simple if all else fails, let your readers view the em ail in their web browser, where therustrating quirks of email clients no longer apply.

hat do you think, are there any im portant em ail design tips w eve m issed here? Let u

now in the com m ents

BOUT THE AUTHOR: JASON AMUNWA (HTTP://WWW.DTELEPATHY.COM/BLOG/AUTHOR/JASON)

ttp://www.dtelepathy.com /blog/author/jason)

M arketing strategist, designer, W ordPress-er, fascinated singulatarian, sci-fi lover &

improv com edian, with a dash of UK panache. Thinker/doer. Friend to startups.Enemy of bananas. I'm also the Director of Products at digital-telepathy. Join/findme on Google+ (https://plus.google.com/115015338465532800705?rel=author) and Twitter(http://twitter.com/king_jafy).



8 17/12/20


10/18

RESPONSES

SEP 10 2012

ttp://www.li

OCT 17 2012

AR 05 2013

AR 19 2013

ttp://www.e

AY 16 2013

APR 18 2014

JUN 22 2014

ttp://rheadaw



18 17/12/20


11/18

Shareswered by

BOUT THE BLOGhe goal of this blog is sim ple: prom ote theetterm ent of the web through design and craft.e focus on betterm ent because we've seen firstand that innovation and im provem ent canave a powerful and lasting effect. Read more.../blog/about-the-blog)

JOIN FILAMENTJoin a growing num ber of innovators who arecollaborating with us on new products thatm ake the web a better place.

)

THE BLOG NEWSLETTERSubscribe to our newsletter and be the firsthear when our latest blog posts and eBooksfreebies get published!

enter your email

T HOM E (HTTP://W W W .DTELEPATHY.CO M /) FILAM ENT (HTTP://FILAM ENT.IO/) 2014 ALL RIGH TS RESE



18 17/12/20


12/18

ttp://filament.io/flare?utm_source=flare_mobile&utm_m edium =deploym ent&utm_campaign=filament)

Shares



18 17/12/20


13/18



18 17/12/20


14/18

Twitter



18 17/12/20


15/18

ttps://twitter.com /intent/tweet?url=http://www.dtelepathy.com /blog/design/28-tips-for-designing-effective-html-emails&via=dtelepathy&text=28 Tips for Designing Effective ails)Facebook



18 17/12/20


16/18

ttps://www.facebook.com /sharer/sharer.php?u=http://www.dtelepathy.com /blog/design/28-tips-for-designing-effective-html-emails)LinkedIn



18 17/12/20


17/18

ttps://www.linkedin.com /cws/share?url=http://www.dtelepathy.com /blog/design/28-tips-for-designing-effective-html-emails)oogle+



18 17/12/20


18/18

ttps://plus.google.com /share?url=http://www.dtelepathy.com /blog/design/28-tips-for-designing-effective-htm l-emails)

ttps://twitter.com /intent/tweet?url=&text=&hashtags=&related=ivyapp%3AGet the latest news and updates on,filament_io%3AApps updates and tips for m aking your visitors happier) (https://www.facebook.com /sharer/sharer.php?u=) (m ailto:?subject=&body=xt %>) (http://filament.io/r.php?i=ivy&utm _source=ivy&utm _medium =deploym ent&utm _cam paign=filament&utm _content=)ared via Ivy Get yours now free (http://filament.io/r.php?i=ivy&utm _source=ivy&utm _m edium =deploym ent&utm _cam paign=filament&utm _content=confirm ation)



28 tips for designing effective html emails.pdf

Documents