Share
Op basis van enkele van onze recente bevindingen met betrekking tot de staat van CSS in e-mail, vond ik dat het hoog tijd was om de zaken een beetje op te schudden. Dus hier gaat - CSS3 in e-mail leeft. Ok, dus het spijt me als ik je je toast laat doen, daar. Ik weet dat je denkt: "Maar ... Het is nog steeds grotendeels experimenteel ... In de browser, om op te starten!" Ja, CSS3-ondersteuning is zelfs meer wispelturig tussen een groot aantal e-mailclients die CSS2 niet eens goed kunnen krijgen. Maar dat betekent niet dat het te vroeg is om iets aan te raken.
In dit artikel zal ik naast enkele praktische voorbeelden twee eigenschappen doornemen die u in uw e-mailsjablonen kunt gebruiken. Dus, poets je toast af en we gaan aan de slag.
Als u al een tijdje HTML-e-mailtemplates ontwerpt, weet u dat het vaak bijna onmogelijk is om te voorspellen wat voor soort CSS-gerelateerde quirks worden weergegeven bij het testen van uw ontwerp voor de belangrijkste e-mailclients. Gmail is bijvoorbeeld berucht geweest voor het verwijderen van CSS die niet inline is (en een tijdlang geen tabelcadypads en cellspacing herkent), terwijl sommige clients gewoonweg kiezen om stijlen helemaal weg te doen..
Als u nog niet bekend bent met het ontwerpen van HTML-e-mailsjablonen, is dit waarschijnlijk het meest onheilspellende dat u kunt lezen. Maar vrees niet, er is veel informatie om je op de hoogte te brengen. Geef 24 uur lang "Rock Solid HTML Emails" een laag en je zult zien dat er geen reden is om de zefrank aan te zetten..
Hoe dan ook, gezien het feit dat ontwerpers al genoeg problemen hebben met CSS2-ondersteuning in e-mailclients, zou CSS3 dan niet een beetje een droom moeten zijn? Nou, lees verder.
Ja en nee. Voor het ja-geval zijn er een aantal populaire e-mailclients die behoorlijk robuuste CSS3-ondersteuning hebben (daarover later meer). Het goede nieuws is dat een paar van de CSS3-eigenschappen die bij deze klanten worden weergegeven, elders netjes worden verlaagd, wat betekent dat er altijd een terugvaloptie is. Maar dat gezegd hebbende, als u ervoor wilt zorgen dat uw e-mailsjablonen bijna-consistent over de grote e-mailclients worden weergegeven, dan is CSS3 niets voor u.
Als u in onze e-mail naar onze handleiding voor CSS gaat, ziet u dat er een paar e-mailclients zijn die gedeeltelijke of volledige ondersteuning bieden voor een aantal CSS3-eigenschappen. En voor het grootste deel hebben ze één ding gemeen: Webkit.
Hoe uw e-mailsjabloon eruitziet in Outlook is niet zoiets als hoe het eruit ziet op uw Blackberry, of wanneer u uw webmail in Firefox bekijkt.
Als je de zegen hebt om altijd op een Mac te werken, je e-mail op je iPhone te controleren en de tijd te nemen door op je iPad te bladeren, dan heb je één, redelijk consistente kijk op internet. Helaas hebben de rest van ons te maken met verschillende gradaties van CSS-ondersteuning op een aantal leveranciersplatforms. Hoe uw e-mailsjabloon eruitziet in Outlook is niet zoiets als hoe het eruit ziet op uw Blackberry, of wanneer u uw webmail in Firefox bekijkt.
Het is dus geen verrassing dat Apple-apparaten dezelfde rendering-engine gebruiken (de software die beslist over het weergeven van HTML- en CSS-code) in hun e-mailapps en de Safari-browser. Voor ontwerpers is het waarschijnlijk minder een verrassing dat deze engine Webkit is en dat de CSS3-ondersteuning ervan relatief goed is.
Dat gezegd hebbende, zorgen Webkit e-mailclients (Apple Mail, iPhone & iPad Mail) voor ongeveer 20% van alle e-mailclients die in het algemeen worden gebruikt. Wat echter echt telt, zijn de e-mailclients die uw abonnees gebruiken. Een Mac-softwareontwikkelaar kan bijvoorbeeld bijna 100% van zijn klanten hun nieuwsbrief laten bekijken op Apple-apparaten.
Laten we met dit in gedachten eens kijken naar enkele CSS3-eigenschappen die nu in je inbox kruipen.
Welkom bij het laatste nummer van Widgets Inc monthly widget roddels.
Drop en innerlijke schaduwen toevoegen met schaduw tekst is een niet-destructieve manier om je tekst te versieren. Niet alleen kan het u redden van het anders maken van hetzelfde effect met behulp van een afbeelding, maar het ziet er goed uit in clients waar schaduw tekst wordt niet ondersteund.
Bekijk het in een webbrowser.
Het gebruik van afgeronde hoeken op uw anders boxy lay-out of vierkante knoppen is al een veelgebruikte techniek op het web. Het kan uw e-mailsjablonen ook een zachtere, modernere uitstraling geven in de bovenstaande e-mailclients, plus veilig terugkeren naar rechte hoeken wanneer dit niet wordt ondersteund.
Met de aankondiging dat border-radius zal formeel worden geïmplementeerd in IE9, we kunnen verwachten meer van het gebruik ervan te zien.
Sommige van de meer extreme toepassingen van CSS3 in e-mailsjablonen zijn te vinden in situaties waarin de ontvangers een zeer beperkte set e-mailclients gebruiken. Een goed voorbeeld hiervan is de eerder genoemde Mac-ontwikkelaar. Panic, de leveranciers van 'schokkend goede Mac-software', stuurt verbazingwekkende facturen nadat je een van hun titels hebt gekocht, waaronder - snik! - geanimeerde, gloeiende knoppen:
Dit is de code die ze hebben gebruikt om dit effect te bereiken:
-webkit-animatie-naam: 'glow'; -webkit-animatie-duur: .7s; -webkit-animatie-iteratie-telling: oneindig; -webkit-animatie-richting: alternatief; -webkit-animatie-timing-functie: gemak in-uit;
Dit zou natuurlijk niet zo goed zijn in een andere e-mailclient dan Apple Mail, maar het is zeker een goed concept!
Hoeveel CSS3 kun je zien in dit andere e-mailontwerp van Panic? Klik door voor een grotere versie:
Let op hoe het ontwerp elegant wordt aangepast in de browser. En die luchtpoststrepen? Het zijn voorwaartse slashes (/). Genie! Bekijk dit artikel om erachter te komen wat er in deze sjabloon is gegaan.
/ / / / / / / / /
Bekijk de gebruiksrapporten van e-mailclients van CampaignMonitor en ga naar de definitieve gids voor CSS in e-mail om een idee te krijgen van welke CSS3-eigenschappen beschikbaar zijn voor de grote e-mailclients. En natuurlijk, testen, testen, testen. Met een sprankje CSS3, een beetje experiment en een hoop oplettendheid, kun je je e-mailsjabloon onderscheiden van de massa.
Als je van het vermogen bent en je e-mailontwerpen wilt verkopen, is het nu tijd om de categorie Email Templates te bekijken op ThemeForest!
Accentsconagua