HTML-e-mails voor Gmail ontwikkelen: 12 dingen die u moet weten
Veel e-mailontwikkelaars zijn bekend met de uitdagingen van het maken van HTML-e-mails voor Gmail - het is een van de meer wispelturige clients die er zijn (hoewel het geen Outlook is).
Als u eraan denkt om uw e-mail te testen, kunt u enkele van deze fouten opsporen, net als te beginnen met de juiste code en een beetje begrip. U moet ook uw e-mailstatistieken controleren om te zien hoeveel van uw abonnees Gmail gebruiken. Gelukkig kan Email on Acid je bij beide helpen.
Als je merkt dat je codeert voor Gmail-gebruikers, zijn hier een paar dingen om in gedachten te houden:
1. Gmail heeft verschillende e-mailclients.
Gmail heeft talloze variaties en incarnaties, ondanks het feit dat de meeste mensen het associëren met webmail en mobiele apps. Dit omvat de inbox-client van Gmail, G Suite voor bedrijven en een bijzonder problematische versie van hun Android-client die is geconfigureerd voor POP/IMAP-toegang (zie tip #2 voor meer informatie).
Wil je meer weten? Controleer dit bericht door Remi Parmentier, die op verschillende Gmail-clients heeft geschreven.
2. Gmail-app voor niet-Google-accounts (GANGA) ondersteunt geen achtergrondafbeeldingen.
De Gmail Android-software, die vooraf is geïnstalleerd op de meeste nieuwe Android-telefoons, bevat een functie waarmee u POP en IMAP kunt gebruiken om toegang te krijgen tot niet-Google-accounts. Helaas ondersteunen e-mails die met deze configuratie worden geopend, geen ingesloten stijlen (stijl>) of achtergrondafbeeldingen.
De iOS Gmail-app ondersteunt nu IMAP-accounts vanaf december 2017. Ingesloten CSS en de stijltag worden niet ondersteund in de iOS-versie, zoals in de Android-versie.
3. Gmail knipt berichten die groter zijn dan 102 kB.
Als de grootte van uw e-mail groter is dan 102 kB, toont Gmail de eerste 102 kB samen met het bericht:
Uw e-mail wordt geopend in een nieuw venster wanneer de gebruiker klikt om het volledige bericht te bekijken.
U kunt een paar bytes besparen als u in de buurt van 102 kB bent door onnodige spaties, regelterugloop of opmerkingen te verwijderen. Wanneer u HTML-e-mails verzendt, moet u ook het gebruik van ingesloten foto's en documenten vermijden.
4. Gmail ondersteunt alleen <style> in de <head>.
Ingesloten stijlen (stijl>) worden ondersteund door Gmail. Ingesloten stijlen daarentegen worden alleen aan het begin van uw HTML-tekst ondersteund. Bij het weergeven van e-mails die zijn opgehaald via niet-Google-accounts, ondersteunen de Gmail Android- en iOS-apps helemaal geen stijl> (GANGA).
5. Gmail verwijdert je hele <style>-blokkering als er een fout optreedt.
Als het gaat om het analyseren van ingesloten stijlen, is Gmail extreem kieskeurig. Als het zelfs maar één fout detecteert, wordt het hele blok weggegooid.
Gmail waardeert bijvoorbeeld een '@'-declaratie niet binnen een andere '@'-declaratie. Het gebruik van verschillende stijlblokken en het plaatsen van de Gmail-veilige stijlen in het bovenste blok is een manier om hiermee om te gaan.
Als je stijlblok langer is dan 8192 tekens, verwijdert Gmail het.
Splits je stijlblok in twee stukken als het langer is dan 8192 tekens. Gmail verwijdert het eerste blok dat de limiet van 8192 tekens overschrijdt, evenals alle volgende blokken (het aantal tekens omvat al je stijlblokken).
6. Gmail geeft preheader-tekst weer in het e-mailvoorbeeld.
De preheader van de e-mail verschijnt, net als veel moderne clients, na het onderwerp zonder dat de ontvanger het bericht hoeft te openen. Preheader-tekst kan een zichtbaar onderdeel zijn van de hoofdtekst van uw e-mail of het kan specifiek zijn ontworpen om alleen te verschijnen voordat de abonnee uw e-mail opent (verborgen preheaders). In dit artikel wordt uitgelegd hoe u verborgen preheaders codeert.
7. Gmail ondersteunt geen kenmerkselectors en de meeste pseudo-klassen.
Attribuutselectors (zoals die hieronder) bieden u meer opties als het gaat om het selecteren van componenten in CSS. Gmail accepteert ze niet, ondanks het feit dat ze worden ondersteund door huidige e-mailclients zoals iOS en Apple Mail.In hun webmailclient ondersteunt Gmail geen pseudo-klassen zoals: checked en: active, en ondersteunt alleen: hover.
In hun webmailclient ondersteunt Gmail geen pseudo-klassen zoals: gecontroleerd en: actief, en ondersteunt alleen :hover. Als gevolg hiervan is de interactieve e-mailondersteuning van Gmail beperkt of onbestaande.
Gmail gaf begin 2018 wel aan dat Accelerated Mobile Pages (AMP) voor e-mail beschikbaar zou zijn, waardoor volledig interactieve e-mails in Gmail mogelijk zouden zijn.
8. Gmail geeft een pictogram voor het downloaden van afbeeldingen weer over grote niet-gekoppelde afbeeldingen.
Gmail voegt een pictogram toe aan de inbox waarmee ontvangers foto's kunnen downloaden die niet zijn ingesloten in een URL. Dit kan vervelend zijn voor ontwerpers die willen dat Gmail hun e-maillay-outs niet verprutst.
Het meest voor de hand liggende antwoord is om te garanderen dat foto's groter dan 300x150 pixels worden gekoppeld, maar er zijn nog meer mogelijkheden om te overwegen.
9. Gmail staat geen negatieve CSS-margewaarden toe.
Negatieve marges zijn niet toegestaan in de meeste webmailprogramma's, inclusief Outlook.com en Yahoo! Mail, en Gmail is geen uitzondering.
10. Gmail converteert telefoonnummers en URL's automatisch naar links.
Gmail bevat nu een ankerlink rond telefoonnummers op zowel de desktop- als de mobiele versie. De link lanceert de nieuwe spraak-/chatconsole van Google, die in de desktopversie in de rechterkolom van de Gmail-interface wordt weergegeven.
Om dit te voorkomen, gebruikt u een HTML-object dat Gmail niet herkent in uw telefoonnummer, zoals "­"
Deze entiteit werd in het voorgaande voorbeeld voor elk streepje geplaatst.
Meer voorbeelden en oplossingen vindt u in dit bericht.
Gmail voegt automatisch een link toe aan elke URL of elk e-mailadres dat er geen heeft. Binnen deze tekst transformeert Gmail bijvoorbeeld naam@test.com in:
Hier zijn twee mogelijke oplossingen:
1.) Gebruik een HTML-entiteit die Gmail niet begrijpt, zoals:
Als gevolg hiervan moet naam@test.com worden gewijzigd in:
www.mijndomein.com moet worden vervangen door:
Vervang http://www.mijndomein.com door
2.) Wikkel de URL of het e-mailadres in een anker en formatteer het zoals de rest van uw inhoud. Overweeg het volgende scenario:
11. Gmail gebruikt het HTML5 DOCTYPE.
In Gmail, ongeacht het DOCTYPE dat u opgeeft in uw e-mail, wordt het weergegeven met het HTML5 DOCTYPE. Hierdoor kan uw e-mail er anders uitzien dan wanneer u deze in een browser zou openen.
12. DOCTYPE van Gmail kan extra ruimte onder afbeeldingen creëren.
Het DOCTYPE is gedeeltelijk verantwoordelijk voor deze ruimte. Hier zijn een aantal tijdelijke oplossingen (die ook werken in Outlook.com en Yahoo! Beta):
1.) Geef het afbeeldingselement de weergave: blokstijl.
2.) Voeg in het afbeeldingselement Absbottom uitlijnen toe.
3.) Voeg aan het afbeeldingselement tekst uitlijnen toe.
4.) Stel in de bevattende TD de regelhoogte in op 10px of minder.
5.) Gebruik in de ingesloten TD een lettergrootte van 6px of minder.
Heb je nog andere Gmail-tips?
Als je aanvullende Gmail-technieken of tijdelijke oplossingen kent, deel deze dan in de opmerkingen hieronder! U kunt ook contact met ons opnemen via Facebook of Twitter.
Maar zelfs als u deze tijdelijke oplossingen gebruikt, moet u uw e-mail toch testen om er zeker van te zijn dat deze correct wordt weergegeven in Gmail en alle andere belangrijke e-mailclients. Je krijgt onbeperkte e-mailtests en previews op meer dan 70 clients en apparaten met Email on Acid. Probeer ons platform zeven dagen gratis en kijk wat je ervan vindt.Als er een probleem is, neem dan contact met mij op via Bellen Gmail Klatenservice.
Je bent ook Lees meer:-Hoe log ik in op mijn NETGEAR-router?
