Responsive Email 101 Webinar Întrebări și răspunsuri: Elemente de bază HTML și CSS

Pe măsură ce deschiderile mobile continuă să crească (au crescut cu peste 500% în ultimii patru ani!), la fel și discuțiile despre strategiile de e-mail mobile precum designul responsive. În cadrul webinarului nostru web Responsive Email 101: HTML și CSS Basics, am aruncat o privire asupra peisajului e-mailurilor mobile, a bazelor creării de e-mailuri receptive și a motivului pentru care aceste tehnici sunt cruciale pentru îmbunătățirea experienței abonaților. De asemenea, am acoperit asistența pentru clienții de e-mail și am demonstrat cum să codificăm un e-mail receptiv de la zero.

Nu ai reușit? Nu-ți face griji. Am înregistrat totul! În plus, am pus la dispoziție chiar și diapozitivele.

Obțineți diapozitivele + înregistrare →

Am avut o sala plină pentru webinar, așa că, deși am încercat să răspundem la cât mai multe întrebări posibil în timpul secțiunii de întrebări și răspunsuri, nu am reușit să ajungem la toate. Mai jos, am adunat câteva dintre cele mai frecvente întrebări.

ÎNCEPE CU DESIGNUL RESPONSIV

Crezi că creșterea deschiderilor mobile a ajuns la saturație sau crezi că va continua să crească?

Deși am observat o creștere uriașă a deschiderilor mobile în ultimii patru ani – peste 500% – am văzut deja că creșterea sa începe să se aplatizeze puțin. Cu toate acestea, credem că deschiderile mobile vor continua să crească încet odată cu proliferarea mai multor dispozitive mobile.

Care este diferența dintre designul fluid, adaptiv și receptiv?

Designul fluid constă din lățimi relative fără interogări media. Designul adaptiv constă în lățimi fixe sau relative la mai multe ferestre/puncte de întrerupere. Designul receptiv constă în lățimi relative la mai multe ferestre/puncte de întrerupere. Iată câteva resurse excelente pentru a vă ajuta să înțelegeți mai bine diferențele dintre ele:

• Scalabil, fluid sau receptiv? Înțelegerea abordărilor de e-mail mobil
• Fix vs. Fluid vs. Adaptiv vs. Reactiv
• Care aspect? Static, lichid, adaptiv sau receptiv?
• Lichidapsiv

Care abordare are cel mai bun suport pentru clientul de e-mail: fluid, adaptiv sau receptiv?

Din perspectiva pură a asistenței, e-mailurile fluide au cel mai bun suport. Atât designul adaptiv, cât și cel receptiv necesită utilizarea interogărilor media, care au suport limitat.

Cu toate acestea, nu înseamnă că designul fluid este cea mai bună abordare pentru e-mailuri. Designul fluid este un compromis bun pentru crearea unei versiuni prietenoase pentru dispozitive mobile a unui e-mail, dar menține designul pe toată lățimea e-mailului în centrul său. Într-adevăr, se reduce la publicul tău specific, unde își deschid e-mailurile și strategia ta de proiectare pentru optimizarea experiențelor abonaților tăi.

Ce este o interogare media?

O interogare media (@media) este o instrucțiune condiționată care declanșează un set de CSS pentru un anumit set de reguli. Puteți afla mai multe despre interogări media și e-mail cu următoarele resurse:

• Ghidul de utilizare pentru designul de e-mail receptiv
• Înțelegerea interogărilor media în e-mailul HTML

Există date despre efectul pe care designul responsive îl are asupra e-mailurilor?

Pariezi! Recent, am făcut un raport cu MailChimp despre efectul pe care designul responsive și testarea e-mailurilor îl au asupra clicurilor. Am descoperit că designul responsive are ca rezultat o creștere cu 15% a clicurilor pentru utilizatorii de dispozitive mobile.

Cu suport mixt și atât de multe soluții, trecerea către un design receptiv pare copleșitoare. Cum incep?

Cu un suport atât de limitat din partea clienților actuali de e-mail, designul de e-mail receptiv poate fi greu de implementat. Prima noastră recomandare este să vă educați cât mai mult posibil despre designul de e-mail receptiv înainte de a vă scufunda. Vă recomandăm să consultați resursele de la MailChimp, Campaign Monitor și Litmus pentru a vă ajuta să vă ghidați.

Dacă nu vă simțiți confortabil să vă scufundați direct în dezvoltarea reală a e-mailurilor receptive, luați în considerare utilizarea unor editori de e-mail simple cu glisare și plasare pentru a vă crea e-mailurile. Produse precum StampReady, Canvas și MailChimp vor elimina problemele legate de codificarea e-mailului pentru dvs.

Dacă vă simțiți confortabil să vă scufundați în cod, consultați Litmus Builder, un editor de cod creat special pentru designul de e-mail. Încercați să implementați tehnici de bază de e-mail responsive ca început – va oferi o experiență grozavă pentru utilizatorii care își deschid e-mailul în clienții care acceptă design responsive (în principal dispozitive Apple).

De asemenea, asigurați-vă că vă previzualizați e-mailurile înainte de a le trimite! Puteți să vă trimiteți e-mailuri folosind PutsMail sau să vedeți cum arată e-mailul dvs. în peste 40 de clienți de e-mail diferiți cu Litmus.

Dacă aveți vreodată întrebări sau întâmpinați probleme de codare cu designul de e-mail receptiv, mergeți la Comunitatea Litmus pentru ajutor.

Recomandați cadre responsive?

Da! Vă recomandăm să verificați cadrul responsiv Ink al ZURB (atenție: acest cadru necesită o soluție pentru a fi redat corect în Outlook 2007-2013). Dacă vă place Sass, Faust Gertz a creat o versiune Sass a Ink, iar Alex Ilhan are un cadru de e-mail Sass numit Zenith. În plus, Dan Denney de la Code School are un flux de lucru minunat de e-mail numit Emayll, iar Brian Graves are o colecție uimitoare de modele de e-mail receptive.

OPTIMIZAREA PENTRU CLIENȚII CARE NU SUPPORTĂ INTERBĂRILE MEDIA

Dacă un client nu acceptă design responsive, ce se va afișa în acel client?

Fiecare client de e-mail redă e-mailuri diferit, mai ales când vine vorba de aplicații de e-mail mobile. În esență, dacă nu acceptă designul responsive, va reveni la o anumită versiune a e-mailului cu lățime completă. Uneori va fi o versiune cu lățime completă „micșorizată”, uneori va fi o versiune extinsă „mărită” și, uneori, un client precum Gmail poate crește automat dimensiunea fonturilor pentru a face o versiune „compatibilă cu dispozitivele mobile” a e-mailului.

Cel mai bun lucru de făcut este să previzualizați întotdeauna e-mailul înainte de a-l trimite. Puteți să vă trimiteți e-mailuri folosind PutsMail sau să vedeți cum arată e-mailul dvs. în peste 40 de clienți de e-mail diferiți cu Litmus.

Care este cea mai bună modalitate de a aborda designul responsive pentru clienții care nu îl acceptă, cum ar fi aplicația Gmail pentru Android? Ce tip de „backup” ar trebui să avem?

Vă recomandăm să vă faceți e-mailurile prietenoase pentru dispozitive mobile pentru început. Aceasta înseamnă să aveți o cantitate minimă de conținut de e-mail și să proiectați pentru un caz de utilizare mobil, cum ar fi dimensiuni mai mari de font și butoane. Un design dintr-o singură coloană facilitează redarea e-mailului și pentru aplicația Gmail.

Pentru cei care se simt bine cu tehnici avansate de codare, cea mai bună modalitate de a vă dezvolta e-mailurile și de a ține cont de lipsa de asistență receptivă în aplicația Gmail este „abordarea de codificare hibridă”. În esență, folosește o abordare bazată pe dispozitivul mobil și scalează e-mailul la o lățime de desktop folosind niște hack-uri specifice e-mailului. Puteți citi mai multe despre cum să implementați abordarea de codificare hibridă aici:

• Abordarea de codificare hibridă
• Codare hibridă Redux-Ridicarea ștachetei
• Lecții greu câștigate în designul de e-mail receptiv

ÎNTREBĂRI DE COD

Puteți să vă puneți interogările media într-un document CSS separat și să faceți un link către acel document din cap?

Nu este recomandat să utilizați foi de stil legate (eticheta <link>) pentru e-mailuri din cauza suportului limitat pentru clientul de e-mail. Toate stilurile ar trebui să fie încorporate în <head> al unui e-mail.

Care sunt cele mai comune puncte de întrerupere pentru design-ul de e-mail receptiv? Câte puncte de întrerupere este ideal?

Cu cele mai multe deschideri care au loc pe iPhone, este important ca e-mailurile dvs. să înceapă să implementeze puncte de întrerupere la minimum 414px, care este lățimea noului iPhone 6 Plus.

Nu există un număr „ideal” de puncte de întrerupere pentru un anumit design – totul se rezumă la designul tău individual și la optimizarea experienței pentru abonații tăi. Este ideal să țineți cont de cel puțin un punct de întrerupere pentru a face e-mailul dvs. receptiv.

Recomandați folosirea tabelelor sau a div-urilor?

Proiectarea e-mailului necesită absolut utilizarea unui aspect și a unei structuri bazate pe tabel. Motivul pentru aceasta este o lipsă de suport pentru <div> de către clienții de e-mail, cum ar fi clienții desktop Outlook, deoarece se referă la structura reală și fundația HTML. Unii clienți de e-mail acceptă <div> și pot fi extrem de puternici de utilizat pentru anumite hack-uri și soluții, în special pentru e-mailurile receptive.

Puteți modifica atributele align=“left” sau align=”right” dintr-un tabel utilizând interogări media? Sau, este doar pentru schimbări de stil?

Nu puteți modifica din punct de vedere tehnic atributul de aliniere HTML în CSS, dar există și alte soluții. Puteți împacheta fiecare tabel individual într-un <div> gol și puteți utiliza proprietatea float sau proprietatea display pentru a schimba tabele. ActionRocket are o postare grozavă pe blog despre utilizarea acestei tehnici avansate.

Cu e-mailurile receptive, cum este suportul pentru imaginile de fundal? Care sunt dimensiunile ideale pentru salvarea imaginilor de fundal dacă vreau ca acestea să aibă lățime completă?

Imaginile de fundal sunt foarte bine acceptate pentru clienții de e-mail mobili. Nu există dimensiuni „ideale” pentru salvarea imaginilor de fundal. Ar trebui să încercați întotdeauna să aveți fișiere de dimensiuni relativ mici, astfel încât abonații să vă poată descărca rapid e-mailul. Puteți utiliza funcția de verificare a imaginii din Litmus pentru a vă testa vitezele de descărcare a imaginilor.

Trebuie ca stilurile să fie integrate pentru a le face să lucreze cu mulți dintre clienții de e-mail?

Da. Mai mulți clienți de e-mail elimină orice stil CSS din <head> e-mail-urilor, în special Gmail, ceea ce face ca stilurile CSS integrate să fie o necesitate pentru e-mailuri.

Este mai bine să folosiți pixeli sau ems pentru dimensiunea fontului în e-mailuri?

Este mai bine să folosiți pixeli pentru definirea dimensiunilor fonturilor în e-mailuri, deoarece mulți clienți de e-mail nu acceptă ems.

Este posibil să înlocuiți imagini folosind interogări media?

Este posibil să înlocuiți imaginile de fundal folosind interogări media, dar nu imaginile inline ( etichete <img>).

Care este cea mai bună modalitate de a optimiza imaginile, astfel încât acestea să fie redate cu claritate pe ecranele retină?

Pentru retină, de obicei doriți să faceți imaginea de două ori mai mare decât afișarea finală. De exemplu, o imagine de 100×100 ar trebui să fie de fapt 200×200, dar redusă la 100×100 folosind atribute HTML sau stil CSS. În mod obișnuit, această tehnică ar trebui utilizată numai pentru imagini mai mici care trebuie să fie clare, nu imagini mari, cum ar fi fotografiile. Există câteva discuții grozave în comunitatea Litmus despre proiectarea pentru retină:

• Proiectare pentru Retina
• Imagini cu îndemnuri text și afișare retină

Afișează: niciunul; sau display:block; lucrezi în e-mail receptiv?

Nu este o chestiune dacă proprietatea de afișare funcționează în e-mailul receptiv, ci dacă este acceptată de clienții de e-mail. Ca majoritatea CSS, este acceptat de unii și nu de alții. În special, nu este acceptat de Gmail.

Există vreun client de e-mail echivalent al „elementului de inspectare” al unui browser web? Ar fi util să depanez design-urile mele receptive.

Nu există un echivalent exact al „elementului de inspectare” al unui browser web. Cu toate acestea, funcția de testare interactivă din Litmus este extrem de utilă. De asemenea, Litmus Builder are funcționalitate de testare și re-testare cu 1 clic pentru a face iterarea pe e-mail foarte rapid.

În caz contrar, vă recomandăm doar depanarea într-un browser WebKit (Chrome sau Safari). Deoarece majoritatea deschiderilor mobile au loc pe WebKit, care are un suport CSS excelent, dezvoltarea și depanarea într-un browser WebKit este o replicare bună a ceea ce se va întâmpla pentru acești clienți de e-mail.

Umplutura este acceptată universal între clienții de e-mail?

Umplutura este aproape universal acceptată între clienții de e-mail. Proprietatea marjei, pe de altă parte, nu are un suport mare. Vă recomandăm cu căldură utilizarea căptușelii.

Cum stivuiți corect trei coloane folosind alinierea? Ar trebui să utilizați alinierea la centru în plus față de stânga și dreapta? Sau, nu recomandați să utilizați deloc aspectul cu trei coloane?

Da, puteți stivui trei coloane în design de e-mail receptiv, deși opțiunile dvs. de stivuire și inversare sunt mai limitate sau mai dificil de realizat decât un design cu două coloane. Alinierea tabelelor depinde de modul în care doriți să le stivuiți, dar de obicei le-ați alinia toate cele trei tabele la stânga.

ActionRocket are o postare grozavă despre o tehnică avansată de stivuire inversă a meselor.

CONSTRUCTOR DE LITMUS

Ce este Litmus Builder?

Litmus Builder este primul editor de cod din lume creat pentru designerii de e-mail de către designerii de e-mail. Este complet gratuit să creați, să editați și să partajați e-mailuri.

Emmet este încorporat direct în Litmus Builder?

Este! Integrarea noastră Emmet face ca codificarea cu stenografie să fie o briză.

Unde putem găsi șabloane de e-mail receptive în Litmus Builder?

Litmus Builder are o galerie de peste 20 de șabloane de e-mail în secțiunea Șabloane. Toate șabloanele sunt complet libere de utilizat. Consultați documentația noastră completă de ajutor pentru Litmus Builder.

Încercați șabloanele noastre receptive gratuite, pre-testate

E-mailul receptiv vă permite să vă reglați designurile pentru un public din ce în ce mai mobil. Simplificați-vă procesul de proiectare a e-mailului cu o serie de șabloane gratuite, pre-testate pe Litmus Community.

Vă prezentăm șabloane de comunitate Litmus Porniți următoarea campanie cu unul dintre șabloanele pre-testate ale Litmus. Accesați șabloanele →