HTML email II
V následujícím textu se budu opírat o článek CSS and Email, Kissing in a Tree, který vyšel před rokem a půl na A List Apart. Bohužel musím konstatovat, že problémy, na které autor narazil, jsou aktuální i dnes. Standardy a semantika Stál jsem před relativně triviálním (sic!) úkolem nařezat grafický návrh a vyrobit z něj HTML email. Vzhledem k tomu, že to bylo poprvé, […]
V následujícím textu se budu opírat o článek CSS and Email, Kissing in a Tree, který vyšel před rokem a půl na A List Apart. Bohužel musím konstatovat, že problémy, na které autor narazil, jsou aktuální i dnes.
Standardy a semantika
Stál jsem před relativně triviálním (sic!) úkolem nařezat grafický návrh a vyrobit z něj HTML email. Vzhledem k tomu, že to bylo poprvé, co jsem kdy HTML email posílal, udělal jsem si relativně slušný, standardizovaný návrh, v němž byly všechny značky použity semanticky správně. V emailu jsem aplikoval metodu falešných sloupců, náhradu textu obrázkem a vzápětí jsem narazil na nekonečnou ignoranci některých emailových klientů.
Jak na styly
Následovalo testování. Pro milovníky externích CSS souborů mám špatnou zprávu – HTML email s externím CSS prostě nepošlete. Taktéž definice v hlavičce, pomocí tagu <style> nejsou podporovány stoprocentně. Jediný +− podporovaný zápis CSS jsou inline styly. Kód začíná nabobtnávat… a rozhodně ještě nejsme u konce.
Poznámka – cokoliv zapíšete pomocí HTML vlastností bez CSS, což už si např. já skoro nepamatuju, bude zobrazeno skoro jistě tak, jak vyžadujete. Nebo alespoň jistěji než CSS.
Body
Někteří HTML klienti přepisují tag body svým vlastním názvem, čímž ho nulují. Autor článku CSS and Email, Kissing in a Tree tedy doporučuje zabalit email do dalšího DIVu, který budete používat jako nový tag body.
Obrázky
Obrázky, které budete s HTML emailem posílat, by měly být co možná nejmenší. Jestliže vyžadujete maximální zobrazitelnost HTML emailu, tak používejte tag <img>. Na obrázky v pozadí elementů raději zapomeňte.
Layout
Tabulka, tabulka, tabulka. Nejlépe vnořená tabulka :-). Tabulkový layout zaručí, že váš email bude skoro jistě obsahovat dva sloupce vedle sebe. Floaty a pozicování fungují ve většině klientů také, ale místy jinak, než očekáváte.
Písmo
Definujeme absolutně, tj. ve tvaru font-size: 12pt(px);. Pro IEčkáře je to sice nepřístupná varianta definice, leč problémem relativní definice je hodnota, od které se vaše 100% velikost písma bude odvíjet. V různých klientech, a hlavně v různých webmailech, získáte odlišné velikosti písma (většinou bude písmo významně menší).
Tak, a teď můžete přidávat do komentářů další tipy pro tvorbu HTML emailů. Já se je pokusím v následujícím článku seriálu nějakým způsobem shrnout, doplnit, a taktéž uvést svoje zkušenosti s jednotlivými webmaily/poštovními klienty.
Komentáře
…a když člověk tohle všechno vyřeší, tak pak má příjemce na serveru antispam, který např. DIV převede na DEFANGED_DIV a můžu se jít klouzat. :-(
Mno my to máme v práci trochu ulehčené o to, že ve firmě je standard Outlook, takže to ladíme jen pod ním :) Ale i tak jsem narazil na pár drobností, které mě mírně řečeno překvapily:
– selektor hvězdička je ignorován – tedy lépe řečeno providlo s tímto selektorem je zrušeno
– barvy zadávané pomocí tří hexa cifer (například #000) jsou ignorovány
– jakž-takž viditelná plocha v Outlooku je při rozlišení 800×600 cca 600 pixelů (protože si každý zobrazuje ještě levý sloupec s adresářovou strukturou).
– písmo velikosti 11px sice lze ve stylech nadefinovat, ale uživatel ho pak stejně neumí moc používat protože v comboboxu s velikostmi písma jaksi chybí (to se týká spíše vytváření šablon pro emaily, kdy uživatel dostane šablonu a voutlooku si do toho napíše svůj vlastni obsah)
Jinak outlook naštěstí nemá problém se styly v hlavičce a s externími obrázky (ty jsou umístěny na serveru a jsou odkazovány absolutně), obrázky na pozadí taky nejsou problém.
Petr
Pobavil jsem se, kdyz jsem tento clanek cetl, jelikoz emaily do html rezu uz nejaky ten mesic a mel jsem presne tyto problemy. Jak jsem byl naivni u sveho prvniho emailu a delal vsechno hezky jen s css. Kdepak, tabulky, tabulky a tabulky.
Bohuzel i s 6 mesicni praxi, kazdy novy email prijde s nejakym prekvapenim, s necim, co bych od webovych email klientu necekal … a nejhur se mi zatim jevi yahoo mail, pote google. :)
Tabulkam zdar!
Jak píše Frencis – i po dlouhodobých zkušenostech člověk narazí na spoustu překvapení.
Co já vím, je třeba dávat si pozor především na Hotmail, který se údajně neostýchá zdroj mailu upravovat.
Každopádně, nechápu, proč článek doporučuje používat tiskové body místo obrazových?
přivíta bych k tomuto tématu tip na kvalitní rozseílací software, ať už třeba v PHP, nebo aplikaci do windows. Hledal jsem hodne dlouho, nadějný byl phplist, ale nějak se mi ho nepodařilo správně na windows serveru (přes podporu PHP) rozchodit.
[7] No a já bych uvítal něco podobného, ale postaveného na .NET technologii a klidně i komerční za peníze, nevíte o něčem?
Nasel jsem programek, ktery je urcen k rozesilani HTML e-mailu, celou spravu takovychto mailingvych kampani, atd.
Je to aplikace pro Windows a je komercni.
Jmenuje se to Broadcast HTML, a autorem je firma MailWorkZ (www.mailworkz.com). Zkousel jsem jenom trial verzi zdarma a opravdu to funguje dobre. Nenasel jsem zadneho desktopoveho ani weboveho klienta, ktery by ten mail nezobrazil spravne.
Vlozene obrazky cestuji spolecne s mailem jako prilohy, ale takovym zpusbem, ze zadny klient to nezobrazi jako e-mail s prilohou, ale jako HTML stranku. Presne tak, jak se ocekaava.
Samozrejme to nejsem schopen otestovat na vsech moznych klientech a konfiguracich, takze budud rad za nejake ohlasy, pokud budete testovat tento softik.
Zatraceně, na @mail klienty sem nidky nepomyslel, hmm, zajímavé
Pokud cílová skupina má převážně maily na seznamu a nestahuje si je na lokál, můžeme zapomenout na téměř jakékoli barvičky atp.
Napadají mě další věci, které jsem řešil kdysi dávno (cca 2 roky), kdy jsem začínal posílat pomocí PHP html emaily. Například čeština v předmětu či alternativní textová verze atp. To by bylo ale asi na déle.
Nemám rád html maily. Je to další z mnoha hloupých pokřivování webových standardů kvůli systému, který si tentokrát stanovily pro změnu provozovatelé freemailů.
„Já jsem provozovatel freemailu, udělal jsem to tak a tak blbě… a teď se všichni koukejte přetrhnout aby se vaše e-maily u mě zobrazily správně.“ :(
Je to smutný, ale nic s tím nenadělám. K čemu je člověku dobrý, že si na projektech frčí tempem XHTML Strict, když pak stejně musí odložit klávesnici, popadnout dláto a začít tesat tabulkový design…
predavani stylu jako parametr neni taktez 100%, nektere freemailove sluzby (vetsinou zahranicni) uspesne likviduji i takoveto zapisy napr. http://www.sapo.pt, dokonce jsem pri testovani narazil i nejakeho toho mail klienta. Pokud si u textu v emailu vystacis s barvickami, velikosti a rodinou pisem, stale se vyplati ozivit si tag „font“.
Floatovani
Je docela cesta do pekel, pokud te to zivi a nevis zcela presne co pouzivaji adresati. Pro obrazky radsi pouzit valign a ostatni veci je lepsi zaseknout do tabulky.
Body
Obalit jeste divem. neni potreba, jelikoz html e-mail musi byt v tabulkovem layoutu.