Mobile Toolkit

Mobile Email Marketing Toolkit@

Code & examples to make your email campaigns mobile friendly

• Introduction 01

• TheGrowingImportanceofMobile 02

• KeyMobileDevices 03

• DesigningforMobile 04

• Examples:Waystooptimiseemailformobile 06• Changingformattingandwidths 06• Showingandhidingcontentondifferentdevices 07• Changingthelayoutofmobileemails 08

• Instructions:Howtocodeemailsformobile 09• Changingformattingandwidths 09• Resizetablesandimages 10• Showingandhidingcontentofdifferentdevices 11• Changingthelayoutofmobileemails 13

• AboutEmailcenter 15

Contents

IntroductionMobileisperhapsthehottesttopicinemailmarketingrightnow.Itpresentsagreatchallengetomarketerstoensurethattheirgrowingnumberofsubscribersaccessingemailonmobiledevicescangetthesamequalityexperienceasthoseusingadesktopclient.

OuraimforthistoolkitistoprovideasetofexamplesandcodethatenableyoutogenerateyourownmobileoptimizedHTMLemailsperhapsinwaysyoudidnotthinkwerepreviouslypossible.

Youwillfindnotonlyasummaryofthewaysyoucantweakyouremails,butalsothespecialCSSrulesandHTMLcodeforyoutocopyintoyourownemails.

1TheMobileEmailMarketingToolkit

emailcenteruk.com/mobile

The Growing Importance of MobileEachyearweseeanembraceforthetechnologiesofthetime.Overthelasttwoyearsthetrendhasbeen‘mobile’.Smartphonehandsetsnowrepresent30%oftheentireUKmobilemarketandthisfigureisexpectedtogrowrapidlyin2012.Theuseandpopularityoftabletdeviceshasalsogrown,withleadersinthemarketsuchastheiPadpavinganewwayofcheckingyouremailsonthego.InJuly2011,ApplereportedrecordprofitsthroughitsiPhoneandiPadsales,withApplesellingmorethan20millionhandsetsinthefirstquarter.

Thishashadadirectimpactontheincreaseofemailmarketingmessagesbeingreadonthesemobiledevices.Hereisanexampleofhowmanyopenshavebeenrecordedondifferentdesktop,webmailandmobileclientsfromatypicalconsumerbasedemailcampaign:


ReporttakenfromtypicalB2CcampaigninMaxemail


iPhone:Byfarthemostpopularemaildevice,renderingHTMLemailonthisisactuallyfareasierthanmanywebmailprovidersasitsupportsHTML5.Howeveryouarestillrestrictedtoascreen320pxwidesothereareusabilityissuestothinkabout.

iPad:ThesedevicescanbethoughtofassimilartotheiPhonebutwithabiggerscreen.Therearefewlimitationstobethoughtaboutwiththisdevice,butthereareopportunitiestoincludeHTML5featuressuchasstreamingvideo.

Android:Anoperatingsystemformobilesratherthanadevice,containingabuiltinemailclient.Screensizesvarybetweendevices,whileagainrenderingisnotsomuchofanissueasdesktopclients.

Windows Mobile:ThisappearstohaveatinymarketsharewhichisluckyasitdoesnotrenderHTMLemailparticularlywell.Infactouradviceis,becausethefootprintissosmall,thatthereisnojustificationforspendingextraresourcetocopewiththisdevice.

Blackberry:UnlikeversionsoftheiPhoneorAndroid,thereisahugeamountofchangeinHTMLemailcapabilitiesbetweenversions.Forexample,theBlackberry8900willrenderthetextversion(orifnotextversionshowtheHTMLsourcecode!),whilelaterversionssuchastheBlackberryCurvedorendertheHTML,althoughnowhereneartothequalityofiPhoneandAndroiddevices.

3

Key Mobile DevicesBelowisasnapshotofthemainplayersinthesmartphonemarket,includingsomeinsightintotheirmarketshareandhowemailrendersoneachofthem.

TheMobileEmailMarketingToolkit

Whyisemailformobiledifferent?

Therearethreemaindifferencesbetweenrecipientsreceivingemailsontheirmobileortabletdevice,comparedtotheirdesktopPC.

1. Bandwidth:Oftenmobiledeviceswillbeconnectingtolowbandwidthwhicharesignificantlyslowerinloadingemailsanddownloadingimagesthanadesktopconnection.

2. On the go:Mobiledevicesaresimplythat-mobile.Thereforeyoucanexpectmostrecipientswillbeviewingtheiremailsontheirmobilewhilemoving.Thismeanstheymightnothavetimetoscrolldownandreadyourwholeemail,sothecalltoactionneedstobevisible.

3. Small screens:Withasmallscreenyouremailbecomessquashedorshrunken,makingithardertoread.Additionally,thepointandclickdeviceisnolongeramouseandcursorbuttherecipient’sclumsybigfingers,causingsometoclickonthewronglink.

4. Multi-devices:WithyourcustomersaccessingemailviatheirworkPC,homelaptop,mobileandtabletthereisadangerthatifyouremailandlandingpagesaredifficulttouseorviewthenwhilearecipientmightthinkofcomingbacktoyouremailwhenontheirPC,inrealityoncethemessageismarkedasreaditislostintheclutteroftheinbox.Indeedfromourownanalysisofthosewhoopentheemailinitiallyontheirmobiledevice,only3%willreadtheemailonadesktopdeviceatalaterstage.



Designing for MobileMobilewebisgrowingatarapidpace,andwebdesignersarealreadytakingintoaccountcustomersbrowsingtheirsitesusingsmartphoneandtabletdevices,strippingthesitedowntothebasicswiththeoptiontoviewfullsite.Thiscan’tbedoneforemailthough,asyouhavetodeliveraready-madepieceofHTMLtotheinbox,ratherthanre-directthem.

Thereforetoachievethelowestcommondenominatorofscreensizeitwouldmeancompromisingthemessageseenforperhaps90%ofyourlistondesktopemailclients.Howeverthereisawaywecanmakeemailsworkequallywellondesktopandmobiledevices.

Acurrenttrendinwebdesignistermed‘responsivedesign’.Thisismovingawayfromdesigningasitewithafixedinterfacetocreatingadesignthatcanbeautomaticallyoptimizedfordevicesotherthanthedesktopuponopeninginthebrowser.

WecanalsoutilizethistechniquetoforcemobileclientstodynamicallyaltertheHTMLemail,meaningthoseviewingonadesktopgetthebestexperienceforthem,thoseviewingontheirmobilegetanoptimizedversionfortheirscreen.

Inthisexamplewehavechangedthelayoutoftheemailtoaidtheviewingexperienceonamobiledevice.Exactlythesameemailhasbeendelivered,butwehavechangedthewayitrendersusingourresponsivedesigncode.

Desktopversion Mobileversion


How it works – the @media CSS rule WithinaHTMLstyletagwhereyoucandefineCSSwecannowcreatesomethingcalledan@mediarule.ThisallowsustodefineconditionalCSSthatisonlyappliedifthescreenresolutioninwhichyourHTMLisviewedisofacertainsize.

TraditionallyinemaildesignwecannotuseCSSreliablyasitisoftenstrippedout–howeverasthisCSSruleisonlytoberelevanttomobiledevices,andiPhoneandAndroidhaveexcellentCSSsupport,wecanuseittodoanythingfromchangefontsizesthroughtoevendisplayingacompletelydifferentemail.

Belowisanexamplemobilestylesheetwehaveincludedinthe<HEAD>tagsofaHTMLemail.Itwillonlybeappliedtoscreenswhosemaximumwidthislessthan480px,whichisthewidthofaniPhoneinlandscapemode.

<styletype=”text/css”>@mediaonlyscreenand(max-device-width:480px){ table[class=”mobilewidth”]{width:380px!important;} table[class=”100pcwidth”]{width:100%!important;} td[class=”spacing”]{border-top:solid#ffffff10px!important;} table[class=”features-table”]{clear:both;!important;width:100%!important;} table[class=”first-table”]{clear:both;!important;width:100%!important;}}</style>

ForeachTD, DIVorTABLEtagtowhichweareapplyingthestyle,wemustalsoaddtheappropriateclassname.Forexample:

<TD class=mobile>

YoumightthinkwehavedefinedthisCSSinanunusualway–soratherthanusingtheusualclassselector(‘.classname’,)wehavedefineditasanattribute.Thereisasimplereasonforthis–ifyoudon’tdothismethodtheYahoowebmailclientwillalwaysdisplaythemobileCSS.Youwillfindaswegoalongthereareotherworkaroundsweshowoneachexampletoovercomewebmailanddesktopemailclients’limitations.

Therearealsolimitationswiththiscode.ItisonlysupportedoniPhoneandAndroiddefaultmailclients.Ifyouviewyouremailonanapp,orawebmailclientonthedevice,[email protected]%ofmobileopensarewithinthedefaultmailclient.

WeofcoursehaveonlymentionediPhoneandAndroidhere.BlackberryandWindowsMobiledevicesdonotsupportthis.TheiPadwillsupportthis,butthehighqualityresolutiononthisdeviceissuchthattherequirementtodosoisnotthere.



Examples: Ways to optimise email for mobileNowwehavegivenyouabasicintroductiontomobileoptimizedHTMLandCSScodeherearesomereal-lifeexamplesyoucanuseasastartingpointforcustomizingyourtemplates.AgainsteachexamplewehaveprovidedthefullHTMLsource,completewithournotesonwhateachpieceofcodedoestoaidyourunderstanding.

1.Changingformattingandwidths

TextonaniPhonehastobeaminimumof13px,otherwisetheiPhonewillautomaticallychangethefontsizetothis.Thisofcoursemeansthatitcandestroyyourcarefullydesignedtablelayoutifyourtextnowrunsonto2lines(seeexamplebelow).FortunatelyyoucanaddinastyletoforcetheiPhonenottoresizethistextbyaddingwebkit-text-size-adjust:none;withinastyletag,orsimplyincludeasaninlinestyleontheBodytag.

OnotheroccasionsyoumightwanttoallowtheiPhonetokeepauto-resizingmosttext,butwanttomanuallychangethefont-sizeofcertainpiecesoftext.SimplycreatetheCSSandthenapplytheclasstotherelevanttag,asshownasshownintheexamplecode.

Imagesoftenstretchanemailsotheemailisatleastthesizeofthewidestimage.Onamobiledeviceweareaimingforamaximumwidthof320px,soadding‘max-width: 100%’withintheMediatagtoovercomethis.Usingthisimagewhichmightbe600pxwide,willnowonlybeaswideasthemaximumwidthofthescreen.Youcouldalsousethiswithanypercentageamount,soifyouonlyeverwanttheimagetobe50%ofthescreenadd‘max-width: 100%’instead.

DesktopversionMobileversionwithoutpreveningtextresize

Mobileversionwithcodeaddedtodisabletextre-sizing

DesktopversionMobileversionwithoutstandardimagere-sized

Mobileversionwithimagesre-sized

Thiscanalsobeusedtoalterwidthsofotherelementssuchastables.Againjustdefineanewclasswiththewidthwithinthemediarule,andthenaddthisclasstoyourTDtagsyouwishtoresize,ensuringyouhavenowidthontheTABLE tagitself.



2.Showingandhidingcontentondifferentdevices

Wehaveallbeenknowntocramlotsofcontentintoouremailnewsletters.ThatisfinewhenweareviewingitonourPC,butonatinymobiledevicewecannotgetawaywithtoomuchclutter.

Whatwecandowithour@mediarulethoughistodefinewhattohideorshowonmobileanddesktop/webmaildevices.Thiscanthenbeusedtoachieveoutcomessuchas:

• ShowingiPhone-specificpromotionssuchas‘Downloadourapp’justtoiPhoneviewers• Hidingsectionsoftheemailonmobiledeviceswhicharetoobig,orperhapslinktonon-mobilefriendlylanding

pages• Reducetheamountofcontentshownonthemobiledevice,tokeepthelengthoftheemailmorerealisticfor

scrolling

Hereisourexampleofhowwehaveeffectivelyachievedthiswithtwoseparateemails:

Example1:Hidingcontentonamobiledevice–notethesectionsnolongervisiblewhenopenedonaniPhone

Hidingcontentonamobiledeviceiseasy,themorecomplicatedrouteishidingcontentsoitdoesnotappearondesktopandwebmaildevices,asthelikesofGmaildon’tsupportCSSsuchas‘Display: none’.Ournotesintheexampletakeyouthroughwhatisrequired.Youcanalsocombinethetwoexamplessosomethingsarehiddenonmobiledevicesandsomethingsarehiddenondesktopandwebmailclients.

Example2:Showingcontentonthemobiledeviceonly–onesectionishiddenondesktop/mobiledevices




3.Changingthelayoutofmobileemails

Thistipisparticularlyappropriatewhereyoumightincludenumerousproductoffersinmultiplerowsandcolumnsoftheemail.Onadesktop,withanemailwidthof650pixelsitmightbeeasytodisplayarowof2or3offers.Howeverwhenweviewthisonamobiledevicetheoffersaretoosmallandweareforcingtherecipienttozoomin,andgetluckywhentheyattempttoclickwiththeirbigfingers.

HereisasimpleexampleofhowwecanchangethewaywestructureourHTMLtables,andincludeasimpleCSSstyletoforceeachofferontoanewline:

ItislikelythattakingadvantageofthisexampleitwillmeanbigstructuralchangestohowyourHTMLiswrittenforyourtemplate,butthebenefitsofhavingamoreoptimizedlayoutareobvious.

Desktopverson



Mobileversion

Instructions: How to code emails for mobile

Usingthesecodesamples

Thissectiontakesyouthroughthepracticalsideofeachexample.Witheachone,therearelinkstothesourcecodefiles,makingiteasyforyoutocopythecodeforyourneeds.

Thecodesampleshavebeentestedinallmajordesktop,webmailandmobileemailclients,inmultiplebrowsersincludingInternetExplorer,Chrome,SafariandFirefox.Clearlytheseemaildevicesarechangingconstantly,andthereforethereisapossibilitymoreorlesscodewillbesupportedafterthetimeofwriting–youshouldalwaysdoathoroughtestinalldevicesandbrowsers.

1.Changingformattingandwidths

Source: Text Formatting: http://www.emailcenteruk.com/mobile/text-resize.html

Aswelladjustingthelayoutofyouremail,youmayshouldalsoconsidertheformattingofyourtexttoensuretheyare‘fingerfriendly’.Thefollowingexamplewillshowyouhowtoincreasethesizeofaheadingandacalltoaction.

Usingthe@mediarule,youcandefinetextcolours,fontsandsizes.Thefollowingcodehasspecifiedamobile-headerandamobile-linkfontsize.

@mediaonlyscreenand(max-device-width:480px){ div[class=”mobile-header”]{font-size:20px!important;} a[class=”mobile-link”]{font-size:18px!important;}}

Inthebodyoftheemail,yousimplespecifytheclassoneachelementyouwanttoadaptinthemobileversion:

Asyoucansee,thetitleiseasytoreadandthelinksareeasytotouch.

<divstyle=”font-size:28px”class=”mobile-header”>Fontformatting</div>

<ahref=”#”class=”mobile-link”>Findoutmore»</a>




2.ResizingTables&Images

Source: Table resize: http://www.emailcenteruk.com/mobile/table-resize.html Source: Image resize: http://www.emailcenteruk.com/mobile/image-resize.html


@mediaonlyscreenand(max-device-width:480px){ table[class=”mobile-width”]{width:320px!important;}}<tablecellpadding=”0”cellspacing=”0”width=”600”class=”mobile-width”> <tr> <td>content</td></tr></table>

Everysingleemailshouldrevolvearoundonemaintable,thisisusuallysetat600–650pixelswidetoaccommodatedesktops&laptops.Usingthe@mediarule,youcanamendyourtablewidthtobeamore‘mobilefriendly’320px.

Thisreliesonthetablenotcontaininganelementwhichiswiderthanthetableitself.Forexample,a600pixelwideimage.ThiswouldstretchthetableregardlessoftheHTML&CSS.Thefollowingcodeshowshowtoresizeandimage:


@mediaonlyscreenand(max-device-width:480px){table[class=”mobile-width”]{width:320px!important;}img[id=”max-width”]{width:300px!important;height:145px!important;}}<imgsrc=”http...”width=”600”height=”290”id=”max-width”/>

Mobileversion1 Mobileversion2


3.Showingandhidingcontentofdifferentdevices

Example1:Hidingcontentonamobiledevice

Source: http://www.emailcenteruk.com/mobile/hide.html

Tohidecontent,addanewclasstoyourelement,andaddacorrespondingdefinitioninyourCSSasbelow:

Example2:Showingcontentonlyonthemobiledevice

Source: http://www.emailcenteruk.com/mobile/show.html

<styletype=”text/css”>@mediaonlyscreenand(max-device-width:480px){ tr[class=”hide-in-mobile”]{display:none!important;} }</style>



TheMobileEmailMarketingToolkit 11emailcenteruk.com/mobile

TheadditionalCSSistosetthewidthto0px,thenensurethereisnooverflow,andfinallyasthatstillleavesaspacewefloatittotherightoftheemail.Soforallintentsandpurposesthecontentisinvisible.

YouwillnoticewehaveaclassontheDIVwhichofcoursewhenopenedonamobiledevicereversesthisinlineCSSsoitisvisible:

Youcanusebothexampleswithinthesameemail,andthiscanevenbeusedtodisplay2differentemailsdependingonwhatdevicetheyopeneditin.However,rememberifyougodownthatroutethesizeoftheemailisimportant,toobigandtheemailwillgetclipped,meaningnotallofthecodewillworkifonlypartoftheemailisrendered.Thereforeweadviseputtingyourmobilecontentaheadofthedesktopcontentinthisscenario.

ThisismorecomplicatedasyourCSSdefinitionsneedtosupportamultitudeofdevices,notjustahandfulofmobileclients.Gmail,OutlookandotherpopularclientsoftenhavelimitedCSSsupportwhichisrequiredtohideaDIVorTABLE.

Thereforewehavetouseseveralmethodsforhidingthecontent.

Firstlywecanhidethecontentusingstandard“display: none”inlineCSS.ForGmailthough,thiswon’twork,sowewillhavetoadd3extrapiecesofinlineCSS.HereisanexampleDIV:

<divclass=”show-in-mobile”style=”display:none;width:0px;overflow:hidden;float:right”>

div[class=”show-in-mobile”]{display:block!important;width:100%!important;overflow:display!important;float:none!important}



4.Changingthelayoutofmobileemails

Source code: http://www.emailcenteruk.com/mobile/layout.html

Table2:

<tablewidth=”428”align=”left”cellpadding=”0”cellspacing=”0”class=”first-table”>

<tablecellpadding=”20”cellspacing=”0”class=”100pcwidth”width=”152”>

ThisexamplerequiresyoutobuildyourHTMLtemplateinacertainway.Ratherthancreatingtablesthatforcelayoutbaseduponcolumnsandrows,wecreateadifferenttableforeach‘column’thatwillthenbemadeintoa‘row’onthemobiledevice.

Thesetablesimmediatelyfolloweachotherinthecode.Normallytheywouldautomaticallysitunderoneanother,butifweaddan‘align’tothetabletagwecangetthemallonthesamerow,presumingthetotalwidthofthetablesiswithintheavailablewidth.

Table1:




Inalldesktopandwebmailclientsthesetableswillsitasshownontheexample.Howeverformobileweneedtoforcethetablestositunderoneanotherbycounteractingthealigntagweadded.LuckilythereissomeCSScalled‘Clear:both’whichdoesexactlywhatwewant.

Wealsoneedtochangethewidthofthetablessotheyfittheentireemail,plusaddpaddingintheformofaborderonthesecondtablesothereisagapbetweenthem.

Mobileclassforfirsttable:

ThecommenttagsneedaddingexactlyaswrittenaboveforthemtoberecognisedbyOutlook.

FinallyduetooneparticularOutlook-specificissue,wehavetoaddaworkaroundforthe3featurearticles.Outlookwillnotallowyoutohavetablesimmediatelyfollowingoneanotherwithoutaddingextraspacingcausingyourlayouttogoovermultiplelines.FortunatelythereisawayaroundthisasOutlooksupportsitsownspecialcommenttagsallowingustoaddconditionalformattingwhenopenedinOutlook.WesimplyaddinablockofCSSwhichreducesthewidthofthetablesinOutlookonly,meaningtheynowallsitonasingleline.

Mobileclassfor2ndtabletoadjustwidthandaddborderforpadding:

table[class=”first-table”]{clear:both;!important;width:100%!important;}

table[class=”100pcwidth”]{width:100%!important;border-top:solid#ffffff25px!important;}



Thebestwayofusdemonstratingthisiswithourvideo:

Watchvideo:http://screenr.com/8eos


About EmailcenterEmailcenterareanadvancedCRMfocussedemailmarketingserviceprovider.Weareamultiawardwinningagencyandworkinawiderangeofsectors,withclientsincludingToptable,GoCompare,TheHoseasonsGroup,NS&I,EnglandandWalesCricketBoardandVisitBritain.

Wespecialiseinprovidingapersonalisedservicetoaidthecreationofsmarteremailprogrammes.

Maxemailourtechnologyplatformboastsmanymarketleadingandinnovativefeatures,presentedinanintuitiveinterface,offeringthepowerofanenterprisesolution,butinawaythatallcanunderstand.

Getintouchtodiscussanyemailmarketingrequirementsyoumayhave:

Tel: 01327 811884Email:[email protected]


Mobile Toolkit

Documents

Transcript of Mobile Toolkit