Indhold
- 01. Gør beskeden klar
- 02. Skærmtyper og -størrelser
- 03. Kunderejsen
- 04. Lad os komme i gang
- 05. Flydende søjler
- 06. Skjul indhold
- 07. Mobilvenlige knapper
- 08. Tabletter
- 09. Testning
- Kan du lide dette? Læs disse!
- Nødvendig viden: HTML, CSS
- Kræver: Teksteditor, webbrowser, mobil enhed til medieforespørgsel
- Projekt Tid: 1 time
- Supportfil
I denne vejledning ser vi på at bringe nogle af internettets mobile teknikker til HTML-e-mail. Brugeroptagelse af mobil-e-mail er massiv: nogle e-mail-kampagner får flere åbninger på mobilenheder end desktop, men alligevel gengives mange marketing-e-mails dårligt på mobilenheder. Mobilsupport på nettet har aldrig været bedre - så hvis du sender e-mails, der får kunder til internettet, er det fornuftigt også at designe mobilvenlige e-mails.
Designudfordringerne for mobil e-mail svarer til dem på nettet: vi har en lille skærm, en berøringsgrænseflade, og (nogle gange) brugere er ude og omkring - så designtilgangen er ens. Vi har en ekstra udfordring, idet mange ældre mobile e-mail-klienter mangler korrekt support til medieforespørgsler.
Med dette i tankerne er vores bedste tilgang at designe en kampagne, der fungerer godt på både desktops og mobiltelefoner, og derefter bruge medieforespørgsler, hvor de understøttes for at tilføje et ekstra optimeringslag til smartphones. Så lad os først se på, hvordan vi kan gøre en almindelig e-mail-kampagne mere mobilvenlig.
- Læs alle vores responsive artikler om webdesign her
01. Gør beskeden klar
Hvis der er en tendens, der sker igen og igen i processen med at lave en e-mail-kampagne, er det denne: marketingafdelinger elsker at skrive masser af kopier, og designere hader at klemme det ind i layoutet. Tidligere har vi forsøgt at bryde kopi og trække sektioner ud som højdepunkter, men mobil giver os det bedste argument endnu for kort kopi: folk har ikke tid til masser af tekst, og vi har ikke plads. Selv en bruger, der sidder på et tog, kan stadig have mange e-mails at komme igennem. Vi er nødt til at skære vaflen og gøre den let og hurtig at læse.
Det er muligt med CSS at fjerne noget af dit desktop-indhold på en mobilenhed, men vi skal kun bruge dette til at tilpasse designelementer og ikke redigere beskeden. Hvis du ikke kan få din besked på en 320px bred enhed, er det svært at se, hvordan tilføjelse af indhold til desktopbrugere løser dette.
02. Skærmtyper og -størrelser
Som med design til mobilweb og apps har vi at gøre med en berøringsskærm. Det er værd at huske den berygtede fingermåling fra Apples retningslinjer for menneskelig grænseflade: minimumsstørrelsen for et klikbart område skal være 22x44 pixels. Du skal (i det mindste) gøre det vigtigste opfordring til handling-links pænt og stort og let at vælge på en berøringsskærm. Sørg også for, at links er adskilt, så de ikke tappes forkert: et minimum på 22 pixel anbefales igen.
Den stående iPhone-skærmstørrelse er 320 pixels bred; de fleste desktop-e-mails er 600 til 700 pixel. Vi vil have noget, der fungerer i begge dele, så hvis man efterlader lydhøre teknikker til side, betyder det at reducere kopi og derefter gøre tekststørrelsen større.
03. Kunderejsen
Det er vigtigt at få e-mailen rigtig, men vi skal også overveje, hvor brugerne går hen. Efter at have klikket på fra e-mailen, er destinationssiden optimeret til mindre skærme? Kan de udføre den samme opfordring til handling på en mobilenhed? Det er uden for omfanget af denne vejledning, men det er noget at tænke over.
En nem måde at lave et desktop-design, der også ser OK ud på en mobil, er at bruge et simpelt layout: hold alt i en kolonne, og indholdet kort. Det får dig noget af vejen, og det giver os en anstændig sikkerhedskopi, hvor medieforespørgsler ikke understøttes (især på Blackberrys og i Android Gmail-appen). Men lad os se på, hvordan vi kan bruge medieforespørgsler til at tilføje bedre support.
Som med al e-mail-kode foregår der retro-ting. Hvis du er vant til at superrenere semantisk webkode, kan du sætte dine beskyttelsesbriller på.
04. Lad os komme i gang
Vi starter med at opsætte nogle af vores stilarter og tilføje visningens metatag. Som du måske ved, ignoreres stilerklæringer i overskriften undertiden af desktop-e-mail-klienter, og derfor får du råd om ikke at bruge dem. Vi bruger dem kun til at kontrollere vores mobilformatering her, så vi har det godt.
hoved>
meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
stil type = "tekst / css">
@media-skærm og (maks. bredde: 480 px) {
tabel [class = emailwrapto100pc], img [class = emailwrapto100pc]
{bredde: 100%! vigtigt; højde: auto! vigtigt;}
}
/ stil>
/ hoved>
body style = "polstring: 0; margin: 0; -webkit-tekst-størrelse-justering: ingen; -ms-tekst-størrelse-justering:
100%; baggrundsfarve: #ffffff; "bgcolor =" # ffffff ">
Du kan se, at vi bruger lidt ulige CSS. Vi er nødt til at bruge attributvælgere til at specificere vores mobile CSS, ellers Yahoo! Mail anvender medieforespørgslerne på et skrivebord. Dette betyder, at vi skal specificere hvert enkelt element, som en klasse muligvis gælder for. Hvis din stil ikke anvendes korrekt, er dette normalt det første sted at se. Vi giver klasserne også lidt uklare navne: nogle af de åbenlyse bruges af webmail-klienter, og vi ønsker ikke stilkonflikter med dem.
På den legeme tag, vi har indstillet polstring og margen til 0, ellers får vi en hvid kant omkring e-mailen i iOS-mail. Vi har deaktiveret automatisk justering af tekststørrelse: nogle mobile e-mail-klienter støder automatisk op på tekststørrelsen for at gøre den mere læselig, men den kan bryde designet.Vi skal stadig sørge for, at vi selv indstiller skriftstørrelsen passende (over 12pt; 14pt er god).
Vi har lige fået en stilerklæring i øjeblikket, som vi kan bruge til at tilsidesætte en bestemt bredde og gøre den 100% bred i stedet. Højden: auto bit er vigtig for at sikre, at billeder skaleres i forhold.
Lad os oprette en 640 pixel bred tabel til at indpakke vores indhold i.
tabel bredde = "640" border = "0" cellspacing = "0" cellpadding = "0"
>
tr>
td>
! - vores indhold vil gå ind her ->
img height = "200" width = "640" border = "0" src = "hero.webp"
style = "display: block;" />
span style = "font-size: 12px; fontfamily:
Arial, Helvetica, sans-serif; line-height: 18px; "> Lorem ipsum dolor sidde
amet, consectetur adipiscing elit./span>
/ td>
/ tr>
/ tabel>
Vi har også lagt et billede derinde. Dette ændrer størrelsen til 100% af vores enhedsbredde, og højden tilpasses i overensstemmelse hermed. På en portræt-iPhone er den 320x100px: Da vi ændrer størrelsen på billedet effektivt med det halve, gør vi det Retina-klar.
Uanset hvor vi har brug for, indlejrer vi borde inde i dette masterbord med 100% bredde, så de tilpasser sig selv.
Tekst skal ombrydes automatisk, men vi vil muligvis bumpe skriftstørrelse på mobiltelefoner, så lad os tilføje nogle stilarter til det. p> tags kan arve formatering i webmail-klienter, så vi har brugt spændvidder.
span [class = emailbodytext], a [class = emailbodytext] {font-size: 16px! important; linjehøjde: 21 px! vigtigt;}
Så det er lykkedes os at kontrollere tekst- og billedformatering, når e-mails vises i en mobilklient - lad os prøve noget mere udfordrende.
05. Flydende søjler
I vores design har vi muligvis indhold, der er opdelt i to kolonner; sig to nyhedsartikler. Det ville fungere bedre på en mobil, hvis vi stablede disse i en lang kolonne. Ligesom vi ville gøre på nettet, flyder vi kolonnerne med noget CSS.
td [class = emailcolsplit] {bredde: 100%! vigtigt; flyde: venstre! vigtigt;}
Med denne kode har vi tvunget bredden ud til 100%derefter svævede td> der indeholder vores indhold. Det er meget lettere at flyde en højre søjle under en venstre, men det er muligt at gøre det modsatte.
tabelkant = "0" cellspacing = "0" cellpadding = "0" bredde = "640"
>
tr>
td align = "venstre" valign = "top" bredde = "320"
style = "padding-left: 10px; padding-right: 10px;">
img height = "100" width = "300" border = "0" src = "article1.webp"
style = "display: block;" />
span style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Overskrift One / span> br />
span style = "font-size: 12px; font-family: Arial,
Helvetica, sans-serif; "> Lorem ipsum dolor sid amet, consectetur adipiscing
elit./span>
/ td>
td align = "venstre" valign = "top" bredde = "320"
style = "padding-left: 10px; padding-right: 10px;">
img height = "100" width = "300" border = "0" src = "article2.webp"
style = "display: block;" />
span style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Overskrift to / span> br />
span style = "font-size: 12px; font-family: Arial,
Helvetica, sans-serif; "> Lorem ipsum dolor sid amet, consectetur adipiscing
elit./span>
/ td>
/ tr>
/ tabel>
Vi har to kolonner, der nu stabler i en på en mobilenhed. Hvis der er en tabelcelle mellem to kolonner, som du gerne vil skjule, kan du: bruge display: ingen.
06. Skjul indhold
Hvis du har designet med mobil i tankerne fra starten, skal du ikke have brug for at skjule meget indhold, men der kan være bitmøbler, du gerne vil fjerne. Vi kan bruge display: ingen at gøre dette; her er CSS:
tabel [class = emailnomob], td [class = emailnomob], img [class = emailnomob] {display: none! important;}
Det er let nok at skjule skrivebordsindhold på en mobilenhed; mindre så for at gøre det modsatte: display: ingen ignoreres for eksempel af Gmail på nettet, så mobilindhold vises stadig på nogle stationære platforme. Jeg har hørt, at du kan tilføje en gennemsigtig GIF med 1 pixel, udvide den med en medieforespørgsel og slå et baggrundsbillede bag den, men du ville ikke indrømme det offentligt, ville du?
07. Mobilvenlige knapper
En pænere forretning er at gøre navigationslinks mere venlige for mobilbrugere. Mange e-mail-kampagner har nav-bjælker, som er svære at bruge på mobile enheder, men stadig vigtige, så vi skal være forsigtige med bare at tage dem ud. Lad os i stedet ændre dem til knapper:
table border = "0" cellspacing = "0" cellpadding = "0" width = "100%">
tr>
td align = "center"> a href = "#" style = "skrifttype:
14px; font-familie: Arial, Helvetica, sans-serif; "> Vores hjemmeside / a>
span> | / span>
a href = "#" style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Produkter / a>
span> | / span>
a href = "#" style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Kontakt os / a> / td>
/ tr>
/ tabel>
Og vores CSS:
a [class = emailmobbutton] {display: block! important; font-size: 14px! important; font-vægt: fed! vigtig; polstring: 6px 4px 8px 4px! vigtigt; linjehøjde: 18 px! vigtigt; baggrund: #dddddd! vigtigt; border-radius: 5px! vigtigt; margen: 10 px auto; bredde: 80%; tekstjustering: center; farve: # 111; tekst-dekoration: ingen; tekst-skygge: #fff 1px 0 0;}
Vi fjerner rørene, der adskiller linkene, og anvender derefter CSS for at gøre dem til store mobilvenlige knapper. Vi har sat knappen til 80% bred, så den skal centrere, men stadig udvides til større mobilskærme. Anvendelse af klassen på ankermærket betyder, at vi kan udvide det sammenkædede område, så hele knappen linker igennem. Vi bruger CSS3 til at tilføje lignende grænseradius og tekst-skygge; support er ujævn i nogle e-mail-klienter, men dem, der understøtter medieforespørgsler, understøtter også dette, så vi løber ikke imod disse problemer her.
08. Tabletter
Det er let at antage, at desktop-e-mail fungerer fint på en tablet: de fleste e-mails er designet med 600-700 pixels i bredden, så det passer på en tabletskærm. Men tablets har en berøringsgrænseflade, så der er optimering, vi kan tilføje, hvis vi har mange brugere.
@media-skærm og (min. bredde: 480 pixel) og (maks. bredde: 1024 pixel) {
tabel [class = emailwrapto100pc], img [class = emailwrapto100pc] {bredde: 100%
!vigtig; højde: auto! vigtigt;}
span [class = emailbodytext], a [class = emailbodytext] {font-size: 16px! important;
linjehøjde: 21 px! vigtigt;}
a [class = emailmobbutton] {display: block! important; font-size: 14px! important;
font-vægt: fed! vigtig; polstring: 6px 4px 8px 4px! vigtigt; linjehøjde:
18px! Vigtigt; baggrund: #dddddd! vigtigt; border-radius: 5 pixel
!vigtig; margen: 10 px auto; bredde: 70%; tekstjustering: center; farve: # 111; tekstdekoration:
ingen; tekst-skygge: #fff 1px 0 0;}
}
I denne medieforespørgsel ændrer vi stadig størrelsen på noget af indholdet og gør vores links til flotte store knapper, men vi har taget koden ud for at stable kolonner, fordi vi har mere plads til det på en tablet.
Så vi har set på nogle af de vigtigste teknikker - de fleste af mobildesignudfordringerne kan løses ved at kombinere disse, indtil du får det resultat, du er ude efter. Men hvilke andre udfordringer har vi?
Nogle e-mail-sendeplatforme tager automatisk stiloplysninger fra overskriften og gør det integreret. Det er for det meste nyttigt, men her kan det bryde medieforespørgslerne. De gode platforme giver dig en vis kontrol over, om det sker eller ej, men du vil muligvis give deres support et opkald, hvis du har problemer med at få det gennem værktøjet. Jeg har fundet det som en sidste udvej ved at tage stil tag ud af overskriften og læg den mellem den første tabel> og tr> tags kan hjælpe med at omgå dette også (ja, jeg ved ...).
09. Testning
Som normalt ved kodning af e-mails anbefales det, at du tester dine kampagner grundigt hos de forskellige klienter, inden du foretager din endelige afsendelse. Litmus og Email On Acid er uvurderlige til forhåndsvisning af din kode i forskellige e-mail-klienter, og lignende funktionalitet er tilgængelig som Campaign Monitor og MailChimp. Fractal hjælper dig også med at skrive e-mail-kompatibel kode og derefter teste den. Naturligvis slår intet en række aktuelle enheder, hvis du kan få fat i dem.
Elliot Ross driver Action Rocket, et kreativt bureau, der specialiserer sig i e-mail-udvikling.
Kan du lide dette? Læs disse!
- Enkle, men effektive design af e-mail-nyhedsbreve
- Sådan bygger du en app
- Gratis graffiti skrifttypevalg
- Illustrator tutorials: fantastiske ideer at prøve i dag!
