Share
Pe urmele câtorva dintre constatările noastre recente privind starea CSS în e-mail, mi-am dat seama că a fost momentul să trecem puțin lucrurile. Deci, aici merge - CSS3 în viața de e-mail. Ok, îmi pare rău dacă te-am făcut să te lași cu toastul acolo. Știu că te gândești: "Dar ... E încă în mare măsură experimental ... În browser, să boot!" Da, suportul CSS3 este și mai prost în rândul clienților de e-mail care nu pot obține chiar și CSS2. Dar asta nu înseamnă că este prea devreme să atingi vreuna din ele.
În acest articol, voi trece prin două proprietăți pe care le puteți utiliza în șabloanele dvs. de e-mail, alături de câteva exemple practice. Deci, îndoiți toastul și să mergeți la afaceri.
Dacă ați proiectat șabloane de e-mail HTML pentru un timp acum, veți ști că este adesea aproape imposibil să preziceți ce ciudățenii legate de CSS se vor afișa atunci când testați design-ul dvs. în majoritatea clienților de e-mail. De exemplu, Gmail a fost renumit pentru dezmembrarea oricărui CSS care nu este în linie (și pentru o perioadă, nu recunoaște cellpad table & cellspacing), în timp ce unii clienți pur și simplu optează pentru a elimina complet stilurile.
Dacă sunteți nou la proiectarea șabloanelor de e-mail HTML, acesta este probabil cel mai pretențios lucru pe care îl puteți citi. Dar nu te teme, sunt multe informații acolo ca să te aducă la viteză. Dați 24 de e-mailuri de tip "Rock Solid HTML Emails" și veți observa că nu există niciun motiv pentru a se răsuci pe zefrank..
Oricum, având în vedere că designerii au deja suficiente probleme cu suportul CSS2 în clienții de e-mail, CSS3 nu ar trebui să fie un pic de vis de conducte? Ei bine, citiți mai departe.
Da și nu. Pentru cazul Da, există câțiva clienți populari de e-mail care au suport CSS3 destul de robust (mai târziu, mai târziu). Vestea minunată este că multe dintre proprietățile CSS3 care se afișează în acești clienți se degradează grațios în altă parte, ceea ce înseamnă că există întotdeauna o opțiune de rezervă. Dar asta a spus, dacă doriți să vă asigurați că șabloanele dvs. de e-mail se afișează aproape în mod consecvent pe majoritatea clienților de e-mail, atunci CSS3 nu este pentru dvs..
Dacă vă îndreptați spre ghidul nostru către CSS în e-mail, veți vedea că există câțiva clienți de e-mail care au suport parțial sau complet pentru un număr de proprietăți CSS3. Și, în cea mai mare parte, au un lucru în comun - Webkit.
Modul în care șablonul dvs. de e-mail arată în Outlook nu este ceva de genul cum va arăta pe BlackBerry sau când vă vedeți webmail-ul în Firefox.
Dacă aveți binecuvântarea de a lucra întotdeauna pe un Mac, verificarea e-mailului pe iPhone și trecerea timpului prin navigarea pe iPad, atunci aveți o viziune destul de consistentă a web-ului. Din păcate, restul dintre noi are de a face cu diferite grade de sprijin CSS pe mai multe platforme de furnizori. Modul în care șablonul dvs. de e-mail arată în Outlook nu este ceva de genul cum va arăta pe BlackBerry sau când vă vedeți webmail-ul în Firefox.
Deci probabil nu este o surpriză pentru dvs. că dispozitivele Apple utilizează același motor de redare (software-ul care decide cum să afișeze codul HTML și CSS) în aplicațiile lor de e-mail și în browser-ul Safari. Pentru designeri, probabil că este puțin mai surprinzător faptul că acest motor este Webkit, iar suportul CSS3 este relativ, foarte bun.
Acestea fiind spuse, clienții de e-mail Webkit (Apple Mail, iPhone & iPad Mail) reprezintă aproximativ 20% dintre clienții de e-mail utilizați în general. Cu toate acestea, ceea ce contează cu adevărat sunt clienții de e-mail pe care abonații dvs. le utilizează. De exemplu, un dezvoltator de software Mac poate avea aproape 100% din clienții săi care vizualizează buletinul informativ pe dispozitivele Apple.
Având în vedere acest lucru, să aruncăm o privire asupra unora dintre proprietățile CSS3 care se strecoară acum în căsuța de e-mail.
Bine ați venit la ultimul număr al bârfei Widgets Inc. widget lunar.
Adăugarea de umbre și de umbre interioare cu text-shadow este o modalitate nedistructivă de a vă decora textul. Nu numai că vă poate salva de la crearea în alt mod a aceluiași efect utilizând o imagine, dar arată bine în cazul clienților în care text-shadow nu este acceptată.
Vizualizați-l într-un browser web.
Folosirea colțurilor rotunjite pe aspectul dvs. altfel boxy sau butoanele pătrate este deja o tehnică frecvent utilizată pe web. De asemenea, poate oferi șabloanelor dvs. de e-mail un aspect mai moale, mai modern în clienții de e-mail de mai sus, plus în siguranță se reîntoarce la colțuri pătrate atunci când nu sunt acceptate.
Cu anunțul asta border-radius va fi pusă în aplicare în mod oficial în IE9, ne putem aștepta să vedem mai mult din utilizarea sa.
Unele dintre utilizările extreme ale CSS3 în șabloanele de e-mail pot fi găsite în situațiile în care destinatarii folosesc un set foarte limitat de clienți de e-mail. Un exemplu excelent al acestui lucru este dezvoltatorul Mac menționat mai sus. Panic, furnizorii software-ului "șocant de bun Mac", trimit facturi uimitoare după cumpărarea uneia dintre titlurile lor, care includ - gag! - butoane animate, strălucitoare:
Iată codul pe care l-au folosit pentru a obține acest efect:
-webkit-animație-nume: "strălucire"; -webkit-animație-durata: .7s; -webkit-animație-iterație-count: infinit; -webkit-animație-direcție: alternativă; -webkit-animație-funcția de sincronizare: ușurință-în-out;
Desigur, acest lucru nu ar arăta la fel de bun într-un alt client de e-mail decât Apple Mail, dar este cu siguranță un concept elegant!
Cât de mult CSS3 puteți găsi în acest alt proiect de e-mail de la Panic? Faceți clic pentru o versiune mai mare:
Luați notă de modul în care designul este redimensionat elegant în browser. Și acele dungi de avion? Sunt slash-uri directe (/). Geniu! Pentru a afla ce a intrat în acest șablon, consultați acest articol.
/ / / / / / / / /
Uitați-vă la rapoartele de utilizare a clientului de e-mail ale CampaignMonitor și mergeți la ghidul definitiv pentru CSS în e-mail pentru a obține o idee despre proprietățile CSS3 disponibile pentru majoritatea clienților de e-mail. Și, desigur, test, test, test. Cu un sprinkle de CSS3, o mică experiență și o pauză de prudență, poți face ca șablonul tău de e-mail să iasă din mulțime.
Dacă aveți capacitatea și doriți să vindeți desenele dvs. de e-mail, acum este momentul să examinați categoria de e-mailuri pe ThemeForest!
Accentsconagua