Mérei Tamás webdesigner

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.

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

Hozzászólás

Legújabb hozzászólások