.svg)
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!
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.
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.
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.
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.
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.
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.
