Hvordan lage en responsiv HTML-e-post
I løpet av de siste årene har en kraftig mobilbruk utløst en evolusjon, eller kanskje revolusjon, i den måten vi nærmer oss å levere innhold til online-brukere. Det endelige målet er en flytende, mobil og enhets-agnostisk web, og en tankegang har dukket opp som den mest favoriserte måten til dette formål: responsiv design. Imidlertid, mens den responsive zeitgeisten har samlet damp, har e-postdesign og utvikling slitt seg for å holde tritt.
Dette skyldes blant annet at HTML-e-post er et beryktet vanskelig medium for utviklere å jobbe med. Arkaisk e-postklientteknologi og mangel på standarder har gjort mange av reglene for moderne semantisk kode ubrukelig. Men e-post er fortsatt en viktig markedsføringskanal som er for viktig for å bli overset. I løpet av en seks måneders periode i 2012 rapporterte Litmus en økning på 80% i e-post som åpnes på mobilenheter. Samme år avslørte kampanjemonitoren at den mobile e-poståpningen for første gang faktisk hadde overgått desktop og webmail.
Åpenbart er det viktig å gjennomføre en riktig analyse av målgruppen din før du tar beslutningen om å investere i mobiloptimalisering. Men en velutført responsiv e-postdesign kan sikre en utmerket brukeropplevelse for både stasjonære og mobile brukere - og med utbredt 4G rett rundt hjørnet, er trenden mot mobil ubemannet, så hvorfor ikke fremtidssikker?
Firkantet pinne, rund hull
Hvis du noen gang har hatt det uheldig å åpne e-post med fast bredde på en mobil enhet, vil du forstå behovet for responsivt e-postdesign. Skjermsparende, multi-kolonneoppsett kan vises zoomet ut, slik at skriftstørrelsene reduseres til ulykkesstedet. Brukere kan zoome inn, men er da konstant og irriterende påkrevd for å bla horisontalt til venstre og tilbake igjen for å lese innhold. Lenker virker små og overbelastede, uten hensyn til fette fingre på berøringsskjermen. Og design med lav kontrast på små visningsporter, dimmet for å spare strøm, blir ofte ulæselige. Det er klart at mobiloptimalisering er viktig, men hva er den beste måten å gjøre med det?
Mobil beste praksis
Før du skriver en enkelt linje med kode, kan hensynet til designfunksjoner forbedre brukeropplevelsen for de på mobilen, selv om det uten tvil er tilrådelige innrømmelser uansett skjermstørrelse.
- Klar, kortfattet innhold: Små skjermer betyr at det er viktigere nå enn noensinne å engasjere brukeren så effektivt som mulig.
- Enkeltkolonnement: Enkelhet er nøkkel. Layouter ikke større enn 640px vil degradere grasiøst. En enkelkolonne sikrer at innholdet ikke blir helt tapt utenfor visningsporten når den er zoomet inn.
- En engasjerende emnelinje: Dette er en av e-postmarkedsførerens mest effektive våpen i en overfylt innboks. Hold det kort og snappy.
- Stort anrop til handling (CTA): Straffer ikke fettfinger! Apples IOS Human Interface Retningslinjer anbefaler et minimumsverdig "målbar" målområde på 44 × 44 poeng.
- Generøse skriftstørrelser: Pass på at meldingen din lett kan leses.
- Pre-header: Et annet nøkkelområde når det gjelder synlighet i innboksen. Forsøk å unngå å bare vise "visning i nettleser" -teksten.
- Venstrejustert tekst: Det er flere grunner for å tilpasse viktige elementer til venstre på innholdsområdet. (Øyesporing forskning tyder på at vestlige brukere fokuserer mesteparten av deres oppmerksomhet på venstre side av e-postinnhold. Dette er neppe overraskende siden vi leser tekst fra venstre til høyre. Visse operativsystemer, spesielt Android, vil ikke skalere innholdet slik at de passer skjermen, og viser derfor kun den venstre halvdelen av en e-post. Fra et ergonomisk perspektiv vil de fleste brukere finne det enkleste å samhandle med elementer nederst til venstre / midt på skjermen.)
- Vertikal hierarki: redusert skjerm fast eiendom plasserer mer troverdighet enn noen gang på ideen om "fold". Vesentlige CTA bør plasseres så nær toppen som mulig; Hvis de ikke blir sett med det samme, vil de kanskje ikke bli brukt.
- Bruk bildene nøye: ikke anta at bilder vil bli sett. iPhone's native email app vil vise bilder som standard, men mange kunder vil ikke.
Disse tipsene kan forbedre brukeropplevelsen for mobilkunder, men du kan, og sannsynligvis bør, optimalisere videre. Takket være økende CSS3-støtte blant mobil e-postklienter, er responsiv e-postdesign nå mulig.
Starter
Som jeg tidligere nevnte, lider HTML-e-postmeldinger av en voldsom mangel på standarder - til de uinitierte, vil mye av det som følger bli en reise tilbake i tid til de tidlige dagene med webutvikling. Layouts må ordnes med tabeller på grunn av de utdaterte HTML-renderingsmotorene til enkelte e-postklienter, og CSS må brukes inline. Flere e-postklienter vil helt se bort fra alle stildeklarasjoner gjort i
delen av dokumentet.Det er noen fantastiske email boilerplates tilgjengelig, jeg anbefaler Sean Powell utmerket HTML Email Boilerplate som utgangspunkt, men for demonstrasjons skyld, la oss begynne fra bunnen av.
For de av dere som liker å følge med koden, kan du last ned en mal for denne artikkelen herfra.
dOCTYPE
Hotmail og Gmail vil automatisk sette inn XHTML 1.0 Strict doctype. Det er derfor ikke en dårlig ide å bruke det, men det er viktig å teste e-posten din grundig med og uten en doktype, da mange e-postklienter bare vil fjerne det hele.
Email på Acid har utført omfattende forskning på e-postdoktier her.
Media spørringer
Vi kan nå sette inn et visnings-metatag for å sikre at e-postadressen vår vises riktig på mobilenheter. Det er også en god ide å spesifisere innholdstypen og en tittelkode også. Disse blir ignorert av mange e-postklienter, men det er en god ide om du planlegger å gi en link til en "nettleserversjon" av e-posten din.
Siden innholdstypen sannsynligvis vil bli ignorert, er det tilrådelig å kode alle spesialtegn i e-posten din som HTML-enheter.
Også, vi vil inkludere et par fornuftige stil tilbakestill for å sikre at vår e-post blir gjengitt hvordan vi vil at den skal være på tvers av plattformer.
Email subject or title Vær oppmerksom på at visnings-metataggen har negative konsekvenser for Blackberry.
Nå kan vi sette inn våre medieforespørsler; hvor mange avhenger av nivået av spesifisitet du ønsker å levere til hver enhet. I dette eksemplet skal vi bare bruke én - noe som gjør den fornuftige antagelsen om at de fleste enheter med en skjermstørrelse som ikke er større enn 600px, er moderne, mobil og berøringsskjerm og vil ha nytte av mobiloptimalisert styling. Videre kommer vi til å anta at ved å følge de universelle mobile best practice-teknikkene som er skissert tidligere, vil mobile brukere på større enheter som mottar skrivebordslayout, ikke møte store bruksproblemer.
Vi bruker medieforespørsler på samme måte som vi ville når vi bygde et nettsted; Hvis visningsportstørrelsen er innenfor de begrensningene som er angitt i mediesøket, bruker du den stilen.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}I eksemplet ovenfor forteller vi noen elementer med en klasse av "skjul" som skal vises: ingen på skjermene smalere enn 600px. Den viktige eiendommen sikrer at enhver inline-stil er overstyrt. Dette er det grunnleggende prinsippet om responsivt e-postdesign: overordnede inline-stilerklæringer laget i HTML-dokumentets kropp med! Viktige stildeklarasjoner gjort i
seksjonen, og målretter mot denne stilen, overstyrer bestemte skjermstørrelser med medieforespørsler. Et tydelig unntak er gmail-appen som vil overse noen stildeklarasjoner i seksjon. Imidlertid bør samvittighetsfull venstrejustering av innhold sikre en tilfredsstillende brukeropplevelse for gmail-fans i adresselisten din. Selvfølgelig er dette ikke en ideell løsning, men i dag er responsiv e-postdesign så mye om vurdert kompromisser som det handler om banebrytende teknikker.Det er verdt å merke seg at vi målretter mot HTML-elementene våre med CSS-attributtvelgerne for å overvinne en gjengivelse av Yahoo! Post.
Så vi kan se at medieforespørsler er et nyttig verktøy for selektiv visning av innhold, men vi kan også bruke dem til å manipulere andre funksjoner i vårt layout. Kanskje viktigst, kan vi begrense kolonnebredden på e-posten vår - nøkkelen til en flott mobilopplevelse.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Vi har nå oppgitt i vår medieforespørsel at alle tabeller med en klasse av "content_block" skal skalere til 92% bredde på enheter med en skjermstørrelse på opptil 600px. Nå er alt vi trenger å gjøre, angi en breddeattribut inline (600px) for et bord med en klasse content_block og vi har en fast breddebeholder som deretter skalerer proporsjonalt på skjermbilder under en viss størrelse. Forutsatt at breddeattributtene til barnelementene i denne beholderen er alle angitt som prosentandeler, er dette en grunnleggende responsiv e-postmal.
Vær forsiktig når du deaktiverer automatisk automatisk justering av tekststørrelsen på kroppsmerket, som en tommelfingerregel, prøv å beholde skriftstørrelser over 12 px minimum.
knapper
Oppfordringer til handling (CTA) er vanligvis den viktigste delen av en markedsførings-e-post. De skal være iøynefallende, godt plassert og fremfor alt brukbare. Kriteriene for en flott CTA er forskjellige, avhengig av om den skal velges med en markør eller en finger. Dette er en kraftig funksjon av responsiv e-post; å gi brukere på mindre berøringsskjerm enheter med fingeravhengige knapper som ikke påvirkes av bildeblokkere.
Dessverre kan slike knapper ikke vises universelt da de stoler på polstringsegenskaper som ikke støttes i noen desktop 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;}}Stildeklarasjonene ovenfor vil omdanne tagger med en klasse av "knapp", som den nedenfor, til store, engasjerende, fargede knapper som strekker seg over bredden på innholdsområdet, så lenge skjermbredden på enheten ikke er større enn 600px. CSS3-støtte bør ikke være et problem, da vi kan anta at mobilteknologien vi målretter mot, er rimelig moderne.