Faceți designul dvs. de e-mail adaptabil pentru mobil în 5 pași simpli
Publicat: 2024-01-17Vrei ca buletinele informative prin e-mail și campaniile de marketing să arate uimitor pe orice dispozitiv? Bineînțeles că faci. Nimeni nu vrea ca munca lor grea să devină de necitit în căsuța de e-mail a cuiva. Din fericire, în doar cinci pași, vă puteți asigura că e-mailurile dvs. sunt receptive și gata să impresioneze abonații. Așa că luați niște băuturi răcoritoare, lista de redare preferată sau o băutură și să începem să ne asigurăm că arată cel mai bine pe orice ecran.
Setați lățimile coloanelor în procente, nu în pixeli
Pentru ca designul dvs. de e-mail să fie receptiv, setați lățimile coloanei folosind procente, mai degrabă decât valori fixe de pixeli. Acest lucru permite coloanelor să se adapteze flexibil la diferite lățimi ale ecranului.
Utilizați o rețea fluidă
Abordarea grilă fluidă utilizează procente pentru lățimile coloanelor, astfel încât acestea să se poată extinde și contracta după cum este necesar, în funcție de dimensiunea ecranului. Pentru un aspect simplu cu două coloane, faceți coloana din stânga cu lățime de 60-70% și coloana din dreapta cu lățime de 30-40%. De exemplu:
<tabel>
<tr>
<td width="65%”>Conținutul coloanei 1 aici</td>
<td width="35%”>Conținutul coloanei 2 aici</td>
</tr>
</tabel>
Acest lucru va permite Coloanei 1 să ocupe 65% din spațiul disponibil și Coloanei 2 restul de 35%. Pe un ecran mare de desktop, coloana 1 poate avea o lățime de 650 de pixeli, în timp ce pe un ecran mobil mic, poate avea o lățime de numai 200 de pixeli. Dar proporțiile relative vor rămâne aceleași.
Adăugați interogări media pentru punctele de întrerupere receptive
Interogările media vă permit să aplicați diferite reguli de stil în funcție de lățimea ecranului. Le puteți folosi pentru a face ajustări ulterioare ale rețelei de fluide la diferite puncte de întrerupere. De exemplu:
/* Pentru telefoane mobile: */
Ecran numai @media și (lățime maximă: 600 px) {
masa, td {
latime: 100% !important;
}
}
/* Pentru tablete: */
Ecran numai @media și (lățime minimă: 601 px) și (lățime maximă: 900 px) {
masa, td {
latime: 80% !important;
}
}
Acest lucru va face ca tabelul și coloanele să se extindă pentru a umple 100% din lățimea ecranului pe telefoanele mici și 80% pe tablete, făcând designul pe deplin receptiv.
Utilizați imagini fluide și medii care redimensionează
Pentru ca designul dvs. de e-mail să fie prietenos cu dispozitivele mobile, imaginile și alte medii trebuie să se redimensioneze fluid pentru a se potrivi oricărei dimensiuni de ecran. Urmați aceste sfaturi:
Utilizați dimensiuni de imagine receptive
Când adăugați imagini la e-mailul dvs., utilizați dimensiunea receptivă a imaginii. Aceasta înseamnă să oferiți mai multe dimensiuni de imagine, astfel încât clientul de e-mail să poată alege dimensiunea potrivită pentru ecranul pe care este vizualizat.
De exemplu, în loc să includeți doar o imagine mare de 1000 de pixeli, includeți și:
- O dimensiune medie (aproximativ 600 px)
- O dimensiune mică pentru coloane înguste (aproximativ 400 px)
- O dimensiune mică pentru ecrane mobile mici (aproximativ 200 px)
Clientul de e-mail va alege automat cea mai bună dimensiune pentru ecran și lățime de bandă. Pentru a specifica mai multe dimensiuni de imagine în e-mailul dvs., utilizați atributul <img srcset>.
Faceți media compatibile cu dispozitivele mobile
Pentru alte media, cum ar fi videoclipuri sau GIF-uri, oferiți și mai multe opțiuni de dimensiune. Videoclipurile ar trebui să aibă surse MP4 în rezoluții diferite. GIF-urile și cadrele iframe (cum ar fi încorporarea YouTube) ar trebui să aibă restricții de lățime care să se redimensioneze pentru a se potrivi cu orice ecran.
Țineți cont de aceste sfaturi, iar imaginile, videoclipurile și alte conținuturi media se vor afișa frumos pe orice dispozitiv. Abonații tăi vor aprecia un e-mail care arată grozav și care este ușor de citit oriunde îl deschid.
Dimensiunea fontului în ems, nu în pixeli
Pentru a face designul dvs. de e-mail prietenos pentru dispozitive mobile, veți dori să măriți fontul în ems în loc de pixeli. Pixelii sunt unități fixe, așa că dacă cineva are browser-ul mărit, textul poate deveni distorsionat. Ems, pe de altă parte, sunt unități relative care scala cu setările utilizatorului.
Utilizați un cadru de e-mail receptiv
Un cadru de e-mail receptiv are componente prefabricate care se redimensionează automat pentru orice lățime a ecranului. Unele opțiuni populare sunt MJML, Foundation for Emails și Ink. Aceste cadre folosesc ems pentru dimensionare, astfel încât nu trebuie să vă faceți griji că faceți singur conversia.
Dacă nu utilizați un cadru, convertiți pixelii în ems
Dacă doriți control deplin asupra CSS-ului și preferați să nu utilizați un cadru, va trebui să convertiți orice dimensiune a pixelilor în ems. Iată cum:
- Determinați dimensiunea fontului de bază în pixeli. Să presupunem că are 16 pixeli.
- Convertiți asta în ems. 1em = 16px (dimensiunea de bază), deci 16px = 1em.
- Orice dimensiune pe care doriți să o utilizați, împărțiți cu 16 px și înmulțiți cu 1 em. De exemplu, pentru un titlu de 24 px, 24 px/16 px = 1,5 em.
- Înlocuiți toate dimensiunile pixelilor din CSS cu echivalentele em.
Aliniați-vă conținutul în mod receptiv
Pentru ca designul dvs. de e-mail să fie receptiv, trebuie să vă aliniați conținutul astfel încât să fie afișat corect pe orice dimensiune de ecran. Urmați acești pași:
Utilizați măsurătorile fluidelor
În loc să utilizați lățimi fixe de pixeli pentru coloane, imagini și containere, utilizați procente. Acest lucru va permite conținutului dvs. să se scaleze proporțional în funcție de lățimea ecranului. De exemplu, în loc de o imagine cu width="600px", utilizați width="50%".
Evitați coafarea grea
Păstrați-vă e-mailul simplu, limitând utilizarea stilului personalizat, care nu se va afișa corect în unii clienți de e-mail. Bazați-vă pe tabelele HTML de bază, stilurile inline și atributul align pentru aspect. Centrați elementele când este necesar.
Urmând acești pași practici, conținutul dvs. de e-mail este afișat frumos, indiferent de dispozitivul pe care cititorii dvs. îl folosesc pentru a-și deschide căsuța de e-mail. Crearea unei experiențe grozave de design de e-mail receptiv pentru abonații dvs. merită efortul.
Testați, testați și mai testați
Verificați cum se afișează pe dispozitivele mobile
Știm cu toții că majoritatea oamenilor își folosesc dispozitivele mobile pentru a accesa e-mailurile. Așadar, pentru a vă asigura că e-mailul dvs. este compatibil cu dispozitivele mobile, testați-vă e-mailul trimițându-l pe diferite dispozitive mobile. Verifică-le pe Android, iPhone și tablete. Verificați cum sunt afișate imaginile, butoanele și textul atât în modul portret, cât și în modul peisaj.
Testați pe principalii clienți de e-mail
Nu toți clienții de e-mail afișează e-mailurile în același mod. Faceți teste pe Gmail, Outlook, Yahoo Mail și orice alte servicii majore de e-mail pe care le folosesc în mod obișnuit abonații dvs. Căutați orice probleme legate de modul în care sunt afișate imaginile, linkurile încorporate, butoanele sau alte elemente interactive. Efectuați modificări la codul dvs. pentru a remedia orice probleme de afișare și pentru a asigura coerența între clienți.
Verificați cum apare conținutul alternativ
Pentru abonații cu imagini dezactivate în clientul lor de e-mail, conținutul tău alternativ va apărea în locul imaginilor. Verificați de două ori dacă toate textul alternativ, subtitrările și descrierile imaginilor au sens în sine și oferă context pentru conținutul dvs. de e-mail. Conținutul alternativ ar trebui să aibă ca rezultat o experiență bună pentru cititor, chiar și fără imagini.
Revizuirea unui serviciu de redare a e-mailurilor
Utilizați un serviciu gratuit de testare a redării e-mailului, cum ar fi Litmus, Email on Acid sau Mosaico, pentru a vedea cum se redă designul dvs. de e-mail într-o gamă largă de clienți și dispozitive de e-mail simultan. Ei furnizează rapoarte care evidențiază orice probleme de rezolvat pentru a îmbunătăți capacitatea de răspuns a e-mailului. Faceți modificări codului și reîncărcați e-mailurile de testare până când rapoartele revin curate.
Verificați linkurile și elementele interactive
Linkurile, butoanele și orice alte componente interactive din e-mailul dvs. încorporate trebuie să funcționeze corect pe toate platformele. Verificați de două ori dacă linkurile ajung la destinația dorită și orice butoane sau formulare funcționează conform așteptărilor. Testați-le de mai multe ori pentru a vă asigura că nu există linkuri întrerupte sau elemente nefuncționale înainte de a vă lansa campania.
Sunt necesare teste și ajustări constante pentru a perfecționa designul receptiv al e-mailului. Dar depunerea efortului din timp va avea ca rezultat un e-mail cu acoperire largă și implicare ridicată pe toate dispozitivele abonaților și clienții de e-mail.
Depanarea problemelor obișnuite ale e-mailurilor receptive
Conținut debordant pe mobil
- Utilizați machete cu o singură coloană. Mai multe coloane rareori funcționează bine în e-mail.
- Păstrați paragrafele și secțiunile scurte și concise. Blocurile lungi de text sunt greu de citit pe ecranele mici.
- Folosiți marcatori și liste numerotate atunci când este posibil. Ele ocupă mai puțin spațiu decât paragrafele.
- Ascundeți conținutul secundar pe ecranele mici. Puteți utiliza interogări media pentru a afișa/ascunde conținut în funcție de lățimea ecranului.
Probleme cu lățimea e-mailului
Unii clienți de e-mail mai vechi au probleme cu lățimile de e-mail receptive. Pentru a remedia acest lucru:
- Setați o lățime maximă pe containerul dvs. de e-mail. Vă recomandăm 600px pentru majoritatea e-mailurilor.
- Adăugați !important după declarațiile de lățime pentru a înlocui unele CSS ale clientului de e-mail. De exemplu:
- Adăugați cod alternativ pentru Outlook 2007-2013. Aceste versiuni mai vechi necesită un stil separat:
Urmând aceste sfaturi de depanare va rezolva cele mai frecvente probleme de e-mail receptive. Anunțați-mă dacă aveți alte întrebări!
Concluzie
Acestea sunt câteva modalități simple de a vă asigura că e-mailurile dvs. sunt receptive. Rețineți că peste 50% dintre e-mailuri sunt deschise astăzi prin intermediul dispozitivelor mobile, așa că optimizarea pentru dimensiuni mai mici de ecran este esențială. Examinați toate șabloanele pentru e-mail și faceți orice modificări necesare la dimensiunea fontului, precum și la dimensiunea și spațierea imaginii. Destinatarii tăi vor aprecia să primească un e-mail pe care îl pot citi și cu care pot interacționa indiferent de dispozitivele pe care le folosesc.