Pár poznámek k odesílání emailů

index.md

Poznámky k odesílání emailů

Co vás čeká

Bolestivá cesta fragmentace trhu, velikosti zařízení, bugujících aplikací. Občas šílené řešení

Bulletproof email buttons design:

	<div><!--[if mso]>
		  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
	    <v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" />
	    <w:anchorlock/>
	    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
	  </v:roundrect>
	<![endif]--><a href="http://"
	style="background-color:#556270;background-image:url(http://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></div>

Zdroj: http://buttons.cm/

Welcome back in 90's

• tabulky, tabulkový layout
• mizivá podpora media query
• neúplná implementace CSS standardu
• různá vykreslovací jádra

Rendering

• Outlook - Internet Explorer, Microsoft Word (fakt nekecám!!!)
• Lotus Notes - Internet Explorer, Rich Text
• Apple Mail - Web Kit / Blink
• Mozilla Thunderbird - Gecko (Firefox)

-->

zdroj. https://litmus.com/blog/desktop-rendering-issues-focus-initial-testing-on-a-handful-of-rendering-engines

<--

Client market share:

• http://emailclientmarketshare.com/
• http://www.testing-web-sites.co.uk/testing-resources/email-client-market-share/email

Na co si dát pozor?

Vždy uvádějte kódování

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Pokud chcete být responzivní, nezapomeňte do hlavičky napsat:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Většina webový klientů:

• stripuje <style>
• odstraňuje neviditelný obsah
• přidává povinné podtržení odazů (Gmail )

Obecné rady

• Používejte tabulkový layout
• Poduch chcete použít DIV layout, zapomeňte na Outlook protože neumí CSS float elementů
• Používejte pouze inline CSS styly nebo svůj email před odesláním zpracujte (viz. Preprocesing níže)
• Tunderbird na OSX se chová jinak než na Linuxu - zkuste svůj email v obou
• Piště ke všem tabulkám cellpadding=0 cellspacing=0 border=0 pokud ho tam nemáte
• CSS Support table
• The Ultimate Guide to CSS

Gmail (webový)

• snaží se chovat chytře a řešit problémy za vás = vytváří nové
• mění barvu odkazu, pokud není výsloveně uvedena ve style u <a>
• restriktivní šířka emailu
• přidává vlastní class k elementům

Gmail (Android/iOS)

• snaží se chovat ještě víc chytře a řešit problémy za vás = vytváří nové
• nesmyslně se chovající auto fit elementů
• náhled emailů vám jej přepůlí v místě, kde sám uzná za vhodné
• problémy s konverzacema (rozpadá se formátování, pokud je email jako odpověď nebo navazující)

Outlook

• IE 6 pro emaily
• přidává si padding kde se mu zlíbí
• nepodporuje spoustu CSS
• https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients

Yahoo

• může přidat border k tabulkám, kteté jej nemají nastavený

Responzivní emaily

CSS Media query support

Ano podporuje

• iOS (iPhone/iPad)
• Android 4.x native client
• Android Outlook.com app
• Windows Phone 7.5
• BlackBerry OS 6
• BlackBerry OS 7
• BlackBerry Z10
• Kindle Fire native client

Neumí nebo ignoruje

• Android Outlook Exchange via native client
• Android Gmail app
• Android Yahoo! Mail app
• Gmail (Android Browser)
• Outlook.com (Android Browser)
• Yahoo! Mail (Android Browser)
• Windows Phone 7
• Windows Phone 8 !!!

Zdroj: Litmus

CSS/HTML frameworky pro emaily

• ZURB - responsive, tabulkový layout, ukecané CSS
• ANTWORK - jedoduchý, pokud potřebujete posílat jednoduché emaily
• htmlemailboilerplate - spousta triků a osvědčených postupů
• Achemail - postavený nad Twitter Boostrap

Tracking emailů

Můžete použít Google Analytics, Mixpanel nebo Litmus

• Litmus
• Google Analytics URL

Nebo svůj vlastní nástroj, více informací najdete v tracking.html

Google Analytics

Nejprve koukněte do dokumentace.

$params = [
			'v' => 1, // Protocol Version (required)
			'tid' => 'UA-xxxxx-4', // Tracking ID (required)
			'cid' => \Rhumsaa\Uuid\Uuid::uuid4(), // Client ID anonymously identifies (required)
			't' => 'event', // Event hit type
			'ec' => 'email', // Event Category. Required.
			'ea' => 'open', // Event Action. Required.
			'cs' => 'notification', // Campaign Source
			'el' => 'whatever', // Event label
			'cm' => 'email', // Campaign Medium
			'ck' => 'moje', // Campaign Keyword
			'cn' => 'open_email_tracking', // Campaign Name
			'z' => (string)mt_rand(1e11, 1e12 - 1) // cache bust param
		];
echo 'http://www.google-analytics.com/collect?' . http_build_query($params);

Preprocesing emailů

Než svůj email pošlete, je dobré jej nějak zpracovat. Toto zpracování se týká hlavně doplnění důležitých atributů a CSS

• Emogrifier - Emogrifier converts CSS styles into inline style attributes in your HTML code. This ensures proper display on email and mobile device readers that lack stylesheet support.
• Webmail Rendering Explained: Why Preprocessors are the Enemy

preprocesor.php

	<?php
    /**
     * @author Roman Ozana <ozana@omdesign.cz>
     */
    class MailPreProcessor {

	/**
	 * Zpracuje a upravi HTML emailu aby byl spravne nastylovan
	 *
	 * @param string $html
	 * @return string
	 */
	public static function processHtml($html) {
		if (!$html) return;

		$emogrifier = new \Emogrifier($html);
		$html = $emogrifier->emogrify();

		$document = new \DOMDocument;
		$document->strictErrorChecking = false;
		$document->formatOutput = true;
		$libXmlState = libxml_use_internal_errors(true);
		$document->loadHTML($html);
		libxml_clear_errors();
		libxml_use_internal_errors($libXmlState);
		$document->normalizeDocument();

		$xpath = new \DOMXPath($document);

		self::addMandatoryAttributes($xpath->query('//table'), ['cellpadding' => 0, 'cellspacing' => 0, 'border' => 0]);

		return $document->saveHTML();
	}

	/**
	 * @param \DOMNodeList $elements
	 * @param array $attributes
	 * @return void
	 */
	private static function addMandatoryAttributes(\DOMNodeList $elements, array $attributes) {
		foreach ($elements as $element) {
			/** @var \DOMElement $table */
			foreach ($attributes as $name => $value) {
				if (!$element->hasAttribute($name)) {
					$element->setAttribute($name, $value);
				}
			}
		}
	}
    }

tracking.html

<style>
    /* Trackování tisku emailů */
    @media print {
        #track {
            background-image: url('http://www.cokoliv.cz?print');
        }
    }

    /* Trackovani forward emailů */
    div.OutlookMessageHeader, table.moz-email-headers-table, blockquote #track {
        background-image: url('http://www.cokoliv.cz?forward')
    }
</style>

<!-- Tracking DIV -->
<div id="track"></div>

<!-- Main Image -->
<img src="http://www.cokoliv.cz/?img" style="display:none" width="1" height="1" border="0"/>

<!-- Na www.cokoliv.cz musí samozřejmě poslouchat vaš analytický nástroj. -->