V ecommerce tíme trávime pri nových eshopoch ladením emailov aj niekoľko hodín. Cieľom je zabezpečiť, aby sa systémové správy typu potvrdenie platby, informácia o odoslaní objednávky a pod. správne zobrazovali vo všetkých zariadeniach, prehliadačoch a emailových klientoch.
Možností, ako si email pozrieť, každým dňom pribúda. Ich úprava je preto čím ďalej tým náročnejšia a my sme si museli nájsť tie správne nástroje a spôsoby, ako si to uľahčiť. Podľa mňa sú to tieto:
1. Preč s div-kami!
Div-ká sú základným stavebným blokom pri webových stránkach. Outlook ich však odignoruje. Preto je pre zachovanie konzistentnosti lepšie použiť tabuľky. Na všetko – či už ide o zobrazenie obsahu vedľa seba alebo obyčajné centrovanie textu.
2. (Žiaden) border-radius v Outlooku…
Štýl border-radius spôsobí zaoblenie rohov elementu. Žiaľ, v emailovom klientovi Outlook na Windowse nie je podporovaný. Prehľad, kde všade podporovaný je, nájdete tu: https://www.caniemail.com/features/css-border-radius/. Ako ho doplniť? Nie je to jednoduché, ale ani nemožné. Dobrý návod sa nachádza na: https://kontent.ai/blog/emails-outlook-containers-rounded-courners/
3. …a ani žiaden margin a padding
Ak chcete v tabuľke využiť okraje a odsadenia, definujte ich iba pre každú bunku zvlášť, nie v úvode pri tagu table. Outlook má v tom druhom prípade tendenciu marginy a paddingy z table aj td spočítať. Užitočné tipy sú spísané tu: https://www.emailonacid.com/blog/article/email-development/7_tips_and_tricks_regarding_margins_and_padding_in_html_emails/
4. Obrázky – attached alebo embedded?
Pri zobrazovaní obrázkov priamo v obsahu emailov si treba dať pozor na to, aký spôsob zobrazenia obrázkov používame. Base64 sa v niektorých klientoch nezobrazí vôbec, Attachemnt(cid) sa zase v určitých prípadoch zobrazí ako príloha a obrázky nalinkované cez URL sa v základných nastaveniach nezobrazia napríklad na Outlooku. Viac o téme nájdete tu: https://mailtrap.io/blog/embedding-images-in-html-email-have-the-rules-changed
5. iPhony chcú vlastný tag
Ide o apple-disable-message-reformatting. Tento užitočný meta tag spôsobí, že, ak je aktívny, potom sa emaily na iPhone zobrazia korektne a nie len ako oddialená verzia desktop dizajnu.
Ďalšie užitočné linky pri príprave custom template emailov:
- https://www.goodemailcode.com/
- https://www.emailonacid.com/blog
- https://www.litmus.com/blog/
- https://responsivehtmlemail.com/
- https://www.caniemail.com/
- https://previewer.mailninja.co.uk/ – vhodné na kontrolu HTML emailov
- https://mailtrap.io/ – ponúka možnosť testovať emaily cez mailtrap SMTP a kontrolovať si vzhľad emailu aj podporu použitého CSS
