Cum să creezi butoane frumoase de e-mail antiglonț care funcționează absolut

Pentru versiuni mai complexe ale acestui buton, ați crea de fapt două versiuni ale butonului - una în VML și una pentru toți ceilalți.

Avantaje și dezavantaje ale unui buton bazat pe VML

Pro:

• Există un suport excelent în majoritatea clienților de e-mail (vezi tabelul de mai jos).
• Întregul buton în sine poate fi făcut clic.
• Colțurile rotunjite sunt menținute în Outlook.

Contra:

• Se bazează pe utilizarea unui limbaj necunoscut – VML – care este proprietar pentru suita Microsoft Office, ceea ce face ca crearea de noi butoane antiglonț și actualizarea celor existente să consume timp și să fie frustrantă.
• Lățimea și înălțimea butonului antiglonț trebuie declarate, astfel încât orice modificare a copiei CTA ar necesita modificări ale dimensiunilor butonului.
• Versiunile mai complexe ale butonului VML necesită două adrese URL care trebuie modificate. Și unele ESP-uri nu urmăresc adresa URL în secțiunea VML.
• VML necesită o înălțime și o lățime fixe, așa că acest buton nu funcționează foarte bine pentru șabloanele în care lungimea copiei în CTA poate varia.

Dacă nu doriți să aflați dezavantajele VML (și sincer, cine o face?), Campaign Monitor are un instrument online gratuit pentru construirea de butoane tradiționale antiglonț. Buttons.cm facilitează crearea de noi butoane CTA care vor arăta grozav și vor funcționa bine pentru majoritatea clienților de e-mail.

Acesta a fost stilul meu preferat pentru codarea butoanelor când lucram la e-mailurile farmaceutice. Cel mai mare plus este capacitatea sa de a păstra colțurile rotunjite în Outlook, care era necesar pentru acea industrie foarte reglementată.

3. Butoane bazate pe umplutură

Această metodă folosește un tabel HTML simplu pentru buton. Se bazează pe umplutură la nivelul celulei tabelului pentru a structura butonul, precum și pe atribute HTML și CSS pentru a stila butonul.

Avantaje și dezavantaje ale unui buton bazat pe umplutură

Pro:

• Funcționează bine pentru majoritatea clienților de e-mail (vezi tabelul de mai jos).
• Folosește coduri cu care designerii de e-mail sunt familiarizați - HTML și CSS - ceea ce face ca crearea de noi butoane anti-glonț și actualizarea celor existente să fie o ușoară.

Contra:

• Nu se poate face clic pe întregul buton, ceea ce poate duce la fricțiuni cu abonații care cred că au dat clic sau au atins un buton.
• Outlook nu acceptă colțuri rotunjite.

4. Butoane bazate pe margini

Butoanele bazate pe margini adoptă o abordare similară cu metoda anterioară. Folosind HTML și CSS simplu, vă puteți structura și stila îndemnurile. Cu toate acestea, în loc să vă bazați pe umplutură la nivelul celulei tabelului pentru structură, adăugați chenare groase linkului în sine pentru a vă construi CTA.

Rețineți că eticheta de link este setată să fie un element la nivel de bloc și că marginile sunt folosite pentru a furniza „completarea” noastră. Acest lucru asigură că întregul buton este hoverabil și pe care se poate face clic, chiar și în clienții desktop mai vechi.

Avantaje și dezavantaje ale unui buton bazat pe chenar

Pro:

• Toate stilurile se află pe eticheta de link reală, ceea ce simplifică codul.
• Este folosit un singur buton. Nu sunt necesare butoane duble sau cod VML confuz.
• Nu aveți nevoie de definiții specifice de înălțime sau lățime, făcând butoanele extrem de scalabile.

Contra:

• Outlook reduce dimensiunea granițelor cu o cantitate mică.
• Outlook nu recunoaște etichetele <a> ca elemente la nivel de bloc.
• Outlook nu acceptă colțuri rotunjite.
• Nu există posibilitatea de a adăuga un stil mai avansat, cum ar fi margini suplimentare pe elementul de legătură exact.

5. Butoane bazate pe umplutură și chenar

Butoanele bazate pe umplutură și chenar combină elemente ale celor două abordări anterioare.

În esență, această abordare folosește aceeași structură de stilare a legăturii atât cu căptușeală, cât și cu cel puțin un chenar solid de 1 px. Apoi, o culoare de fundal este aplicată <td> pentru a umple întregul fundal al link-ului. Culoarea de fundal trebuie aplicată la <td> în loc de la <a> în acest caz, deoarece Outlook nu recunoaște umplutura orizontală pe eticheta <a> (din moment ce nu acceptă un astfel de stil pentru HTML care nu este la nivel de bloc). elemente).

Avantaje și dezavantaje ale unui buton de umplutură și chenar

Pro:

• Trebuie codat un singur buton, ceea ce face ca butoanele care utilizează această tehnică sunt ușor de actualizat.
• Dimensiunile specifice pentru butoane nu sunt necesare.
• Imaginile de fundal pot fi acceptate cu această metodă.

Contra:

• Stilul este separat între un <td> și <a>, așa că ambele trebuie actualizate atunci când există modificări de stil pentru buton.
• Outlook nu acceptă colțuri rotunjite.

Dar HTML semantic?

Ne place să folosim html semantic, dar, din păcate, eticheta <button> pur și simplu nu este acceptată în e-mail. Este redus la un <div> în majoritatea clienților de e-mail, care fie nu se poate face clic, fie nu este redat corect.

Se poate face imbricarea div-urilor sau a tabelelor în interiorul etichetelor de ancorare. Dar nu este corect din punct de vedere semantic. De asemenea, ambele metode au ca rezultat butoane care nu funcționează în Outlook. În cazul tabelelor, linkul nu se poate face clic, iar în cazul div-urilor... ei bine, vedeți singur:

Butonul Div	Butonul Div în Outlook

Hackuri avansate și îmbunătățiri

Toate metodele de mai sus sunt puncte de plecare excelente în crearea butoanelor antiglonț, dar fiecare tehnică poate fi modificată în continuare pentru a crea butoane antiglonț mai bune.

Hack de umplutură orizontală pentru Outlook

Outlook nu acceptă umplutura orizontală, ceea ce poate duce la ca textul dvs. CTA să fie foarte aproape de marginile din stânga și din dreapta ale butonului antiglonț.

O soluție rapidă care poate fi folosită pentru a crește „căptușeala” orizontală pentru Outlook este adăugarea condiționată a spațiilor inline, care nu se întrerupe pe fiecare parte a legăturii. Butonul de umplere condiționată folosește deja acest lucru împreună cu proprietatea de spațiere a literelor pentru a adăuga spațiu pe părțile laterale ale butonului.

Îmbunătățirea progresivă cu interogări media

Pentru a îmbunătăți designul butonului antiglonț, puteți utiliza stiluri avansate, cum ar fi chenare, degrade, fonturi web, efecte de trecere cu mouse-ul și multe altele cu interogări media.

Îmbunătățiri Outlook cu VML

Dacă doriți să faceți butoanele dvs. să strălucească cu adevărat, vă puteți scufunda în VML pentru a adăuga un pic de pizazz butoanelor dvs.

Oricât de frustrant poate fi VML, vă permite să creați niște butoane foarte distractive cu imagini de fundal și degrade, precum și umbre. Există cu siguranță un anumit grad de încercare și eroare, dar rezultatele pot fi uimitoare.

Consultați butonul nostru din buletinul nostru informativ din ianuarie pentru un exemplu:

Deci, cum este asistența pentru clienți de e-mail?

Clienții de e-mail și-au actualizat asistența de când această postare a fost scrisă pentru prima dată în 2017, așa că aceste butoane sunt foarte aproape de antiglonț. Cel mai mic suport este în Outlook, așa cum era de așteptat, dar chiar și acolo, butoanele nu sunt foarte sparte.

Puteți consulta toate testele de turnesol aici.

* Colțurile rotunjite nu se redau. † Mărimea butonului este distorsionată.

Suport pentru modul întunecat și hack-uri

Modul întunecat aduce o întorsătură interesantă butoanelor antiglonț. La fel ca majoritatea HTML și CSS, puteți controla stilurile Dark Mode pentru butoanele cu interogări media.

Cu toate acestea, Gmail și Outlook.com pot inversa culorile butoanelor.

Dacă doriți să păstrați culorile de fundal pe butoane, există câteva hack-uri. Ai grijă totuși la inversarea culorii copiei pe butoane. Nu există nicio modalitate de a împiedica comutarea culorilor fonturilor în Outlook, dar puteți păstra textul alb pe butoanele dvs. alb cu soluția de soluție CSS de la Remi Parmentier.

Cea mai mare lipsă de suport în aceste opțiuni de buton antiglonț sunt butoanele VML.

În modul întunecat, Office 365 vă va inversa culorile de fundal, dar nu va inversa culoarea de umplere în VML. Așa că ajungi cu butoane care arată astfel:

Există o soluție pentru aceasta: asigurați-vă că utilizați valoarea RGBA pentru culoarea de fundal pe eticheta <a> pentru butonul dvs., astfel:

Deci, ajungi cu un buton care arată în schimb așa (mult mai bine, nu?):

Valoarea RGBA ca culoare de fundal nu este acceptată în Outlook, așa că revine la culoarea VML. Mulțumim lui Wilbert Heinen pentru această remediere! Deoarece nu putem controla culoarea fontului în modul întunecat în Outlook, dacă veți folosi acest buton, asigurați-vă că alegerile dvs. de culoare țin cont de accesibilitate atunci când culoarea fontului este, de asemenea, inversată. (Exemplul pe care l-am folosit este un bun exemplu al culorilor care nu trebuie folosite.)

Sunt campaniile dvs. rezistente la gloanțe?

Indiferent de abordarea pe care o adoptați, folosirea butoanelor antiglonț pentru îndemnuri este cu mult superioară bazei pe imagini. Chiar și în clienții de e-mail care blochează imaginile, butoanele antiglonț asigură că mesajul tău va fi clar pentru publicul tău, crescând probabilitatea ca abonații tăi să se implice. Gata cu e-mailurile sparte!

Creați e-mailuri de marcă, fără erori, cu Litmus E-mailurile sparte – în special butoanele CTA – înseamnă mai puține clicuri și conversii. Ai. Litmus vă ajută să vă asigurați că totul este perfect cu o verificare automată pentru blocarea imaginilor, link-uri întrerupte și multe altele. Începeți perioada de încercare gratuită →

Care este tehnica ta preferată cu buton antiglonț?

Spuneți-ne în comentariile de mai jos cum creați butoane de e-mail antiglonț.

Publicat inițial pe 1 noiembrie 2017, de Jason Rodriguez. Ultima actualizare pe 22 iunie 2021.