Wielu z Was kontaktowało się ze mną z projektem stworzenia stopki mailowej. Temat jest o tyle niewdzięczny, że wiele osób poległo podczas projektowania stopki. O ile problemów nie stanowi Mozilla Thunderbird, czy nawet Gmail, o tyle Outlook jest nieprzystosowanym narzędziem do załączania zaprojektowanej stopki do każdego naszego maila.
Co chciałbym przekazać poprzez ten artykuł? Przede wszystkim chciałbym przestrzec wszystkich przed tym aby wiedzieli, że nawet najlepszy projekt będzie się inaczej wyświetlał na różnych platformach. Chciałbym również poruszyć temat projektowania przycisków typowo pod Microsoft Outlook, oraz pokazać wam bardzo dobre narzędzie do sprawdzania waszych projektów na różnych platformach.
Nie wszystko wygląda tak jakby się wydawało
Podczas projektowania stopek zazwyczaj testowałem wygląd stopki odpalając mój plik html w Google Chrome. Po zakończeniu kodowania, zadowolony z siebie dodawałem swoją sygnaturę do konfiguracji maila i wysyłałem testowy mail na jakieś inne konto pocztowe na platformie Thunderbird. Jeśli wszystko było w porządku, wysyłałem maila do klienta i temat uważałem za zakończony.
Nic bardziej mylnego.
Zazwyczaj pojawiała się informacja zwrotna że sygnatura nie wygląda tak jak w założeniach. Rozpoczyna się stres, wyścig z czasem i nerwy. Jak bowiem naprawić problem, którego nie ma na moim komputerze. Okazało się że ten sam kod stopki mailowej potrafi wyglądać całkiem inaczej na innych platformach. Różnice potrafiły być kolosalne jak zobaczycie na screenach poniżej.
Obejście problemu – zamiana zdjęć na CSS
Jeśli posiadasz w swoim projekcie obrazy, które jednocześnie służą jako hiperłącze do jednej z Twoich stron internetowych, możesz mieć problem. Ja taki miałem. Jednym z rozwiązań była zamiana pliku zdjęć na kod CSS. Po uzgodnieniu wszystkiego z klientem zgodziliśmy się na to rozwiązanie. Efekt był zauważalny jednak to nadal nie jest to czego się spodziewałem. Można stworzyć przyciski, które nawet dla Outlooka będą „kuloodporne”. Propozycje znajdziesz poniżej.
Czym są kuloodporne przyciski? Są to buttony, które krótko mówiąc – wyświetlają się we wszystkich skrzynkach odbiorczych tak jak zakładano. Ponieważ są one napisane w HTML-u bez obrazków, przycisk CTA (call to action) jest wyświetlany niezależnie od tego czy odbiorca zezwala na umieszczania obrazków w mailach, czy nie.
Istnieją cztery style kodowania, dzięki którym stworzysz swój „kuloodporny” przycisk email:
- VML Buttons
- Padded Buttons
- Border Based Buttons
- Kombinacja Padded/Border buttons
VML Buttons
VML jest popularnym sposobem na tworzenie kuloodpornych przycisków email. Jeśli nie jesteś zaznajomiony z tym językiem kodowania, może to być trudne do wykonania. Na szczęście, buttons.cm wygeneruje dla Ciebie kod VML przycisku i ułatwi cały proces. Bardzo polecam tę stronę, jest prosta w obsłudze i szybko można uzyskać potrzebny nam kod.
<div><!–[if mso]>
<v:roundrect xmlns:v=”urn:schemas-microsoft-com:vml” xmlns:w=”urn:schemas-microsoft-com:office:word” href=”http://” style=”height:40px;v-text-anchor:middle;width:200px;” arcsize=”10%” strokecolor=”#1e3650″ fill=”t”>
<v:fill type=”tile” src=”https://i.imgur.com/0xPEf.gif” color=”#000000″ />
<w:anchorlock/>
<center style=”color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;”>Przycisk VML!</center>
</v:roundrect>
<![endif]–><a href=”http://”
style=”background-color:#000000;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;”>Przycisk VML!</a></div>
Padded buttons
Padded buttons charakteryzują się wykorzystaniem selektora padding, dzięki któremu możemy odpowiednio ostylować nasz przycisk. Ma to swoje wady i zalety. Możemy w łatwy sposób zakodować przycisk, ale należy pamiętać że tylko tekst wewnątrz jest klikalny, co może prowadzić do skonfundowania się użytkownika.
<!–Padded button–>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ role=”presentation” style=”border-collapse:separate;line-height:100%;”>
<tr>
<td align=”center” bgcolor=”#19cca3″ role=”presentation” style=”border:none;border-radius:6px;cursor:auto;padding:11px 20px;background:#19cca3;” valign=”middle”>
<a href=”href=”https://www.activecampaign.com” style=”background:#19cca3;color:#ffffff;font-family:Helvetica, sans-serif;font-size:18px;font-weight:600;line-height:120%;Margin:0;text-decoration:none;text-transform:none;” target=”_blank”>
Click here!
</a>
</td>
</tr>
</table>
Border-based buttons
Sytuacja bardzo podobna co w poprzednim punkcie. Nadal wykorzystujemy HTML i CSS do stworzenia przycisku. Wykorzystując tę opcję będziemy korzystać z selektora border.
Kombinacja padded/border buttons
Kombinacja padded/border kuloodporne przyciski e-mail używają zarówno padding jak i border, wraz z kolorem tła. Styl ten jest łatwy do zaktualizowania, a same przyciski są obsługiwane. Należy pamiętać, że stylizacja jest zawarta w znacznikach <a> i <tr>. Oba muszą być aktualizowane.
Narzędzia do testowania szablonów maili oraz sygnatur
Poniżej znajdziesz listę narzędzi, dzięki którym sprawdzisz wygląd twojego maila. Większość z tych usług jest płatna, jednak posiadają demo dzięki czemu będziesz mógł skorzystać z funkcjonalności na określony czas. Oto one:
Ja osobiście mogę polecić Litmusa, narzędzie jest bardzo intuicyjne, proste w obsłudze oraz – co najważniejsze – można wygenerować raport, który pokaże jak dany mail będzie wyglądał na różnych platformach (otrzymałem ponad 100 screenshotów takich wyników). Wydaje mi się więc że to narzędzie warte polecenia. Dzięki.
