HTML hírlevelet kódolni - Laptörténet

Andi02: /* Kapcsolódó források, hivatkozások */

2013-06-11T11:26:59Z

‎Kapcsolódó források, hivatkozások

Kiscsillag: /* Figyelmeztetések */

2013-01-10T08:31:19Z

‎Figyelmeztetések

Kiscsillag: /* Tippek */

2013-01-10T08:30:38Z

‎Tippek

Kiscsillag: /* Lépések */

2013-01-10T08:29:21Z

‎Lépések

Kiscsillag: /* Lépések */

2013-01-10T08:25:23Z

‎Lépések

Kiscsillag: /* Lépések */

2013-01-10T08:24:35Z

‎Lépések

Kiscsillag: /* Lépések */

2013-01-10T08:23:31Z

‎Lépések

46.139.243.12: /* Figyelmeztetések */

2013-01-09T21:45:50Z

‎Figyelmeztetések

46.139.243.12: /* Lépések */

2013-01-09T21:41:20Z

‎Lépések

46.139.243.12: /* Lépések */

2013-01-09T21:40:48Z

‎Lépések

@@ 46. sor: / 46. sor: @@
 * [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]

@@ 34. sor: / 34. sor: @@
 == 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.
+* 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 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 box-shadowt, a min-width és max-width attribútumot.
+* A legtöbb e-mail szoftver nem támogatja a ''box-shadow''t, a ''min-width'' és ''max-width'' attribútumot.
-* Az asztali Outlook nem támogatja az üres cellákat (empty-cells).
+* 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.

@@ 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.
 * 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 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.
+* 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.
+* 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.
+* Használjunk 10px ''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 ==

@@ 5. sor: / 5. sor: @@
 == 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. <code style="white-space:nowrap;"><div></code> és <span> tageket csak elvétve használjunk.
+# '''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;>.
+# '''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 ''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, p és a tagekbe csak akkor írj stílusdefiníciót, ha feltétlenül szükséges.
+# '''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 ''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.
+# '''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.'''
+# '''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 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.
+# '''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.

@@ 5. sor: / 5. sor: @@
 == 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.
+# '''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''' (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.'''