Share
Design-ul de e-mail urmărește o mulțime de considerente ca și designul web: multe tipuri diferite de browsere, sisteme de operare, dimensiuni de ecran și dispozitive. Dar, în cazul în care designerii web au reușit să utilizeze tehnici moderne de CSS și limbi de scripting pentru partea de client pentru a le ajuta să depășească aceste provocări, designerii de e-mail nu au fost atât de norocoși.
Deci, ce e de făcut un designer de e-mail? În primul rând, și cel mai important, ca designeri de e-mail trebuie să uităm noțiunea de design pixel-perfect. Apoi, trebuie să îmbrățișăm mai multe considerații de proiectare care vor ajuta modelele de e-mail să strălucească, indiferent de locul în care e-mailul este citit.
Notă: acest tutorial face parte dintr-o săptămâna în valoare de conținut de e-mail pe Tuts + Web Design-a verifica ghidul HTML Mastering învățare e-mail pentru mai mult!
E-mailurile trebuie să fie ușor de citit și de înțeles, indiferent de dispozitivul pe care sunt citite, astfel încât mesajul lor să fie comunicat abonatului. Iată câteva aspecte de design simple care trebuie luate în considerare:
Modelul piramidal inversat (unde cele mai multe elemente de atragere a atenției sunt plasate în primul rând, urmate de informații de susținere și așa mai departe) este perfect pentru modelele de e-mail:
Acest e-mail de la Nest utilizează perfect modelul piramidal inversat pentru a atrage utilizatorul la butonul de chemare la acțiune:
Nest Cam IQ design de e-mailZig-zag layout-ul este o structură simplă a grilei, care poate fi tradusă foarte ușor în tabelele HTML - baza tuturor desenelor de e-mail. Acest tip de aspect face ca conținutul să fie ușor de digerat independent de dispozitivul pe care e-mailul este citit. Pe un dispozitiv cu o dimensiune mare a ecranului, cum ar fi un desktop, va fi afișată structura zig-zag. Pe dispozitivele mai mici, cum ar fi telefoanele inteligente, structura se poate degrada într-o structură cu o singură coloană:
De curs Zapier utilizează modelul ZÎn timp ce acest tip de aspect este puțin mai dificil de adaptat pentru diferite dimensiuni ale ecranului, există o mulțime de metode documentate online pentru a codifica acest tip de aspect.
Consultați acest e-mail de la Tinder care folosește aspectul de tip Z pentru a umbla cu ușurință pe utilizatori prin modul de configurare a profilurilor lor, fără a copleși abonatul cu informații:
Tinder e-mail design pe reallygoodemailsDin nou, aspectul se transformă într-un design cu o singură coloană pentru dispozitivele mai mici.
Spațiul alb este adesea nemesisul designerilor de e-mail. Cu un spațiu limitat, mai ales pe smartphone-uri, există presiune pentru a vă asigura că spațiul alb este închis. E-mailurile cu puțin spațiu alb și conținut îngrămădit împreună pot fi oprite pentru abonați, greu de citit și, în cele din urmă, nereușite.
Îmbogățiți spațiul alb. Utilizarea inteligentă a spațiului alb poate face mai ușoară citirea și utilizarea eficientă a e-mailurilor în jurul butoanelor de apel pentru acțiune, ceea ce le va face să iasă mai mult și să obțină mai mult din acele clicuri foarte necesare.
Utilizarea eficientă a spațiului alb poate ajuta chiar și la lizibilitatea e-mailurilor dvs., ceea ce este esențial pentru abonații să vă citească e-mailurile pe dispozitive mobile minore.
Acest e-mail de la Squarespace este un exemplu minunat de modul în care spațiile libere pot ridica design-ul e-mailului dvs. și pot face mesajul e-mailului clar abonatului:
Ei bine, dacă Keanu o poate face ... Utilizatorii trebuie să fie capabili să citească mesajele de poștă electronică, indiferent dacă au o privire rapidă asupra lor pe un dispozitiv mobil sau verificând e-mailurile lor pe un desktop. Asigurarea că textul din e-mail este lizibil indiferent de mărimea ecranului pe care este citit e-mailul dvs. este critică.
În perioada anterioară telefoanelor smartphone-uri, era normal ca textul în e-mailuri să fie de 12px. Când oamenii au început să citească e-mailuri pe smartphone-uri, a avut loc o grămadă de mișcări de mărire a imaginii pentru a citi conținutul. Acest lucru a scos deseori din proiectarea e-mailului, lăsând abonații cu o experiență teribilă în căsuță poștală.
Folosind o dimensiune minimă a literei de 16 pixeli pentru copia de corp a e-mail-ului dvs., se va asigura că este lizibil, indiferent de dimensiunea ecranului de citire. Dar nu este doar dimensiunea fontului care este importantă. Înălțimea liniei este, de asemenea, o considerație importantă în design pentru a vă asigura că e-mailul este ușor de citit. O înălțime a liniei, care nu este mai mică de 1,5 ori mai mare decât mărimea fontului, vă va asigura că copia dvs. de e-mail este ușor de citit de toți. Deci, dacă dimensiunea fontului pentru copia corpului este de 16 pixeli, înălțimea liniei trebuie să fie de 24 de pixeli. Puteți utiliza aceleași calcule pe titluri și alte elemente de text din e-mail.
Evernote cu o copie de 22px încrezătoare și o înălțime de linie (aproape 1,5) 30pxSprijinul pentru cele mai elementare atribute HTML și CSS este încă neclară în multitudinea de clienți și dispozitive de e-mail populare. Luați imagini de fundal, de exemplu.
Imaginile de fundal sunt utilizate în mod obișnuit de mulți designeri de e-mail, dar nu sunt acceptate în toți clienții de e-mail, în special versiunile Microsoft Outlook și GANGA (Gmail Android cu un cont non-Gmail).
Există un excelent instrument online de la Campaign Monitor, care va genera VML (Vector Markup Language) - limbajul proprietar al Microsoft folosit pentru marcarea HTML în Outlook - permițând astfel imagini de fundal în acele versiuni ale Outlook care nu acceptă imagini de fundal. Victorie!
Dar dacă nu doriți să vă dezamăgiți codul VML și doriți să vă lipiți de HTML și CSS, pur și simplu utilizați o culoare de fundal adecvată atunci când imaginile de fundal nu sunt acceptate. Și atunci când alegeți o culoare de fundal de rezervă, nu uitați să luați în considerare culoarea oricărui text care ar putea fi așezat pe partea de sus a imaginii de fundal.
Folosirea unei culori de fond în fundal este, de asemenea, o modalitate excelentă de a vă asigura că e-mailurile sunt încă de înțeles dacă le citește pe un dispozitiv mobil cu o conexiune de date proastă. Dacă imaginile nu se încarcă, culoarea de fond de rezervă umple spațiul în care se află imaginea de fundal.
O tehnică cunoscută sub numele de Pixel Art duce acest lucru la un alt nivel. Cunoscută ca o formă de design defensivă, ea combină imaginile și culorile de fundal care creează mozaicuri atunci când imaginile nu se încarcă.
Limitările în ceea ce privește suportul pentru fonturile web și orientările stricte ale mărcii au însemnat că, din punct de vedere istoric, designerii de e-mail au trebuit să creeze imagini cu text în ele, astfel încât să poată avea control complet asupra aspectului textului.
Înapoi în zi, când e-mailul a fost vizionat în general pe dispozitive desktop, acest lucru a fost perfect acceptabil. Cu toate acestea, textul din imagini prezintă a imens pentru utilizatorii care vizualizează e-mailuri pe dispozitivele mobile. Pe măsură ce imaginea se măsoară, la fel și textul. Deseori devine ilizibil, creând o experiență precară pentru abonat.
Soluția? Utilizați o imagine de fundal cu text live în partea de sus. Utilizând textul live, veți putea controla dimensiunea textului pe diferite dispozitive utilizând interogări media, care sunt acceptate pe scară largă în clienți de e-mail populare, cum ar fi Gmail și Apple Mail.
Acest e-mail de la REI utilizează o combinație de imagini de fundal plus text peste mesajul principal și arată excelent pe dispozitive desktop și mobile:
Din REIGIF animat umil este încă utilizat pe scară largă de designerii de e-mail. GIF-urile sunt perfecte pentru a adăuga un pic de interes sau entuziasm la un e-mail. Dar există o tendință periculoasă a GIF-urilor animate din ce în ce mai complicate, cu animații mai lungi - ceea ce înseamnă dimensiuni mai mari ale fișierelor.
Ar putea fi o briza pentru a descărca un GIF de 4MB de la laptop, acasă, la conexiunea la internet prin cablu. Dar gândiți-vă la cei care încearcă să descarce același GIF pe un dispozitiv mobil folosind rețeaua de date. Este posibil ca imaginea să dureze atât de mult încât cititorul să se simtă obosit să aștepte și să închidă sau să ștergă e-mailul. Și acest lucru este foarte rău dacă mesajul principal al e-mailului dvs. este în acest GIF.
În mod ideal, doriți să păstrați dimensiunile de imagini GIF animate sub 1MB. Aceasta înseamnă simplificarea oricărei animații, menținerea intervalului de culoare relativ mic și o durată scurtă de animație. Nu trebuie să fiți un vrăjitor Photoshop pentru a vă optimiza GIF-urile pentru e-mail. Există instrumente online care te pot ajuta să faci asta, ca și acest GIF optimizer online.
Pentru a reduce dimensiunea animației GIF, încercați:
Acest e-mail de la Postable oferă un animat animat GIF și ceasuri în doar 303kb:
Uitați-vă la versiunea animată realăButoanele de chemare la acțiune, sau CTA-urile pe scurt, reprezintă o bază principală pentru e-mail. La urma urmei, trimiteți un e-mail pentru a notifica abonatul despre ceva și doriți ca abonatul să poată face ceva cu informațiile din e-mail. Aici intră butonul de chemare la acțiune.
Problema este că acum oamenii nu doar fac clic pe e-mailul dvs. de pe un dispozitiv desktop cu un mouse sau trackpad. Dar, de asemenea, folosesc tablete care au stilouri. Și smartphone-uri, de dimensiuni diferite, folosind degetul mare sau degetul pentru a atinge.
Tastele de apel pentru acțiune trebuie să poată face clic pe o varietate de dimensiuni diferite ale ecranului, fie folosind un mouse, un stilou, degetul mare sau chiar un deget. Salută buzunarele cu butoane.
Butoanele pentru bulletproof utilizează doar codurile HTML și CSS pentru a crea un buton 100% clicabil. Există diverse tehnici diferite pe care le puteți utiliza pentru a crea un buton antiglonț. Și chiar un generator de cod care vă va crea butonul pentru dvs. Elementele cheie ale informațiilor pentru un buton mare pentru bulletproof sunt dimensiunile. Instrucțiunile Apple recomandă că butoanele nu trebuie să fie mai mici de 44 de pixeli la 44 de pixeli, pentru a se asigura că pot fi accesate de pe un dispozitiv mobil. Și acesta este standardul pe care designerii de e-mail l-au adoptat pentru butoanele anti-bullet în e-mailurile lor.
Toate aceste considerații de proiectare garantează că e-mailurile dvs. vor fi citite, înțelese și acționate de un public mai larg. Toate obiectivele pe care ar trebui să le urmărească orice comerciant de e-mail.
Accentsconagua