Diskuze: HTML/CSS mail

HTML a CSS HTML a CSS HTML/CSS mail American English version English version

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Ahoj, nemá někdo zkušenosti s tvorbou HTML/CSS mailů?

Konkrétně potřebuji vědět omezení vůči webu, jak musí být elementy ostylované a jestli je někde nějaký online tester, který vykreslí podle pravidel mailu? :))

Případně nějaké články z netu o této problematice? Když to zkouším hledat tak mi to nabízí jen nějaké online makery či jiné nesmysly...

Odpovědět  +1 14.8.2014 10:07
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

nainstaluj si počítač s IE5 a na tom testuj. Imlementace klientů je různá, nejvíc se však přibližují IE5.

Nahoru Odpovědět 14.8.2014 11:56
Nesnáším {}, proto se jim vyhýbám.
Avatar
Pavel Mareš
Redaktor
Avatar
Pavel Mareš:

Mám jeden WP plugin, který je zaměřený právě css/html v mailu. Musím říct, že práce je s tím požehnaně a na nějaké extra prvky rovnou můžeš zapomenout. Vše co může použít je jen pár základních stylů + obrázky. Vše musíš stylovat do samotného html což je dost otrava. Zápis by mohl vypadat nějak takto: (Upozorňuje že kod je v php protože to používám, pro automatické zasílaní, věřím že si v tom najdete co potřebujete)

/* ----- kódovaní pro email ----- */
$Headers  = "MIME-Version: 1.0 \r\n";
$Headers .= "Content-type: text/html; charset=utf-8 \r\n";
$Headers .= "From: od@koho.cz";

$Message = "
        <html>
        <head>
                <meta charset='utf-8'>
        </head>
        <body>
                ". $Obsah ."
        </body>
        </html>";

/* ----- obsah ----- */
(můj výmysl, můžete udělat jakkoliv jinak)

$CSS['wrap'] = "position:relative;margin:0 auto;width:800px;";
$CSS['perex-wrap'] = "float:left;width:800px;height:170px;margin-bottom:5px;";
$CSS['img-link-style'] = "float:left;width:220px;max-height:170px;min-height:170px;";
$CSS['img-style'] = "width:220px;max-height:170px;min-height:170px;";
$CSS['text-wrap'] = "float:left;width:580px;height:auto;";

$Obsah = "
<div style='". $CSS['perex-wrap'] ."'>
        <a href='' style='". $CSS['img-link-style'] ."'>
                <img src='' style='". $CSS['img-style'] ."'>
        </a>
        <div style='". $CSS['text-wrap'] ."'>
                <a href='' style='". $CSS['name-style'][0] ."'></a>
                <br />
                <span style='". $CSS['text'][0] ."'></span>
                <div style='". $CSS['info-wrap'][0] ."'>
                        <span style='". $CSS['info'] ."'></span>
                                <span style='". $CSS['info'] ."'></span>
                </div>
        </div>
</div>";

Hlavní pointou je to, že vše je stylování ke každému prvku zvlášť. Já si třeba vytvořím návrh třeba v nějakém online editoru a poté to přenesu do kodu, ale naházím si to do proměnných pro ulehčení. Snad pomůže. :)

Nahoru Odpovědět 14.8.2014 12:20
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Pavel Mareš
Honza Bittner:

Díky. Žádné extra styly nepotřebuji - jen obyčejné background, color, border, margin, padding, float...

Hele, jak je to s podporou stylování v <stlyle> náhodou nevíš?

A jak je na tom načítání externího fontu - třeba font awesome etc?

Nahoru Odpovědět 14.8.2014 12:28
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Honza Bittner
Jiří Gracík:

Font a stylování by neměli být problém. Nejlépe to bude vyzkoušet v Outlooku, mělo by to normálně fungovat :)

Nahoru Odpovědět 14.8.2014 12:32
Creating websites is awesome till you see the result in another browser ...
Avatar
Pavel Mareš
Redaktor
Avatar
Odpovídá na Honza Bittner
Pavel Mareš:

Bohužel jakékoliv načítaní z cizích stránek (ba i když je to google a email ti přijde na gmail) je většinou zakázané. Setkal jsem se na seznamu s povolením importovat základní prvky jako fonty, ale musejí být z ověřených stránek. Ale opět je tu chyba seznamu, který to většinou všechno zmrví ještě víc, než by to bylo normálně.

Nahoru Odpovědět 14.8.2014 12:35
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Pavel Mareš
Honza Bittner:

Jak jsem tak sledoval maily ostatních, které mi přišli, tak se tam zobrazí ta hláška, jestli chci povolit externí cokoli, že?

Nahoru Odpovědět 14.8.2014 12:38
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

ne to je jen povolení, že to externí stáhne, jestli to použije je druhá věc. Nevím jak fonty, ale všelijaké pozadí, rámečky atd, vidím nejčastěji řešené obrázkem.

Nahoru Odpovědět  +2 14.8.2014 12:53
Nesnáším {}, proto se jim vyhýbám.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.