Lag perfekte meldinger i alle e-postklienter

Jan 19, 2026

hvordan

For en hvilken som helst e-postmarkedsføringskampanje å jobbe, må e-posten nå innboksen og skille seg ut fra alle de andre. Historien slutter imidlertid ikke der. Din e-post må gjøre godt hvis du vil at abonnentene dine skal åpne e-posten din, klikk gjennom CTA og bli konvertert.

Rendering er et problem fordi hver e-postklient og enhet oppfatter koden annerledes. Kode som fungerer bra med en e-postklient, kan skape et gjengivelsesproblem i en annen. For å gjøre ting enda mer utfordrende, kommer selv de mest brukte e-postklienter med gjengivelse av quirks og problemer. I denne artikkelen vil jeg ta en titt på utfordringene og løsningene for hver av de viktigste e-postkundene.

Outlook

Det ville ikke være en hyperbole å si at vi e-post utviklere rystere ved tanken på utsikter. Den åpenbare grunnen er de mange gjengivende utfordringene som presenteres av denne e-postklienten. Hva som er overraskende er at noen selskaper fortsatt har utsikt som deres standard e-postklient og en liten andel av abonnentene dine er fortsatt lojale mot det.

Ta en titt på noen av utfordringene og hackene for Outlook:

Utfordring: Outlook støtter ikke marginer i & lt; p & gt; og & lt; a & gt;
Hack: Hvis du vil gi marginer, bruk & lt; td & gt; stikkord; store bokstaver skal brukes utenfor taggen, og små bokstaver inline

Utfordring: Padding støttes kun på visse HTML-attributter (ikke inkludert på & lt; div & gt; eller & lt; p & gt; Tags)
Hack: Tabellbasert layout er den sikreste innsatsen for å overvinne dette problemet

Utfordring: Outlook er den eneste e-postklienten som ikke støtter GIFS
Hack: Som noen klienter vil bare se den første rammen av animasjonen din, bør dette inneholde all viktig informasjon, bare kjøre for noen få millisekunder, og gi mening som et frittstående bilde

Utfordring: Outlook støtter ikke Google Fonter, og vil implementere Times New Roman som en fallback
Hack: Legg inn følgende kode ...

 & lt;! - [hvis mso] & gt;
& lt; style type = "tekst / css" & gt;
.Forback-Text {
Font-familie: Arial, Sans-serif;
}
& lt; / style & gt;
& lt;! [endif] - & gt;

Outlook.com.

En ny versjon av Outlook.com ble introdusert tidlig i 2016, men arvsversjonen er fortsatt ikke ute av bruk. Her er utfordringene og hackene som er spesielt for den klienten:

Utfordring: Et unødvendig gap på 4-5px er lagt til under bilder
Hack: Sett visningsegenskapen som "img {display: blokk;}" å fjerne polstring

Outlook.com introduces unnecessary spacing between your images — Outlook.com introduserer unødvendig avstand mellom bildene dine

Utfordring: Støtter ikke RGB-grenser
Hack: Bruk HEX-koder for å angi HTML bakgrunnsfarge

Utfordring: Legger til. # i HREF. Lenker bryter ankeretiketten og skifter CSS til et annet sted
Hack: Bruk domenenavn i stedet for href #

iPhone Native App.

Den innfødte iPhone-e-postappen er den mest brukte klienten, og støtter alle de interaktive elementene du vanligvis finner i e-post: GIF, menyer, trekkspill, nedtelling, skyveknapper og så videre. Videre tillater det også e-postmarkedsføreren å bruke HD-retina-bilder for en fantastisk brukeropplevelse.

IOS10 har blitt enda mer ettertraktet fordi brukerne nå kan justere antall linjer med forhåndsvisningstekst i e-post og til og med velge liste-abonnement. Ikke desto mindre, til tross for disse sterke punktene, har iPhone Native App også visse mangler. La oss ta en titt.

iOS10 users can opt for list-unsubscribe — iOS10-brukere kan velge liste-abonnement

Utfordring: Liten tekst blir automatisk endret
Hack: Minste skriftstørrelse for overskrifter skal være 22px, og for kroppstekst 14px

Utfordring: Utgivelsen av nye iPhone-modeller kan forårsake gjengivelse av problemer
Hack: Fluid layout sikrer at e-post vises riktig på tvers av alle enheter

Utfordring: I IOS9, når Inline-blokk Nivåelementer er ved siden av hverandre i koden med et mellomrom mellom enden av to elementer, det fører til innpakningsproblem
Hack: Bare fjern plassen

Utfordring: iOS10 støtter ikke fast posisjonering
Hack: Ingen nåværende løsning ...

Gmail

Gmail er populær fordi det er så praktisk å bruke. Men det betyr ikke at det er uten utfordringer.

Utfordring: Hvis HTML-filen overskrider 102KB, vil Gmail klippe det
Hack: Unngå unødvendige stilkoder og attributter, og kopier ikke koden fra Microsoft Word eller andre tekstredaktører som det er (dette vil legge til ekstra koder i HTML-filen)

Utfordring: Gmail vil fjerne CSS fra & lt; Style & gt; blokk hvis den overstiger 8142 tegn eller inkluderer feil eller nestet @Declarations.
Hack: Pass på at embedded stiler er korte og fri for skrivefeil

Utfordring: Flyter, marginer, avsnitt og polstring støttes ikke
Hack: Bruk et bordbasert layout med & lt; td & gt; for polstring og marginer

Utfordring: Bakgrunnsbilder virker ikke for ikke-Gmail-ID-er konfigurert i Gmail
Hack: Bruk bakgrunnsfargen som tilbakemelding

Utfordring: Attributtvelgeren virker ikke
Hack: Bruk .klasse velger i stedet

Apple Mail.

Apple Mail er kanskje det nærmeste til en perfekt e-postklient vi har. Den største fordelen med Apple Mail er at det er veldig tilgivende når det gjelder dårlig e-postkoding. Videre, akkurat som iPhone Native App støtter det interaktivitet i e-post, og dermed eliminerer behovet for å vise e-posten i nettleseren.

Du bør huske på to ting mens du kodende e-postmeldinger for Apple Mail-abonnentene dine:

Unngå å bruke Calibri Fonts
Vert din e-post og gi koblingene til serveren, da interne koblinger ikke fungerer i Apple Mail

Yahoo! Post

Som nye og bedre e-postklienter er kommet, Yahoo! E-post er mindre ofte brukt i disse dager. Noen av sine gjengivende utfordringer og hackene er omtalt nedenfor.

Utfordring: Det støtter ikke senter-juster Html attributt
Hack: bruk justere = "senter"

Utfordring: Min-enhetsbredde og Maksimal-enhetsbredde støttes ikke av medieforespørsler
Hack: Bruk breddeattributtet og i stil i stedet for min eller maks bredde
Bruke bredde attributt i stedet for min- eller Maks bredde , enten separat eller innebygd i & lt; Style & gt; stikkord

Utfordring: Float-koder virker ikke
Hack: Legg til justere = "topp" til bildet i spørsmålet

På det notatet har vi nådd slutten av diskusjonen om de fleste typiske gjengivelsesutfordringer for e-postklienter. Ta en titt her for flere utfordringer og løsninger. E-postmarkedsføring, hvis gjort riktig, kan bane nye veier for markedsføringsstrategien din. Hold disse enkle løsningene i tankene, og abonnentene dine vil aldri se en ødelagt e-postlayout i e-postene dine igjen.

Relaterte artikler:

15 Awesome Email Nyhetsbrev Design
10 beste e-post nyhetsbrev verktøy
Master HTML Typografi i e-post

Lag perfekte meldinger i alle e-postklienter

Outlook

Outlook.com.

iPhone Native App.

Gmail

Apple Mail.

Yahoo! Post

hvordan - Mest populære artikler

Lag teksturer med mønsterstempelverktøyet

Lag animert CSS Art

Hvordan lage en super-realistisk fantasy skapning

Hvordan lage glitrende øyne i oljemaling

Bruk chart.js for å slå data til interaktive diagrammer

Hvordan prototype en mobilapp med origami Studio

Skarpe dine skisseferdigheter

Lag en plakat fra en mal i Photoshop

Kategorier