Ghidul suprem pentru textul ALT cu stil în e-mail
Publicat: 2016-10-31O bună practică acceptată în mod obișnuit în lumea e-mailului este includerea atributelor ALT pentru imagini. Scurtarea pentru text alternativ, textul ALT din e-mail este acum practica standard pentru pasionații de e-mail.
Există câteva motive pentru care:
- Majoritatea clienților de e-mail blochează imaginile în mod implicit. În unele cazuri, în loc să arate imaginea, clientul de e-mail va afișa textul ALT. Acest lucru este cu siguranță la îndemână, mai ales în cazurile în care un design de e-mail este compus predominant din imagini. Textul ALT poate ajuta la comunicarea mesajului chiar dacă imaginile nu pot.
- Într-o situație în care imaginile nu se pot încărca sau nu se vor încărca din cauza unei conexiuni proaste, a unei legături întrerupte etc., în locul imaginii va apărea textul ALT.
- Marketerii și designerii sensibili la nevoile cititorilor cu deficiențe de vedere înțeleg că textul ALT este folosit de cititorii de ecran. Deoarece acești utilizatori nu pot vizualiza text sau imagini, textul ALT servește pentru a descrie imaginea prin cititorul de ecran.
![]() | Verificați dacă imaginile dvs. au text ALTCu Litmus Checklist, veți primi previzualizări ale e-mailurilor dvs. cu imaginile dezactivate și veți fi notificat dacă vreuna dintre imaginile dvs. lipsește textul ALT. Trimiteți cu încredere de fiecare dată. Încercați Litmus gratuit → |
Configurarea textului ALT standard
Setarea textului ALT pentru imagini într-un e-mail HTML este simplă. Cunoscut ca atribut , este o parte standard a sintaxei HTML și este inclusă în eticheta de imagine:
<img src="logo.jpg" width="400" height="149" alt="Litmus" >Este important să includeți valorile înălțimii și lățimii, deoarece aceasta creează o casetă de substituent pentru ca textul ALT să rămână atunci când imaginile sunt dezactivate.
Afișare text ALT standard
Iată cum arată imaginile dezactivate dintr-un e-mail fără text ALT trimis către Gmail:

Comparativ cu imaginile dezactivate dintr-un e-mail cu text ALT :

Pe care ai prefera să o primești?
Adăugarea de stil textului ALT
Puteți, de asemenea, să vă faceți plăcere cu textul ALT, adăugând un pic de CSS inline pentru a schimba fontul, culoarea, dimensiunea, stilul și greutatea textului ALT:
<img src="NAME OF IMAGE.PNG" width="500" height="462" alt="Litmus"/>Iată același exemplu de mai sus, dar cu stiluri de text ALT aplicate:

Suport de text ALT cu stil pentru clienții de e-mail
Deși este o tehnică ingenioasă, acesta este încă un e-mail despre care vorbim, așa că, în mod natural, suportul este puțin împrăștiat între diferite programe de e-mail. Am împrumutat câteva elemente din impresionantul e-mail Dreamforce al Salesforce pentru a testa textul ALT cu stil pentru următoarele exemple.
Suport text ALT în stil Webmail
| Text ALT în clienții de webmail | |||
|---|---|---|---|
| Clienți de webmail | Imagini blocate implicit | Afișează textul ALT | Afișează textul ALT cu stil |
| AOL Mail (Internet Explorer) | ✘ | ||
| AOL Mail (Firefox) | |||
| AOL Mail (Chrome) | |||
| Comcast (toate browserele) | ✘ | ✘ | |
| G-Suite și Gmail (Internet Explorer) | ✘ | ||
| G-Suite și Gmail (Firefox) | ✘ | ||
| G-Suite și Gmail (Chrome) | ✘ | ||
| GMX.de (Internet Explorer) | ✘ | ||
| GMX.de (Firefox) | ✘ | ||
| GMX.de (Chrome) | ✘ | ✘ | ✘ |
| Mail.ru (Toate browserele) | ✘ | ✘ | ✘ |
| Office 365 (Internet Explorer) | |||
| Office 365 (Firefox) | ✘ | ||
| Office 365 (Chrome) | |||
| Outlook.com (Internet Explorer) | Uneori* | ||
| Outlook.com (Firefox) | Uneori* | ||
| Outlook.com (Chrome) | Uneori* | ||
| Web.de (Internet Explorer) | ✘ | ||
| Web.de (Firefox) | ✘ | ||
| Web.de (Chrome) | ✘ | ✘ | ✘ |
| Yahoo! Mail (Internet Explorer) | |||
| Yahoo! Mail (Firefox) | |||
| Yahoo! Mail (Chrome) | |||
Clienții de webmail precum Gmail sunt cei mai diverși, deoarece aceste programe de e-mail pot fi accesate în diferite browsere. În toți clienții de webmail, suportul pentru textul ALT stilat se bazează pe browserul utilizat. Textul ALT cu stil este acceptat în versiunile curente de Firefox, Chrome și Safari.
De exemplu, textul ALT cu stil va fi vizibil pentru un abonat care își vizualizează Gmail în Firefox, dar funcționează doar în Internet Explorer. În acest caz, culoarea este acceptată, dar nu fontul sau alte atribute. Internet Explorer pare a fi un browser neprietenos pentru textul ALT în stil în general. Am descoperit că, deși culoarea era acceptată, adesea fontul nu era:
- Gmail și G-Suite în Internet Explorer
- GMX.de în Internet Explorer
- Office 365 în Internet Explorer
- Outlook.com în Internet Explorer
- Web.de în Internet Explorer
- Yahoo! Mail în Internet Explorer
Text ALT cu stil în Gmail/Firefox:

Text ALT cu stil în Gmail/IE:

Text ALT pe imaginile legate
Textul ALT pentru imaginile legate poate fi subliniat sau albastru în unii clienți de webmail. Yahoo! subliniază textul ALT în imaginile asociate, în timp ce Gmail subliniază și ignoră culorile specificate, în schimb fiind implicit la un albastru vibrant:

Outlook.com
În loc să blocheze toate imaginile, Outlook.com pretinde că „blochează conținutul de la expeditori cu aspect suspect”, deși nu sunt sigur cum determină cine pare suspect! În mod aleatoriu, unii expeditori sunt „de încredere”, afișând automat imagini, în timp ce alții lansează un avertisment de conținut blocat:

Utilizatorii au posibilitatea de a bloca imagini pentru oricine nu se află în lista lor de expeditori siguri în setările lor Outlook.com. Outlook.com tratează aceste două tipuri de filtrare de conținut în mod diferit, folosind un comportament de blocare a imaginilor asemănător Gmail pentru expeditorii „suspecti”, în timp ce folosește casetele gri Hotmail pentru a bloca imaginile pentru utilizatorii care au setări mai stricte de blocare a conținutului.
Suport text ALT în stil desktop
Clienții desktop sunt puțin mai fiabili, deoarece nu sunt atât de multe variabile implicate:

| Text ALT în clienții desktop | |||
|---|---|---|---|
| Clienți desktop | Imagini blocate implicit | Afișează textul ALT | Afișează textul ALT cu stil |
| Apple Mail | ✘ | ||
| Lotus Notes 8.5 | ✘ | ||
| Outlook 2000-2003 | un fel de* | ✘ | |
| Outlook 2007 | un fel de* | ✘ | |
| Outlook 2010 | un fel de* | ✘ | |
| Outlook 2011 (Outlook pentru Mac) | un fel de* | ||
| Outlook 2013 | un fel de* | ✘ | |
| Outlook 2016 | un fel de* | ✘ | |
| Thunderbird | ✘ | ||
| Windows 10 Mail | ✘ | ✘ | ✘ |
*Outlook adaugă un mesaj de securitate textului ALT. Mai multe detalii mai jos.
Deși Apple Mail și Thunderbird nu blochează imaginile în mod implicit, puteți alege să faceți acest lucru în preferințele fiecărei aplicații. Am activat manual blocarea imaginilor pe acești clienți pentru a vedea dacă acceptă textul ALT cu stil.
Au existat câteva variații ușoare în sprijinul altor variabile, în special legate de fonturile web:
- Apple Mail nu a acceptat fonturi cu stil, deși culoarea și alte proprietăți erau încă incluse.
- În Outlook 2000-2003, deși ai putea schimba culoarea, nu ai putut ajusta nimic altceva cu textul ALT cu stil.
Mesajul de securitate al Outlook
Outlook 2003, 2007, 2010, 2013 și 2016 prefață text ALT cu un mesaj de securitate lung, care spune „Faceți clic dreapta aici pentru a descărca imagini. Pentru a vă proteja confidențialitatea, Outlook a împiedicat descărcarea automată a acestei imagini de pe Internet.” Din păcate, acest lucru face ca textul ALT din acești clienți de e-mail să fie aproape inutil, deoarece apare doar la sfârșitul avertismentului de securitate Outlook:

Acest mesaj apare și în Windows 10, blocând complet orice text ALT.
Suport text ALT în stil mobil
Clienții de telefonie mobilă au un suport puternic pentru textul ALT stilat, ceea ce este o veste excelentă, în special pentru agenții de marketing cu audiențe Android intense.
| Text ALT în clienții mobili | |||
|---|---|---|---|
| Clienți de telefonie mobilă | Imagini blocate implicit | Afișează textul ALT | Afișează textul ALT cu stil |
| E-mail Android (4.4) | |||
| Android Gmail (4.4) | |||
| AOL Mail (browser Android) | |||
| AOL Mail (browser iPhone) | |||
| Aplicația AOL Alto Mail | |||
| Blackberry OS 6 | |||
| Blackberry OS 7 | |||
| Blackberry Z10 | |||
| iOS 6.x (client de e-mail nativ) | ✘ | ||
| iPhone 5s (iOS 7) | ✘ | ||
| iPhone 5s (iOS 8) | ✘ | ||
| iphone 6 | ✘ | ||
| iPhone 6s | ✘ | ||
| iPhone 6s + | ✘ | ||
| iPad (iOS 9) | |||
| iPad Mini (iOS 9) | ✘ | ||
| Aplicația Gmail (iOS) | ✘ | ||
| Aplicația Gmail (browser iPhone) | ✘ | ||
| Cutie poștală (iOS) | ✘ | ✘ | ✘ |
| Outlook.com (browser Android) | Uneori | ||
| Outlook.com (browser iPhone) | Uneori | ||
| Windows Mobile 7.5 | ✘ | ✘ | |
| Windows Phone 8 | ✘ | ✘ | |
| Yahoo! Aplicație (Android) | ✘ | ✘ | |
| Yahoo! Aplicație (iOS) | |||
| Yahoo! Mail (browser Android) | Un fel de | Un fel de | |
| Yahoo! Mail (browser iPhone) | ✘ | ✘ | ✘ |
La fel ca Apple Mail și Thunderbird, mi-am actualizat manual setările iOS pentru a bloca imaginile pentru a observa modul în care acest sistem de operare mobil gestionează textul ALT.
Text ALT cu stil în Android (Samsung Galaxy Nexus):

Textul ALT cu stil apare identic în aplicațiile de e-mail și Gmail din Android.
Text ALT cu stil în BlackBerry OS 6 (Torch 9810):

Text ALT cu stil în iOS (iPhone 5):

Blocarea imaginilor în Windows Phone 7.5 (Nokia Lumia 900):

Proprietățile fontului CSS, legăturile și lungimea sunt variabile
Aprofundând în detalii, majoritatea următoarelor proprietăți de font sunt acceptate în clienții care afișează text ALT cu stil:
- familie de fonturi
- marimea fontului
- grosimea fontului
- culoare
- stilul fontului
Au existat unele variații în testare când a fost vorba de anumite proprietăți acceptate. Aproape fiecare client a acceptat proprietățile culorii, dar nu și fontul. Acest lucru a variat și între browsere. De exemplu, iată cum arăta Gmail/G-Suite în Chrome în testul meu cu două fonturi stilate, cu culori diferite:

În timp ce Gmail/G-Suite în Internet Explorer a respectat culoarea, dar nu și fontul:

Rețineți că este posibil ca unii clienți să nu accepte toate fonturile sau dimensiunile în textul lor ALT stilat, dar asta nu înseamnă că nu puteți adăuga un pic de branding sau fler. Consultați această resursă la îndemână Specialistul în marketing prin e-mail, Jaina Mistry, a scris-o pentru Campaign Monitor pentru a verifica suportul fonturilor web.
De asemenea, aș recomanda această listă de fonturi instalate frecvent pe Windows și Mac.
Alte comportamente notabile de blocare a imaginii
În mulți clienți de e-mail, textul ALT va dispărea odată ce dimensiunea sau lungimea textului depășește lățimea și/sau înălțimea containerului de imagine. Datorită acestui comportament, probabil că cel mai bine este să rămâneți la descrieri mai scurte și la dimensiuni mai mici ale fonturilor pentru a evita eliminarea completă a textului ALT.
Aproape toți clienții de e-mail vă permit să vă schimbați setările pentru a afișa sau a ascunde imaginile automat (deși cel mai adesea ascunderea/blocarea este setarea implicită) și vor solicita utilizatorilor să activeze imaginile pentru mesaje individuale. Unele permit, de asemenea, utilizatorilor să adauge anumiți expeditori la o listă de permise sau la o agendă de adrese sau să selecteze „Afișează întotdeauna imaginile din...”
Previzualizează-ți e-mailul cu imaginile dezactivate (și activate!)
Cum arată e-mailul tău cu imaginile dezactivate? Textul dvs. ALT este redat corect? Previzualizați-vă e-mailul în peste 50 de clienți desktop, mobil și webmail, inclusiv vizualizări fără imagini, cu Litmus.
Începeți testarea →

