Nieuwe mogelijkheden in email met CSS3

E-mail designers en developers opgelet! In deze blog vertellen we je alles over nieuwe designmogelijkheden in e-mail door opkomst van CSS3. Sinds 2011 wordt door W3C geleidelijk gebouwd aan een nieuwe CSS standaard (CSS3). Hierdoor is meer mogelijk op het gebied van CSS styling. Deze styling code werd al veel gebruikt binnen web development en langzaam maar zeker ondersteunen nu ook steeds meer e-mailclients de nieuwe CSS standaard. De hoogste tijd dus voor een blik op de nieuwe mogelijkheden! 


Wat is CSS3?

Sinds 2011 wordt door W3C geleidelijk gebouwd aan een nieuwe CSS standaard (CSS3). Hierdoor is in de toekomst meer mogelijk op het gebied van CSS. Deze styling code wordt al veel gebruikt in web development, maar is ook een standaard die steeds meer toegepast wordt in e-mails.


Progressive CSS3 e-mailtemplates

Het uitgangspunt voor het maken van een e-mail met CSS3 elementen verschilt wezenlijk van het maken van een template in de huidige aanpak.  


Uitgangspunt van een e-mail zonder CSS3

‍Er wordt een design gemaakt en het email template moet dit zo precies mogelijk opvolgen. Daar waar in bepaalde clients problemen ontstaan, worden fixes gemaakt om een zo goed mogelijke oplossing te vinden.


Uitgangspunt van een progressive email met CSS3 elementen

‍Er wordt een design gemaakt waarbij CSS3 elementen nodig zijn. In clients die dit ondersteunen worden deze elementen getoond en de clients die deze niet ondersteunen wordt een versimpelde weergave of een fallback getoond.


Voor- en nadelen van een e-mailtemplate met CSS3 elementen

Voor- en nadelen van een e-mailtemplate met CSS3 elementen


Voorbeelden van CSS3 elementen


Ondersteuning van Media Queries
Media Queries gebruiken we veelvuldig om emails responsive te maken, waarbij de CSS aangepast kan worden op basis van de grootte van het scherm. Alle elementen die met CSS gemaakt worden, kunnen aangepast worden met media queries.


Borderradius
In plaats van plaatjes met afgeronde hoeken te gebruiken, kun je met CSS3 gebruik maken van borderradius die o.a. werkt op het oude border CSS element om een lijntje om een element te plaatsen. Een borderradius werkt ook op achtergronden en afbeeldingen, wat voor nieuwe ontwerpmogelijkheden zorgt.


Background gradients
Het is met CSS3 mogelijk om gebruik te maken van en kleurverloop in bijvoorbeeld de achtergrond van buttons en tekstblokken.


Pseudo-elements
Pseudo-elementen als :hover en :active worden al lang gebruikt voor bijvoorbeeld hover-effecten. Handig voor bijvoorbeeld een image carousel. CSS3 ondersteunt ook enkele nieuwe pseudo-elements zoals :before en :after. Deze kunnen bijvoorbeeld gekoppeld worden met het style element “content” om andere tekst te laten zien op mobiel / desktop. Tot slot kunnen de :first-letter en :first-line elementen gebruikt worden om de eerste letter van een woord en de eerste zin van een paragraaf aan te passen.


Houd rekening met je doelgroep

Ga je aan de slag met CSS3? Houd dan wel rekening met de e-mailclients en devices die door je doelgroep worden gebruikt. Op basis hiervan kan de afweging gemaakt worden of er gebruik gemaakt kan worden van een aantal CSS3 elementen of niet. Hieronder een voorbeeld van een analyse.

Wat als CSS3 elementen niet worden ondersteund?

Gmail ondersteunt geen media queries. CSS elementen worden wel ondersteund. Als het nodig is, kan met een min-width element op de container tabellen de breedte van de email vastgezet worden op desktop formaat. Met media queries wordt de min-width weer weggehaald voor clients die dit wel ondersteunen. Voor outlook hebben we een oplossing waarbij we specifieke code kunnen plaatsen voor outlook. De VML oplossing kan gebruikt worden voor achtergrondafbeeldingen.

Conclusie

Emaildevelopment heeft voor 95% te maken met het omgaan van de beperkingen die populaire emailclients hebben. Het is dus belangrijk om te onderzoeken welke clients er gebruikt worden binnen je doelgroep. Als blijkt dat meeste gebruikers hun e-mails lezen op bijvoorbeeld iPhone kan overwogen worden om gebruik te maken van een progressive E-mailtemplate aanpak waarbij CSS3 en mediaqueries gebruikt worden om meer designelementen te gebruiken. Voor de overige clients kan een versimpelde worden getoond.

Contact

MEer weten?

Neem contact met ons op, dan kijken we binnenkort samen - en onder het genot van een kop koffie - hoe we jouw data-driven campagnes kunnen opzetten of verbeteren.
Contact
GO!
Privacybeleid© 2018 Rapidsugar is ISO27001 gecertificeerd
X

rapidsugar lab mails

Meld je aan

Bedankt voor je aanmelding!
Oops! Something went wrong while submitting the form.