FOK!forum / Digital Corner / Een nieuwsbrief (email) maken, waar moet ik aan denken?
Mirelzondag 28 augustus 2011 @ 20:10
Ik heb deze pagina gelezen: http://groundwire.org/support/articles/css-and-email-newsletters en hier gekeken: http://www.campaignmonitor.com/css/

In hoeverre klopt die info nog? ik was juist van plan om het in css te doen en niet in tabellen, maar goed. Ik heb de taak overgenomen van iemand anders en de template die er al was is in tabellen die style elementen hebben. Heeft verder iemand nog tips? :)

ik wilde wel een testmail versturen met het systeem in kwestie: WizBizz Mail Manager, maar de testmails komen niet door.
RichardRichardzondag 28 augustus 2011 @ 20:28
Inline css :). Geen extern css bestand inladen, dat wordt meestal geblokkeerd of gewoon niet geladen. (css en tabellen staan los van elkaar)
Mirelzondag 28 augustus 2011 @ 20:41
In divs en andere elementen gewoon toch? Niet in td en tr's? :)
Civilianzondag 28 augustus 2011 @ 20:55
quote:
0s.gif Op zondag 28 augustus 2011 20:41 schreef Mirel het volgende:
In divs en andere elementen gewoon toch? Niet in td en tr's? :)
Zou ik wel doen. Dan heb je meer garantie dat het er in elke client een beetje fatsoenlijk uitziet :)
Mirelzondag 28 augustus 2011 @ 22:30
Oke dan. Dan ga ik maar designen in Dreamweaver, vind die dingen coderen te onoverzichtelijk :')

quote:
Je begint de tabel met de <TABLE> tag.
Vervolgens begin je een rij met de tag: <TR> (Table Row).
Hierna plaats je een cel met de tag: <TD> (Table Data).
Na deze tag plaats je de informatie die je in de cel op wilt nemen.
De eindtags: </TD> en </TR> zijn niet verplicht.
Een nieuwe cel begin je dan weer met: <TD>.
Heb je alle cellen binnen een rij ingevuld, dan begin je de volgende rij met: <TR>.
Zo vul je de hele tabel in. Uiteindelijk sluit je de tabel met de eindtag: </TABLE>.
doe ik dus wel, vage zooi :{
rekenwondermaandag 29 augustus 2011 @ 21:56
.

[ Bericht 87% gewijzigd door rekenwonder op 29-08-2011 21:57:39 ]
Dalandodinsdag 30 augustus 2011 @ 19:47
quote:
0s.gif Op zondag 28 augustus 2011 22:30 schreef Mirel het volgende:
Oke dan. Dan ga ik maar designen in Dreamweaver, vind die dingen coderen te onoverzichtelijk :')

[..]

doe ik dus wel, vage zooi :{
Eindtags </td> en </tr> zijn niet verplicht? Wat :')
Viincentttwoensdag 31 augustus 2011 @ 09:14
Die tags zijn dus wel verplicht, ik weet niet waar je die tekst vandaan haalt maar dit is zeer slecht advies. Hij bedoeld waarschijnlijk dat browsers het automatisch corrigeren als je die tags die afsluit, maar dat betekent niet dat deze tags niet verplicht zijn.
rekenwonderwoensdag 31 augustus 2011 @ 19:17
TS: je moet heel erg opletten met het maken van HTML voor emails. Beter tables dan div's (hoe erg dat ook tegen je compliancy-hart ingaat). En heel erg uitkijken met welke CSS properties je gebruikt. Veel e-mailclients filteren van alles en nog wat. Check bijvoorbeeld:

http://www.campaignmonitor.com/css/
http://www.crosscomm.net/(...)-to-code-html-email/

quote:
0s.gif Op woensdag 31 augustus 2011 09:14 schreef Viincenttt het volgende:
Die tags zijn dus wel verplicht, ik weet niet waar je die tekst vandaan haalt maar dit is zeer slecht advies.
Vroeger, in de tijd van HTML 4.01 was dit toch wel degelijk zo. Maar goed, we leven gelukkig in 2011 :-)

[TR] Start tag: required, End tag: optional
[TD] Start tag: required, End tag: optional
Luckypenguinwoensdag 31 augustus 2011 @ 19:23
Inderdaad, gebruik tables. Ik heb het in het verleden wel eens met DIV's geprobeerd maar dat werd door allerlei e-mail clients anders weergegeven..
Mirelwoensdag 31 augustus 2011 @ 20:47
quote:
0s.gif Op woensdag 31 augustus 2011 19:17 schreef rekenwonder het volgende:
TS: je moet heel erg opletten met het maken van HTML voor emails. Beter tables dan div's (hoe erg dat ook tegen je compliancy-hart ingaat). En heel erg uitkijken met welke CSS properties je gebruikt. Veel e-mailclients filteren van alles en nog wat. Check bijvoorbeeld:

http://www.campaignmonitor.com/css/
http://www.crosscomm.net/(...)-to-code-html-email/

[..]

Vroeger, in de tijd van HTML 4.01 was dit toch wel degelijk zo. Maar goed, we leven gelukkig in 2011 :-)

[TR] Start tag: required, End tag: optional
[TD] Start tag: required, End tag: optional
Je streept de eerste link door omdat er iets niet goed mee is of omdat ik hem al plaatste? :P

Wat betreft die eindtags, het is dan wel 2011, maar het schijnt dus dat bijv. Outlook een oudere Word HTML parser/lezer (hoe noem je dat? :P) gebruikt, en die is misschien niet 2011 :o
Mirelwoensdag 31 augustus 2011 @ 23:00
Kan iemand me even helpen met iets? Ik heb nu echt alles met tabellen gedaan. Ik heb de achtergronden van de tabellen niet meer op de css manier. Toch zie ik nog steeds een duidelijke lege lijn tussen de verschillende tabellen. Ik heb ze allemaal border="0" gegeven maar dat werkte niet. In het HTML topic zei iemand dat ik in een style border-collapse:collapse; moet doen. Dat werkte deels, horizontaal is de boel in orde maar verticaal niet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" height="100%" border="0" bgcolor="#3E3E3E" style="border-collapse:collapse;">
  <tr>
    <td>
        <table width="664" border="0" align="center">
          <tr>
            <td rowspan="5" width="27px" height="1150px" background= "images/links.png"> </td>
            <td width="570px" height="128px" background="images/header.gif"> </td>
            <td rowspan="5" width="67px" height="1150px" background="images/rechts.png"> </td>
          </tr>
          <tr>
            <td width="570px" height="403px" background="images/dushi.png"> </td>
            </tr>
          <tr>
            <td width="570px" height="213px" background="images/cadeau.png"> </td>
            </tr>
          <tr>
            <td width="570px" height="390px" background="images/message.png"> </td>
            </tr>
          <tr>
            <td width="570px" height="16px" background="images/footer.gif"> </td>
            </tr>
        </table>
      </td>
  </tr>
</table>

</body>
</html>
Mireldonderdag 1 september 2011 @ 01:32
Damn wat is dit irritant zeg. Nou zit alle tekst erin, maar die moet op bepaalde plekken in de tabellen en dan is het maar kijken wat je kan gebruiken, margin-top mag niet, dus dan maar padding-top op de tabel zelf, maar als je die teveel doet, dan gaat 'ie aan de andere kant groter worden, en dan moet je hem weer een width geven minus de padding 8)7 . had het net goed in Opera en Firefox, maar IE en Chrome niet. En dat zijn dan denk ik Gmail en Hotmail in mailservers. Morgen maar even testen of dat ook zo is.
rekenwonderdonderdag 1 september 2011 @ 19:44
quote:
0s.gif Op woensdag 31 augustus 2011 23:00 schreef Mirel het volgende:
Toch zie ik nog steeds een duidelijke lege lijn tussen de verschillende tabellen. Ik heb ze allemaal border="0" gegeven maar dat werkte niet.

cellpadding en cellspacing wellicht?

I feel like 1999
Mireldonderdag 1 september 2011 @ 21:17
Er moet ergens een superduper tutorial zijn over dit, en ik zal het vinden. Tips van jullie zijn ook welkom. Deze is iig gedaan, voor volgende maand zal er weer een mail moeten komen :)
Schepseltjedonderdag 1 september 2011 @ 22:13
paar tips:
• houd de opmaak/indeling zo simpel mogelijk!!
• background images werken niet in nieuwe versies van outlook (oftewel de bulk van al je klanten)
• gebruik tables met inline css, div's gaat wederom in outlook problemen geven
• als je met meerdere plaatjes werkt die op elkaar aansluiten, let op dat er geen spaties in je sourcecode zitten want dan kan ruimte tussen je afbeeldingen veroorzaken (andere workaround is font-size:0 te gebruiken)
• vermijd het gebruik van <html> en <head>, wordt bij meeste clients gestript
• test in outlook, gmail en hotmail, die zijn het meest restrictief

Check ook dit: http://htmlemailboilerplate.com

[ Bericht 1% gewijzigd door Schepseltje op 01-09-2011 22:18:59 ]