Skapa perfekta meddelanden i alla e-postklienter

Sep 12, 2025

Hur

För att någon e-postmarknadsföringskampanj ska fungera måste e-posten nå inkorgen och sticka ut från alla andra. Men historien slutar inte där. Din e-post måste göra det bra om du vill att dina abonnenter ska öppna ditt e-postmeddelande, klicka på CTA och konverteras.

Rendering är ett problem eftersom varje e-postklient och enhet uppfattar koden annorlunda. Kod som fungerar bra med en e-postklient kan skapa en renderingsproblem i en annan. För att göra saker ännu mer utmanande, kommer även de mest använda e-postklienterna att göra quirks och problem. I den här artikeln tar jag en titt på utmaningarna och lösningarna för var och en av de viktigaste e-postklienterna.

Syn

Det skulle inte vara en hyperbole att säga att vi e-post utvecklare shudder vid tanken på Outlook. Den uppenbara orsaken är de många renderingsutmaningar som presenteras av den här e-postklienten. Vad som är förvånande är att alla företag fortfarande har utsikter som sin standard e-postklient och en liten del av dina abonnenter är fortfarande lojala mot det.

Ta en titt på några av utmaningarna och hacken för Outlook:

Utmaning: Utsikter stöder inte marginaler i & lt; P & GT; och & lt; A & GT;
Hacka: Om du vill tillhandahålla marginaler, använd & lt; td & gt; märka; versaler ska användas utanför taggen och små bokstäver inline

Utmaning: Padding stöds endast på vissa HTML-attribut (ej inklusive på & lt; div & gt; eller & lt; P & GT; Taggar)
Hacka: Bordsbaserad layout är den säkraste insatsen för att övervinna denna fråga

Utmaning: Outlook är den enda e-postklienten som inte stöder GIFS
Hacka: Eftersom vissa kunder bara kommer att se den första ramen för din animering, bör detta innehålla all viktig information, kör endast för några millisekunder och är meningsfull som en fristående bild

Utmaning: Outlook stöder inte Google-teckensnitt, och kommer att genomföra tider nya romerska som en fallback
Hacka: Bädda in följande kod ...

 & lt;! - [IF MSO] & GT;
& LT; Style Type = "Text / CSS" & GT;
.Förback-text {
Font-familj: Arial, sans-serif;
}
& LT; / Style & GT;
& lt;! [Endif] - & GT;

Outlook.com

En ny version av Outlook.com introducerades i början av 2016, men den äldre versionen är fortfarande inte ute. Här är utmaningarna och hackarna speciellt för den klienten:

Utmaning: Ett onödigt gap på 4-5px läggs till under bilderna
Hacka: Ställ in displayfastigheten som "IMG {display: block;}" För att ta bort vadderingen

Outlook.com introduces unnecessary spacing between your images — Outlook.com introducerar onödigt avstånd mellan dina bilder

Utmaning: Stöder inte RGB-gränser
Hacka: Använd HEX-koder för att ställa in HTML-bakgrundsfärg

Utmaning: Lägga till # i href Länkarna bryter ankaretiketten och skiftar CSS till en annan plats
Hacka: Använd domännamn snarare än href #

iPhone Native App

Den infödda iPhone-e-postappen är den mest använda klienten, och den stöder alla interaktiva element som du vanligtvis hittar i e-post: gifs, menyer, dragspel, nedräkningar, skjutreglage och så vidare. Dessutom tillåter det också e-postmarknadsföraren att använda HD-näthinnans bilder för en fantastisk användarupplevelse.

IOS10 har blivit allt mer eftertraktat eftersom användare nu kan justera antalet linjer för förhandsgranskningstext i e-postmeddelanden och till och med välja lista-unsubscribe. Trots dessa starka punkter har iPhone Native App också vissa brister. Låt oss ta en titt.

iOS10 users can opt for list-unsubscribe — IOS10-användare kan välja lista-unsubscribe

Utmaning: Liten text ändras automatiskt
Hacka: Minsta teckensnittstorlek för rubriker ska vara 22px och för kroppstext 14px

Utmaning: Utgåvan av nya iPhone-modeller kan orsaka renderingsproblem
Hacka: Fluid Layout garanterar e-postdisplayen ordentligt över alla enheter

Utmaning: I iOS9, när inline-block Nivåelement är bredvid varandra i koden med ett mellanslag mellan ändarna av två element, det leder till förpackningsfråga
Hacka: Helt enkelt ta bort utrymmet

Utmaning: IOS10 stöder inte fast positionering
Hacka: Ingen aktuell lösning ...

Gmail

Gmail är populär eftersom det är så bekvämt att använda. Men det betyder inte att det är utan sina utmaningar.

Utmaning: Om din HTML-fil överstiger 102kb, kommer Gmail att klippa den
Hacka: Undvik onödiga stil-taggar och attribut, och kopiera inte koden från Microsoft Word eller andra textredaktörer som det är (det här lägger till extra taggar till HTML-filen)

Utmaning: Gmail tar bort CSS från & lt; stil & gt; blockera om det överstiger 8142 tecken eller innehåller fel eller nestade @Declarations
Hacka: Se till att inbäddade stilar är korta och fria från typsnitt

Utmaning: Floats, marginaler, stycken och vaddering stöds inte
Hacka: Använd en tabellbaserad layout med & lt; td & gt; För vaddering och marginaler

Utmaning: Bakgrundsbilder fungerar inte för icke-Gmail-ID-ID som är konfigurerade i Gmail
Hacka: Applicera bakgrundsfärgen som fallback

Utmaning: Attributväljare fungerar inte
Hacka: Använda sig av .klass väljare istället

Äppelpost

Apple Mail är kanske det närmaste till en perfekt e-postklient vi har. Den största fördelen med Apple Mail är att det är mycket förlåtande när det gäller dålig e-postkodning. Dessutom, precis som iPhone Native App, stöder det interaktivitet i e-postmeddelanden, vilket eliminerar behovet av att visa e-postmeddelandet i webbläsaren.

Du bör tänka på två saker medan du kodar e-postmeddelanden för dina Apple-postabonnenter:

Undvik att använda Calibri-teckensnitt
Värd din e-postadress och ge länkarna till servern, eftersom interna länkar inte fungerar i Apple Mail

Yahoo! Post

Som nya och bättre e-postklienter har anlänt, Yahoo! Mail används mindre ofta idag. Några av sina rendering utmaningar och hacken diskuteras nedan.

Utmaning: Det stöder inte mittjustera HTML-attribut
Hack: Använd Rikta = "Center"

Utmaning: min-enhet-bredd och Max-enhet-bredd stöds inte av medifrågor
Hacka: Använd breddattribut och amp; / eller i stil istället för min eller maxbredd
Använd bredd attribut istället för min- eller maximal bredd , antingen separat eller inbäddad i & lt; stil & gt; märka

Utmaning: Float-taggar fungerar inte
Hacka: Lägg till Justera = "Top" till den aktuella bilden

På den noten har vi nått slutet av diskussionen om de mest typiska utmaningarna för e-postklienter. Ta en titt här för fler utmaningar och lösningar. E-postmarknadsföring, om den är rätt, kan bana nya vägar för din marknadsföringsstrategi. Håll dessa enkla lösningar i åtanke och dina abonnenter kommer aldrig att se en trasig e-postlayout i dina e-postmeddelanden någonsin igen.

Relaterade artiklar:

15 AWESOME Email Nyhetsbrev Designs
10 bästa e-postnyhetsbrevverktyg
Master HTML Typografi i e-post

Skapa perfekta meddelanden i alla e-postklienter

Syn

Outlook.com

iPhone Native App

Gmail

Äppelpost

Yahoo! Post

Hur - Mest populära artiklar

Hur man ritar en häst

Skapa din egen kalligrafiska borste i Illustrator

Hur man skannar en person på mindre än fem minuter

Skapa speciella utskriftsfinisher i InDesign

Skapa spöklika texturer med blandade media tekniker

Skapa en wobbly texteffekt med javascript

Hur man målar magiska glödande runor

Hur man kombinerar målarens akvarelluppsättningar

Kategorier