Share
På hælene av noen av våre siste funn om tilstanden til CSS i e-post, regnet jeg at det var på tide å riste opp ting litt. Så her går - CSS3 i e-post liv. Ok, så jeg beklager hvis jeg fikk deg til å slippe din skål, der. Jeg vet at du tenker, "Men ... Det er fortsatt stort sett eksperimentelt ... I nettleseren, for å starte opp!" Ja, CSS3-støtten er enda svakere blant en swag e-postklienter som ikke engang får CSS2 riktig. Men det betyr ikke at det er for tidlig å berøre noe av det.
I denne artikkelen går jeg gjennom to egenskaper du kan bruke i e-postmallene dine, sammen med noen praktiske eksempler. Så, puss av skålen din og la oss komme ned til virksomheten.
Hvis du har designet HTML e-postmaler for en stund nå, vil du vite at det ofte er nesten umulig å forutsi hva slags CSS-relaterte quirks vil vises når du tester designet ditt over de store e-postklienter. For eksempel har Gmail vært beryktet for å strippe noen CSS som ikke er inline (og for en stund, ikke gjenkjenne tabellcellepodding og cellespace), mens enkelte kunder bare velger å gjøre unna med stiler helt og holdent.
Hvis du er ny for å designe HTML-e-postmaler, er dette trolig den mest foreboding ting du muligens kan lese. Men frykt ikke, det er mye info der ute for å få deg opp til fart. Gi 24ways "Rock Solid HTML Emails" en skumring, og du vil se at det ikke er grunn til å skru opp zefranken. Det er håndterbart.
Uansett, da designere allerede har nok problemer med CSS2-støtte i e-postklienter, burde ikke CSS3 være litt av en pipedrøm? Vel, les videre.
Ja og nei. For ja-saken er det et par populære e-postklienter som har ganske robust CSS3-støtte (mer om det senere). Den gode nyheten er at en rettferdig få av CSS3-egenskapene som vises i disse klientene, nedbrytes grasiøst andre steder, noe som betyr at det alltid er et tilbakekallingsalternativ. Men det er sagt, hvis du vil sørge for at e-postmallene dine vises nesten konsekvent på tvers av de store e-postklientene, så er CSS3 ikke for deg.
Hvis du går over til vår guide til CSS i e-post, vil du se at det er noen e-postklienter som har delvis eller full støtte for en rekke CSS3-egenskaper. Og for det meste har de en ting til felles - Webkit.
Hvordan e-postmalen ser ut i Outlook, er ikke noe som hvordan det ser ut på BlackBerry, eller når du ser på webmailen din i Firefox.
Hvis du har velsignelsen om å alltid jobbe på en Mac, sjekker e-posten din på din iPhone og overfører tiden ved å surfe på iPad, så har du en relativt konsekvent visning av nettet. Dessverre har resten av oss å gjøre med varierende grader av CSS-støtte på tvers av en rekke leverandørplattformer. Hvordan e-postmalen ser ut i Outlook, er ikke noe som hvordan det ser ut på BlackBerry, eller når du ser på webmailen din i Firefox.
Så det er sannsynligvis ingen overraskelse for deg at Apple-enheter bruker samme gjengivelsesmotor (programvaren som bestemmer hvordan man viser HTML og CSS-kode) på tvers av sine e-postprogrammer og Safari-nettleseren. For designere er det sannsynligvis mindre overraskende at denne motoren er Webkit, og CSS3-støtten er relativt, veldig bra.
Når det er sagt, utgjør webkit-e-postklienter (Apple Mail, iPhone og iPad Mail) omtrent 20% av e-postklienterne samlet. Men det som virkelig teller er e-postklientene dine abonnenter bruker. For eksempel kan en Mac-programvareutvikler ha nær 100% av sine kunder som ser på nyhetsbrevet deres på Apple-enheter.
Med dette i tankene, la oss se på noen av CSS3-egenskapene som nå kryper inn i innboksen.
Velkommen til det nyeste utgaven av Widgets Inc månedlig widget sladder.
Legge til dråpe og indre skygger med text-shadow er en ikke-destruktiv måte å dekorere teksten på. Ikke bare kan det spare deg fra ellers skape den samme effekten ved hjelp av et bilde, men det ser fint ut i klienter hvor text-shadow støttes ikke.
Se det i en nettleser.
Bruke avrundede hjørner på din ellers boxete layout eller firkantede knapper er allerede en vanlig teknikk på nettet. Det kan også gi dine e-postmaler et mykere, mer moderne utseende i de ovennevnte e-postklientene, og trygt tilbake til firkantede hjørner når det ikke støttes.
Med kunngjøringen som border-radius vil bli formelt implementert i IE9, vi kan forvente å se mer av sin bruk.
Noen av de mer ekstreme bruksområdene til CSS3 i e-postmaler kan bli funnet i situasjoner der mottakerne bruker et svært begrenset sett med e-postklienter. Et godt eksempel på dette er den nevnte Mac-utvikleren. Panikk, leverandørene av "sjokkerende god Mac-programvare", sender fantastiske fakturaer etter at du har kjøpt en av deres titler, som inkluderer - gisp! - animerte, glødende knapper:
Her er koden de brukte for å oppnå denne effekten:
-webkit-animasjon-navn: 'glow'; -webkit-animasjon-varighet: .7s; -webkit-animasjon-iterasjon-telling: uendelig; -webkit-animasjonsretning: alternativ; -webkit-animasjon-timing-funksjon: lett-i-ut;
Selvfølgelig vil dette ikke se nesten like bra ut i en annen e-postklient enn Apple Mail, men det er absolutt et pent konsept!
Hvor mye CSS3 kan du få øye på i dette andre e-postdesignet fra Panic? Klikk gjennom for en større versjon:
Legg merke til hvordan utformingen tilpasses elegant i nettleseren. Og de luftpoststripene? De er fremoverstrekk (/). Geni! For å finne ut hva som gikk inn i denne malen, sjekk ut denne artikkelen.
/ / / / / / / / /
Ta en titt på CampaignMonitors e-postklientbruksrapporter, og gå over til den endelige veiledningen til CSS i e-post for å få en ide om hvilke CSS3-egenskaper som er tilgjengelige over de store e-postklienter. Og selvfølgelig, test, test, test. Med et sprinkle av CSS3, et lite eksperiment og en forsiktighet, kan du gjøre e-postmalen skille seg ut fra mengden.
Hvis du har evnen, og vil selge e-postdesign, er det nå på tide å sjekke ut e-postmalerkategorien på ThemeForest!
Accentsconagua