Académique Documents
Professionnel Documents
Culture Documents
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 )
Join our team and create some of the best user experiences on the web!
Search
pssst...
yourem ail
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
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!
/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
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://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
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.
17/12/2014 11:08
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 of 18
17/12/2014 11:08
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
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.
7 of 18
17/12/2014 11:08
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 )
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
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!
LEAVEARESPONSE
yournam e
em ail@ address.com
www.website.com
enteryourcom m enthere
9 of 18
17/12/2014 11:08
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
http://www.dtelepathy.com/blog/design/28-tips-for-designing-effective-ht...
ABOUT THEBLOG
JOIN FILAMENT
THEBLOG NEWSLETTER
enteryourem ail
)
76Shares
Pow ered by
11 of 18
17/12/2014 11:08
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
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
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
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
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 )
16 of 18
17/12/2014 11:08
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 of 18
17/12/2014 11:08
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=<%= 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