Zanim pobierzesz obrazki…
Powrót do listy wpisówAlty to teksty, które wyświetlają się w treści mailingu w miejscu nie wczytanych obrazków. Jeśli jesteś developerem pomożemy Ci je ujarzmić bo potrafią napsocić. Dlaczego to takie ważne? Zachęca odbiorcę do pobrania obrazków i lepszego poznania treści.
Jak zachowują się alt’y?
Sposób wyświetlania altów jest zależy od przeglądarki (np. Chrome, Opera, Internet Explorer, itd.) lub programu którego używamy do odbierania poczty (np. Gmail, Wp, Onet, Interia).
Gdy treść alta jest krótka - powiedzmy 14 znaków to w większości przypadków nie będzie żadnych problemów z jego pojawieniem się w mailingu. Schody zaczynają się dopiero w momencie gdy długość tekstu jest większa niż szerokość obrazka.
Jak łatwo zauważyć, tak naprawdę tylko Firefox w pełni wspiera możliwości altów, dłuższy tekst jest zawijany do nowej linii oraz wspierane jest pełne jego stylowanie. Efektem jest ładnie i poprawnie wyświetlany tekst.
Natomiast Chrome oraz oparta na tym samym silniku renderującym Opera w przypadku gdy tekst jest za długi stosują proste aczkolwiek bardzo nieatrakcyjne wizualnie rozwiązanie, otóż nie wyświetlają takiego alta w ogóle.
Programy dekstopowe także różnie interpretują ostylowanie altów. Dodatkowo programy rodziny Outlook dodają od siebie informacje o pobraniu obrazów a dopiero później pojawia się treść alta.
Nie warto jednak się poddawać i popadać ze skrajnośći w skrajność. Należy bowiem stosować zasadę “graceful degradation”, w której tworzyć można nowoczesny szablon dbając, o to aby był poprawnie wyświetlany również przez „słabsze” aplikacje. Więcej o tej metodologii, możesz przeczytać w poradniku.
Jak kreatywnie wykorzystać alt’y?
Z altami jak ze wszystkim, wystarczy dobry pomysł oraz odrobina chęci a efekty mogą być imponujące.
A oto i przykład:
Takie formatowanie alta w pełni działa pod firefoxem i częściowo pod outlookiem. Thunderbird również odnajduje się poprawnie w tej sytuacji.
Jak to osiągnęliśmy?
- 1. Stworzyliśmy dwie grafiki, jedna z rozpiską premier (główna grafika niebieska) druga z zamówieniem biletu (czarna z szarym buttonem)
- 2. Alt pod główną grafika pokazuje tą samą rozpiskę w przypadku nie wyświetlenia obrazów. Aby usyskać taki efekt trzeba zastosować pewne triki.
Kod:
<img src=”premiery.png” style=”display:block; border:none; width:640px;height:303px; color:#eeeeee;font-family: Verdana;font-size:20px;text-align: left;white-space: pre-wrap; ” alt=’Nasze premiery: 		✩ „Waśń” – 14.20.2014 – Warszawa 		✩ „Ostatni rejs” – 21.02.2013 – Gdynia 		✩ „Zagórze” – 28.02.2013 – Kraków’ width=”640″ height=”303″ />
Kod rozłożony na czynniki pierwsze:
src="premiery.png"
color:#eeeeee - kolor czcionka alta
font-family: Verdana - czcionka alta
font-size:20px - rozmiar czcionki alta
text-align: left - wyrównanie tekstu
white-space: pre-wrap - własność css która umożliwi nam formatowac tekst
alt - treść alta - występują tam oprócz zwykłego tekstu różne dziwne znaczki
- ten kod realizuje “eneter”
	 - ten kod realizuje “tabulator”
✩ - kod odpowiedizlany za gwiazkde
Podsumowanie
Zachęcam do eksperymentowania z altami. Pomimo tego, że niektóre programy pocztowe, takie jak Gmail czy Windows live mail zniosły to ograniczenie i pobieranie obrazków odbywa się automatycznie (więcej o tym zabiegu przeczytasz na blogu). Jednak zdecydowana większość, wciąż pozostaje przy opcji, aby to odbiorca sam decydował, czy che zobaczyć kreację i pobrać obrazki. Warto więc ich nie lekceważyć.