Lag nyhetsbrev tilpasset alle enheter

Selv om salg og respons fra mobil kanskje ligger noe etter foreløpig, er én ting sikkert: ikke lag nyhetsbrev som ikke er tilpasset mobil. Men hvordan skal du gjøre dette når kodestandarden for e-post er fra da WAP var siste skrik, og få visste hva en smarttelefon var.

Start med blanke ark

Den gamle kodestandarden setter en del begrensinger i forhold til nettsiden din, start derfor med blanke ark og ikke kopier oppsettet fra nettsiden. Hele e-posten skal kodes i tabeller, og gir deg et «rutenett» og legge innholdet i.

Du kan med andre ord ikke bruke:

• Overlappende elementer
• Bakgrunnsbilder
• Video, flash eller liknende
• «Mouseover»-effekter
• Spesialfonter

«God design er så lite design som overhodet mulig»
–Dieter Rams

Ikke glem formålet med e-posten, en enkel og oversiktlig design er derfor å anbefale. En mer kompleks design skaper en mer kompleks kode, og dermed mye større fare for at e-posten feiler hos noen av mottakerne.

Prosent – ikke pixler

For at e-posten din skal fungere best mulig på alle enheter, bør du definere størrelsene i prosent. Det eneste du trenger definere i pixler er maksbredden på selve e-posten, deretter kan alle andre størrelser være prosent av dette. Setter du også tekstmargen i prosent, unngår du en altfor stor marg på mobil (evt. en for liten på større skjermer).

Eksempel på bruk av prosent: table{padding: 0 4%; width: 92%;}

@media screen and (max-width: 640px) lar deg definere forskjellig CSS (stilark) avhengig av skjermoppløsning og enhet. Dette kan du bruke til bl.a. å endre et oppsett med to spalter på nettbrett til én spalte på mobil.

Slik bruker du bilder

Husk at mange e-postlesere blokkerer bildene i e-posten inntil mottakeren velger å vise disse. Du bør derfor sette opp e-posten din slik at den gir mest mulig mening selv uten bilder. Alle andre elementer enn faktiske bilder bør derfor være tekst eller kodet.

Ikke legg tekst i bildene!

Legger du tekst i bildene dine, vil du dessverre skjule deler av innholdet for enkelte mottakere. I tillegg til at lesbarheten på mindre skjermer blir ekstremt dårlig.

Alle bilder bør være høyoppløste (samme bredde som maksbredden på e-posten), slik at alt ser pent ut på mobil, hvor mindre elementer gjerne skaleres opp til full bredde.

Logoen i e-posten bør legges inn i dobbel størrelse (såkalt @2x), da vet du at den alltid fremstår skarp selv på høyoppløste skjermer.

Ikke bruk linjeskift

En av de store forskjellene mellom trykt og digital tekst, er at den digitale er «flytende». Altså kan du aldri vite nøyaktig hvordan teksten vises hos mottakeren. Derfor skal du aldri bruke enkelt linjeskift for å justere linjene, det kan (og vil) resultere i at enkeltord plutselig står alene midt i en tekst.

Du skal med andre ord kun bruke linjeskift ved avsnitt, dette er spesielt viktig når e-posten er responsiv. Dersom du ikke ønsker at et mellomrom skal kunne brytes ved linjeskift, bruker du   (Non-Breaking Space) i stedet for mellomrommet. Dette er et genialt lite triks for å ha kontroll på hvordan linjene deles – gjerne i telefonnumre eller som tusenskilletegn: 22 62 70 00 – alle sifre vil her alltid stå på samme linje.

Sorry, du kan ikke bruke den fonten …

Dagens standard for web støtter at du kan legge til skrifttypen (fonten) du ønsker på nett, det samme gjelder dessverre ikke på e-post. Dermed kan du kun bruke de fontene mottakerne også har, eksempler på dette er: Arial, Verdana, Georgia og Times New Roman.

Se liste over «Web Safe Fonts»

Heldigvis finnes det enkelte løsninger for å til en viss grad omgå dette. Flere e-postlesere støtter i dag bl.a. Google Fonts, men det er viktig at du da har såkalt «fallback» til de sikre fontene (da ikke dette støttes av alle). Bruk i så fall både standard- og @import-metoden for å legge til ønsket font.

Eksempel på fallback: font-family: 'Roboto', Arial, sans-serif;

Som alltid: test, test, test

Uansett hvor perfekt du har fått e-posten til å fungere hos deg, kan du være ganske sikker på det ikke er tilfelle på tvers av alle enheter og e-postlesere. Test derfor så mye som mulig, gjerne underveis slik at du får en lettere jobb med å rette eventuelle feil.

Lær også av statistikken etter utsendelser, slik at du får optimalisert e-posten for formålet ditt. Har du for eksempel mindre viktige elementer som aldri blir klikket på, kan du like gjerne fjerne dette for å få mer fokus på det du ønsker.