10 Tips for Designing HTML Emails

http://thesiteslinger.com/blog/10-tips-for-designing-html-emails/

Ads by surf and keep

1ncmVlbiZvPXdzYXImZD0mdD0mYT05MTAwJnM9MTAwNSZ3PXRoZXNpdGVzbGluZ2VyLmNvbSZvb3U9aHR0cDovL29vdS5tYW53YWxraW5zdHJhaWdodC5jb20vb3B0X291dC8zJmI9YmQyJnJkPSZyaT0=)

1 of 5

Exam ples (https://thesiteslinger.com /exam ples)

(http://thesiteslinger.com )

PSD TO HTM L (HTTP://THESITESLINGER.COM /PSD-TO-HTM L)

 Pricing (https://thesiteslinger.com /pricing)

PSD TO EM AIL (HTTP://THESITESLINGER.COM /PSD-TO-EM AIL)

PSD TO W ORDPRESS (HTTP://THESITESLINGER.COM /PSD-TO-W ORDPRESS)

 ORDER (HTTP://THESITESLINGER.COM /QUOTE)

BOOTSTRAP (HTTP://THESITESLINGER.COM /PSD-TO-BOOTSTRAP)

And W ho Are W e?
Iam N ate M cG uire from The
 Published on June 24,2010  Published by Joshua Johnson

24

Site Slinger.W e're a team of

w eb designers and developers
in beautifulAustin,Texas.W e

Love em orhate em ,H TM L em ails are a w ildly popularm arketing tooland you w ill
alm ostdefinitely com e across clients thatw antyou to build them .

love to code pixelperfect

H TM L/C SS,clean and easy to use W ordPress
sites,w eb applications and m ore!

Ifyou dontknow anything aboutH TM L em ails,theyre annoying to develop and

break allthe rules youve everlearned as a w eb designer,butbeing able to code
them is a valuable skillto possess.Today w elllook atten quick and easy tips to get
beginners started on the road to creating beautifuland functionalem ails.

O urAw esom e C ustom ers

H ere are som e people thattrustus w ith allof
theirdesign to code w ork.

#1 U se Tables
W aitw hat? D idntw e abandon non-sem antic table-based designs ages ago? Yep,
and now you getto experience the joy alloveragain.U nfortunately,m ostem ail
clients dontsupporta plain old C SS layoutlike youre used to.Instead,its back to
the 90s and fam iliarizing yourselfw ith cellspacing.
Ifyoure unfam iliarw ith table-based layouts,heres a sim ple exam ple.

Related Posts
Table Tools
Ifyou w antan easy w ay to build the basic structure ofan H TM L table,check out
the free generators below .
TABLEIZER!(http://tableizer.journalistopia.com /):C onverts spreadsheetdata to
H TM L tables.
Q uackitTable G enerator(http://w w w .quackit.com
/htm l/htm l_table_generator.cfm )
Accesify Table Builder(http://accessify.com /tools-and-w izards/accessibilitytools/table-builder/)

#2 U se Inline C SS

PSD to H TM L by The Site Slinger

(http://thesiteslinger.com /psd-to-htm l/)
10 Reasons N O T to code yourow n H TM L
(http://thesiteslinger.com /blog/10reasons-not-to-code-your-ow n-htm l/)
H ow to D esign forPSD to H TM L
(http://thesiteslinger.com /blog/designfor-psd-to-htm l/)
SEO and D esigning w ith M obile in M ind
(http://thesiteslinger.com /blog/seoand-designing-w ith-m obile-in-m ind/)
PSD to W ordPress by The Site Slinger
(http://thesiteslinger.com /psd-tow ordpress/)

H TM L em ails do supportlim ited C SS,butyou cantuse an externalstyle sheet.

Instead,you use inline C SS to style the various elem ents in the tables.

17/12/2014 11:11

10 Tips for Designing HTML Emails

2 of 5

http://thesiteslinger.com/blog/10-tips-for-designing-html-emails/

code is essentially the sam e,you justem bed itrightinto the code ofyourH TM L
ratherthan linking to anotherdocum ent.

Inline C SS Tools
Ifyoure m ore com fortable using an externalstylesheetduring developm ent,just
use one ofthe tools below to convertitto inline styling once youre finished.
Prem ailer(http://prem ailer.dialect.ca/):C onverts C SS to inline styles and checks
yourcode againstem ailstandards
H TM L Inline Styler(http://inlinestyler.torchboxapps.com /):C onverts C SS rules
into inline style attributes

#3 N estYour Tables
Anotherquirk regarding em ailclients is thatthey are quite inconsistentw hen it
com es to interpreting m argins and padding.To overcom e this problem ,use nested
tables w heneverpossible.The code is a little m essierbutyoullhave m uch greater
com pliance across the board.
To nesta table sim ply m eans to place one table inside ofanother.You can nest
m ultiple tables,justbe w ary ofovernesting and creating a huge m ess.Som e em ail
clients startto getbuggy around eightnests,butyou should be able to com e in far
below this num berform ostofyourdesigns.

#4 W atch Your W idth

Severalem ailclients are fairly lim ited in theirw idth.Forinstance,considerthe
online G m ailclient.Building a norm alsize w ebpage and then displaying itin the
tiny G m ailw indow w illforce the userinto aw kw ard horizontalscrolling.
There are too m any possible clients and screen sizes to code forevery scenario so
the consensus am ong the w eb com m unity is usually justto keep yourem ails fairly
narrow .As a rule ofthum b,try to stay under600 pixels w ide in every em aildesign
you create.

#5 Be C arefulW ith Im ages

There are severalcom plications to considerw hen using im ages in H TM L em ail.
First,som e clients dontsupportbackground im ages,others do supportthem but
w illoften have them turned offby default.This is by no m eans an argum entthat
you shouldntuse im ages in yourdesign.The strongestselling pointofH TM L
em ails is thatthey surpass the quality and possibilities ofthe rich textalready
available in m ostem ailclients.Elim inating im ages altogethercan really reduce the
benefits.
Instead ofcom pletely abandoning im ages,justm ake sure thatyourm essage w orks
fine w ithoutthem .U se background colors as a fallback so any textw illrem ain
readable and testyourlayoutw ith im ages disabled.
Anotherthing you have to be aw are ofw ith im ages is thatyou cant(oratleast,
shouldnt)em bed them into the em ail.Instead,youllhave to hostthem long-term
on a reliable serverand then link to them in yourcode.
Finally,m ake sure you w atch yourload tim es.People are used to clicking on an
em ailand seeing the contents,notw aiting forim ages to load.Ifyou m ake m e
e

i e

hi e e e a e ha

ca e

ai

h i

17/12/2014 11:11

10 Tips for Designing HTML Emails

3 of 5

http://thesiteslinger.com/blog/10-tips-for-designing-html-emails/

M any tim es users sign up fora service and donteven realize itm eans theyllbe
receiving a new sletter.O thertim es they consciously decide to sign up butchange
theirm ind later.
In eithercase,unsubscribing should be a painless process thatvirtually anyone
view ing the em ailshould be able to figure out.To accom plish this,include an
unsubscribe link and m ake sure its easy to spot.D esigners and m arketers w ho
attem ptto hide this link lack integrity and respectfortheiraudience.
Ifthe person doesntw antyourem ail,theyre notreading itanyw ay.Theres no
value in sending 10,000 em ails to spam folders alloverthe w orld.Its farbetterto
know thatthose receiving yournew sletterare actually interested.

#7 C onsider Your C ontentC arefully

M arketers and business ow ners often see an em ailnew sletteras the sole source of
consistentcontactw ith theircustom erbase.They are therefore often tem pted to
fillitw ith as m uch contentand inform ation as possible.As a designer,help them
resistthis urge by designing a tem plate thatshow cases a little inform ation
extrem ely w ellratherthan a lotofinform ation very poorly.
The key here is quality overquantity.N o on w illread a thousand w ord m arketing
em ail.You have,atthe very best,3-5 seconds to grab the average readers
attention before they hitdelete.Accom plish this w ith fastloading,attractive
visuals,concise copy and cleardescriptive headers.

#8 Include O ther View ing O ptions

In addition to including an unsubscribe option,you should presentatleasttw o
alternate w ays to view the em ailforanyone notreceiving theirpreferred
experience.Forthe m inim alists,a sim ple textversion is best.There are plenty of
people outthere w ho think thatem ailshould stay sim ple and sim ply dontw antto
see yourfancy-pants attention grabbing graphics.
Atthe opposite end ofthe spectrum are users w ho do w antthe fullrich experience
butare being held back by a buggy em ailclient.Forthese users include a fairly
prom inentlink (often atthe top)thatallow s them to view the em ailin a brow ser.
Because brow sers are infinitely betterfordisplaying H TM L and C SS,you can even
beefup the brow ser-based version by coding itm ore like you w ould a norm alw eb
page (orsim ply have the brow serdisplay the originalversion).

#9 TestThoroughly
W hen designing a w eb page,one ofthe m ostannoying processes you have to go
through is cross-brow sertesting.This process usually involves testing forW ebkit,
M ozilla,IE and m aybe even O pera ifyoure really dedicated.Ifyou can believe it,
designing forem ailclients is even w orse!
There are upw ards of30 popularem ailclients,each w ith theirow n standards and
varying supportfordifferentcom m ands.To begin,testin the em ailclients thatyou
have handy.Sign up foraccounts w ith popularw ebm ailclients like G m ail,AO L and
Yahoo.Also m ake sure to testoutthe defaultapps forboth M acs and PC s.
O bviously,you canttestevery client.Ifyouve gotthe budget,sign up fora m onth
ofa service like Litm us (http://litm usapp.com /pricing)during the testing phase.This

17/12/2014 11:11

10 Tips for Designing HTML Emails

4 of 5

http://thesiteslinger.com/blog/10-tips-for-designing-html-emails/

(http://litm usapp.com /)
D uring the design stage,be sure to check outThe Em ailStandards Project
(http://w w w .em ail-standards.org/).This is one ofthe single bestsources available
fordetailed reports regarding w hatis and isntsupported by various em ailclients.

#10 U se a Tem plate

The bestw ay thatIve found to begin the process ofdesigning yourfirstH TM L
em ailis to grab a tem plate.Even ifyou have a very specific design in m ind,
m odifying a professionally developed tem plate ratherthan starting from scratch
can save you countless hours in troubleshooting tim e.
This w illalso give you a good look into how otherdevelopers structure and style
theirtables.Justrem em berthatifyoure going to redistribute orsellan em ail
tem plate as stock art,you shouldntbe stealing from som eone elses w ork!In these
cases,youllw antto really know w hatyoure doing and develop yourow n
structure from the ground up.

Free Em ailTem plates

(http://w w w .cam paignm onitor.com /tem plates/)

Fortunately,you donthave to pay a dim e to snag som e quality free tem plates
from w hich to startyourdesign process.M ostofthe prem ium em ailservices offer
free dow nloads to getyou started,often w ith no signup required.C heck outthe
resources below :
C am paign M onitor:30 Tem plates (http://w w w .cam paignm onitor.com
/tem plates/)
M ailC him p:4 Tem plates(http://w w w .m ailchim p.com /resources

17/12/2014 11:11

10 Tips for Designing HTML Emails

http://thesiteslinger.com/blog/10-tips-for-designing-html-emails/

C onclusion
To sum up,w hen designing em ailtem plates,startw ith a good basic tem plate,code
like yourdad did a decade ago,keep yourcontentboth conceptually and
physically lean (less than 600 pixels w ide),m ake iteasy to unsubscribe and see
alternate versions,and testlike crazy.
Leave a com m entbelow and letus know ifyou found the article helpful.Also be
sure to share any bits ofw isdom youve picked up along the w ay fordesigning
H TM L em ails.

2014.TheSiteSlinger,LLC .AllRights Reserved - Privacy Policy (http://thesiteslinger.com /privacy-policy/)- Blog

(http://thesiteslinger.com /blog)

Ads by surf and keep

1ncmVlbiZvPXdzYXImZD0mdD0mYT05MTAwJnM9MTAwNSZ3PXRoZXNpdGVzbGluZ2VyLmNvbSZvb3U9aHR0cDovL29vdS5tYW53YWxraW5zdHJhaWdodC5jb20vb3B0X291dC8zJmI9YmQyJnJkPSZyaT0=)

5 of 5

17/12/2014 11:11