Hírlevél optimalizálás Outlook-ra

Szerző:   |   2017-02-24

Az elmúlt hónapok tapasztalatai alapján azt kell mondjam, hogy a cross-client e-mail tervezés egy külön tudomány. Annyi buktatója van a dolognak, mint égen a csillag.

Arra szoktam törekedni, hogy a hírlevél minél többféle levelezőprogramban tökéletesen jelenjen meg. Ez egészen addig nem okoz különösebb gondot amíg modernebb levelezőkön tesztelünk, pl. Gmail, Thunderbird, Mailbird, mobileszközös levelezők, stb... Kíváncsiságból leteszteltem pár korábban készített hírlevelet Outlook-on, és az eredményen dobtam egy hátast: felismerhetetlenségig szétesett layout, rossz képméretek, eltérő link színek és betűtípusok, szóval teljes kudarc.

Beleöltem pár éjszakát a próbálgatásba, és sikerült kitesztelnem néhány módszert amivel az Outlook is nagyjából elfogadható formában jeleníti a hírlevelet. Különbséget kell tenni a desktop Outlook és az outlook.com webes felülete között. Félreértés ne essék, mindkettő egyformán ótvar, de ugyanazt a levelet eltérően jelenítik meg.

Kicsit olyan ez a téma, mint amikor 2010-ben még mindig IE6-ra kellett optimalizálnunk az oldalakat, mert csomó ügyfél azt használta. De persze a Windows Vista már alapból 7-es IE-vel jött, emiatt lehetetlen volt korábbi verzióval tesztelni. Az alábbi trollkodós képet 7 éve posztoltam Facebook-on az akkori fejlesztői környezetünkről, ahol egy már akkor 7 éves notebook-ot használtunk kizárólag IE6-os tesztelésre.

Joggal mondhatnánk, hogy aki Outlook-ot használ azzal nem foglalkozunk, de a megnyitási arányokat elnézve rengeteg ilyen user van, ezért muszáj valamit kezdeni a problémával. Operációs rendszer váltásra is nehéz rávenni a cégeket, de az Office csomagok upgrade-je sem túl gyakran történik meg. Ebből következik, hogy akik munkahelyen nyitják meg a hírlevelünket, nagy valószínűséggel 2013-as, vagy rosszabb esetben 2007-es Outlook-ot használnak.

Annyit még hozzátennék, hogy az itt ismertetett módszerek egyáltalán nem biztos, hogy mindenkinél működni fognak. Az eredményt több tényező befolyásolja, többek között az Outlook verziója, illetve a hírlevélküldő szoftver is.

Minden levelezőprogram alatt tökéletesen működő reszponzív hírlevél sablont létrehozni gyakorlatilag lehetetlen. Próbálgattam pár "professzionális" címszó alatt reklámozott MailChimp sablont, de az Outlook teszten mindegyik elvérzett. Ráadásul a forráskódja több, mint 3x nagyobb volt, mint amit kézzel írtam nulláról ugyanarra a hírlevélre. Továbbra sem javaslom kész template-ek használatát és ugyanez igaz a preprocessorokra is.

Outlook conditional

Az alábbi feltételekkel kimondottan Outlook-ra tudunk optimalizálni, mert amit közéjük írunk azt a többi kliens figyelmen kívül hagyja. Én ezeket sosem szoktam használni, mert áttekinthetetlen kódot eredményez.


<!--[if gte mso 9]>
Outlook content...
<![endif]-->

CSS override

Ezekkel a módszerekkel elvileg felül lehet csapni az Outlook és a webes Outlook default CSS rule-okat. Próbálgattam, de nem igazán működnek, ezért kódrészletet sem akarok közölni. Ha valaki szeretne kísérletezni, akkor itt megtalálja a felülírandó class neveket.

Preheader

A preheader jelentőségéről már írtam korábban. A módszer lényege, hogy display:none-el hide-oljuk a szöveget, így az nem jelenik meg a hírlevélben, csak megnyitás előtt látszik a subject line alatt. Ez elvileg egy sima span tag-el kivitelezhető, viszont az Outlook van, hogy figyelmen kívül hagyja és a display:none ellenére simán megjeleníti a szöveget.


<span style="display:none">A hírlevél tartalmából...</span>

Float, overflow és line-height attribútumokkal kiegészítve Outlook alatt is biztosra mehetünk.


<div style="overflow:hidden; float:left; display:none; line-height:0px">A hírlevél tartalmából...</div>

Bizonyos esetekben a preheader-el spam score emelkedést is sikerült elérnem, ezért csak óvatosan a használatával!

Retina támogatás

Retinás képeket használni hírlevélben részemről maximálisan ellenjavallt ötlet. Az Outlook nem képes értelmezni a max-width attribútumot, ennek megfelelően eredeti méretében jeleníti meg a képet. A 300px szélesre tervezett dobozunk, kapásból 600-ra ugrik, ha retinás képet teszünk bele. Ezen nem segít semmi, az sem, ha fix méretű cellába kényszerítjük. Esetleg annyit lehet, hogy width="300"-at írunk a képre, de akkor a reszponzivitásnak lőttek. A képeken mindig legyen width="100%" és display:block, a méretük pedig a tényleges méret legyen, a retinát felejtsük el.

Linkek színe

A linkek színe máig megoldatlan rejtély számomra. Abszolút semmiféle logika nincs abban, hogy mikor mitől jelenik meg rosszul. Valószínűleg attól is függ, hogy milyen elemen belül található az adott link, mert az Outlook extra tag-eket tesz a linkek köré, ami teljesen felborítja a stílusok öröklődését. Az esetek többségében működő megoldás, hogy a linkre egyrészt rátesszük a color-t, illetve az <a> tag-en belül plusz <span> tagek közé tesszük a szöveget.

A szín megadásának módja sem mindegy. Az #ffd700 sok esetben nem működött, mindig felülírta az Outlook. De, ha a szín nevét adtam meg (gold), akkor helyesen jelent meg.


<a href="http://google.hu" style="color:gold"><span style="color:gold">ez itt egy link</span></a>

Betűtípusok, betűméretek

A rengeteg plusz tag amivel az Outlook telenyomja a levelet, felborítja stílusok öröklődését. A betűtípusra és méretre az a legbiztosabb, ha minden egyes bekezdésre vagy cellára rátesszük ezeket külön-külön.


<p style="font-family:arial; font-size:12px">ez itt egy bekezdés</p>

CSS shorthand használata mellőzendő, az alábbi kód Outlook alatt nem fog működni.


<p style="font:12px arial normal">ez itt egy bekezdés</p>

Reszponzív layout

A reszponzív layout problémás az Outlook-ban, mivel nem ismeri a max-width beállítást, ami az egésznek a lelke. Az alábbi kódrészlettel elérhető a 600px méretű, középre igazított fluid layout. Eredetileg 600px-et javasolnak hozzá, de nekem az mindig 594px szélességű layout-ot eredményezett. Ezért írtam át 606-ra az, így pontosan 600px szélességű lesz a levél.


<table align="center" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
	<tr>
		<td></td>
		<td align="center" width="606" style="width:606px;">
			content
		</td>
		<td></td>
	</tr>
</table>

Extra térközök

Amikor fix méretű elválasztó sort szeretnénk beszúrni, azt az Outlook néha figyelmen kívül hagyja, és jóval nagyobb lesz a térköz.

Tehát akarunk egy 10px magas üres sort, ezért beszúrunk egy üres cellát:


<tr><td height="10"></td></tr>

Van amikor jó, van amikor nem. Amikor nem, akkor lehet szórakozni a line-height és font-size beállításokkal:


<tr><td height="10" style="font-size:0; line-height:0"></td></tr>

De ez se mindig oldja meg a problémát. Olyankor jön az, hogy úgy marad és befetémavaninnen.

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Sokat segitettel egy abszolut hozzanemertonek! Koszonom...

  • Névjegykártya tervezés Illustratorban

    Nem, mert megmondod, hogy kétoldalas nyomtatást kérsz. A nyomda nem csinál semmit amíg minden pontosan le nincs egyeztetve....

  • Névjegykártya tervezés Illustratorban

    Szia! Ha csinálok 2 ardboardot, egyikre a kártya elejét, a másikra a hátulját csinálom meg, és elmentem őket egy nyomdakész kétoldalas PDF-be, azt tud...

  • A villanyszerelés örömei panelben

    Mi is panelben szeretnénk az elektromos hálózatot cserélni, felújítani. Sokat segítettél, köszönjük. Üdv. József...

  • A villanyszerelés örömei panelben

    Nem mert, ez már 3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezet...

  • Az Axure használata

    Ertem, koszonom!...

  • Az Axure használata

    Magyarországon nem szokása a cégeknek kiírni a fizetést az álláshirdetésekben, hanem neked kell fizetési igényt megjelölni az önéletrajzodban. Ha tége...

  • Az Axure használata

    Értem. Köszi a választ megint. És egyébként általában az ilyen munkahelyek mennyit adnak kezdö fizetésnek? Csak mert sehol sem irnak konkrétat, csak a...

  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...