Ghidul suprem pentru utilizarea fragmentelor în designul de e-mail
Publicat: 2015-11-20Între zeci de clienți de e-mail, nenumărate ciudații de randare și schimbarea suportului pentru HTML și CSS, codificarea campaniilor de e-mail este complexă. Din păcate pentru designerii de e-mail, această complexitate înseamnă că proiectarea e-mailului devine din ce în ce mai consumatoare de timp, așa că am creat ghidul suprem pentru utilizarea fragmentelor în proiectarea e-mailurilor.
La The Email Design Conference, Dan Denney de la Code School a încadrat problema perfect:
Cea mai mare provocare în crearea de e-mailuri nu este Gmail... este timpul.
Când vine vorba de proiectarea e-mailurilor, timpul este esențial, iar implementarea unui flux de lucru de dezvoltare este crucială. Pentru a ține pasul cu cerințele în schimbare rapidă ale designului de e-mail, este din ce în ce mai important să vă faceți fluxul de lucru cât mai eficient posibil.
Deci, ce puteți face pentru a vă optimiza fluxul de lucru? Un cuvânt: fragmente .
Cu ajutorul fragmentelor, puteți crea e-mailuri mai ușor și mai rapid decât oricând. Petreceți mai puțin timp pentru construirea și depanarea e-mailurilor și mai mult timp creând experiențe de e-mail mai bune pentru abonații dvs.
Ce sunt fragmentele?
Fragmentele sunt module de e-mail de cod reutilizabil pe care le puteți utiliza într-un șablon de e-mail sau într-un sistem mai larg de design de e-mail. Sunt ideale pentru elementele care sunt utilizate în mod obișnuit în modelele de e-mail, cum ar fi doctype, butoanele antiglonț și linkuri. În loc să trebuiască să rescrieți codul de fiecare dată când unul dintre aceste elemente este utilizat, puteți utiliza un fragment. Utilizarea fragmentelor vă automatizează codarea și accelerează drastic timpul de dezvoltare.
Cum să folosiți fragmentele
Indiferent de editorul de e-mail pe care îl utilizați pentru a vă crea e-mailurile, puteți utiliza fragmente pentru a vă optimiza fluxul de lucru. Iată o privire asupra modului de utilizare a acestora în cele mai comune editori.
Dreamweaver
În Dreamweaver, puteți adăuga sau edita fragmente vizitând: Windows → Fragmente → Nou/Editare. Puteți chiar să vă salvați fragmentele în grupuri (de exemplu, fragmente legate de tabel, fragmente legate de imagini etc.) pentru o căutare ușoară.
În timp ce codificați e-mailul, utilizați fragmente făcând dublu clic pe titlul fragmentului, făcând clic pe Inserare sau folosind o comandă rapidă de la tastatură.
Constructor de turnesol
În cadrul unui proiect Builder, faceți clic pe pictograma Fragmente din partea dreaptă sus a editorului.
Puteți crea și edita fragmente noi în acea interfață și puteți declanșa fragmente în codul dvs. prin comenzile rapide de la tastatură. De asemenea, puteți adăuga puncte de editare în interiorul fragmentului folosind {acolade} . Odată ce declanșați un fragment, puteți sări automat la punctele de editare predefinite din fragment pentru personalizare rapidă și ușoară.
Text sublim
Pentru a vizualiza fragmente existente sau pentru a adăuga altele noi în Sublime Text, vizitați: Instrumente → Fragmente/Fragment nou. Fiecare fragment este salvat în propriul fișier .sublime-snippet.
Adăugați fragmente în cod prin intermediul comenzilor rapide de la tastatură. De exemplu, în codul de mai jos, fragmentul este declanșat atunci când în cod este introdus „bună ziua”. De asemenea, puteți adăuga puncte de editare în interiorul fragmentului folosind semnele dolarului în ordine secvențială ( $1 , $2 , etc.).
<snippet> <content><![CDATA[ /* Insert snippet here */ ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <!-- <tabTrigger>hello</tabTrigger> --> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> 
Atom
Vizualizați, editați sau adăugați fragmente în Atom, vizitând: Atom → Deschideți fragmentele. Fiecare fragment este salvat ca propriul fișier snippets.cson.
Similar cu Sublime Text, fragmentele din Atom funcționează prin intermediul unei comenzi rapide de la tastatură. De asemenea, puteți adăuga puncte de editare în interiorul fragmentului folosind semnele dolarului în ordine secvențială ( $1 , $2 , etc.).
'Name': 'prefix': 'tabtrigger' 'body': """ /* Insert snippet here */ """ 
Coda
Fragmentele din Coda sunt denumite „clipuri”. Pentru a adăuga sau edita un clip, accesați: Bara laterală → Clipuri. Clipurile pot fi salvate în grupuri și funcționează pe o comandă rapidă de la tastatură. De asemenea, puteți adăuga puncte de editare în interiorul fragmentului definind puncte de substituent personalizate în interfața de utilizare.
Biblioteca de fragmente
În fiecare editor puteți crea o bibliotecă cu fragmentele dvs. Totul din bibliotecă ar trebui să fie actualizat și pre-testat. Pe măsură ce lumea e-mailului se schimbă în mod constant, asigurați-vă că testați frecvent fragmentele și adăugați altele noi atunci când este necesar.
Deși există multe altele, am adunat o listă cuprinzătoare a unora dintre fragmentele noastre preferate, care sunt disponibile pentru a le folosi pentru dezvoltarea e-mailurilor. Simțiți-vă liber să le adăugați în biblioteca dvs. de fragmente!
Doctype
Un doctype îi spune unui client de e-mail să redeze un e-mail în modul standard sau ciudate. Există două forme recomandate de doctypes de utilizat pentru e-mail. Primul este tipul de document HTML5:
HTML5
<!doctype html>XHTML
Al doilea este tipul de document XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Campaign Monitor detaliază ce tipuri de documente HTML sunt bune de utilizat și există o discuție grozavă despre asta și în Comunitatea Litmus. Dacă nu specificați un tip de document pentru e-mailul dvs., clienții de e-mail vor reda e-mailul în „modul ciudate”, ceea ce poate duce la probleme de randare.
Meta etichetă
Dacă vă codificați e-mailul pentru a fi receptiv, există mai multe metaetichete cheie pe care ar trebui să le includeți.
UTF-8
Prima metaetichetă recomandată setează codarea caracterelor la utf-8, care este codarea tipică pentru un e-mail. Acest lucru poate fi schimbat dacă este necesar.
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />Vizualizarea
A doua metaetichetă recomandată stabilește capacitatea de răspuns pentru e-mail.
<meta name="viewport" content="width=device-width, initial-scale=1" />Windows Phone
A treia metaetichetă recomandată este special pentru a face e-mailul să răspundă pe Windows Phone.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />Mese
E-mailurile HTML folosesc tabele pentru a structura conținutul. Tabelele pot fi destul de plictisitoare de codat manual, așa că am dezvoltat fragmente de bază pentru aranjamente simple de tabel.
Tabelul 1×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> </tr> </table>Tabelul 2×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tabelul 3×1
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tabelul 2×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tabelul 2×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tabelul 3×2
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Tabelul 3×3
<table cellspacing="0" cellpadding="0" border="0" width="{width}" align="{align}"> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> <tr> <td align="{align}">{content}</td> <td align="{align}">{content}</td> <td align="{align}">{content}</td> </tr> </table>Butoane antiglonț
Crearea de butoane în e-mail este destul de o bătaie de cap, datorită particularităților de redare a Outlook. Există patru tipuri recomandate de butoane antiglonț, care se afișează indiferent dacă sunt prezente sau nu imagini.
Butonul VML
Prima metodă de buton antiglonț a fost dezvoltată de Stig Morten Myre de la Campaign Monitor și este o abordare bazată pe buton VML:
<div> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="{link}" arcsize="{arcsize}%" strokecolor="#{strokecolor}" fillcolor="{fillcolor}"> <w:anchorlock/> <center>{button text}</center> </v:roundrect> <![endif]--> <a href="{link}">{button text}</a> </div>Campaign Monitor a creat, de asemenea, buttons.cm, un instrument simplu pentru a genera codul butonului VML de mai sus.
Buton bazat pe umplutură
A doua metodă este o abordare de text live cu un buton bazat pe umplutură:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#{bgcolor}" align="{align}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>Principalul dezavantaj al acestui buton este că nu se poate face clic 100%.
Buton bazat pe chenar
A treia metodă de buton antiglonț implică crearea unui chenar în jurul linkului pentru a face o zonă mare pe care se poate face clic:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>Principalul dezavantaj al acestei metode este că Outlook 2007-2013 nu respectă lățimea chenarelor pe etichetele de link, așa că provoacă o anumită reducere a umpluturii artificiale a butonului.
Căptușeală+Buton bazat pe chenar
Metoda finală implică o combinație a butoanelor de umplutură și chenar:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="{align}" bgcolor="#{bgcolor}"> <a href="{link}" target="_blank">{button text}</a> </td> </tr> </table>Acest hack este folosit pentru a evita problemele de redare a umpluturii în Outlook.
Imagini
Există numeroși factori cheie de luat în considerare atunci când utilizați imagini în e-mail. De exemplu, trebuie să definiți înălțimea și lățimea în atributele HTML pentru ca imaginile să fie redate corect în Outlook. Și, folosirea textului ALT este extrem de importantă nu numai în scopuri de accesibilitate, ci din moment ce 43% dintre utilizatori văd e-mailurile cu imaginile dezactivate. În cele din urmă, pentru a preveni umplerea suplimentară și golurile în jurul imaginilor, ar trebui să le setați să display:block;.
<img src="{src}" width="{width}" height="{height}" border="0" alt="{alt}"/>Legături
Link de bază
Când utilizați un link într-un e-mail, va trebui să setați stiluri inline pe acesta, cum ar fi dimensiunea fontului, familia fontului și decorarea textului. Iată un fragment simplu care are deja implementate aceste stiluri inline:
<a href="#">{style}</a>Eliminați linkurile albastre pe iOS
Există mai multe strategii pentru eliminarea linkurilor albastre pe iOS, dar iată un fragment simplu care utilizează o singură declarație CSS pentru a face acest lucru:
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }Antetitl ascuns/Text de previzualizare
Textul de antet sau de previzualizare este o copie extrasă din corpul e-mailului dvs., care este de obicei afișată sub numele și subiectul din căsuța de e-mail a abonatului. Utilizarea textului ascuns din antet este o modalitate de a defini copia utilizată și de a preveni impactul acesteia asupra designului real al e-mailului.
Iată fragmentul:
<div> {preheader text} </div>Interogări media
Interogările media sunt o componentă a foilor de stil în cascadă (CSS), limbajul folosit pentru stilarea site-urilor web și a campaniilor de e-mail. Cu interogări media, puteți ajusta design-urile de e-mail, astfel încât acestea să fie mai utilizabile în căsuțele de e-mail mobile, desktop și web.
Iată o listă cu toate interogările media importante de care veți avea nevoie atunci când creați e-mailuri:
Interogare media de bază
@media screen and ({declaration}) { {content} }Interogare media cu lățimea maximă
@media screen and (max-width: {width}) { {content} }Interogare media cu lățime minimă
@media screen and (min-width: {width}) { {content} }iPad 1 & 2 + iPad Mini Media Query
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { {style} }Interogare media iPad 3 și 4
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { {style} }Interogare media iPhone 2G/3G/3GS
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) { {style} }iPhone 4/4S/5/iPhone 6 (vizualizare zoom) Media Query
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { {style} }HTC ONE + SAMSUNG GALAXY S4/S5 Media Query
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { {style} }iPhone 6 (vizualizare standard) + iPhone 6 Plus (vizualizare zoom) Media Query
@media screen and (max-device-width: 375px) and (max-device-height: 667px) { {style} }iPhone 6 Plus (vizualizare standard) Media Query
@media screen and (max-device-width: 414px) and (max-device-height: 776px) { {style} }Comentarii condiționale Outlook
Având în vedere multitudinea de probleme de randare care vine cu necesitatea de a suporta Outlook, uneori este util să vizați Outlook cu anumite stiluri. Outlook poate fi vizat folosind comentarii MSO condiționate pentru conținut HTML sau CSS.
Redare Microsoft Word
<!--[if mso]> {content} <![endif]-->Outlook 2000-2013
<!--[if (gte mso 9)|(IE)]> {content} <![endif]-->Mai multe comentarii condiționate Outlook:
- Outlook 2000
- Outlook 2000-2002
- Outlook 2000-2003
- Outlook 2000-2007
- Outlook 2000-2010
- Outlook 2002
- Outlook 2002-2013
- Outlook 2003
- Outlook 2003-2013
- Outlook 2007-2013
- Outlook 2010
- Outlook 2010-2013
- Outlook 2013
WebKit
Una dintre cele mai bune modalități de a vă îmbunătăți treptat e-mailul este țintirea motoarelor de randare WebKit. Aproximativ 47% dintre deschiderile de e-mail au loc în căsuțele primite alimentate de WebKit.
@media screen and (-webkit-min-device-pixel-ratio: {value}) { {style} }Gmail
Gmail nu acceptă clase sau ID-uri în <head> e-mail-urilor, motiv pentru care CSS trebuie să fie integrat în e-mail. Cu toate acestea, Justin Khoo de la FreshInbox a descoperit un nou hack în care Gmail va citi CSS în e-mailurile.
Dacă utilizați atributul lang sau title ca selector de atribute a cărui valoare se află într-o listă de valori separate prin spații albe, dintre care una este o potrivire exactă, Gmail va citi acel CSS. Este o gură, așa că iată un fragment pentru a vă ajuta:
* [lang~="{name}"] { {style} }Yahoo
Yahoo Mail a introdus recent propria sa interogare media unică, permițându-ne să țintăm cu ușurință anumite stiluri pentru webmail.
@media yahoo { {style} }Android
James White a postat recent pe Litmus Community un hack pentru a centra e-mailurile pe Android 4.4.
body { margin:0 !important; } div[style*="margin: 16px 0"] { margin:0 !important; }Fragmente în comunitate
Vrei și mai multe fragmente? Aveți niște favorite pe care ați dori să le împărtășiți? Cu ajutorul e-mailurilor de pretutindeni, avem deja zeci de fragmente utile, precum codul pentru a elimina linkurile albastre de pe dispozitivele iOS, în Comunitatea Litmus.
Sortați fragmentele existente în funcție de clientul de e-mail pentru care a fost creat sau de tipul de fragment (de exemplu, hack, imagine, link etc.). Puteți să-l adăugați pe al dvs. și să creați o bibliotecă de fragmente cu favoritele dvs. Și, puteți economisi și mai mult timp importând fragmente din Comunitate direct în Builder. Împreună cu previzualizările instantanee ale Builder, codificarea cu fragmente poate fi cea mai rapidă modalitate de a realiza campanii uimitoare de e-mail.
Consultați fragmente în Comunitate →