HTML hírlevelet kódolni szerkesztése
Innen: Hogyankell.hu
Figyelem: Nem vagy bejelentkezve. Ha szerkesztesz, az IP-címed nyilvánosan látható lesz a laptörténetben. Ha bejelentkezel vagy regisztrálsz, a szerkesztéseid a felhasználónevedhez lesznek társítva, egyéb hasznos dolgok mellett.
A szerkesztés visszavonható. Kérlek ellenőrizd alább a változásokat, hogy valóban ezt szeretnéd-e tenni, majd kattints a lap mentése gombra a visszavonás véglegesítéséhez.
| Aktuális változat | A te változatod | ||
| 5. sor: | 5. sor: | ||
== Lépések == | == 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. | + | # '''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. <code style="white-space:nowrap;"><div></code> és <span> tageket csak elvétve használjunk. |
| − | # '''A CSS stílusokat a html-en belül jelenítsd meg''' ( | + | # '''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.''' | # '''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 | + | # '''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 | + | # '''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 | + | # '''Ha több oszlopot összevonnánk, használjuk a colspan attribútumot.''' |
| − | # '''A táblázat elrendezését szabályozhatjuk a | + | # '''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 | + | # '''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!''' | # '''Tesztelj!''' | ||
#* Először is nézd meg a html alapú e-mailt különböző böngészőkben. | #* Először is nézd meg a html alapú e-mailt különböző böngészőkben. | ||
| 23. sor: | 23. sor: | ||
* 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. | * 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é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 | + | * A képeknél mindig adjuk meg az alt, a height és a width attribútumokat. |
| − | * A hivatkozásoknál ( | + | * A hivatkozásoknál (a) használjuk a target=”_blank” attribútumot. |
| − | * Ha a | + | * 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 | + | * 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 == | == Amire szükséged lehet == | ||
| 34. sor: | 34. sor: | ||
== Figyelmeztetések == | == Figyelmeztetések == | ||
| − | * Gyakori probléma, hogy a cellák és a képek elcsúsznak, ha a cella közvetlenül az | + | * 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. | * Lehetőleg ne használjunk JavaScriptet. | ||
* Az Outlook 2007 nem mutatja meg a háttérképeket. | * 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. | * 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 | + | * 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 | + | * A legtöbb e-mail szoftver nem támogatja a box-shadowt, a min-width és max-width attribútumot. |
| − | * Az asztali Outlook nem támogatja az üres cellákat ( | + | * 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. | * A leggyakoribb e-mail szoftverek css támogatottságáról [http://www.campaignmonitor.com/css/ itt] találtok bővebb információt. | ||
| 46. sor: | 46. sor: | ||
* [http://www.sakkom.hu/szolgaltatasaink/marketing-szolgaltatasok/webestanacsadas.html Webes tanácsadás] | * [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.sitepoint.com/code-html-email-newsletters-3/ How to code HTML Email Newsletters Article] | ||
* [http://www.campaignmonitor.com/css/ Campaign Monitor] | * [http://www.campaignmonitor.com/css/ Campaign Monitor] | ||
| − | |||
| − | |||
| − | |||
