Ghidul designului unui e-mail

Majoritatea comunicării online s-a mutat pe rețelele sociale. A trimite un e-mail cu datele și ocupația companiei tale, a devenit destul de importantă în marketing-ul online. Și când ne gândim la e-mailurile de marketing, ceea ce ne vine în minte în general este e-mailul HTML.

Realizarea unui e-mail este asemănatoare cu realizarea unei pagini  web simple , dar există câteva diferențe cheie pe care trebuie să le luați în considerare. Oamenii primesc adesea e-mailuri la un ritm copleșitor și nu tot timpul în momente potrivite în care să le citească. Asta înseamnă că aveți doar câteva fracțiuni de secundă pentru a le atrage atenția înainte de a trece la următorul mesaj din căsuța lor de e-mail. Dar atâta timp cât țineți cont de acest lucru – că aveți doar o clipă pentru a atrage atenția cititorului dvs. – veți avea o experiență mult mai ușoară și mai simplă în realizarea de e-mailuri eficiente.

Mobil sau bust

Atât de mulți oameni accesează e-mailurile de pe un dispozitiv mobil în zilele noastre (aproape jumătate din toate e-mailurile sunt deschise în aplicații mobile), încât a devenit destul de inutil să petreci o grămadă de timp realizarea e-mailuri frumoase care nu se afișează corect pe astfel de dispozitive.

Dacă e-mailul nu sunt afișate corect când îl verifică pe telefon, care sunt șansele abonaților tăi să se uite din nou la el când se întorc la birou? Majoritatea dintre ei probabil doar vor șterge e-mailul sau, mai rău, se vor dezabona.

Există două moduri de a proiecta pentru mobil. Puteți crea e-mailuri care să se redimensioneze pentru a se potrivi cu ecranul cititorului. Sau puteți crea un design de e-mail receptiv care se va adapta la diferite dimensiuni de ecran.

Există avantaje și dezavantaje în oricare dintre abordări. E-mailurile care se redimensionează sunt destul de ușor de codat și vor tinde să funcționeze pe aproape orice dispozitiv. Dar funcționează cel mai bine cu modele de e-mail foarte simple, care se pot descurca să fie vizualizate la dimensiuni mult mai mici decât desktopul.

Design-urile responsive sunt mult mai complexe de codat și nu sunt acceptate de fiecare browser mobil.

Design receptiv

Este posibil ca modelele responsive să fie mai practice pentru majoritatea e-mailurilor dvs. HTML decât aspectele care pur și simplu redimensionează. E-mailurile care au fost pur și simplu reduse vor deveni foarte greu de citit.

Câteva lucruri de care trebuie să țineți cont atunci când realizați aceste e-mailuri. Acestea sunt lucrurile care ar trebui declanșate pentru aspectele mobile și pot fi adaptate pentru versiunile cu ecran mai mare ale e-mailurilor dvs.

1. Aspectul dvs. ar trebui să fie destul de îngust: undeva în intervalul de 500-600 de pixeli este standard. Acest lucru le va face mai vizibile pe desktop, cât și pe dispozitivele mobile.
2. Asigurați-vă că fonturile sunt suficient de mari. Fiți conștienți de dimensiunile minime ale fonturilor pentru diverse platforme, astfel încât fonturile dvs. să nu fie mărite . De exemplu, iOS folosește o dimensiune minimă a fontului de 13 pixeli.
3. Zonele pe care se poate face clic trebuie să fie ușor de accesat. Asta înseamnă să le faci suficient de mari și suficient de izolate de alte link-uri.
4. Nu ezitați să utilizați display:none pentru a ascunde elementele inutile pe layout-urile mobile. 

Merită să vă faceți timp pentru a schița wireframes atât pentru versiunile dvs. de e-mail mobil, cât și pentru desktop înainte de a începe să codificați. 

CONSIDERAȚII DE TIPOGRAFIE

În timp ce mulți designeri se concentrează pe conținutul grafic al e-mailurilor HTML, tipografia este na dintre cele mai importante elemente. La urma urmei, este posibil ca unii dintre destinatarii dvs. de e-mail să vadă doar tipografia.

Luați în considerare utilizarea de dimensiuni mari pentru o mai bună vizibilitate. De asemenea, țineți cont de lungimile liniilor pe diferite dimensiuni ale ecranului și asigurați-vă că nu sunt prea lungi sau prea scurte.

Asigurați-vă că utilizați titluri și alte formatări tipografice pentru a face conținutul e-mailului mai ușor de scanat.

În general, tipografia de e-mail nu este mult diferită de tipografia web în general. 

E-mailuri diferite pentru scopuri diferite

Există o mulțime de tipuri diferite de e-mailuri pe care le trimiteți către listele dvs. de abonați. Fiecare își servește propriul scop și fiecare ar trebui să fie proiectat într-un mod care să servească cel mai bine acestui scop.

BULETINE INFORMATIVE

Unul dintre cele mai comune tipuri de e-mail este buletinul informativ. Acestea constau adesea dintr-o mulțime de link-uri, cu fragmente scurte de text, sau din articole mai lungi. În ambele cazuri, există șanse mari să nu existe un singur îndemn și, în schimb, pot exista destul de multe link-uri pe care să dai clic.

Aceasta reprezintă o provocare unică, deoarece designerii și creatorii de conținut trebuie să decidă în continuare un fel de prioritate sau ierarhie pentru conținutul din e-mail. În multe cazuri, aceasta va însemna o poveste sau un link prezentat în care să atragă cititorul, cu conținut suplimentar având o pondere mai mică.

Plastyk  are un design grozav de buletin informativ care este distractiv și captivant.

NOTIFICĂRI

Un alt tip de e-mail comun este e-mailul de notificare, denumit și e-mail de declanșare. Gândiți-vă la e-mailurile pe care le trimite Facebook când cineva vă trimite o cerere de prietenie sau la Twitter când cineva vă urmărește. Deși e-mailurile de notificare pot fi și anunțuri. Aceste e-mailuri sunt notificări, dar sunt, de asemenea, menite să declanșeze o acțiune din partea dvs. Aceste e-mailuri sunt în general foarte scurte și la obiect, cu un îndemn îndrăzneț la acțiune.

Iată un e-mail de anunț de la  Proper Labs.

E-MAILURI TRANZACȚIONALE

E-mailurile tranzacționale sunt trimise atunci când un utilizator interacționează într-un fel cu un site web sau cu o companie. Aceasta ar putea fi efectuarea unei achiziții sau înscrierea pentru ceva sau poate fi declanșată de ceva de genul când un utilizator își abandonează coșul de cumpărături fără a finaliza o tranzacție. Aceste e-mailuri servesc fie la furnizarea de informații (în cazul unei confirmări de comandă), fie pentru a atrage vizitatorul înapoi (cum ar fi în cazul unui coș abandonat).

Iată un exemplu bun de e-mail tranzacțional de la One Eyed Cat.  Este un bun exemplu al modului în care companiile fizice pot folosi marketingul prin e-mail.

E-MAILURI DE MARKETING

E-mailurile de marketing sunt trimise atunci când o companie dorește să faci afaceri cu ei. Acestea ar putea fi să vă anunțe cu privire la o ofertă specială, un produs nou sau ceva similar. Acestea sunt adesea e-mailurile care încorporează cel mai mult „design” dintre e-mailurile obișnuite pe care le-ar putea trimite o companie.

Aceste e-mailuri sunt menite în mod special pentru a determina un abonat să întreprindă un fel de acțiune cu o companie sau un site web. Ar putea fi înregistrarea, efectuarea unei achiziții sau ceva similar. Îndemnul din aceste e-mailuri este de departe cel mai important element. Însă alte elemente trebuie să susțină acest apel pentru a atrage cititorii să ia acțiunea dorită.

Comunitatea  are un e-mail de marketing excelent, care este un alt exemplu bun al modului în care companiile fizice pot folosi e-mailul pentru a-și angaja clienții.

Cele mai bune practici de design de e-mail

În timp ce designul de e-mail și designul web au multe dintre aceleași atribute, există câteva diferențe cheie pe care trebuie să le țineți cont atunci când proiectați pentru e-mail. Deși majoritatea dintre ele se adaptează cu ușurință, sunt totuși importante și vă fac e-mailurile mult mai eficiente.

TOTUL ȚINE DE CONȚINUT

Conținutul este întotdeauna important, indiferent de ceea ce proiectați. Dar cu e-mailurile, și în special cu e-mailurile care probabil vor fi vizualizate pe un dispozitiv mobil, păstrarea conținutului scurt și la obiect este și mai vitală. Aveți la dispoziție cel mult câteva secunde pentru a vă angaja cititorul, iar dacă primele secunde sunt irosite cu informații străine care nu sunt utile, atunci le-ați pierdut.

Asigurați-vă că conținutul dvs. este cât se poate de concis și clar. Eficiența este cheia, iar dacă cititorul tău nu poate discerne foarte repede despre ce este vorba despre e-mailul tău și exact ce vrei să facă, atunci îți pierzi timpul.

ÎNDEMN CLAR

Îndemnul la acțiune este cea mai importantă parte a oricărui design de e-mail. E-mailul dvs. are un scop, fie că este de a determina cititorii să se înscrie pentru ceva, să citească ceva sau să cumpere ceva. Iar chemarea dvs. la acțiune ar trebui să demonstreze foarte clar care este acel lucru și să-și atragă cititorul să facă ceea ce doriți să facă.

Îndemnurile vin cel mai adesea sub formă de butoane. Ar trebui să fie imediat identificate și nu prea departe de e-mail.

Asigurați-vă că îndemnul dvs. la acțiune este, de asemenea, ușor de accesat. Aceasta înseamnă că trebuie să fie suficient de mare încât să fie ușor să faceți clic pe un dispozitiv mobil și că nu există alte linkuri suficient de apropiate pentru a putea fi făcute clic accidental.

TESTAȚI DEVREME, TESTAȚI DES

Asigurați-vă că toate e-mailurile sunt testate complet pe o varietate de dispozitive și clienți. Poate doriți să începeți să vă testați machetele etc. chiar de la început, dar asigurați-vă că le testați pe tot parcursul procesului de proiectare pentru a vă asigura că rămân fără erori.

Testarea adesea înseamnă, de asemenea, că este probabil mai rapid să urmăriți erorile dacă apar, deoarece veți avea mai ușor să vă amintiți ce modificări tocmai ați făcut.

Înțelegeți exact ce suportă fiecare dintre clienții și dispozitivele majore și exact unde sunt insuficiente și fie găsiți cadre și standarde care abordează aceste deficiențe, fie proiectați în jurul lor.

FOLOSIȚI TEXTUL DINAINTEA ANTETULUI

Textul pre-header apare în mulți clienți de e-mail ca o previzualizare a mesajului. Vedeți acest lucru la fel de important ca și subiectul e-mailului dvs. Folosiți-l pentru a atrage cititorul să deschidă e-mailul. Acest lucru poate fi deosebit de util, deoarece mulți clienți de e-mail scurtează liniile lungi de subiect.

LINK CĂTRE VERSIUNEA GĂZDUITĂ PE WEB

Asigurați-vă că includeți un link către versiunea găzduită pe web a e-mailurilor dvs., în cazul în care cineva este cu adevărat interesat, dar are probleme în a-l vizualiza pe dispozitivul mobil sau pe clientul de e-mail. Multe servicii de e-mail vă permit să utilizați un link de urmărire pentru aceasta (și pentru alte linkuri), astfel încât să puteți vedea cine face clic.

NU TE COMPLICA

Deși puteți proiecta machete complexe cu o mulțime de elemente grafice și stilizate, creșteți riscul ca e-mailurile dvs. să nu apară așa cum ați dorit pentru toți cititorii dvs.

Design-urile mai simple și aspectele mai simple înseamnă că e-mailurile dvs. sunt mai citite universal pe dispozitive. În timp ce modelele complexe pot fi mai plăcute din punct de vedere estetic, adesea nu merită complicațiile suplimentare pe care le prezintă pentru un beneficiu tangibil minim.

Șabloane și cadre

În timp ce codificarea unui e-mail HTML complet de la zero este complet fezabilă, folosind un cadru sau un boilerplate pentru a începe, sau chiar un șablon prestabilit , poate accelera foarte mult procesul și îl poate face mai accesibil pentru designerul începător.

CERBERUS

Cerberus este un set de modele de e-mail receptive care funcționează chiar și în Outlook și Gmail mobil. Puteți utiliza blocurile de cod împreună sau separat. Există două versiuni: una care se bazează pe interogări media și una care nu.

CERNEALĂ

Ink este un e-mail receptiv de la Zurb. E-mailurile create cu Ink funcționează pe orice dispozitiv.

ȘABLOANE DE E-MAIL RECEPTIVE CONSTRUITE PE INK

Aceste șabloane de e-mail receptive construite pe Ink sunt un loc minunat pentru a începe cu Ink. Există patru șabloane: o singură coloană de bază, un e-mail cu imagine erou, un aspect bară laterală și un aspect hibrid bară laterală-erou.

ȘABLOANE DE E-MAIL RECEPTIVE

Zurb are câteva șabloane de e-mail adaptabile suplimentare , inclusiv un șablon de buletin informativ cu o imagine eroică găsită pe această pagină. Include și alte informații utile despre utilizarea șabloanelor.

MODELE DE E-MAIL RECEPTIVE

Responsive Email Patterns este o colecție de modele și module pentru crearea de e-mailuri receptive. Include modele pentru machete, navigare, liste, media și multe altele.

ȘABLON DE E-MAIL HTML FOARTE SIMPLU

Șablonul de e-mail HTML cu adevărat simplu este exact ceea ce spune că este: un șablon de e-mail HTML foarte simplu, cu un design foarte simplu. Este o singură coloană, cu un îndemn încorporat și un scop clar.

GENERATOR DE ȘABLOANE

Generatorul de șabloane CampaignMonitor vă permite să creați șabloane de e-mail HTML gratuite în doar un minut. Rezultatele sunt pregătite pentru dispozitive mobile, testate complet și pot fi folosite direct în CampaignMonitor sau descărcate pentru a fi utilizate în altă parte.

ȘABLOANE DE E-MAIL GRATUITE

Aceste șabloane gratuite de e-mail de la CampaignMonitor pot fi descărcate și utilizate gratuit, indiferent dacă utilizați CampaignMonitor sau nu. Există o mulțime de stiluri și modele disponibile, peste 100 în total.

HTML EMAIL BOILERPLATE V 0.5

HTML Email Boilerplate este un bun punct de plecare pentru crearea de e-mailuri. Nu conține nici un design sau aspect, ceea ce ajută la evitarea multor probleme de randare în clienții de e-mail majori.

E-MAIL BOILERPLATE

Acest e-mail Boilerplate de la Emailology include toate elementele de bază de care aveți nevoie pentru a vă configura e-mailurile HTML, cum ar fi CSS și HTML. Este comentat pentru a vă oferi instrucțiuni de utilizare.

RĂSPUNS

Antwort oferă aspecte responsive anti-glonț pentru e-mailuri care se adaptează la diferite lățimi ale clienților. Acceptă toți clienții de e-mail majori, inclusiv Outlook și Gmail.

ȘABLOANE PENTRU BULETINE INFORMATIVE GRAPHICMAIL

GraphicMail oferă aproximativ 100 de șabloane de buletine informative gratuite. Este necesar un cont gratuit pentru a le folosi.

ȘABLOANE DE E-MAIL THEMEFOREST

ThemeForest oferă o mulțime de șabloane de e-mail premium, variind de la 6 USD la 19 USD. Șabloanele premium sunt uneori mai ușor de utilizat și pot avea caracteristici suplimentare care pot fi greu de găsit în șabloanele gratuite.

STAMPLIA

Stamplia oferă o piață de șabloane premium, unde puteți cumpăra și vinde șabloane pentru buletine informative, e-mailuri tranzacționale și multe altele.

Instrumente de e-mail

PLUGIN WORDPRESS E-NEWSLETTER

Plugin- ul WordPress e-Newsletter oferă o gestionare profesională a buletinelor de știri prin e-mail și a abonaților chiar în interfața de administrare WordPress. În timp ce auto-găzduirea serviciului dvs. de e-mail poate prezenta propriul set de provocări, vă oferă, de asemenea, control deplin și elimină taxele lunare de serviciu, care pot fi destul de valoroase pentru multe companii.

IMAGINI DE FUNDAL ANTIGLONȚ

Imaginile de fundal antiglonț de la CampaignMonitor sunt un instrument simplu pentru codificarea imaginilor de fundal ale e-mailului. Doar introduceți adresa URL a imaginii de fundal, culoarea de rezervă și dacă este vorba pentru întregul corp de e-mail sau doar pentru o singură celulă de tabel, și vă oferă codul.

BUTOANE DE E-MAIL ANTIGLONȚ

Butoanele de e-mail antiglonț de la CampaignMonitor vă permit să creați butoane frumoase îmbunătățite progresiv pentru e-mailurile dvs. Sunt perfecte pentru apeluri la acțiune.

TURNESOL

Litmus este un set de instrumente de urmărire și testare pentru e-mail. Include previzualizări de e-mail, instrumente de analiză și de testare a filtrului de spam.

SCOPUL TURNESOLULUI

Litmus Scope facilitează crearea unei versiuni curate, bazate pe web, a oricărui e-mail pe care apoi îl puteți partaja. Este disponibil pentru descărcare, precum și sub formă de bookmarklet care funcționează cu orice webmail.

Exemple și inspirație

Există o mulțime de galerii de e-mail pe care le puteți consulta pentru inspirație. Dar iată douăzeci de e-mailuri minunate pentru a începe!

VÂNĂTORII DE BALENE

LICITAȚIA SF. TEREZA