Acesta este viitorul designului de e-mail

S-au spus multe despre designul de e-mail blocat în trecut. Designerii care abordează primele lor proiecte deplâng utilizarea tabelelor și a stilurilor inline. Specialiștii de marketing care își pun la cale primele campanii refuză să gândească dincolo de mentalitatea batch-and-blast.

Dar câțiva expeditori îndrăzneți refuză să lase tehnologiile și mentalitățile învechite (uneori) din jurul designului de e-mail să-i rețină. Ei depășesc limitele designului de e-mail, folosind tehnici întâlnite în mod obișnuit în designul web avansat pentru a surprinde, a încânta și a intra în legătură cu abonații lor.

Să aruncăm o privire la provocările asociate cu design-ul experimental de e-mail și să rezumăm câteva dintre campaniile noastre de e-mail futuriste preferate.

Marketing prin e-mail în 2020 Pregătiți-vă pentru viitorul marketingului prin e-mail cu informațiile a 20 de experți de top, plus rezultatele sondajelor de la mii de agenți de marketing și consumatori. Descarcă acum

Designul e-mailului nu trebuie să fie limitativ

Când majoritatea oamenilor se gândesc la marketing prin e-mail, se gândesc la buletine informative plictisitoare și plictisitoare trimise de companii care doresc să vândă ceva. Și, dacă aveți sarcina de a crea o campanie de e-mail, probabil că vă uitați la o grămadă de tabele HTML și CSS inline și numărați minutele până când ați terminat de piratat un e-mail care funcționează OK peste tot.

Deși este adevărat că bazele designului de e-mail sunt puțin vechi, nu există într-adevăr o limită la ceea ce poți face cu ele, având în vedere puțină creativitate, planificare și multe teste. Da, designerii de e-mail trebuie să folosească modele bazate pe tabel (mulțumesc, Outlook!), CSS în linie și să înoate printr-o mare de hack-uri, dar, așa cum arată exemplele de mai jos, puteți încă să scoateți câteva lucruri uimitoare în căsuța de e-mail.

Pentru a dovedi ideea, iată câteva dintre exemplele noastre preferate de e-mailuri care încalcă regulile și depășesc limitele designului de e-mail.

Un carusel într-un e-mail?

Cu ceva timp în urmă, retailerul britanic B&Q a trimis un e-mail care a incendiat industria.

În această campanie, utilizatorii pot trece cu mouse-ul peste butoane sau pot apăsa pe butoane și pot urmări cum diferite secțiuni de conținut alunecă fără probleme în interiorul și în afara e-mailului. Denumită în mod obișnuit un carusel, această tehnică a fost utilizată pe scară largă în lumea web, dar este rară pentru campaniile de e-mail. Unii s-ar putea plânge că caruselele sunt ineficiente și sunt doar pentru spectacol, dar campania B&Q este un exemplu excelent despre cum să folosiți tehnici de ultimă oră pentru a surprinde abonații de e-mail.

E-mailul folosește o serie de proprietăți CSS3, împreună cu o direcționare inteligentă, pentru a-și realiza magia. Folosind tranziții CSS, animații, z-index și proprietatea overflow, designerii au creat un e-mail inteligent care doar roagă să fie accesat.

Ceea ce este și mai impresionant este că totul revine frumos pentru clienții de e-mail care nu acceptă aceste tehnici mai avansate.

Culori nebunești și Războiul Stelelor

Agenția de e-mail din Marea Britanie Action Rocket a condus de ceva vreme sarcina în designul de e-mail. Cu rezumatul lor săptămânal de știri prin e-mail, intitulat inteligent, Email Weekly, ei testează câteva tehnici creative care, în cele din urmă, își pot găsi drumul în campaniile clienților.

Unul dintre exemplele noastre preferate este e-mailul lor care punea întrebarea „De ce culoare este acest e-mail?”.

Folosind animații de cadre cheie CSS, ele animă culorile de fundal ale secțiunii de titlu, ceea ce creează un efect fascinant, halucinant. La început este subtil, dar odată ce un abonat prinde animație, nu poate să se întoarcă.

Un alt exemplu grozav de la Action Rocket este recentul lor rezumat inspirat de Star Wars, care a folosit proprietatea experimentală -webkit-perspective, împreună cu transformările CSS, pentru a recrea simbolul crawl de deschidere al filmului SF preferat al tuturor.

Infografică într-un e-mail?

În timp ce blocul de afișare al agenției de e-mail trimite în mod constant e-mailuri grozave, e-mailul lor recent infografic este cel care ne-a atras cu adevărat atenția.

Similar cu culorile de fundal din exemplul Email Weekly, blocul de afișare folosește animații ale cadrelor cheie CSS pentru a adăuga puțină viață unei campanii deja bine concepute. Ceea ce este cu adevărat grozav este că e-mailul este foarte receptiv, stivuind fiecare secțiune frumos pe dispozitivele mobile. Designul receptiv și pictogramele animate servesc la îmbunătățirea unor date grozave despre utilizarea e-mailului mobil.

Nu am văzut multe infografice ca aceasta într-un e-mail, ceea ce îl face cu atât mai impresionant și mai inovator. Ne-ar plăcea să vedem mai multe exemple de infografice, motiv pentru care organizăm un Concurs comunitar dedicat acestora!

Tururi video și interactive HTML5

Ne place să exersăm ceea ce predicăm, motiv pentru care ne facem e-mailurile plăcute și receptive, în ciuda faptului că avem o audiență predominant desktop. Acesta este, de asemenea, raționamentul din spatele unora dintre propriile noastre campanii de e-mail de ultimă oră, cum ar fi fundalul nostru video HTML5 de la Conferința de design de e-mail de anul trecut (pe care o găzduim din nou în această vară...).

Designerul nostru, Kevin, a folosit o direcționare avansată a clientului de e-mail pentru a îmbunătăți progresiv un design altfel simplu. Dacă ești curios cum exact a reușit, a scris o postare pe blog în care detaliază procesul.

Și, pentru a sărbători lansarea editorului nostru de coduri de e-mail, Builder, a dus lucrurile și mai departe, creând un tur interactiv chiar într-un e-mail.

Folosind animațiile CSS, hack-ul casetei de selectare și utilizarea liberală a proprietății de conținut CSS, el prezintă unele dintre caracteristicile Builder chiar în căsuța de e-mail, oferind abonaților să guste produsul fără a fi nevoie chiar să se conecteze. Sunt multe de cod care îl alimentează, dar îl puteți verifica chiar în Builder (un fel ca e-mailul Inception).

Meniuri de e-mail mai gustoase

La fel ca e-mailul carusel, designerul Jerry Martinez s-a inspirat din web pentru a implementa un meniu de hamburger pentru abonații de mobil.

Elementele de navigare sunt întotdeauna un truc pentru designerii de e-mail, în special pe mobil. Deoarece tind să ocupe cantități semnificative de spațiu atunci când sunt stivuite, pot distrage atenția de la îndemnul principal dintr-o campanie. Pentru a rezolva problema, Jerry a creat un meniu elegant pentru hamburger, care permite utilizatorilor de telefonie mobilă să afișeze în mod selectiv elementele de navigare.

Am fost atât de impresionați de soluția lui Jerry, încât am invitat oamenii să arate alte modele creative de navigare într-unul dintre concursurile noastre comunitare...

Concursuri comunitare: cu adevărat de vârf

Concursurile noastre comunitare sunt locul în care provocăm cu adevărat oamenii să vină cu idei nebunești. În fiecare lună, le oferim o temă și îi lăsăm să-și dezvolte abilitățile. Primul nostru concurs, care analizează utilizările creative ale textului ALT, a dat rezultate uimitoare, cum ar fi Space Invaders într-un e-mail:

Pentru al doilea concurs, oamenii au venit cu modele de navigare interesante. Am fost uimiți de unele dintre rezultate, cum ar fi conceptul de navigare lipicios al lui Remi Parmentier:

Încerci ceva nou?

Deși este interesant să încerci lucruri noi prin e-mail, multe pot merge prost dacă nu îți testezi campaniile în detaliu. Previzualizările de e-mail facilitează testarea oricărei tehnici în clienții de e-mail desktop, webmail și mobil.

Încercați Litmus gratuit →