We worden steeds mobieler: internetten, whatsappen, bankieren en mailen, we doen het graag en veel via onze smartphones. En dan is er niets vervelender dan een e-mail ontvangen die niet te lezen is op het scherm van je mobiel. De oplossing lijkt simpel: maak je content mobile proof!
In meerdere blogs is al geschreven over de ‘Fluid Design’-techniek, waarmee je e-mailontwerpen met één kolom mobile proof kunt maken. Dat is dan ook meteen de beperking: veel designs bestaan uit meer dan één kolom. Bij een e-mailontwerp met meerdere kolommen, ontstaat direct een ander tergend probleem bij de ontvanger: te veel smalle kolommen op zijn of haar scherm, waarin de content tegen elkaar is gedrukt. En dus nog steeds niet te lezen is. Wat moet je dan?
Meerdere kolommen?
De oplossing om ook e-mailontwerpen met meerdere kolommen mobile proof te maken is “Responsive Design”. Een “Responsive Design” is een design waarvan de lay-out zich aanpast aan de beschikbare ruimte op het scherm van de mobiel of iPad. Tot voor kort leek het niet mogelijk om het Responsive Design-principe toe te passen voor e-mail. Uit ons onderzoek blijkt echter dat Responsive Design voor e-mails is wel degelijk mogelijk is. En dat schept nieuwe mogelijkheden.
Een Responsive Design heeft de zelfde basis als Fluid Design, maar gaat een stap verder. De lay-out wordt niet alleen versmald, maar wordt ook echt veranderd. Heb je bijvoorbeeld twee kolommen in je nieuwsbrief, dan blijven deze op een smaller scherm niet naast elkaar staan maar komen onder elkaar te staan. Daardoor blijft het bericht goed te lezen. Responsive Design past het weergegeven ontwerp dus automatisch aan, in tegenstelling tot Fluid Design dat de kolommen alleen in de breedte schaalt.
Het verschil is duidelijk. Het rechtervoorbeeld is opgemaakt volgens het Responsive Design-principe en daardoor beter leesbaar.
De basis
De basis van een Responsive Design programmeren is simpel. Het is namelijk mogelijk om een ‘Align Attribuut’ op de ‘Tabel Tag’ toe te passen. Daardoor kunnen tabellen naast elkaar worden gezet. In de code ziet dat er als volgt uit:
De Wrapper-tabel is schaalbaar. Binnen de Wrapper staan twee nieuwe tabellen. Alleen de bovenste tabel bevat een Align Attribuut.
Omdat de eerste (linker) tabel een Align Attribuut heeft met de waarde “left” komen tabellen naast elkaar te staan in plaats van onder elkaar.
Wanneer de ruimte kleiner wordt, komen de twee tabellen onder elkaar te staan. De grijze kleur is van de Wrapper Tabel.
CSS en Media Query’s
Wil je dit kunnen gebruiken voor alle mailclients, dan zijn nog wel een aantal aanvullende stappen nodig. Zo past Outlook 2007 (en 2010) een 3px marge aan de linkerkant en de rechterkant van die tabel toe zodra er een Align Attribuut op een Tabel Tag wordt gezet. Dit is op te lossen met CSS en Media Query’s.
Misschien denk je nu: ‘En de Gmail-app dan? Die ondersteunt geen Media Queries.’ Dat klopt. In Gmail komen beide tabellen wel onder elkaar te staan, maar ze worden niet 100% breed getoond zoals in de Media Query is gedefinieerd. De tabellen behouden dan gewoon de breedte die in de HTML is gedefinieerd.
In de Gmail-app wordt de breedte van de twee tabellen niet aangepast door de Media Query maar blijft de breedte die in de HTML is gedefinieerd behouden.
Conclusie
Ondanks een aantal haken en ogen, is er steeds meer mogelijk om uw template mobile proof te maken. En dat is fijn, gezien het feit dat gemiddeld inmiddels 18% van alle e-mails via een mobiel apparaat gelezen wordt en dat percentage snel toeneemt. In juli 2011 stond dit aantal op 14%, tegenover 86% via de desktop. In december 2011 was dit aantal al gestegen naar 21%, tegenover 79% via desktop.
Desktop vs. Mobiele OS
Enne, als je dan toch zo bezig bent met het mobile proof maken van je content, vergeet dan ook niet je formulieren mee te nemen! Hoe je dat doet? Daarover vertel ik in mijn volgende blog meer.
