emailconfirmed
3 341
szerkesztés
Módosítások
Innen: Hogyankell.hu
Új oldal, tartalma: „== Hogyan kell HTML hírlevelet kódolni? == Sajnos az, ami egy weboldalon működik, nem feltétlenül jelenik meg jól egy HTML alapú e-mailes hírlevélben vagy eDM-b…”
== Hogyan kell HTML hírlevelet kódolni? ==
Sajnos az, ami egy weboldalon működik, nem feltétlenül jelenik meg jól egy HTML alapú e-mailes hírlevélben vagy eDM-ben. Ráadásul a különböző e-mail szoftverek (Outlook, Yahoo!, Google Mail) esetében is más és más lehet az üzenetünk megjelenítése, nem is beszélve a különféle böngészőkről. Az alábbi cikkben igyekeztünk összegyűjteni a legfontosabb tudnivalókat, melyek segítenek abban, hogy megfelelő formában és kóddal küldjük ki az e-mail alapú HTML hírlevelet.
== 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. <div> és <span> 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 (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, 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.'''
# '''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.
#* Teszteld az e-mailt különböző szolgáltatók esetében (pl. Outlook, Yahoo!, Google Mail, Freemail), ehhez célszerű megnézni, hogy a címzettek mit használnak. Ha például senki nincs yahoo!-s e-mail címmel, felesleges tesztelgetnünk ezt a lehetőséget.
#* Azt is ellenőrizzük, hogy miként jelenik meg az e-mailünk akkor, ha a képek megjelenítése alapbeállításként ki van kapcsolva. Mert ha pl. egy sötét háttérképen fehér betűt használunk, a háttérkép azonban nem jelenik meg, ez problémát okozhat.
#* Ellenőrizd, hogy nem akadsz-e fenn a spamszűrőkön. Egy jó eszköz erre ez a [http://www.contactology.com/check_mqs.php Spamchecker].
== Tippek ==
* 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 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 ==
* HTML és CSS ismeret
== 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-shadowt, 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.
== Kapcsolódó források, hivatkozások ==
* [http://www.sakkom.hu/szolgaltatasaink/marketing-szolgaltatasok/webestanacsadas.html Webes tanácsadás]
* [http://www.sitepoint.com/code-html-email-newsletters-3/ How to code HTML Email Newsletters Article]
* [http://www.campaignmonitor.com/css/ Campaign Monitor]
[[Kategória:Internet]]
[[Kategória:Szoftver]]
Sajnos az, ami egy weboldalon működik, nem feltétlenül jelenik meg jól egy HTML alapú e-mailes hírlevélben vagy eDM-ben. Ráadásul a különböző e-mail szoftverek (Outlook, Yahoo!, Google Mail) esetében is más és más lehet az üzenetünk megjelenítése, nem is beszélve a különféle böngészőkről. Az alábbi cikkben igyekeztünk összegyűjteni a legfontosabb tudnivalókat, melyek segítenek abban, hogy megfelelő formában és kóddal küldjük ki az e-mail alapú HTML hírlevelet.
== 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. <div> és <span> 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 (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, 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.'''
# '''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.
#* Teszteld az e-mailt különböző szolgáltatók esetében (pl. Outlook, Yahoo!, Google Mail, Freemail), ehhez célszerű megnézni, hogy a címzettek mit használnak. Ha például senki nincs yahoo!-s e-mail címmel, felesleges tesztelgetnünk ezt a lehetőséget.
#* Azt is ellenőrizzük, hogy miként jelenik meg az e-mailünk akkor, ha a képek megjelenítése alapbeállításként ki van kapcsolva. Mert ha pl. egy sötét háttérképen fehér betűt használunk, a háttérkép azonban nem jelenik meg, ez problémát okozhat.
#* Ellenőrizd, hogy nem akadsz-e fenn a spamszűrőkön. Egy jó eszköz erre ez a [http://www.contactology.com/check_mqs.php Spamchecker].
== Tippek ==
* 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 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 ==
* HTML és CSS ismeret
== 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-shadowt, 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.
== Kapcsolódó források, hivatkozások ==
* [http://www.sakkom.hu/szolgaltatasaink/marketing-szolgaltatasok/webestanacsadas.html Webes tanácsadás]
* [http://www.sitepoint.com/code-html-email-newsletters-3/ How to code HTML Email Newsletters Article]
* [http://www.campaignmonitor.com/css/ Campaign Monitor]
[[Kategória:Internet]]
[[Kategória:Szoftver]]
