Cum să proiectați e-mailuri pentru o abordare primară pe mobil

Publicat: 2015-05-21

Luptăm lupta bună, care este bătălia nesfârșită a fluxului constant de e-mail. Indiferent unde mergem sau ce dispozitiv avem la noi, e-mailurile ne pot găsi oriunde. Sunt șanse să mai primiți zece e-mailuri după ce citiți acest articol. Și, în calitate de designeri, suntem de ambele părți ale căsuței de e-mail: primim în mod constant e-mailuri, dar suntem, de asemenea, responsabili pentru proiectarea și crearea design-urilor reale de e-mail.

Indiferent de cine vizați cu e-mailul dvs., scopul este de a oferi cea mai bună experiență de utilizare atunci când trimiteți e-mailuri către abonați, clienți și potențiali. Și pentru că majoritatea e-mailurilor sunt deschise pe dispozitive mobile, trebuie să proiectăm e-mailuri pentru a găzdui orice dispozitiv pe care ar putea fi deschise.

Ne-am obișnuit atât de mult cu designul web receptiv și cu aplicațiile mobile de top, încât adesea considerăm de la sine înțeles că putem lua orice dispozitiv și putem proiecta o experiență personalizată. Cu e-mailul, lucrurile nu sunt la fel de tăiate și uscate. În ceea ce privește tehnologia, sunt ani lumină în spatele designului web modern. Trebuie să proiectăm cu atribute HTML, machete bazate pe tabel și stiluri inline, care nu sunt garantate să se comporte la fel în fiecare client de e-mail.

Proiectarea e-mailului pentru toate dispozitivele, care sunt opțiunile mele?

Înainte de a vă curăța colecția de CD-ROM, amintiți-vă că există speranțe pentru a crea un e-mail „responsiv” de succes, chiar și cu limitările. Crearea unui e-mail cu adevărat receptiv este cu siguranță o opțiune, dar este important să luați în considerare toate aceste trei abordări atunci când creați un design mobil de succes:

Design scalabil
Design fluid
Design receptiv

Pentru a alege abordarea care se potrivește cel mai bine nevoilor dvs., este important să înțelegeți diferențele și limitările dintre aceste trei forme de design. Luarea unei decizii necesită cunoștințe despre publicul dvs. și ce dispozitive și clienți de e-mail folosesc. Deoarece nu toți clienții de e-mail oferă același suport CSS, acest lucru vă va ajuta să determinați care abordare va servi cel mai bine utilizatorilor dvs.

Design scalabil

proiectare-scalabilă

Aspectele de e-mail scalabile sunt versatile, deoarece pot fi citite și pe care se poate face clic pe toate dimensiunile de ecran. Aceasta este o opțiune excelentă dacă publicul dvs. tinde să-și deschidă e-mailurile pe o varietate de dispozitive: mobil, tabletă și desktop.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

Această opțiune este de obicei cea mai ușor de implementat, deoarece nu utilizează interogări media și nu există lățimi de tabel care trebuie ajustate. Un avantaj este că nu există o curbă uriașă de învățare atunci când proiectați acest tip de e-mail. În cele mai multe cazuri, mobilul este cel mai obișnuit dispozitiv pentru citirea e-mailurilor, iar acest lucru facilitează asigurarea că considerentele mobile sunt luate mai întâi. Butoanele mai mari, textul ușor de citit și îndemnurile clare la acțiune oferă telefonului mobil prima prioritate pentru a satisface nevoile pentru o dimensiune mai mică a ecranului.

Designul de e-mail scalabil poate fi limitativ, deoarece trebuie să fie o singură coloană pentru a funcționa bine pe toate dispozitivele. Motivul este că, dacă designul ar avea mai multe coloane, acestea ar deveni foarte mici pe dispozitivele mobile, afectând lizibilitatea. Cu toate acestea, dacă parcurgeți căsuța de e-mail, veți vedea o mulțime de aspecte cu o singură coloană, deoarece sunt foarte frecvente.

Conținutul este esențial pentru orice e-mail, așa că dimensiunea textului ar trebui să fie la o dimensiune care funcționează bine pentru dispozitive mobile și, de asemenea, pe ecrane mai mari. Cu majoritatea clienților de e-mail, întregul e-mail va umple ecranul, astfel încât utilizatorul nu va trebui să deruleze vertical. Cu toate acestea, este totuși recomandat ca informațiile cheie și îndemnul să fie plasate în partea din stânga sus a e-mailului, doar în cazul în care e-mailul nu umple ecranul așa cum a fost prevăzut.

Design fluid

design-e-mail fluid

S-ar putea să fiți familiarizați cu aspectul „lichid” din design web. Componentele de design au lățimi procentuale și se adaptează la rezoluția ecranului utilizatorului, păstrând aceleași lățimi. Designul fluid de e-mail folosește aceeași idee.

Această opțiune de e-mail face o punte între opțiunea scalabilă și cea cu adevărat responsabilă. Trebuie făcut mai mult design inițial decât cu opțiunea scalabilă. Motivul pentru aceasta este că dimensionarea bazată pe procente face ca lățimea tabelelor și imaginilor să se adapteze la orice dimensiune a ecranului pe care este vizualizat e-mailul. Tabelele nu modifică aspectul la diferite dimensiuni, dar conținutul curge și umple spațiul. Aceasta este o opțiune excelentă pentru e-mailurile care au o greutate de text, deoarece există mai puțin control asupra modului în care copierea și imaginile se relaționează între ele. Este totuși o idee bună să păstrați aspectul simplu, de preferință un singur aspect de tabel pentru a păstra lizibilitatea e-mailului ca primă prioritate.

Vă amintiți cum am spus că acest lucru face o punte între fix și receptiv? Motivul este că dimensiunea trebuie să fie restrânsă pentru ecrane mai mari. Dacă e-mailul devine prea larg, liniile de text devin mult prea lungi vizual și vrem să ne asigurăm că cititorii noștri pot citi cu ușurință e-mailul nostru. Împachetarea conținutului e-mailului într-un tabel de container cu lățime fixă va ajuta la apariția pe ecrane de dimensiuni mai mari. Apoi, o interogare media utilă va viza dimensiuni mai mici ale ecranului.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

Exemplu de interogare media pentru dispozitive mobile:

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

E-mail receptiv

responsive-design

Să luăm ceea ce știm din e-mailurile scalabile și fluide și să mai adăugăm câteva reguli. Responsive vă permite să aveți mai mult control asupra a ceea ce este prezentat la diferite puncte de întrerupere cu interogări media CSS. Cu această opțiune, layout-urile pot fi modificate și alte elemente pot fi, de asemenea, personalizate cu stiluri condiționate pentru anumite puncte de întrerupere.

Iată un exemplu de interogare media pentru un aspect receptiv:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

Ca și celelalte opțiuni, nu sunteți limitat la o singură coloană sau modele simple. E-mailurile pot fi mai complexe, cu mai puține restricții asupra aspectului și cantității de imagini. De exemplu, modelele de e-mail pot fi mai multe coloane pe dispozitive mai mari, dar o singură coloană pe mobil. Dimensiunea textului, imaginile și aproape orice altceva pot fi optimizate pentru cea mai bună experiență.

Înainte de a crea modele complexe cu mai multe interogări media, este important să vorbim despre unele dintre compromisuri. Interogările media nu funcționează în toți clienții de e-mail. De fapt, suportul este destul de limitat. Conform listei de suport pentru interogări media Litmus, aplicația Android Outlook.com, clientul nativ Android 4.x și iOS (iPhone/iPad) le acceptă în prezent. Acestea pot fi utilizate la maximum dacă majoritatea spectatorilor dvs. sunt utilizatori de dispozitive mobile și tablete.

Alte considerații de proiectare

Înainte de a începe să creați designul e-mailului dvs., este important să vă uitați la analize pentru a determina ce clienți de e-mail și dispozitive ale utilizatorilor dvs. Este recomandat să verificați acest lucru frecvent și să lăsați abordarea de proiectare să evolueze pe măsură ce lucrurile se schimbă. Chiar și cu limitări, e-mailul evoluează, așa că este important să țineți pasul cu ceea ce este acceptat în prezent.

Iată câteva resurse excelente pentru a le citi în continuare:

CSS specific mobil
Viitorul e-mailului
E-mailuri iPhone și Android

Vestea bună este că o primă abordare mobilă este posibilă cu limitările actuale ale e-mailurilor. Chiar dacă designul nu este cea mai adevărată formă de „responsive”, cu doar câteva procente specificate și câteva interogări media, veți crea un design de e-mail care va impresiona cu siguranță, indiferent de dispozitiv. În cele mai multe cazuri, majoritatea utilizatorilor verifică e-mailul pe dispozitive mobile, așa că adoptarea unei abordări mai întâi pe mobil devine o bază solidă pentru designul dvs. de e-mail.