Tworzenie atrakcyjnych wizualnie kampanii to klucz do przyciągnięcia uwagi odbiorców i zwiększenia konwersji. Chociaż Positive User pomaga Twojemu zespołowi budować przejrzyste, responsywne projekty e-maili, desktopowe programy pocztowe, takie jak Microsoft Outlook, często wyświetlają te wiadomości inaczej niż poczta w przeglądarce.
Zrozumienie, dlaczego pojawiają się te niespójności wizualne, pozwala podejmować odpowiednie decyzje projektowe już od samego początku. Dzięki dostosowaniu układu w Positive User możesz chronić swoją identyfikację wizualną i mieć pewność, że Twoje e-maile zawsze trafiają do odbiorców w czytelnej formie.
Problemy z renderowaniem w Outlooku wynikają z tego, że wersje desktopowe Microsoft Outlook wykorzystują silnik renderowania HTML z Microsoft Word do wyświetlania wiadomości zamiast standardowych silników przeglądarek internetowych. W odróżnieniu od nowoczesnych usług pocztowych, takich jak Gmail czy Apple Mail, Outlook przetwarza kod e-maila w logice edytora tekstu, co często powoduje ignorowanie standardowych stylów CSS, obrazów tła i nowoczesnych zasad układu wiadomości.
Gdy Twój zespół tworzy i wysyła kampanię przez Positive User, platforma generuje przejrzysty kod HTML, który ma płynnie dopasowywać się do standardowych usług pocztowych. Jednak gdy Microsoft Outlook odbiera wiadomość, reinterpretuje ten kod zgodnie z zasadami renderowania Worda.
Kilka czynników środowiskowych decyduje o tym, jak e-mail wyświetla się w Outlooku:
Wersja Outlooka: konkretne wydania desktopowe przetwarzają reguły CSS inaczej niż webmail Outlooka czy aplikacje mobilne.
Ustawienia wyświetlania i konfiguracje wielu monitorów: przenoszenie Outlooka na dodatkowy monitor lub przeglądanie e-maili w różnych rozdzielczościach ekranu może zaburzyć skalowanie układu. Ponowne otwarcie Outlooka na monitorze głównym często rozwiązuje problemy związane z dodatkowym ekranem.
Filtry antyspamowe: niektóre filtry bezpieczeństwa modyfikują przychodzący kod HTML przed dostarczeniem wiadomości, zakłócając oryginalny układ.
Na przykład, jeśli wyślesz kampanię z zaokrąglonym przyciskiem call-to-action, standardowe aplikacje pocztowe wyrenderują gładkie zaokrąglenia za pomocą webowego CSS (border-radius). Outlook całkowicie zignoruje tę regułę, usunie stylowanie i wyświetli przycisk jako ostry prostokąt.
Zrozumienie ograniczeń HTML w Outlooku pomaga Twojemu zespołowi udoskonalić sposób, w jaki zasoby i układy są zbudowane w Positive User.
Zarządzanie szablonami kampanii i zasobami wizualnymi wymaga konkretnych dostosowań projektowych, aby zapobiec typowym błędom wyświetlania:
Hostowanie a osadzanie obrazów: Outlook domyślnie blokuje hostowane obrazy. Choć osadzanie obrazów w treści e-maila wymusza ich wyświetlanie, zwiększa jednocześnie wagę wiadomości i pogarsza dostarczalność. Ogranicz osadzone obrazy do kluczowych zasobów, takich jak logo.
Wymiary i skalowanie obrazów: Outlook ignoruje zmianę rozmiaru obrazów w HTML i egzekwuje ścisłe limity wysokości. Użyj oprogramowania do edycji zdjęć lub wbudowanego edytora obrazów, aby zmienić rozmiar obrazów na dokładne wymiary przed przesłaniem. Jeśli obraz jest przycięty, podziel go na kilka mniejszych bloków obrazów.
Marginesy obrazów: Outlook często usuwa marginesy wokół obrazów, przez co tekst przylega bezpośrednio do grafiki. Aby odtworzyć odstępy, dodaj bezpośrednio w pliku obrazu obramowanie w tym samym kolorze co tło e-maila, korzystając z edytora grafiki.
Animowane GIF-y: Outlook nie animuje GIF-ów i wyświetla tylko pierwszą klatkę. Zadbaj o to, aby Twoje kluczowe przesłanie, oferta i call-to-action znalazły się na tej pierwszej klatce.
Obrazy tła: obrazy tła CSS nie są natywnie obsługiwane w Outlooku i są zastępowane jednolitym kolorem tła. Unikaj umieszczania ważnego tekstu na obrazach tła. Jeśli tworzysz wiadomość e-mail w edytorze HTML, musisz zadeklarować obrazy tła za pomocą HTML, a nie CSS. Tła zadeklarowane w HTML są obsługiwane.
Czcionki i typografia: niestandardowe czcionki webowe (takie jak Google Fonts) renderują się nieprzewidywalnie w desktopowym Outlooku. Używaj standardowych czcionek systemowych, takich jak Arial, Helvetica, Georgia czy Times New Roman, aby zagwarantować spójne formatowanie.
Zaokrąglone przyciski CTA: aby wymusić zaokrąglone krawędzie przycisku w Outlooku, wstaw go jako obraz. Pamiętaj, że jeśli kontakty mają wyłączone pobieranie obrazów, przycisk nie wyświetli się, dopóki obrazy nie zostaną włączone.
Wyrównanie wielokolumnowe: układy wielokolumnowe (2, 3 lub 4 kolumny) mogą się psuć lub przesuwać podczas skalowania ekranu. Dostosuj szerokość układu e-maila w kreatorze z domyślnych 650 px do około 400 px, aby ustabilizować wyrównanie.
Obramowania kropkowane i przerywane: Word wymusza białe linie tła między kropkami i kreskami, niezależnie od koloru kontenera. Używaj obramowań kropkowanych lub przerywanych wyłącznie na białych tłach albo przełącz się na obramowania ciągłe na kolorowych tłach.
Unikaj kopiowania i wklejania tekstu bezpośrednio z zewnętrznych programów do edycji dokumentów, takich jak Microsoft Word, do kreatora e-mail drag&drop. Word wstrzykuje ukryte znaczniki HTML, które psują formatowanie wiadomości.
Wklejaj zwykły tekst – najpierw skopiuj tekst z zewnętrznego oprogramowania do edytora zwykłego tekstu lub użyj skrótu do wklejania jako zwykły tekst (Ctrl + Shift + V w Chrome) podczas wklejania do kampanii.
