Hur man utformar en responsiv HTML-e-post
Under de senaste åren har stigande mobil användning gett upphov till en utveckling, eller kanske revolution, på det sätt som vi närmar oss att leverera innehåll till onlineanvändare. Det ultimata målet är en vätska, mobil och enhets-agnostisk webb, och en tankegång har uppstått som det välbegränsade medlet för detta ändamål: lyhörd design. Men medan den responsiva zeitgeisten har samlat ånga har e-postdesign och utveckling kämpat för att hålla takten.
Detta beror delvis på det faktum att HTML-e-postmeddelanden är ett notoriskt knepigt medium för utvecklare att arbeta med. Arkaisk e-postklientteknik och brist på standarder har gjort många av reglerna för modern semantisk kod värdelös. Men e-post är fortfarande en viktig marknadsföringskanal som är för viktig för att bli förbisedd: Litmus rapporterade under en sexmånadersperiod 2012 en 80% ökning av e-post som öppnas på mobila enheter. Samma år avslöjade Kampanjövervakaren att den mobila e-postöppningen för första gången faktiskt överträffade skrivbordet och webbmailen.
Självklart är det viktigt att genomföra en korrekt analys av din publik innan man fattar beslut att investera i mobiloptimering. Men en väl utförd responsiv e-postdesign kan garantera en utmärkt användarupplevelse för både stationära och mobila användare - och med utbredd 4G precis runt hörnet är trenden mot mobil oupphörlig, så varför inte framtidssäker?
Fyrkant, rund hål
Om du någonsin haft oturen att öppna en e-post med fast bredd på en mobilenhet så förstår du behovet av responsiv e-postdesign. Screen-bursting, layouter med flera kolumner kan dyka ut så att teckensnittstorlekarna sänks till otillbörlig punkt. Användare kan zooma in men måste då ständigt och infuriatingly bläddra horisontellt från vänster till höger och tillbaka igen för att kunna läsa innehåll. Länkarna förefaller små och överbelastade, utan hänsyn till feta fingrar på pekskärmskärmar. Och design med låg kontrast på små visningsportar, nedtonade för att spara ström, blir ofta oläsliga. Det är uppenbart att mobiloptimering är viktig men vad är det bästa sättet att hantera det?
Mobil bästa praxis
Innan du skriver en enda kodkod, kan hänsyn tas till designfunktionerna avsevärt förbättra användarupplevelsen för mobilen, även om det förmodligen är lämpliga medgivanden, oavsett skärmstorlek.
- Tydligt, kortfattat innehåll: Små skärmar betyder att det är viktigare än någonsin att engagera användaren så effektivt som möjligt.
- Enkelspaltens layout: enkelhet är nyckeln. Layouts som inte överstiger 640px kommer att försämras graciöst. En enkelkolumn säkerställer att inget innehåll kommer att gå helt förlorat utanför visningsporten när den zoomas in.
- En engagerande ämnesrad: detta är en av e-postmarknadsförarens mest effektiva vapen i en överfull inkorg. Håll det kort och snyggt.
- Stort handlande (CTA): straff inte mot feta fingrar! Apples riktlinjer för riktlinjer för iOS-gränssnitt rekommenderar ett minimalt "tappable" målområde på 44 × 44 poäng.
- Generösa typsnittstorlekar: Se till att ditt meddelande lätt kan läsas.
- Förhoppare: Ett annat viktigt område när det gäller synlighet i inkorgen. Försök att undvika att bara visa "visa i webbläsarens" text.
- Vänsterjusterad text: Det finns ett antal skäl för att anpassa viktiga element till vänster i innehållsområdet. (Eye tracking-forskning tyder på att de västerländska användarna fokuserar merparten av deras uppmärksamhet på vänster sida av e-postinnehåll. Det här är knappast förvånande eftersom vi läser text från vänster till höger. Vissa operativsystem, särskilt Android, kommer inte att skala innehållet så att de passar Skärmen visar därför bara den vänstra halvan av ett e-postmeddelande. Från ett ergonomiskt perspektiv kan majoriteten av användarna hitta det enklaste att interagera med element längst ner till vänster / mitt på handskärmen.)
- Vertikal hierarki: Minskade skärmfastigheter ställer mer trovärdighet än någonsin på tanken om "folden". Betydande CTA bör placeras så nära toppen som möjligt. om de inte ses omedelbart, kanske de inte kommer att användas.
- Använd bilderna noggrant: Antag inte att bilderna kommer att ses. iPhones inhemska email app kommer att visa bilder som standard men många kunder kommer inte.
Dessa tips kan förbättra användarupplevelsen för mobilkunder, men du kan, och förmodligen borde, optimera ytterligare. Tack vare ökat CSS3-stöd bland mobila e-postklienter är det möjligt att göra responsiv e-postdesign.
Komma igång
Som jag nämnde tidigare, lider HTML-e-postmeddelanden av en otrolig brist på standarder - till de oinitierade, mycket av det som följer kommer att vara en resa tillbaka i tid till de tidiga dagarna av webbutveckling. Layouts måste ordnas med tabeller på grund av de utdaterade HTML-renningsmotorerna hos vissa e-postklienter och CSS måste tillämpas inline. Flera e-postklienter kommer helt och hållet bortse från alla stildeklarationer som gjorts i
delen av dokumentet.Det finns några fantastiska email boilerplates tillgängliga, jag rekommenderar Sean Powell utmärkt HTML Email Boilerplate som utgångspunkt, men för demonstrationens skull, låt oss börja från början.
För dig som gillar att följa med koden kan du ladda ner en mall för den här artikeln härifrån.
doctype
Hotmail och Gmail lägger automatiskt in XHTML 1.0 Strict doctype. Det är därför inte en dålig idé att använda det, men det är viktigt att noggrant testa ditt mail med och utan en doktyp eftersom många e-postklienter helt enkelt kommer att ta bort det hela.
Email på Acid har utfört omfattande forskning om e-doktyp här.
Media frågor
Vi kan nu infoga en metadag för visningsporten så att vår e-post visas korrekt på mobila enheter. Det är också en bra idé att ange innehållstypen och en titel tagg också. Dessa kommer att ignoreras av många e-postklienter, men det är en bra idé om du planerar att ge en länk till en "webbläsareversion" av din e-postadress.
Eftersom innehållstyp sannolikt kommer att ignoreras är det lämpligt att koda alla specialtecken i ditt e-postmeddelande som HTML-enheter.
Vi kommer också att inkludera ett par förnuftiga stilåterställningar för att säkerställa att vårt e-postmeddelande görs hur vi vill att det ska vara över plattformar.
Email subject or title Observera att metadaggen med Viewport har negativa konsekvenser för Blackberry.
Nu kan vi lägga in våra mediafrågor. hur många beror på vilken specificitet du vill leverera till varje enhet. I det här exemplet kommer vi att använda bara en - vilket gör det rimliga antagandet att de flesta enheter med en skärmstorlek som inte är större än 600px är moderna, mobila och pekskärmiga och kommer att dra nytta av mobiloptimerad styling. Vidare kommer vi att anta att genom att följa de universella mobila bästa praxisteknikerna, som skisseras tidigare, kommer mobila användare på större enheter som tar emot skrivbordslayouten inga stora användbarhetsproblem.
Vi använder mediasökningar på samma sätt som vi skulle när vi byggde en webbplats. Om visningsstorleken ligger inom de begränsningar som ställts in i mediafrågan, använd sedan den här stilen.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}I exemplet ovan säger vi några element med en klass av "dölj" för att visa: ingen på skärmar smalare än 600px. Den viktiga egendomen säkerställer att alla inline-stilar överrätts. Detta är grundprincipen för responsiv e-postdesign: överordnade inline-stildeklarationer gjorda i HTML-dokumentets kropp med! Viktiga stildeklarationer gjorda i
avsnitt och riktar sig mot dessa stilar överstyrs till specifika skärmstorlekar med mediefrågor. Ett skarpt undantag är gmail-appen som kommer att ignorera alla stildeklarationer i sektion. Men samvetsgrann vänsterjustering av innehåll bör säkerställa en tillfredsställande användarupplevelse för gmail-fans i din e-postlista. Självklart är detta inte en idealisk lösning, men för närvarande är responsiv e-maildesign lika mycket om att betrakta kompromisser som det handlar om avancerade tekniker.Det är värt att notera att vi riktar in våra HTML-element med CSS-attributväljare för att övervinna en gör quirk av Yahoo! Post.
Så vi kan se att mediafrågor är ett användbart verktyg för att selektivt visa innehåll, men vi kan också använda dem för att manipulera andra funktioner i vår layout. Kanske viktigast kan vi begränsa kolumnbredden på vårt mail - nyckeln till en bra mobilupplevelse.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Vi har nu i vår media fråga angett att alla tabeller med en klass av "content_block" ska skala till 92% bredd på enheter med en skärmstorlek på upp till 600px. Nu behöver vi bara ange en breddattribut inline (600px) för varje tabell med en klass av content_block och vi har en fast breddbehållare som sedan skala proportionellt på skärmar med en viss storlek. Förutsatt att breddattributen för barnelementen i den här behållaren är alla angivna som procentandelar, är detta en grundläggande responsiv e-postmall.
Var försiktig när du avaktiverar webkit automatisk textstorleksjustering på kropps taggen, försök som regel att behålla skriftstorlekar över 12px minimum.
Knappar
Samtal till handling (CTA) är vanligtvis den viktigaste delen av ett marknadsföringskonto. De ska vara iögonfallande, välplacerade och framför allt användbara. Kriterierna för en stor CTA är olika beroende på huruvida det ska väljas med en markör eller ett finger. Detta är en kraftfull funktion av lyhörd e-post; för att ge användare på mindre pekskärmsenheter med fingervänliga knappar som inte påverkas av bildblockerare.
Tyvärr kan sådana knappar inte visas universellt eftersom de är beroende av vadderingsegenskaper som inte stöds i vissa stationära e-postklienter.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}Stilförklaringarna ovan kommer att omvandla taggar med en klass av "knappen", som den nedan, till stora, engagerande, färgade knappar som sträcker sig över bredden av innehållsområdet, så länge som skärmens bredd inte är större än 600px. CSS3-stöd borde inte vara ett problem eftersom vi kan anta att den mobila tekniken vi riktar in är ganska modernt.