Moja wojna z Outlookiem…
Powrót do listy wpisówKażdy koder tworzący newslettery i mailingi prędzej czy później wpada w szał.
Powód?
Microsoft Outlook.
W swojej pracy wiele razy spotkałem się ze stwierdzeniem: “...wszystko jest super, hmm tylko na Outlooku coś nie działa...”. Wiele czasu i energii wymagało zdefiniowanie problemów oraz znalezienie rozwiązań, aby newslettery na Outlooku wyglądały poprawnie.
Z czego wynikają problemy z outlookiem?
We wczesnych wersjach Outlooka za wygląd maila odpowiadał silnik renderujący Internet Explorer’a, lecz w w 2007 roku Microsoft wprowadził jedną poważną zmianę. Otóż chcąc lepiej zintegrować swojego klienta pocztowego z resztą pakietu Office, wprowadził do Outlooka silnik renderujący Worda wraz z jego wszystkim plusami oraz… minusami.
Word nie jest programem do przeglądania stron www tylko edytorem tekstowym, co za tym idzie wzrosły ograniczenia na akceptowalność kodu HTML oraz CSS przez Outlooka. Można to zauważyć obserwując zachowanie Outlooka 2003 oraz 2007. W Raporcie CSS widać wyraźnie znaczny spadek wspieralności CSS-a przez Outlooka 2007, w stosunku do Outlooka 2003. Można narzekać, jednak była to ostateczna decyzja ludzi z Redmond Nam, a koderom pozostało tylko się do niej zastosować.
Moja lista grzechów Outlooka
Ten przypadek pojawił się podczas opracowywania pewnej kreacji. Mailing miał być dynamiczny z wykorzystaniem bardzo szerokiego obrazu, wszystko dobrze funkcjonowało...
...aż do momentu Inbox testu na Outlooku. Cały obraz został mocno ściśnięty, mimo zastosowania zdefiniowanych wymiarów.
Przecierałem oczy ze zdziwienia, o co chodzi, skąd ten błąd. Nastała pora na dogłębną analizę. To co się okazało zdziwiło mnie jeszcze bardziej.
Otóż w związku z tym, że Outlook korzysta z silnika Worda, a tam domyślnym rozmiarem strony jest format A4, który w przybliżeniu ma szerokość około 2000px, to ta wartość jest maksymalną akceptowalną szerokością mailingu, wszystko co jest szersze zostanie zciśnięte.
Po walce z szerokością, myślałem że już mnie nic nie zaskoczy, ale Outlook miał dla mnie jeszcze jedną niespodziankę. Zaczęło się niewinnie - na Outlooku pojawia się przerwa pomiędzy tekstami. W kodzie, wszystko było poprawnie. Screen testy innych skrzynek, również były poprawne. Więc o co chodzi?
Doświadczenia z problemem z szerokością maila okazały się być pomocne. To był bowiem dobry trop. Strona A4 jako domyślna strona w Wordzie. Jednak to nie rozwiązało problemu, dalej coś nie pasowało. Postanowiłem “wydrukować maila”- plan szalony, ale okazała się być strzałem w dziesiątke.
Otóż proszę Państwa, Outlook wiadomości mailowe w skrzynce odbiorczej wyświetla tak jakby to były kolejne strony jakiegoś pliku tekstowego, gotowego do druku, dlatego wstawia marginesy drukarki i domyślne marginesy strony!!! Na nic próby złamania kodu, za pomoca HTMLowych i CSSowych atrybutów page-break. Outlook nie potrafił sobie poradzić z odpowiednim ułożeniem treści. Błąd ten naprawiono dopiero w Outlooku 2013!
Kolejny dziwny przypadek. Stosując obramowanie elementów w newsletterze należy mieć na uwadze, że Outlook wspiera szerokość borderów tylko do 10px. Grubsze ramki są zwężane, co powoduje powstawanie nadmiarowej przestrzeni, która może rozsypać kreację.
Problem powszechnie znany ale i tak irytujący. Stosując w mailingu gifa musimy się liczyć z tym, że Outlook wyświetli tylko pierwszą klatką tej animacji. Dobrym zabiegiem jest stworzenie gifa w taki sposób, aby na pierwszej klatce pokazać najważniejsze informacji.
Webowe aplikacje pocztowe są cały czas rozwijane i aktualizowane, dzięki czemu wsparcie coraz nowszych technologii postępuje w miarę na bieżąco. Jednak Outlook jako aplikacja desktopowa jest bardziej odporna na postępowe zmiany.
W użyciu są obecnie wersje Outlook’a: 2003, 2007, 2010, 2013. Lecz starsze wersje nie są w ogóle rozwijane, dlatego np. w Outlook 2007 wiadomości są wyświetlane w specyfikacji sprzed 8 lat, a w Internecie 8 lat toż to cała wieczność. Zresztą co widać z tegorocznego Raportu CSS, programiści z Mircosoftu nie za bardzo chcą rozwijać wspieralność CSSów w Outlooku. Nad czym bardzo ubolewam.
Podsumowując…
Niestety powyższe grzechy to tylko wierzchołek góry lodowej. Istnieje mnóstwo pomniejszych problemów, takich jak chociażby, zastępowanie znaczników <div> poprzez <p> czyli paragraf z domyślnie ustawionym paddingiem oraz marginsem, który potrafi zepsuć cały layout szablonu. Dużo problemów w tym akurat wypadku, zostało już rozwiązanych, jednak nie przez twórców Outlooka, a jedynie dzięki sztuczkom, obejściom i używaniu kodów warunkowych przez koderów mailingów.
Na koniec chciałem napisać jakiś pozytywny komentarz. Chciałem dostrzec jednak coś dobrego. Jednak jedyną wartą użycia opcją Outlooka, z której warto skorzystać jest przycisk “odinstaluj”.
Podpisano:
Łukasz - outlookowo sflustrowany frontendowiec