Dit was in ieder geval mijn gedachte toen ik <a href="https://litmus.com/blog/gmail-to-support-responsive-email-design" target="_blank">het bericht van Litmus</a> van afgelopen september las; leve Gmail! Ik was vast niet de enige die toen direct naar zijn gmail app op zijn telefoon ging om te kijken of alle nieuwsbrieven ook eindelijk de mooie mobiele variant lieten zien, in plaats van die in elkaar gepropte desktopversies. Spoiler alert: dat was dus nog niet het geval. Dit bleek toch nog wat ingewikkelder dan ik had verwacht…
<h2>Wachten..</h2>
In eerste instantie hadden wij nog te maken met een stapsgewijze uitrol van de ondersteuning van <a href="https://developers.google.com/gmail/design/reference/supported_css" target="_blank">de responsive code</a> in de verschillende apps. Dit was dan afgerond rond 7 november. Ook na 7 november zag ik tot mijn verbazing dat bij veel nieuwsbrieven nog steeds de desktopversie werd getoond in de Gmail app én in andere apps wél de mobiele variant toonde. Op het web zag ik daarentegen al veel voorbeelden van responsive mails in Gmail, dus er moest meer aan de hand zijn.
<h2>Schone CSS</h2>
Het eerste wat mij opviel is dat in de werkende voorbeelden er gebruik werd gemaakt van hele nette en “kale” CSS. En in de HTML’s die nog steeds niet responsive waren zag ik veel workarounds en toevoegingen die er in de loop van de tijd allemaal aan toegevoegd waren. Denk bijvoorbeeld aan de reeds overbodige <a href="http://freshinbox.com/blog/yahoo-mail-fixes-media-query-bug-yahoo/" target="_blank">“Yahoofix”</a> uit onderstaand voorbeeld:

[caption id="attachment_815" align="aligncenter" width="800"]<img class="wp-image-815" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/04/blog_goed_fout.jpg" alt="" width="800" height="357" /> Werkende CSS / Niet werkende CSS op Gmail[/caption]

Na het opschonen van de CSS merkte ik dat ook dat mails die eerder geen mobiele variant toonden in Gmail dit nu wel deden. Tip: dit was sowieso een handige actie, want ik merkte dat er veel CSS regels in de stylesheet stonden die niet (meer) gebruikt werden, dus om je HTML “lean and mean” te houden is zo’n opschoonactie op zijn tijd helemaal niet zo’n gek idee.
<h2>Met schone CSS alleen ben je er nog niet</h2>
Vol trots dacht ik nu alles gefixed te hebben voor Gmail, maar er zit altijd nog een addertje onder het gras. Mocht je Gmail via je mobiele browser gebruiken, of een ander e-mailadres via POP/IMAP aan je Gmailapp gekoppeld hebben dan gaat deze ondersteuning helaas (nog) aan je voorbij.

Met deze ontwikkeling vanuit Gmail kun je in ieder geval voor een heel groot gedeelte van je ontvangers ervoor zorgen dat hun mobiele ervaring is zoals je voor ogen hebt. Maar dit betekent dus nog niet dat je al je e-mail HTML’s kan gaan ombouwen naar webpagina’s, want je hebt nog altijd te maken met een groep ontvangers die je mails openen op niet geüpdatete Gmail apps, oudere Android versies en… Outlook.
<h2>Outlook</h2>
Qua codering moet je altijd rekening houden met de “zwakste schakel” in de keten in dat is op het gebied van e-mail HTML nog altijd Outlook. Sinds afgelopen augustus hebben Litmus en Microsoft weliswaar de handen ineengeslagen om, vanuit marketeer perspectief, <a href="https://litmus.com/blog/litmus-and-microsoft-partner-to-make-email-better" target="_blank">Outlook te verbeteren</a>. Ze zijn nog in de inventariserende fase, dus hier zijn nog geen concrete oplossingen/verbeteringen uitgekomen. Dus tot die tijd zal je als back-up nog altijd je HTML’s moeten opbouwen in tabellen en moet je inline je styles mee geven. Mocht je je emails <a href="https://litmus.com/blog/understanding-responsive-and-hybrid-email-design" target="_blank">hybrid</a> gebouwd hebben, dan zal je je mails nog steeds vol moeten bouwen met specifieke “Outlook fixes” zodat je mails er goed uit blijven zien in de verschillende Outlook versies.
<h2>Testen, testen en nog eens testen</h2>
Zodra je klaar bent met het ombouwen van je HTML, of je hebt deze verandering aangegrepen om je complete template een opfrisbeurt te geven ,is het altijd nog van belang om deze door en door te testen op allemaal verschillende devices en clients.

<img class="aligncenter wp-image-816" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/04/blog_testentestentesten-1024x971.jpg" alt="" width="800" height="758" />
Om te zien hoe mails renderen op verschillende toestellen worden vaak test-tools als Litmus en Email on Acid gebruikt. Als je blind vaart op deze tools kun je nu vaak nog wachten totdat je een ons weegt voordat je een mobiele variant te zien gaat krijgen in de Gmail app. De mails kun je vaak testen op alle iOS devices van nu tot 3 jaar geleden, maar als je wilt zien hoe je mails het doen in Gmail of op Android devices kom je er bekaaid van af met maar 3 of 4 opties en ook nog eens varianten waarin nog oude apps worden gebruikt. Dus check altijd nog op een eigen device(s), om zeker te weten dat je mail zich gedraagt zoals hij zou moeten.
<h2>Tot slot</h2>
Als conclusie kun je dus stellen dat er gelukkig nog steeds ontwikkeling is op het gebied van clients en marketing e-mails én dat het publiek voor je mooie mobiele versies een stuk groter is geworden. Maar vergeet niet nog altijd rekening te houden met ontvangers die deze dus niet te zien krijgen.