Vous êtes sur la page 1sur 18

28 Tips for Designing Effective HTML Emails

A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

Ads by surf and keep


mVlbiZvPXdzYXImZD0mdD0mYT05MTAwJnM9MTAwNSZ3PXd3dy5kdGVsZXBhdGh5LmNvbSZvb3U9aHR0cDovL29vdS5tYW53YWxraW5zdHJhaWdodC5jb20vb3B0X291dC8zJmI9YmQyJnJkPSZyaT0=)

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

Search

Ads by surf and keep


mVlbiZvPXdzYXImZD0mdD0mYT05MTAwJnM9MTAwNSZ3PXd3dy5kdGVsZXBhdGh5LmNvbSZvb3U9aHR0cDovL29vdS5tYW53YWxraW5zdHJhaWdodC5jb20vb3B0X291dC8zJmI9YmQyJnJkPSZyaT0=)

pssst...

SIG N U P A N D G ET FIRST D IBS O


O U R FRESH PO STS

yourem ail

76FLARES (https://tw itter.com /intent/tw eet?url=http://w w w .dtelepathy.com /blog/design


/28-tips-for-designing-effective-htm l-em ails&via=dtelepathy&text=28 TipsforD esigning Effective
H TM L Em ails)39 (https://w w w .facebook.com /sharer/sharer.php?u=http://w w w .dtelepathy.com
/blog/design/28-tips-for-designing-effective-htm l-em ails)17 (https://w w w .linkedin.com
/cw s/share?url=http://w w w .dtelepathy.com /blog/design/28-tips-for-designing-effectivehtm l-em ails)12 (https://plus.google.com /share?url=http://w w w .dtelepathy.com /blog/design
/28-tips-for-designing-effective-htm l-em ails)8 (http://filam ent.io/flare?utm _source=flare_lite&
utm _m edium =deploym ent&utm _cam paign=filam ent&utm _content=w w w .dtelepathy.com
/blog/design/28-tips-for-designing-effective-htm l-em ails)076FLARES
W evecreated afairnum berofem ailsin ourtim e,hereatdt.Aftercountlessproductupdates,
new sletters,specialofferannouncem entsand m ultipleothernew sw orthy events,w evepicked up
lotsoftidbitsalong the w ay thathelp usensurew eregetting thebestpossibleresponsefrom our
em ailefforts and todaysyourlucky day,becausew eregoing to sharethem !
Yep,allofthem .
1 of 18

A RCH IV ES (/BLO G /A RCH IV ES)


W RITE FO R U S (/BLO G /W RITEA BO U T TH E BLO G (/BLO G /A BO U T-

OUR FAVORITEARTICLES

TheTylerDurden
Philosophy of
ProductDesign
ht
tp:
//www.
dtelep
(http://w w w .(
dt
el
epat
hy.com
/blog/filam ent
/blog/filam ent
/the-tyler-durden/the-tyler- philosophydurdenof-product-design)
philosophyfc17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

Im ages& content
Production & finesse
Read on forinstantem aildesign enlightenm ent!

Justlikew ith w eb pages,thelayoutofan H TM L em ailiscriticalin determ ining w hereyourreaders


focusisdirected.H ow ever,given thestrictconstraintsofthe em aillandscape,an even greater
em phasisshould beplaced on how alltheelem entsofyourm essagefittogether.

1.K eep everything w ithin 600px w ide


Iftherew erejustoneem aildesign guidelinew ecould giveyou,itw ould bethisone.Forcing your
subscribersto scrollfrom side-to-sideisthekissofdeath foran em ailsresponserate.W hy?
N um erouseye-tracking studies(http://books.google.com /books?hl=en&lr=&id=EeQ hH qjgQ osC&
oi=fnd&pg=PR6&dq=nielsen+eye+tracking+study+participants&ots=kqV tCB85c0&
sig=D bzD fdm tH 2L0rpSQ IFH EM bPPBG Y#v=onepage&
q=nielsen%20eye%20tracking%20study%20participants&f=false)havediscerned thattheaverage
W eb usersreading habitsskew m oretow ardsscanning (m oreon thisshortly)ratherthan
w ord-for-w ord reading.Thism eansthatstuffon theleftgetsm oreattention than stuffon theright
and stuffthatdoesntappearatallm ightasw ellnoteven exist.
2.K eep Your Calls-to-A ction H igh
Sincethem ajority ofyoursubscriberslikely only seethevery top portion oftheirem ailm essages
thusm aking snap judgem entsaboutw hetherthecontentisw orthy oftheirtim e,youvegotprecious
littletim eto elicita response.Ifyourm essagepassesm uster,m akesure to giveyourreadersthe
opportunity to actim m ediately.
3.Tellusa story
Them osteffectiveem ailsw eaveacom pelling and cohesivestory (http://unbounce.com /em ailm arketing/the-6-point-guide-to-an-irresistible-em ail-teaser-cam paign/)betw een thesubjectline,
theheaderand thecontent.Each ofthem should dovetailw ith theother,and providejustalittle
m oreinfo than the previousitem .Check outthisam azingly creativeem ail
(https://em ail.brooksbrothers.com /pub/sf
/Form Link?_ri_=X0G zc2X%3D W Q pglLjH JlTQ G joldAkScvjS9yyEG zfCIAnjN TKzfiW Tp7EFaj9RV
_ei_=EijEetq7vsFC9N K7pj93bBAO rKhEG M Y)from BrooksBrothersthatperfectly illustratesa
tightinteraction betw een theheadline,thehero im ageand thecontent,w ith theresultbeing atruly
m em orable m essage.
4.U se H TM L text/fonts
U nfortunately,thew rathfulem ailgodshavedecreed thatw eb-em beddable fontsshallnotsetfootin
yourrecipentsinboxesfortheforeseeablefuture.So stick w ith thebasics Arial,V erdana,G eorgia,
and alltheotherusualsuspects.
2 of 18

/bl
cRie
ns
spi
onration
/blog/inspiratEri
ionog/i
/seclre
Bui
ding
t- aNew
/secretingre
eddi
of
ent
Bus
s-iness
ingredients- Bre
produc
ht
tp:
//www.
tihy.
ve-c
offi
dtc
ee
le
)p
(ht
tp://w
w w .(
dt
el
epat
om
pr
oduc
tive/bl
og/business
/bl
og/bus
i
nes
s
office)
/evolution/evolution- lean-startuplean-startup-interviewinterview - eric-ries)
eric-ries)
DialoguewithJeff
Gothelfon Lean
UX
ht
tp:
//www.
dtelep
(http://w w w .(
dt
el
epat
hy.com
/bl
og/de
s
i
gn
/blog/design
/interview/interview - jeff-gothelfjeff-gothelf- lean-ux)
lean-ux)
H ow Bauhaus
Design IsH elping
ToBuildaBetter
ebepathy.com
(http://w w w .W
dtel
(http://www.dtelep
/blog/philosophy
/blog/philosophy
/how -bauhaus
- bauhaus/howdesigndesign-helpinghelpingbuild-better-web)
buildbetter-w eb)
TheIdeal
Bookshelffor
Designers
ht
tp:
//www.
dtelep
(http://w w w .(
dt
el
epat
hy.com
/blog/resourc/bl
esog/resources
/the-ideal/the-ideal- bookshelfbookshelf- for-designers)
for-designers)
50 Photoshop
Tricksfora
Fast-PacedW ork
ronm
ent
(http://w w w .Envi
dtelepat
hy.
com
/blog/design (http://www.dtelep
/blog/design
/50-photoshop/50-photoshoptricks)
tricks)
H ookedOn
Destiny:Product
design teardown of
he
bi
ggehy.
stvi
deo
(http://w w w .t
dt
el
epat
com
gam ein history
/blog/filam ent
(http://www.dtelep
/destiny/blog/filam ent
a-product- /destinydesigna-product-designteardow n- teardown-of-thebiggest-videoof-thegam e-in-history)
biggestvideogam e-inhistory)

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

5.Plan for no im ages


Thevastm ajority ofem ailclientsblock im agesin m essagesunlessthe useroptsto seethem that
m eansyour beautifulim agesw illnever getseen unlessthe restofthe content(i.e.the
H TM L text)isdescriptive enough to persuade recipientsto allow im agesfrom you to be
show n.H eadlinesand body copy play crucialrolesin thisdecision,so avoid em bedding critical
contentin im ages,oratleastback them up w ith alt-tagsw hich display even w ith im agesturned off.

(http://cta-service-cm s2.hubspot.com
/cs/c/?&cta_guid=f659da06d59c-48f8-b132-94cf1e24ec28&
placem ent_guid=3e762311-127d449b-b8fa-167def8cb32d&
portal_id=376323&
redirect_url=M N IYoxXeJ1bm 3n%2BISm
/M YzxRM bD lO 26hijtPdV 4bIBy1qO un
/SiM ttnc1M 3xAePW rD acusICD E7O d
iv=TaJgG U slM tY%3D &hsutk=&
canon=http%3A%2F
%2Fw w w .dtelepathy.com %2Fblog%2Fd
tips-for-designing-effectivehtm l-em ails&
__hstc=95604995.8edf9171e60d4df88e13
__hssc=95604995.1.1418810786917&
__hsfp=4163143201)

6.Clear,large CTA s
D esign isntart everything w ecreateisintended to elicitaction on thepartoftheuser.To thisend,
prom inentcallsto action arecriticalforvirtually every kind ofem ail.M akesure they stand out,
m akesuretheyre pow erful,and m akethem look clickable.Everything aboutyourCTAsshould m ake
peoplew antto click on them to do som ething,see som ething,m akesom ething happen.Asaside
note,largerCTAsm ay bem orethan acosm etic consideration,now thatm obile em ailconsum ption
ison track to surpassthatofdesktop use (http://w w w .cam paignm onitor.com /blog/post
/3726/m obile-em ail-set-to-surpass-desktop-and-w ebm ail-client-usage-by-july/) now sagreat
tim eto m akesurethosebuttonsarebig enough fortouchscreen use.
7.R epeatyour CTA
D ontforceyoursubscribersto scrollallthew ay to thetop ofyourem ailjustto take theaction
youvespentthe last600 pixelstrying to persuadethem to.A briefrepeatofthe m ain call-to-action
attheend ofyourem ailcan besuper-effectiveatgetting thatelusive click.
8.M ake itclear w hossending the m essage
M ostpeoplearealittle suspiciousofstrangersw ho dontclearly identify them selves,and the sam e
goesforem ail m akesureitsclearrightfrom theget-go w ho exactly istalking to yourem ail
3 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...

subs
cr
iber//W
.MWake
ureyourY.
logo
spr
nently di
played
the
he em ail,Y.
and
bet
erifO R Y/D ESIG N )
A
LL (H
TTP:
W .Ds
TELEPATH
CO Mi
/B
LOom
G) i
Ds
ESI
G N (Hat
TTP:
//Wtop
W Wof
.Dt
TELEPATH
C O Meven
/B LO G
/C t
ATEG
yourem ailtiesin w ith youroverallbrand.
9.Q uick G etaw ay Treatyour em aillike a hom epage
G iven how lim ited aw indow oftim e/space you haveto persuadesubscribersthatyourem ailis
w orthy oftheirtim eand attention,yourgoalshould be to getthem away from theem ailassoon as
possible.M ake sureto review yourem aildesign,and rem oveanything thatkeepsthem lingering.
O verly com plex layouts,long copy paragraphsand superfluousdesign elem entsshould alm ostalw ays
gettheaxein favorofclean,sim plem essagesthatgetstraightto thepoint.
10.N o m ore than 3 colum nsm ax
G iven thatyou haveam ax of600 pixelsin w idth to w ork w ithin,creating a layoutw ith m orethan 2
colum nslim itsw hatyoure ableto createthatsstillvisually im pactful.D o yourselfa favorand keep
itto no m orethan 2-3 contentareaslaying side-by-side.
11.Im ageson the left,texton the right
Assum ing you follow ed ouradviceaboutthenum berofcolum nsabove,yournextquestion m ay be
how to arrangesaid colum ns.Studieshaveshow n (http://usablew orld.com .au/2009/03/16/youlook-w here-they-look/)thatreaderseyesareattracted m ore strongly to striking im agery overtext
even ifthetextisim portant.W ith thisin m ind,puttheim age on theleft,so itsthefirstthing your
readerssee once theyvesatisfied theirvisualcuriosity,they can continue reading youroh-soim portantheadline.

12.F isfor Fast R em em ber the F R eading Pattern


You can thank W eb usability guru Jakob N ielsen forthisgem .N ielsen tracked 1.5 m illion eye
m ovem ents(http://books.google.com /books?hl=en&lr=&id=EeQ hH qjgQ osC&oi=fnd&pg=PR6&
dq=nielsen+eye+tracking+study+participants&ots=kqV tCB85c0&
sig=D bzD fdm tH 2L0rpSQ IFH EM bPPBG Y#v=onepage&
q=nielsen%20eye%20tracking%20study%20participants&f=false)of300 W eb users,and found an
astonishing thing:they dontread!
W ell,noteverything,atleast.N ielsensstudy found thatW eb usersskip overcontentthatappears
unim portant,resulting in an F-shaped reading pattern.Relevantw ordsand im ageson theleftsideof
thescreen tended to getm oreattention than thingson theright.So w hatconclusionscan w edraw
from this?
Lead w ith m ostim portant/relevantcontent
Startw ith keyw ordsin subheads,and usebolded w ords& typetreatm entson thefarleftto break up
thecontent
4 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

Itsonething to getyourem ailslayouttuned justright,buttheactualcontentthatfillsthosespotsis


equally,ifnotm oreim portant.Setyourselfup forsuccessin creating an engaging m essage.
13.Stay on target keep the m essage focused
Think aboutw hen you send a colleaguean em ail how m any topicsdo you typically coverin one
m essage?Ifyou answ ered m orethan 3,you should probably rethink your(ab)useofthem edium
Em ailsarefocused m essaging channelsm eaning thatthem osteffectivecontentislim ited in scope.
Trying to cram too m any differenttopicsinto onem essageresultsin adiluted response.Lim ityour
m essageto no m orethan 3 differenttopicsto concentrateyoursubscribersresponses.Rem em ber,
you can alw ayssend aseparateem ail.
14.Beauty isin the bandw idth ofthe beholder
Itstough enough thatyourem aillikely appearsto subscriberssans-im agesatfirst thelastthing you
w antisto successfully persuadethem to trustyou by opting to show yourbeautifulim ages only to
sittherew aiting foryourgargantuan hi-resphotosto dow nload.
M ake sureyou optim ize yourim agesforoutput butdontdow ngrade them so m uch thatthe
com pression introducesartifacts.Asbroadband penetration grow saround thew orld,thisis
becom ing lessofan issue,butfornow ,exercise alittlerestraintw ith thefile size.
15.D ontuse background im ages
Justhow sw eetdoesthatlovely CSS3-shadow ed typelook w hen laid againstthataw esom ew ood
textureyou justyanked from iStockphoto?H ateto break itto you,butitsactually pretty un-sw eet,
given thatbackground im agesarestripped outofm any ofthem ajorem ailclients.Avoid setting type
againstgradients,photos,patterns,oranything elsethatw ould require an im agefileto render.
Rem em ber:solid-colorbackgroundsonly.
16.The m agic ofanim ation
D id you know that despitethem any lim itationsofem ail you can em bed anim ationsin yourem ails?
W ait,w ait,close dow n Flash,and archivethatJavascriptsnippet.Ifyou w antto do this,youllneed
to em bracethatfavoritem edium ofm em e-fiends,theanim ated G IF.You could beforgiven for
raising aquizzicaleyebrow the useofanim ated G IFsis,afterall,pretty rare given the
tim e-intensivenatureofcreating them fram e-by-fram e,and how easy itisfortheirfilesizeto
balloon w ith even sim pleeffects.
Butthey say thatrestrictionsfostercreativity (http://w w w .dtelepathy.com /blog/articles/w hy-w ebdesigners-should-code-lim itations-open-doors),and thefew exam plesthatarearound literally grab
yourattention w ith theiruniqueness:

5 of 18

Them ovie Tw ilightused an anim ated G IF to em bed avideo trailer


(http://stylecam paign.cm ail5.com /T/V iew Em ail/y/D 8503D 71961F98A2
/1533BB6B4506A62CC67FD 2F38AC4859C)in theirem ail
Cam paignM onitorsgeniusanim ated header(http://cam paignm onitor.createsend2.com
/t/V iew Em ail/y/4533F2EF262E5D 2C/4B40B5A80823E5CC44D 0D D 5392A9C75A)is
stunningly sim ple,and yeteffectively driveshom e itspoint
Thisaw esom e exam plefrom H arry & D avid Chocolatiers,literally dragsreadersattention
(http://stylecam paign.com /blog/blogm ails/anim ation2010/bunny.htm )dow n through the
m essage

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

17.M ake your buttonsbutton-y


Asw ith any ofyourcall-to-actions,m akesureyourbuttonshavew eightand presenceaboveall
otherelem entsin them essage especially sinceyou donteven havehoverordow n statesto rely on
in thiscontext.

Im agecreditTheBridalPhotographer(http://www.cam paignm onitor.com /gallery/entry/3687/the-bridalphotographer)

Im agecreditSt.Theresa CatholicSchool(http://www.cam paignm onitor.com /gallery/entry/3683/st.theresa-catholic-school)


18.Painta picture
U selarge,stunning photographsand im agery to visually convey yourm ain pointin them essage
thisisespecially im portantforretailem ails,since im agequality haveadirectim pacton your
conversion potential(http://conversionxl.com /how -im ages-can-boost-your-conversion-rate/).
Thism akesalotofsensew hen you think aboutit.W hile shopping online,theonly thingsa
6 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...

cus
er/has
on beforY.
eCcl
orange
Buy
ton
arethe imY.Cages
and
or
dson
A
LLt
(om
H TTP:
/W Wto
W go
.D TELEPATH
Oi
Mcki
/Bng
LO Gthat
) chunky
D ESI
G N (H
TTP:
//Wbut
W W
.D TELEPATH
O M /B
LO Gw/C
ATEG
O R Y/D ESIG N )
thepage.They canttouch theproductorinspectitfrom any angle.H um an beingstend to be tactile
creatures,so thebetteryourim ages,thecloseryouregetting yourcustom ersto arealexperience
w ith theproduct.Tonsofexam plesofretailersusing top-notch productphotography arepopping up
allovertheW eb thesedays,and alotofthesetechniquesarefinding theirw ay into theem ails:
TurningArt(http://TurningArt.com )
Fab.com (http://fab.com )
Park & Bond (http://parkandbond.com )
JackThreads(http://jackthreads.com )
19.Look them in the eye
U sing aw esom eim agesisgreat,butusing aw esom eim agesofpeopleiseven better thenum bers
proveit(http://w w w .getelastic.com /people-in-photos/).
20.M ake itquick
Keep yourcopy sectionsshort preferably 3 linesorless.Rem em ber,theresaw hole landing page
ahead ofyourrecipientsthatcan take on thew holeburden offully explaining yourm essage,so you
only need to tellthem enough to decideto click through in theem ail.

In addition to thedesign tipsabove,know ing som eofthechallengesand pitfallsoftheirproduction


can saveyou alotofheadachesdow n theroad.
21.Testiton-the-go
AsCam paignM onitorcom pellingly explains,asofthisvery m onth,yourem ailsarenow m orelikely
to beview ed on a sm artphoneorm obiledevice(http://w w w .cam paignm onitor.com /blog/post
/3726/m obile-em ail-set-to-surpass-desktop-and-w ebm ail-client-usage-by-july/),than on adesktop
so youd betterbem aking surethey look theirbestunderthosecircum stances.G rab acolleague
w ith an iPhoneoriPad,and check itout!
22.Encourage engagem enton other platform s
Letsfaceit,no m atterhow aw esom ely designed yourem ailis,itsjustnotgoing to resonatew ith
som efolks.So givethem asoftout:add linksoriconsforthem to follow you and/orsubscribeto
yourotherm ain com m unication m ethods.Letyouraudience choosehow they w antto hearfrom
you.
23.(D ont)keep em separated
M ake suretheoveralllook and feelofyourem ailtiesin w ith theaestheticsofthepageyouredriving
them to.G iveyoursubscribersovertvisualcuesthattheyvearrived attherightplace thingslike
button styles,typography and colorschem eallfactorinto this.
24.A glim pse ofw hatsto com e
Bannerblindnessiseveryw here and itsthefaultofm arketerseveryw here.O verthelast12 yearsof
online m arketing,W eb usershavelearned to tuneouttheblinking,flashing,sw ooping and fading ad
bannersofyesteryear,instead honing in on areasofinteractivity on thepage.Takeadvantage ofthis
by changing theperception ofyourim agesby presenting them asthegatew aysto interactive
elem entsin theem ail like,forexam ple,acontentslider,ora video.
W etried thisapproach in apreviousbannerad cam paign,by creating an ad thatresem bled a content
slider check itout:

7 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

Banneradstypically convertataround 0.15% thisoneconverted atnearly 10tim esthat.O ther


evidenceliesin heatm apping studiesw eveconducted on thehom epageforSlideD eck.com
(http://slidedeck.com ) each tim e,w e seelarge hotspotsoveranything resem bling an interaction
button,even iftheyreem bedded w ithin an im age.U se thisknow ledgeforgood,notevil!
25.Step rightthisw ay
Arrow sareafundam entalpartofallU X design,astheyreused to explicitly directtheusersattention
tow ardsim portantelem entsoractions in fact,w euse them so m uch thatw eeven m adeourow n
fontto createarrow sm oreefficiently (http://arrrow s.com
/?&km i=N 6vpLkw Iw v5j8PercjBipEQ ctJI%3D ).W ithin thecontextofem aildesign,you can use
arrow shelp lead yourrecipientsby thenoseto yourm ostim portantinfo.

26.Large typography
O ften w ith em ail,itcan bedifficultto find high-quality photosthatconvey yourm essage
appropriately,oryou m ay find yourselfcrunched fortim e,and unableto stageaproperphotoshoot.
In caseslikethese,considerleading w ith an interesting and engaging typographicarrangem ent.O f
course,youllm ostlikely need to em bed itw ithin an im age,thanksto thelim ited CSS capabilitiesin
H TM L em ails,butitsstillpossibleto w ell-converting H TM L em ailseven w ithoutdazzling photos.
27.W atch your borders
W eb designerslovetheirm odules,sidebarsand calloutsections,and w ith good reason they help
distinguish im portantorrelated piecesofcontentto em phasizetheirpoints.O ften,thesesectionsare
treated w ith typesofbordersto furtherseparate them from them ain body ofthe layout,how everin
em aildesigns,thiscan requiretheuseofexcessiveim age slices,w hich add w eightand com plexity to
8 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...

the
pr
oduced
l.D o your
mESI
ini
the//W
useW of
icky border
es
,and
dropO R Y/D ESIG N )
A
LL (
H TTP:
//W Wem
W .ai
D TELEPATH
Y.Cdevel
O M /Boper
LO G )a favor D
Gm
Ni
(ze
H TTP:
W .t
DrTELEPATH
Y.C Ost
Myl
/B
LO
G /C ATEG
shadow s,w hich only serveto takeup thelim ited w idth you haveavailableforthelayout.
28.D ontforgetthe V iew in Brow serlink!
Itssim ple ifallelsefails,letyourreadersview theem ailin theirw eb brow ser,w herethe
frustrating quirksofem ailclientsno longerapply.
W hatdo you think,are there any im portantem aildesign tipsw eve m issed here?Letus
know in the com m ents!

ABOUT THEAUTHOR:JASON AMUNWA (HTTP://WWW.DTELEPATHY.COM/BLOG/AUTHOR/JASON)

(http://w w w .dtelepathy.com /blog/author/jason)

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


im prov com edian,w ith adash ofU K panache.Thinker/doer.Friend to startups.
Enem y ofbananas.I'm also theD irectorofProductsatdigital-telepathy.Join/find
m eon Google+ (https://plus.google.com /115015338465532800705?rel=author)and Twitter
(http://twitter.com /king_jaffy).

(http://digital-telepathy.hs-sites.com /how -to-get-hired-in-uxdesign?__hstc=95604995.8edf9171e60d4df88e13638c2aee9fdd.1418810786916.1418810786916.1418810786916.1&


__hssc=95604995.1.1418810786917&__hsfp=4163143201)

LEAVEARESPONSE
yournam e

em ail@ address.com

www.website.com

enteryourcom m enthere

Subscribe to future com m ents

9 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

7RESPONSES

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

(http://w w w .lin
SEP 10 2012

O CT 17 2012

M A R 05 2013

(http://w w w .em
M A R 19 2013

M AY 16 2013

A PR 18 2014

(http://rheadaw
JU N 22 2014

10 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...

A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

ABOUT THEBLOG

JOIN FILAMENT

THEBLOG NEWSLETTER

Thegoalofthisblog issim ple:prom otethe


betterm entofthew eb through design and craft.
W efocuson betterm entbecausew e'veseen first
hand thatinnovation and im provem entcan
haveapow erfuland lasting effect.Readm ore...
(/blog/about-the-blog)

Join agrow ing num berofinnovatorsw ho are


collaborating w ith uson new productsthat
m akethew eb abetterplace.

Subscribeto ournew sletterand bethefirstto


hearw hen ourlatestblog postsand eBooks
freebiesgetpublished!

DT H O M E (H TTP://W W W .DTELEPATH Y.CO M /)

enteryourem ail
)

FILA M EN T (H TTP://FILA M EN T.IO /)

2014 A LL RIG H TS RESERV ED.

76Shares
Pow ered by

11 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

(http://filam ent.io/flare?utm _source=flare_m obile&utm _m edium =deploym ent&utm _cam paign=filam ent)
76Shares

12 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

13 of 18

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

39Tw itter

14 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

(https://tw itter.com /intent/tweet?url=http://w w w .dtelepathy.com /blog/design/28-tips-for-designing-effective-htm l-em ails&via=dtelepathy&text=28 TipsforD esigning EffectiveH TM L
Em ails)
17Facebook

15 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

(https://w w w .facebook.com /sharer/sharer.php?u=http://w w w .dtelepathy.com /blog/design/28-tips-for-designing-effective-htm l-em ails)


12LinkedIn

16 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

(https://w w w .linkedin.com /cws/share?url=http://w w w .dtelepathy.com /blog/design/28-tips-for-designing-effective-htm l-em ails)


8G oogle+

17 of 18

17/12/2014 11:08

28 Tips for Designing Effective HTML Emails


A LL (H TTP://W W W .D TELEPATH Y.C O M /B LO G )

http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
D ESIG N (H TTP://W W W .D TELEPATH Y.C O M /B LO G /C ATEG O R Y/D ESIG N )

(https://plus.google.com /share?url=http://w w w .dtelepathy.com /blog/design/28-tips-for-designing-effective-htm l-em ails)

(https://tw itter.com /intent/tweet?url=<%= url%><%= via%>&text=<%= text%>&hashtags=<%= hashtags%>&related=ivyapp%3AG etthelatestnew sand updateson
Ivy,filam ent_io%3AAppsupdatesand tipsform aking yourvisitorshappier)(https://w w w .facebook.com /sharer/sharer.php?u=<%= url%>)(m ailto:?subject=<%= subject%>&body=<%=
text%>)(http://filam ent.io/r.php?i=ivy&utm _source=ivy&utm _m edium =deploym ent&utm _cam paign=filam ent&utm _content=<%= cam paign %>)
Shared viaIvy G etyoursnow free(http://filam ent.io/r.php?i=ivy&utm _source=ivy&utm _m edium =deploym ent&utm _cam paign=filam ent&utm _content=confirm ation)

18 of 18

17/12/2014 11:08

Vous aimerez peut-être aussi