Modele, șabloane și exemple pentru 2023

Ați deschis vreodată un e-mail pe telefon și imaginea era de calitate scăzută, textul era prea mic și butonul de îndemn a fost spart? Toate acestea sunt defecte ale designului static de e-mail. E-mailurile responsive sunt răspunsul.

Având în vedere că mai mult de jumătate dintre rezidenții din SUA se uită la mesajele de marketing prin e-mail pe telefoanele lor, trebuie să vă optimizați e-mailurile pentru mai multe ecrane, inclusiv mobil și tabletă.

E-mailurile receptive folosesc imagini și tabele fluide pentru a rămâne flexibile pe diferite dimensiuni de ecran. În cele din urmă, oferă conținut conceput pentru experiența optimă a fiecărui utilizator.

Deși e-mailurile receptive pot fi proiectate folosind interogări media CSS, nu aveți nevoie de nicio experiență de codare pentru a crea una. Crearea unui e-mail receptiv nu este doar o sarcină pentru programatori.

Aici, am aliniat câteva bune practici și șabloane gata de utilizat, precum și un tutorial rapid despre elementele fundamentale ale e-mailurilor receptive.

E-mailurile responsive sunt, de asemenea, mai accesibile, deoarece permit abonaților să citească pe dispozitivul lor preferat.

Pentru a ilustra, iată cum arăta un e-mail promoțional pe care l-am primit pe desktop.

Acest e-mail are imagini grozave, pictograme de cumpărături și este frumos formatat. Când deschid e-mailul pe mobil, asta sunt întâmpinat.

Încă am aceleași informații și aceleași fotografii și pictograme de cumpărături. Singura diferență vizibilă este formatul de e-mail. Este diferit pentru a se potrivi mai bine cu experiența mobilă.

Acum, imaginați-vă dacă același aspect desktop a fost aplicat pe mobil. Ar trebui să măresc pe telefonul meu pentru a vedea oricare dintre imagini sau text. În loc să fac asta, m-aș dezabona.

Cu e-mailurile receptive, experiența utilizatorului poate fi îmbunătățită, precum și rentabilitatea investiției campaniei.

Gândiți-vă: abonații mulțumiți de un design optimizat de e-mail mobil se vor trezi deschizând mai multe mesaje de marketing, deoarece știu că va fi accesibil și va arăta bine.

Așadar, cu toată această discuție despre e-mailurile receptive, trebuie să fii dornic să-ți creezi propriile e-mailuri. În continuare, vom analiza câteva exemple și șabloane de e-mail receptive.

Designuri de e-mail receptive

Există multe moduri prin care puteți crea e-mailuri receptive.

Dacă aveți cunoștințe de codificare, puteți codifica diferite șabloane de e-mail pentru diferite dimensiuni de ecran. De asemenea, puteți utiliza un șablon prestabilit care funcționează pentru toate dimensiunile de ecran.

Indiferent de abordarea dvs., veți avea nevoie de software-ul dvs. de marketing prin e-mail. Aici, puteți proiecta un e-mail și apoi previzualiza acel e-mail pe mai multe dispozitive. Majoritatea programelor de e-mail vă vor arăta cum va arăta designul pe mai multe dispozitive.

Videoclipul de mai jos vă va explica cum să proiectați un e-mail cu un șablon. În videoclip, utilizatorul este pe Klaviyo, dar conceptele sunt valabile indiferent de software-ul pe care îl utilizați.

Codarea unui e-mail receptiv

Dacă doriți să faceți elementele e-mailului dvs. receptive, va trebui să lucrați cu interogări media.

Interogările media sunt o tehnică CSS. Vă permite să setați reguli de stil care apar numai dacă anumite condiții sunt adevărate. De exemplu, puteți specifica ce dimensiuni de font și dimensiunea imaginii să utilizați atunci când un ecran are 600 px lățime sau mai mic.

Când lucrați cu e-mailul, puteți utiliza interogări media pentru a specifica cum ar trebui să arate designul dvs. pe desktop-uri, tablete și dispozitive mobile. Pentru a face acest lucru, va trebui să specificați următoarele:

• Folosiți selectorul „@media” și specificați „ecran”. Acest lucru indică faptul că codul va afecta dispozitivele cu ecran.
• Setați „lățimea maximă” în pixeli. Aceasta specifică dimensiunea ecranului la care va intra în vigoare codul.
• Specificați orice ghid de stil CSS pe care doriți să le urmeze acel ecran.

Să aruncăm o privire la codul de mai jos.

ecran @media și (lățime maximă: 600px)

corp

dimensiunea fontului: 30px;

Când este aplicat la CSS-ul unui e-mail, textul corpului va apărea la o dimensiune de 30 de pixeli pentru ecranele care au o lățime de 600 de pixeli sau mai mici.

Deși această abordare vă poate ajuta să faceți anumite elemente ale răspunsului dvs. la e-mail, vă recomandăm să utilizați un șablon dacă este posibil.

Cu excepția cazului în care aveți o experiență cuprinzătoare în design web, codificarea mai multor ecrane media poate fi consumatoare de timp și frustrantă.

Dacă nu sunteți tehnic sau doriți o metodă mai ușoară, încercați să utilizați un instrument de marketing prin e-mail cu șabloane receptive încorporate. Software-ul gratuit de e-mail al HubSpot, de exemplu, oferă șabloane drag-and-drop care sunt receptive în mod implicit.

Exemple de design de e-mail receptiv

Este timpul să explorezi exemple. Începeți cu acest videoclip, care trece peste unele dintre cele mai bune campanii de marketing prin e-mail.

Apoi, puteți citi despre unele dintre modelele noastre de e-mail receptive preferate.

1. Buletinul informativ TOMS

În buletinul informativ TOMS, principala diferență dintre versiunea desktop și versiunea mobilă este stivuirea și dimensiunea anunțurilor grafice.

Cu un design responsive, versiunea mobilă nu are navigare aglomerată, iar imaginea se potrivește frumos pe ecran. CTA-urile au fost, de asemenea, mutate pentru o mai bună vizibilitate.

Sursa imaginii

2. Muzeul Metropolitan de Artă

După cum se vede în buletinul informativ TOMS, designul de e-mail receptiv ajută la stivuirea conținutului într-un mod care este atrăgător din punct de vedere vizual și ușor de digerat. Acest exemplu de la MET nu este diferit.

Pe mobil, poziționarea meniului se schimbă. Link-uri către diferite articole din magazinul de cadouri se află în partea de jos a paginii. Acest lucru păstrează imaginile suvenirurilor disponibile în față și în centru.

Sursa imaginii

3. Dud

Din nou, cu un design de e-mail receptiv, numele jocului este stivuit. Totul este să faci conținutul ușor de citit și atrăgător din punct de vedere vizual, indiferent cât de mic este dispozitivul pe care cineva îl vizionează.

Fotografiile și textul alternativ au sens pentru desktop, în timp ce stivuirea consecventă a fotografiilor peste textul aferent pentru mobil, împreună cu liniile de demarcație, asigură că privitorul nu va fi confundat.

Sursa imaginii

Șabloane de e-mail receptive

Un șablon receptiv se va adapta automat la orice dimensiune a ecranului, astfel încât, indiferent dacă e-mailul este deschis pe un smartphone, tabletă sau computer, acesta va arăta grozav și va avea funcționalitate completă.

Pentru cei cu un fundal mai mic de codare sau cei care doresc să petreacă mai puțin timp cu designul, sfatul meu este să folosească un șablon. Sunt o modalitate sigură de a vă asigura că e-mailul dvs. va arăta profesionist și va fi receptiv.

Șabloanele de e-mail receptive vă economisesc timp în proiectarea unui e-mail care ar fi putut fi ales dintr-o selecție. De exemplu, instrumentul de marketing prin e-mail al HubSpot include peste 60 de șabloane doar pentru e-mailuri receptive.

Să aruncăm o privire la câteva opțiuni de șablon acum.

1. HubSpot

HubSpot oferă câteva șabloane gratuite de e-mail receptive . Dacă sunteți client HubSpot sau utilizator gratuit, le puteți descărca și încerca singur.

De exemplu, iată unul dintre șabloanele de e-mail receptive - observați bara laterală, unde puteți previzualiza șablonul pe mai multe dispozitive.

Sursa imaginii

A face clic pe tipurile de dispozitive și a vă asigura că e-mailul dvs. este formatat corespunzător este unul dintre pașii finali în procesul de proiectare și este singurul pas în procesul de e-mail receptiv atunci când utilizați software precum HubSpot.

Făcând clic pe dispozitivul smartphone pentru previzualizare, de exemplu, puteți vedea dacă conținutul dvs. - inclusiv dimensiunea fontului și rezoluția imaginii - este formatat într-un mod care este plăcut pentru mobil.

2. CampaignMonitor

Șabloanele oferite de CampaignMonitor sunt similare cu multe altele, în care rezultatele de e-mail receptive sunt afișate în instrumentul de previzualizare. De exemplu, iată un șablon CampaignMonitor:

Sursa imaginii

Puteți vedea diferitele dispozitive unul lângă altul, astfel încât să puteți compara cu ușurință elementele de design. Pot fi făcute mici modificări pentru a crea cea mai bună experiență pentru toți abonații.

Șabloanele CampaignMonitor sunt adesea gratuite, așa că este o alegere bună dacă aveți un buget minim.

3. Stripo

Stripo oferă peste 300 de șabloane de e-mail HTML gratuite. Puteți alege șabloane în funcție de industrie, sezon, tip și caracteristică. De exemplu, iată un șablon din secțiunea lor din industria de afaceri.

Sursa imaginii

Un semn bun al unui șablon solid de e-mail receptiv este opțiunea de a vedea previzualizarea atât în ​​variantele desktop, cât și în variantele smartphone, așa cum se arată în modul de previzualizare Stripo.

Observați cum a fost adoptat un aspect cu o singură coloană în previzualizarea mobilă pentru a se potrivi cu specificațiile telefoanelor.

Stripo este un site web pe care îl puteți vizita rapid pentru a găsi un șablon care se potrivește obiectivelor dvs. S-ar putea să luați în considerare Stripo dacă doriți să încercați e-mailuri receptive sau doriți inspirație pentru design.

4. Contact constant

Constant Contact oferă peste 200 de șabloane profesionale de e-mail care sunt accesibile după înregistrare. Privind exemplul de mai jos, puteți vedea că platforma oferă șabloane de e-mail receptive.

Sursa imaginii

Șabloanele Constant Contact au editare prin glisare și plasare, opțiunea de a adăuga sondaje, funcții de comerț electronic și un instrument de bibliotecă de fotografii. Toate aceste caracteristici pot ajuta la crearea e-mailurilor pe care abonații doresc să le vadă.

Este util să utilizați un serviciu precum Constant Contact, deoarece instrumentele specifice vă permit să mențineți consistența, ca în exemplul de mai sus. Puteți spune că natura receptivă a e-mailului nu compromite niciunul dintre elementele de design.

Acum că ne-am uitat la câteva opțiuni de șablon, să vedem un alt mod de a face e-mailurile receptive să funcționeze, împreună cu cele mai bune practici.

Cele mai bune practici pentru e-mailuri receptive

Designul exact al e-mailului dvs. receptiv va varia în funcție de obiectivele campaniei dvs. Cu toate acestea, aceste sfaturi vă pot ajuta să asigurați cea mai bună experiență pentru cititorii dvs.

• Asigurați-vă că e-mailul dvs. receptiv este scalabil și flexibil. Previzualizează e-mailul pe diferite dispozitive pentru a te asigura că mesajul tău răspunde.
• Dacă vă codificați propriul e-mail, rețineți că interogările media CSS modifică câmpurile care sunt fixate la câmpuri care sunt fluide.
• Utilizați fonturi mai mari, care vor fi ușor de citit pe ecrane mai mici.
• Aspectele cu o singură coloană sunt mai ușor de scalat. Dacă aspectele simple sunt bune pentru paginile dvs. web, luați în considerare cu siguranță e-mailurile receptive.

Asigurați-vă că vă testați e-mailurile înainte de a apăsa „programare”. Finalizați design-urile numai după ce vedeți cum arată pe mai multe rezoluții de ecran. Atât de mulți oameni accesează e-mailurile de pe mobil doar pentru ușurință.

O modalitate simplă de a verifica eficiența e-mailului dvs. este să-l trimiteți dvs. sau echipei dvs. ca test - se compară cu celelalte e-mailuri de marketing receptive din căsuța dvs. de e-mail? Dacă da, sunteți gata să trimiteți.

Noțiuni introductive cu e-mailuri receptive

E-mailurile receptive creează o experiență mai bună și mai accesibilă pentru clienții tăi. Dacă tocmai faceți tranziția, începeți prin a explora șabloanele de e-mail receptive prestabilite. Acestea vă vor economisi timp, oferindu-vă în același timp flexibilitate în proiectare.

Apoi, obține o a doua opinie. Cereți unui coleg să deschidă un e-mail pe desktop și pe telefon. Puteți obține feedback-ul lor sincer despre ambele experiențe.

În cele din urmă, nu vă fie frică să experimentați. Puteți testa A/B diferite modele receptive până când găsiți un aspect care rezonează cel mai mult.

În curând, vei trimite e-mailuri receptive și vei crește ratele de deschidere.