Maak perfecte berichten in alle e-mailclients

Sep 16, 2025

Procedures

Voor elke e-mailmarketingcampagne om te werken, moet de e-mail de inbox bereiken en onderscheiden van de alle anderen. Het verhaal eindigt echter niet. Uw e-mail moet goed maken als u wilt dat uw abonnees uw e-mail opent, klikt u door de CTA en wordt u geconverteerd.

Weergave is een probleem omdat elke e-mailclient en -apparaat de code anders waarneemt. Code die goed werkt met één e-mailclient kan een weergave-nummer in een andere maken. Om dingen nog uitdagender te maken, komen zelfs de meest gebruikte e-mailclients met het renderen van quirks en problemen. Neem in dit artikel een kijkje op de uitdagingen en tijdelijke oplossingen voor elk van de belangrijkste e-mailclients.

Vooruitzicht

Het zou geen hyperbool zijn om te zeggen dat we de ontwikkelaars e-mailen tegen de gedachte aan Outlook. De voor de hand liggende reden is de talrijke weergave uitdagingen die door deze e-mailclient worden gepresenteerd. Wat is verrassend, is dat bedrijven nog steeds vooruitzicht hebben als hun standaard e-mailclient en een klein deel van uw abonnees zijn er nog steeds loyaal aan.

Bekijk enkele van de uitdagingen en hacks voor Outlook:

Uitdaging: Outlook ondersteunt geen marges in & LT; P & GT; en & LT; A & GT;
Hack: Als u marges wilt verstrekken, gebruikt u de & LT; TD & GT; label; hoofdletters moeten buiten de tag worden gebruikt en inline letters

Uitdaging: Vulling wordt alleen ondersteund op bepaalde HTML-kenmerken (niet inbegrepen & LT; DIV & GT; of & LT; P & GT; Tags)
Hack: Op tafel gebaseerde lay-out is de veiligste gok om dit probleem te overwinnen

Uitdaging: Outlook is de enige e-mailclient die geen GIFS ondersteunt
Hack: Aangezien sommige klanten alleen het eerste frame van uw animatie zien, moet dit alle belangrijke informatie bevatten, alleen een paar milliseconden uitlopen en logisch zijn als een op zichzelf staande afbeelding

Uitdaging: Outlook ondersteunt de Google-lettertypen niet en implementeert Times New Roman als een fallback
Hack: Breng de volgende code in. ...

 & LT;! - [Als MSO] & GT;
& LT; Style Type = "Tekst / CSS" & GT;
.val-tekst {
Font-familie: Arial, Sans-Serif;

& LT; / STYLE & GT;
& LT;! [ENDIF] - & GT;

Outlook.com

Een nieuwe versie van Outlook.com is begin 2016 geïntroduceerd, maar de Legacy-versie is nog steeds niet buiten gebruik. Hier zijn de uitdagingen en hacks die specifiek zijn voor die klant:

Uitdaging: Een onnodige opening van 4-5px wordt onderstaande afbeeldingen toegevoegd
Hack: Stel het display-eigenschap in als "IMG {DISPLAY: BLOK;}" om de vulling te verwijderen

Outlook.com introduces unnecessary spacing between your images — Outlook.com introduceert onnodige afstand tussen uw afbeeldingen

Uitdaging: Ondersteunt geen RGB-randen
Hack: Gebruik hex-codes om HTML-achtergrondkleur in te stellen

Uitdaging: Toevoeging in href Links breekt het ankertag en verschuift de CSS naar een andere plaats
Hack: Gebruik domeinnaam in plaats van href #

iPhone Native-app

De Native iPhone-e-mail-app is de meest gebruikte client en het ondersteunt alle interactieve elementen die u typisch vindt in e-mail: gifs, menu's, accordeon, aftellen, schuifregelaars enzovoort. Bovendien maakt het ook de e-mailmarketer om high-definition retinaafbeeldingen te gebruiken voor een geweldige gebruikerservaring.

iOS10 is des te gedegeerd geworden omdat gebruikers nu het aantal regels van de voorbeeldtekst in e-mails kunnen aanpassen en zelfs kiezen voor lijst-afmelden. Desalniettemin heeft iPhone Native-app ondanks deze sterke punten ook bepaalde tekortkomingen. Laten we kijken.

iOS10 users can opt for list-unsubscribe — IOS10-gebruikers kunnen kiezen voor lijst-unsubscribe

Uitdaging: Kleine tekst wordt automatisch verkleind
Hack: De minimale lettergrootte voor headers moet 22 px zijn en voor tekst 14px

Uitdaging: De release van nieuwe iPhone-modellen kan het verlenen van weergaveproblemen veroorzaken
Hack: Vloeistofindeling zorgt voor e-mails correct weergave op alle apparaten

Uitdaging: In iOS9, wanneer inline-blok Niveau-elementen staan naast elkaar in de code met een spatie tussen de uiteinden van twee elementen, het leidt tot wikkelprobleem
Hack: Verwijder eenvoudig de ruimte

Uitdaging: iOS10 ondersteunt geen vaste positionering
Hack: Geen huidige oplossing ...

Gmail

Gmail is populair omdat het zo handig is om te gebruiken. Dat betekent echter niet dat het zonder zijn uitdagingen is.

Uitdaging: Als uw HTML-bestand hoger is dan 102KB, klampt Gmail IT
Hack: Vermijd onnodige stijltags en -attributen en kopieer de code niet van Microsoft Word of andere teksteditors zoals het is (dit voegt extra tags toe aan het HTML-bestand)

Uitdaging: Gmail verwijdert CSS van de & LT; STYLE & GT; blokkeren als deze groter is dan 8142 tekens of fouten of genest @declaraties
Hack: Zorg ervoor dat embedded stijlen kort en vrij zijn van typos

Uitdaging: Drijvers, marges, paragrafen en opvulling worden niet ondersteund
Hack: Gebruik een op tafel gebaseerde lay-out met & LT; TD & GT; Voor opvulling en marges

Uitdaging: Achtergrondafbeeldingen werken niet voor niet-Gmail-ID's geconfigureerd in Gmail
Hack: Breng de achtergrondkleur aan als fallback

Uitdaging: Attribuut selector werkt niet
Hack: Gebruik .klasse selector in plaats daarvan

Apple Mail

Apple-mail is misschien het dichtst bij een perfecte e-mailclient die we hebben. Het belangrijkste voordeel van Apple Mail is dat het erg vergevingsgezind is als het gaat om slechte e-mailcodering. Bovendien, net als IPhone Native APP, ondersteunt het interactiviteit in e-mails, waardoor de noodzaak om de e-mail in de browser te bekijken.

Je moet twee dingen in gedachten houden tijdens het coderen van e-mails voor je Apple Mail-abonnees:

Vermijd het gebruik van Calibri-lettertypen
Host uw e-mail en geef de links op de server, omdat interne links niet werken in Apple Mail

Yahoo! Mail

Zoals nieuwe en betere e-mailclients zijn aangekomen, Yahoo! Mail wordt tegenwoordig minder vaak gebruikt. Sommige van zijn weergave uitdagingen en de hacks worden hieronder besproken.

Uitdaging: het ondersteunt de middelpunt HTML-kenmerk
HACK: GEBRUIK align = "Center"

Uitdaging: min-apparaatbreedte en Max-apparaat-breedte worden niet ondersteund door media-query's
Hack: Gebruik de breedte-attribuut en amp; / of in stijl in plaats van min of max-breedte
Gebruik de breedte kenmerk in plaats van min- of Maximale wijdte , afzonderlijk of ingebed in de & LT; STYLE & GT; label

Uitdaging: Float-tags werken niet
Hack: Toevoegen align = "top" tot het betreffende beeld

Op die nota hebben we het einde van de discussie bereikt over de meeste typische weergave uitdagingen voor e-mailclients. Kijk eens hier voor meer uitdagingen en tijdelijke oplossingen. E-mailmarketing, indien goed gedaan, kan nieuwe wegen voor uw marketingstrategie. Houd deze eenvoudige tijdelijke oplossingen in gedachten en uw abonnees zullen nooit een gebroken e-maillay-out in uw e-mails ooit zien.

Gerelateerde artikelen:

15 GEWELDIGE E-mail nieuwsbriefontwerpen
10 beste e-mail nieuwsbriefhulpmiddelen
Master HTML-typografie in e-mail

Maak perfecte berichten in alle e-mailclients

Vooruitzicht

Outlook.com

iPhone Native-app

Gmail

Apple Mail

Yahoo! Mail

Procedures - Meest populaire artikelen

Aan de slag met vlamschilder

Hoe een gezicht voor animatie

Aan de slag met roest

Cache in op de prestatiebooster van de BBC

4 tips om uw ontwikkelaarsvaardigheden te ontwikkelen

Hoe digitale hulpmiddelen te gebruiken om een handgetekende uitstraling te maken

Bouw een aangepaste Maya-interface

Hoe meer te krijgen van digitale texturen

Categorieën