Főmenü megnyitása

Hogyankell.hu β

Módosítások

HTML hírlevelet kódolni

256 bájt hozzáadva, 2013. június 11., 11:26
Kapcsolódó források, hivatkozások
== Lépések ==
# '''Használjunk táblázatot a layout kialakításához''', mivel, ha CSS-sel alakítjuk ki a layoutot, könnyen széteshet az e-mail. <math><''div></math> '' és <math><''span></math> '' tageket csak elvétve használjunk.# '''A CSS stílusokat a html-en belül jelenítsd meg''' (''style=''), ne pedig külön dokumentumban csatold hozzá (sok e-mail szoftver ezeket egyszerűen törli). Semmiképpen ne használj a ''head '' tagben stílusmeghatározást, helyette inkább bodyban ''body''ban (a Google Mail máskülönben törli). Használj soron belüli stílusmeghatározásokat, pl.: <''p style=”color: white;>''.
# '''Ne használjunk rövidítéseket a stílusleírásoknál.'''
# '''Minél rövidebb stílus-meghatározásokat használj, és ezeket minél közelebb a tartalomhoz.''' Ez esetben nem jelent problémát (sőt!), ha minden egyes cellához meghatározod pl. a betűtípust ahelyett, hogy a teljes dokumentumra adnád meg. A headingekbe''heading''ekbe, ''p '' és ''a '' tagekbe csak akkor írj stílusdefiníciót, ha feltétlenül szükséges.# '''Célszerű három táblázatot létrehozni''' (fejléc, tartalom, lábléc), és ezeket egy „gyűjtőtáblázatba” beilleszteni, már csak azért is, mert bizonyos esetekben a ''body '' taget nem veszik figyelembe a szoftverek. Ehhez célszerű 100%-nál kisebb (javasolt a 98%) szélességet beállítani, vagy az e-mail szélességét fix értékre beállítani (ne legyen nagyobb 600px-nél). Általában ez utóbbi biztosabban működik.# '''Ha több oszlopot összevonnánk, használjuk a ''colspan '' attribútumot, több sor összevonásához pedig a ''rowspan''t.'''# '''A táblázat elrendezését szabályozhatjuk a ''border '' (szegély), ''valign '' (függőleges igazítás), ''align '' (vízszintes igazítás), ''cellpadding '' (cella kerete és tartalma közti távolság) és ''cellspacing '' (cellák kerete közti távolság) stb. attribútumokkal.'''# '''A ''float '' (lebegtetés) nem igazán működik''' a pl. Google Mail esetében, inkább egy összetettebb táblázattal oldjuk meg ezt.
# '''Tesztelj!'''
#* Először is nézd meg a html alapú e-mailt különböző böngészőkben.
* Célszerű egy HTML és egy egyszerű szöveges e-mailt is kiküldeni beillesztett képekkel, hogy a hírlevél vagy eDM címzettje választani tudjon, milyen módon tekinti meg. Az egyszerű szöveg ráadásul biztosan működik.
* A képeket tároljuk a szerveren, lehetőleg a weboldal képeitől eltérő mappában. Ne töröljük röviddel a kiküldés során, sokan csak hetekkel, hónapokkal később nyitnak meg egy e-mailt.
* A képeknél mindig adjuk meg az ''alt'', a ''height '' és a ''width '' attribútumokat.* A hivatkozásoknál (''a'') használjuk a ''target=”_blank” '' attribútumot.* Ha a <''p> '' tagbe zárt szöveg más méretű, mint az <''a> '' tagbe zárt, az <''a> '' tagbe zárt szöveget is tegyük <''p> '' tagbe.* Használjunk 10px paddinget ''padding''et a sorok esetében, mivel a Google Mail egyébként hajlamos „összenyomni” a középső részt, ahol megjelenik a mail.
== Amire szükséged lehet ==
== Figyelmeztetések ==
* Gyakori probléma, hogy a cellák és a képek elcsúsznak, ha a cella közvetlenül az ''img '' tag alatt záródik, ezért ilyen esetben közvetlenül az ''img '' tag mögé, azzal egy sorba helyezzük.
* Lehetőleg ne használjunk JavaScriptet.
* Az Outlook 2007 nem mutatja meg a háttérképeket.
* Mivel a spammelők gyakran használnak 1*1 pixeles képeket, kerüljük ezeket, mivel sok e-mail szoftver azonnal levélszemétnek minősíti az e-mailünket.
* A Google Mail esetében az is fontos hogy a háttérszínt a cellához határozzuk meg ''bgcolor '' attribútummal.* A legtöbb e-mail szoftver nem támogatja a boksz''box-shadowtshadow''t, a ''min-width '' és ''max-width '' attribútumot.* Az asztali Outlook nem támogatja az üres cellákat (''empty-cells'').
* A leggyakoribb e-mail szoftverek css támogatottságáról [http://www.campaignmonitor.com/css/ itt] találtok bővebb információt.
* [http://www.sakkom.hu/szolgaltatasaink/marketing-szolgaltatasok/webestanacsadas.html Webes tanácsadás]
* [http://www.emailmarketing.hu/tippek/jol-nezzunk-ki/230/ Mire figyeljünk az e-mail design kialakításakor?]
* [http://www.sitepoint.com/code-html-email-newsletters-3/ How to code HTML Email Newsletters Article]
* [http://www.campaignmonitor.com/css/ Campaign Monitor]
532
szerkesztés