Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:14.8.2014 10:07

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
14.8.2014 10:07
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:14.8.2014 11:56

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
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:14.8.2014 12:20

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: [email protected]";

$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
Však ono půjde ...
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Pavel Mareš
Honza Bittner:14.8.2014 12:28

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:14.8.2014 12:32

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
Neaktivní uživatelský účet
Avatar
Pavel Mareš
Tvůrce
Avatar
Odpovídá na Honza Bittner
Pavel Mareš:14.8.2014 12:35

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
Však ono půjde ...
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Pavel Mareš
Honza Bittner:14.8.2014 12:38

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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:14.8.2014 12:53

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
14.8.2014 12:53
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.