Opanowanie programu Outlook: spojrzenie wstecz na typowe problemy z renderowaniem

Microsoft jest jednym z największych graczy w branży poczty elektronicznej. Microsoft Outlook i jego internetowy odpowiednik Outlook.com mają łącznie ponad 10% udziału w rynku. To jest naprawdę ogromne!

W świecie, w którym użytkownicy mogą wybierać spośród ogromnej liczby klientów poczty e-mail, jak Outlook pozostał tak popularny? Pakiet Microsoft Office jest nie tylko powszechnie instalowany na komputerach w firmach na całym świecie, ale wiele komputerów domowych i laptopów z systemem Windows ma preinstalowany pakiet MS Office. Domyślnym klientem poczty e-mail dołączonym do pakietu MS Office jest… Outlook.

Jest też Outlook.com, który rozpoczął swoją karierę jako klient poczty e-mail jako Hotmail w 1996 roku. W 1997 roku Microsoft nabył Hotmail za około 400 milionów dolarów i uruchomił Hotmail jako MSN Hotmail. Później został ponownie przemianowany na Windows Live Hotmail. Wreszcie w 2013 Hotmail został całkowicie zastąpiony przez Outlook.com. Ponieważ historia Outlook.com przeplata się z Hotmail, nie powinno dziwić, że w 2015 r. Outlook.com miał ponad 400 milionów aktywnych użytkowników.

Typowe problemy z renderowaniem w Outlooku

Tworzenie wiadomości e-mail dla programu Outlook zawsze było wyzwaniem. Począwszy od programu Outlook 2007, Microsoft przestał używać Internet Explorera do renderowania wiadomości e-mail i zamiast tego wybrał Microsoft Word jako silnik renderujący. Świetna wiadomość dla użytkowników pakietu Microsoft Office, którzy mogą bezproblemowo kopiować i wklejać elementy z programu Word lub Excel do wiadomości e-mail programu Outlook. Niezbyt dobra wiadomość dla e-mail marketerów i programistów, którzy używają HTML do tworzenia swoich e-maili. Spróbuj skopiować i wkleić stronę internetową HTML do dokumentu Word, a zobaczysz, jak Word tłumaczy HTML.

Naturalnie, utalentowani programiści poczty e-mail zaczęli pracować nad swoją magią, opracowując mnóstwo hacków do poczty e-mail, aby upewnić się, że ich piękne e-maile HTML są równie pięknie renderowane w Outlooku. Nie jest to łatwe zadanie, ponieważ wiele hacków obejmuje VML (Vector Markup Language), co nie jest czymś, czego zwykle się uczysz w szkole twardego pukania do tworzenia wiadomości e-mail!

Oto krótkie podsumowanie niektórych z bardziej popularnych problemów, z jakimi borykają się programiści poczty e-mail podczas tworzenia wiadomości e-mail dla programu Outlook:

Korzystanie z tabel w rozwoju poczty e-mail

W nowoczesnym tworzeniu stron internetowych możesz używać kontenerów, takich jak div, do przechowywania treści, przy czym tabele są używane wyłącznie do danych tabelarycznych. Jednak do prawidłowego pozycjonowania elementów, takich jak div, na stronie HTML, często wymagane są atrybuty CSS, takie jak float i position.

Outlook nie obsługuje tych atrybutów. Aby prawidłowo ustrukturyzować wiadomości e-mail w celu maksymalnego renderowania na różnych urządzeniach/klientach/przeglądarkach, programiści używają tabel do tworzenia wiadomości e-mail.

Chociaż tabele pracują dla programistów e-mail od lat, są restrykcyjne w zakresie tego, co można osiągnąć, jeśli chodzi o projektowanie wiadomości e-mail. Projektanci muszą myśleć w kategoriach wierszy i kolumn, aby ich projekty można było łatwo tworzyć za pomocą tabel.

Obrazy tła z VML

Tekst na żywo. Tekst na żywo. Tekst na żywo. To mantra e-mail marketera. Umieść jak najwięcej tekstu na żywo w swoich e-mailach, aby upewnić się, że e-maile docierają do skrzynki odbiorczej (a nie spam), są dostępne dla wszystkich i czytelne z wyłączonymi obrazami.

Obrazy tła umożliwiają nakładanie tekstu na żywo na obraz, niezależnie od tego, czy jest to wzór, czy piękne zdjęcie. Obrazy tła mogą tworzyć piękne wrażenie głębi w projektach wiadomości e-mail, a jednocześnie są nadal dostępne.

Jednak Outlook nie obsługuje obrazów tła z czystym kodem HTML. Program Outlook wymaga korzystania z VML, aby obrazy tła działały. Na szczęście nie musisz w pełni uczyć się języka VML, aby móc używać obrazów tła w wiadomości e-mail. Monitor kampanii ma świetne narzędzie, które wygeneruje Twój kod VML i HTML, aby zapewnić kuloodporne obrazy tła w wiadomościach e-mail.

Brak obsługi animowanych GIF-ów

Z powodu braku obsługi wideo w e-mailach i marketingu e-mailowego, który sprawia, że ​​ich e-maile są bardziej dynamiczne i wciągające, skromny animowany GIF jest idealnym sposobem na ożywienie swoich e-maili.

Jednak Outlook nie obsługuje animowanych plików GIF. Podczas gdy obraz zostanie załadowany i wyświetlony użytkownikowi, wyrenderowana zostanie tylko pierwsza klatka animacji.

Jeśli masz subskrybentów otwierających e-maile w Outlooku i używasz animowanych GIF-ów, spraw, by pierwsza klatka animacji się liczyła. Zachowaj prostotę GIF, a animacja nie jest integralną częścią wiadomości, ale raczej dodatkową korzyścią dla tych, którzy widzą pełną animację.

Brak obsługi dopełniania na p, div i tagach

Padding to świetny atrybut CSS, który może wprowadzić przestrzeń do twoich elementów. Jest to przydatny atrybut CSS do pozycjonowania elementów w wiadomości e-mail lub tworzenia przestrzeni wokół elementów w celu ulepszenia projektu.

Prostym obejściem tego problemu jest użycie atrybutów HTML między komórkami i wypełnieniem komórek w tabeli, aby utworzyć przestrzeń wokół elementów wewnątrz tabeli.

Aby wprowadzić dopełnienie w akapitach — znacznik p — użyj atrybutu stylu mso-line-height-rule:exactly; w połączeniu z wysokością linii, aby zapewnić Twojej kopii i tekstowi trochę oddechu, ułatwiając śledzenie:

 <p>Your text here</p>

To nie tylko Outlook

Podczas gdy klient dla komputerów stacjonarnych od lat sprawiał problemy programistom poczty e-mail, istnieje teraz nowa wersja Outlook.com, z którą mogą się zmierzyć programiści poczty e-mail, która sama w sobie przyczyniła się do powstania dziwactw w renderowaniu. Wiele z nich różni się od dziwactw w Outlooku. (Oczywiście.)

Jedna zmiana nie była krokiem we właściwym kierunku — Outlook.com usuwa wszystko, co znajduje się w zestawie zapytań o media. Nie ma więc sposobu na rozróżnienie między wersją e-maila mobilną a komputerową.

Jest jednak kilka dobrych wiadomości. Istnieje kilka błędów renderowania, które wystąpiły w starszych wersjach Outlook.com, które zostały naprawione. Przede wszystkim: hack typu float/margin. Aby starsza wersja Outlook.com zrozumiała te atrybuty CSS, musiały być pisane wielkimi literami lub mieszanką wielkich i małych liter. Teraz sprawa nie ma znaczenia.

Wcześniej, aby Outlook.com zrozumiał atrybut margin, trzeba było użyć:

 Margin: 10px;

Ale teraz możesz użyć:

 margin: 10px;

Aby uzyskać pełniejszą listę zmian, programista poczty e-mail Remi Parmentier napisał świetny blog zawierający informacje o nowej witrynie Outlook.com oraz o tym, na co powinni zwracać uwagę twórcy poczty e-mail.
Opanowanie perspektywy

Utrzymywanie trafności kodu

Jeśli kiedykolwiek pracowałeś jako programista poczty e-mail, często możesz mieć wrażenie, że posty celów związanych z renderowaniem wiadomości e-mail poruszają się bardziej niż powinny. Ponieważ rozwój poczty e-mail nadal ewoluuje, zawsze będą pojawiały się nowe techniki, które wymagają „przetłumaczenia” do programu Outlook.

Na przykład, gdy wprowadzono tworzenie hybrydowych/gąbczastych wiadomości e-mail, aby zapewnić, że aplikacja mobilna Gmail renderuje mobilną wersję wiadomości e-mail, programiści poczty e-mail opracowali również nowe techniki umożliwiające Outlookowi renderowanie tych wiadomości e-mail.

W miarę jak programiści poczty e-mail przesuwają kopertę dalej, a wielu aspiruje do tworzenia wiadomości e-mail bez tabel, te nowe techniki będą musiały zostać uproszczone dla wielu nadal używanych wersji programu Outlook.

Można śmiało powiedzieć, że innowacyjni i utalentowani programiści poczty e-mail nigdy nie byli bardziej poszukiwani. VML musi jeszcze zostać opanowany w poczcie e-mail i dopóki Outlook będzie używał Worda jako silnika renderującego, będzie to kluczowy obszar, w którym programiści poczty e-mail będą mogli nadal poszerzać swoją wiedzę i wartość.

Tworzenie e-maili wymaga czasu

Biorąc pod uwagę wszystkie te wyzwania, które Outlook nakłada na programistów poczty e-mail, a także rosnącą listę klientów poczty e-mail i urządzeń, które muszą być obsługiwane, nic dziwnego, że spora część czasu poświęcana na marketing e-mailowy to opracowywanie i testowanie wiadomości e-mail w formacie HTML.

W naszym raporcie Stan produkcji wiadomości e-mail z 2016 r. ponad 44% respondentów przyznało, że spędza ponad 3 godziny na opracowywaniu wiadomości e-mail. Nie jest to krótki czas i należy wziąć pod uwagę cały przepływ pracy w e-mail marketingu.

Outlook zawsze był trudnym wyzwaniem dla programistów poczty e-mail. Niestety nie można go lekceważyć, ponieważ ma spory udział w rynku klientów poczty e-mail, który może być większy, jeśli pracujesz w sektorze marketingu B2B. Po prostu Outlooka nie można zignorować.

Masz problem z tym, aby Twoje e-maile działały w Outlooku?

Nawiązaliśmy współpracę z firmą Microsoft, aby nadać priorytet błędom renderowania wiadomości e-mail w programie Outlook, szybciej identyfikować problemy i informować społeczność o ulepszeniach i poprawkach.

Pomóż nam ulepszyć Outlooka i zgłosić błąd renderowania.

Zgłoś błąd renderowania w Outlooku →