Share
På klackarna av några av våra senaste upptäckter angående tillståndet för CSS i e-post, ansåg jag att det var dags att skaka saker upp lite. Så här går - CSS3 i e-mail liv. Ok, så förlåt jag om jag fick dig att släppa din skål, där. Jag vet att du tänker, "Men ... Det är fortfarande till stor del experimentellt ... I webbläsaren, för att starta!" Ja, CSS3-stöd är ännu mer oväsentligt bland en swag e-postklienter som inte ens kan få CSS2 rätt. Men det betyder inte att det är för tidigt att beröra något av det.
I den här artikeln går jag igenom två egenskaper som du kan använda i dina e-postmallar, tillsammans med några praktiska exempel. Så borsta av din skål och låt oss gå ner till affärer.
Om du har utformat HTML-mallar för ett tag nu kommer du att veta att det ofta är omöjligt att förutse vilken typ av CSS-relaterade quirks kommer att visas när du testa din design över de stora e-postklienterna. Gmail har till exempel varit berömd för att avlägsna CSS som inte är inline (och för en stund, inte igenkänning av cellplattor och cellspacing), medan vissa kunder helt enkelt väljer att göra sig av med stilar helt och hållet.
Om du är ny för att designa HTML-mallar för e-post, är det förmodligen den mest förebyggande sak du kan läsa. Men frukta inte, det finns massor av information där ute för att få dig till snabbhet. Ge 24-vägs "Rock Solid HTML Emails" ett skum och du kommer att se att det finns ingen anledning att vrida upp zefranken. Det är hanterbart.
Hur som helst, eftersom designers redan har tillräckligt med problem med CSS2-stöd i e-postklienter, borde inte CSS3 vara lite av en rördröm? Tja, läs vidare.
Ja och nej. För ja-fallet finns det ett par populära e-postklienter som har ganska robust CSS3-stöd (mer om det senare). Den stora nyheten är att ett fåtal av CSS3-egenskaperna som visas i dessa kunder försämras graciöst på andra håll, vilket innebär att det alltid finns ett alternativ för återgång. Men det sägs att om du vill se till att dina e-postmallar visas nära konsekvent över de stora e-postklienterna, så är CSS3 inte för dig.
Om du går över till vår guide till CSS i e-post ser du att det finns några e-postklienter som har delvis eller fullt stöd för ett antal CSS3-egenskaper. Och för det mesta har de en sak gemensamt - Webkit.
Hur din e-postmall ser ut i Outlook är inte något som hur det ser ut på din Blackberry, eller när du tittar på din webbmail i Firefox.
Om du har välsignelsen att du alltid arbetar på en Mac, kontrollerar din e-post på din iPhone och skickar tiden genom att surfa på din iPad, så har du en ganska jämn bild av webben. Tyvärr har resten av oss att göra med varierande grader av CSS-stöd över ett antal leverantörsplattformar. Hur din e-postmall ser ut i Outlook är inte något som hur det ser ut på din Blackberry, eller när du tittar på din webbmail i Firefox.
Så det är nog inte någon överraskning för dig att Apple-enheter använder samma återgivningsmotor (den programvara som bestämmer hur man visar HTML och CSS-kod) över sina e-postprogram och Safari-webbläsaren. För designers är det förmodligen mindre av en överraskning att den här motorn är Webkit och dess CSS3-support är relativt, mycket bra.
Som sagt står Webkit-e-postklienter (Apple Mail, iPhone och iPad Mail) för cirka 20% av e-postklienterna som används överallt. Men det som verkligen räknas är de e-postklienter som dina abonnenter använder. Till exempel kan en Mac-programvaruutvecklare ha nära 100% av sina kunder som tittar på deras nyhetsbrev på Apples enheter.
Med tanke på det, låt oss ta en titt på några av CSS3-egenskaperna som nu kryper in i din inkorg.
Välkommen till det senaste numret av Widgets Inc månadsvis widget gossip.
Lägger till droppe och inre skuggor med text-shadow är ett icke-destruktivt sätt att dekorera din text. Inte bara kan det rädda dig från annars skapa samma effekt med en bild, men det ser bra ut i kunder där text-shadow stöds inte.
Visa den i en webbläsare.
Att använda rundade hörn på din annars boxiga layout eller fyrkantiga knappar är redan en vanlig teknik på webben. Det kan också ge dina e-postmallar ett mjukare och mer modernt utseende i ovanstående e-postklienter, plus återgår säkert till fyrkantiga hörn när de inte stöds.
Med tillkännagivandet att border-radius kommer formellt att genomföras i IE9, vi kan förvänta oss att se mer av dess användning.
Några av de mer extrema användningarna av CSS3 i e-postmallar finns i situationer där mottagarna använder en mycket begränsad uppsättning e-postklienter. Ett bra exempel på detta är den ovannämnda Mac-utvecklaren. Panic, leverantörerna av "chockerande bra Mac-programvara", skickar fantastiska fakturor efter att du köpt en av deras titlar, som inkluderar - gasp! - animerade, glödande knappar:
Här är koden som de använde för att uppnå denna effekt:
-webkit-animationsnamn: 'glow'; -webkit-animation-duration: .7s; -webkit-animering-iteration-count: oändlig; -webkit-animationsriktning: alternativ; -webkit-animation-timing-funktion: Lätt-in-Out;
Naturligtvis skulle det inte se nästan lika bra ut i en annan e-postklient än Apple Mail, men det är verkligen ett snyggt koncept!
Hur mycket CSS3 kan du hitta i denna andra e-postdesign från Panic? Klicka igenom för en större version:
Notera hur designen ändras elegant i webbläsaren. Och de flygpoststriparna? De är framåt snedstreck (/). Geni! För att få reda på vad som hände i denna mall, kolla in den här artikeln.
/ / / / / / / / /
Ta en titt på CampaignMonitors användarrapporter för e-postklienter och sväng över till den slutgiltiga guiden till CSS i e-post för att få en uppfattning om vilka CSS3-egenskaper som finns tillgängliga över de stora e-postklienterna. Och förstås, test, test, test. Med ett stänk av CSS3, ett litet experiment och en försiktighetsdocka kan du göra din e-postmall sticka ut från publiken.
Om du har förmågan och vill sälja dina e-postdesigner, är det dags att kolla in kategorin E-postmallar på ThemeForest!
Accentsconagua