[html/css] email template met tabel

dinsdag 19 maart 2013 19:37

Acties:

0 Henk 'm!

Administrator

Topicstarter

Hi html'ers / css'ers

Ik heb een probleem. Ik maak voor iemand een nieuwsbrief, en deze bouw ik op dmv tabellen (schijnt voorlopig nog de beste manier te zijn voor nieuwsbrieven).

In die tabel heb ik eigenlijk alleen maar plaatjes, en er kan weinig fout gaan zou je denken. Nou niet dus

Lokaal zag alles er goed uit in de browser, maar webmail clients als hotmail en gmail gooiden wat roet in het eten. Dat heb ik opgelost en hij werkt overal goed, behalve in outlook!

Afbeeldingslocatie: http://i.imgur.com/n1r8B2t.png

(klikbaar - e.e.a. gecensord)

Ik zou echt niet meer weten hoe ik het op moet lossen, heb overal de padding/margin al weggehaald en voor de webmail clients elke image een display block gegeven (ivm witruimtes)

Mijn code:

HTML:

<!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>XXXXX</title>

<style type="text/css">
#mailfooter
{
    background:#f0f6f9;
    color:#afbec5; padding:10px; font-family: Tahoma, Geneva, sans-serif; font-size: 12px;
    text-align:center;
}

a.mnormal:link, a.mnormal:visited
{
    color: #6f96aa;
    text-decoration: none;
}

a.mnormal:hover, a.mnormal:active
{
    color: #6f96aa;
    text-decoration: underline;
}

a.msub:link, a.msub:visited
{
    color:#afbec5;
    text-decoration: none;
}

a.msub:hover, a.msub:active
{
    color: #afbec5;
    text-decoration: underline;
}

#mailing img{ border: 0;}

img{ display: block; border: 0; margin:0; padding:0; vertical-align: bottom; }

tr{ margin:0px; padding:0px; }
td{ margin:0px; padding:0px; }


</style>
</head>
<body>

<table id="Table_01" width="700" border="0" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border-collapse:collapse;">
    <tr>
        <td colspan="9">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_01.jpg" width="700" height="71" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_02.jpg" width="222" height="38" alt=""></a></td>
        <td>
            <a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_03.jpg" width="131" height="38" alt=""></a></td>
        <td colspan="2">
            <a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_04.jpg" width="87" height="38" alt=""></a></td>
        <td colspan="4">
            <a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_05.jpg" width="260" height="38" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="3">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_06.jpg" width="353" height="81" alt=""></td>
        <td colspan="6">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_07.jpg" width="347" height="81" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_08.jpg" width="700" height="274" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_09.jpg" width="182" height="302" alt=""></a></td>
        <td colspan="2" rowspan="3">
            <a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_10.jpg" width="171" height="302" alt=""></a></td>
        <td colspan="6">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_11.jpg" width="347" height="64" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_12.jpg" width="58" height="238" alt=""></td>
        <td colspan="2"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_13.jpg" width="102" height="94" alt=""></a></td>
        <td colspan="2"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_14.jpg" width="107" height="94" alt=""></a></td>
        <td rowspan="2">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_15.jpg" width="80" height="238" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_16.jpg" width="209" height="144" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_17.jpg" width="700" height="51" alt=""></td>
    </tr>
    <tr>
        <td><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_18.jpg" width="182" height="288" alt=""></a></td>
        <td colspan="2"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_19.jpg" width="171" height="288" alt=""></a></td>
        <td colspan="4"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_20.jpg" width="172" height="288" alt=""></a></td>
        <td colspan="2"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_21.jpg" width="175" height="288" alt=""></a></td>
    </tr>
    <tr>
        <td><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_22.jpg" width="182" height="289" alt=""></a></td>
        <td colspan="2"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_23.jpg" width="171" height="289" alt=""></a></td>
        <td colspan="4"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_24.jpg" width="172" height="289" alt=""></a></td>
        <td colspan="2"><a href="#"><img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_25.jpg" width="175" height="289" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="9">
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/mailing_26.jpg" width="700" height="14" alt=""></td>
    </tr>
    <tr>
        <td colspan="9" id="mailfooter">
                  <strong style="color:#6f96aa;"><a href="#" class="mnormal">Klik hier als deze e-mail niet goed wordt weergegeven</a></strong><br /><br />
      <span style="font-size:11px;"><a href="#" class="msub">Klik hier</a> als u zich wilt afmelden voor toekomstige mailings</span>
            
            </td>
    </tr>
    <tr>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="182" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="40" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="131" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="58" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="29" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="73" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="12" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="95" height="1" alt=""></td>
        <td>
            <img style="display:block;" src="http://www.xxxxx.com/nieuwsbrief/images/spacer.gif" width="80" height="1" alt=""></td>
    </tr>
</table>
</body>
</html>

Is iemand bekend met dit probleem of weet iemand een oplossing? Heb al gegoogled naar deze outlook symptomen. mensen geven aan dat als je tabel langer is dan 1000px oid dat outlook zulke problemen geeft, maar ook als mijn tabel maar voor de helft gevuld is, (ruim minder dan 1000px) heb ik het nog altijd.

het rare is trouwens ook dat tijdens het laden van de mail, het nog allemaal goed staat, pas als als ie klaar is met de mail laden verspringt het

woensdag 20 maart 2013 00:34

Acties:

0 Henk 'm!

Boelie-Boelie

Er is niet één specifiek iets dat zorgt voor slechte resultaten, het is in z'n geheel slecht opgebouwd. Een e-mail moet in gigantisch veel clients goed leesbaar zijn die ook nog vaak je code nog wanstaltiger maken dan HTML-e-mailcode al is, dus je kunt het design maar beter simpel houden. Inspiratie:

Het handigst is om je te beperken tot een éénkoloms- of tweekolomslayout, van niet meer dan 600px breed.
Bovendien heb je door de manier van werken (met tables en weinig CSS-ondersteuning) beperkt controle over hoe het eindresultaat wordt. Talloze plaatjes gebruiken is niet de oplossing. Ze worden vaak niet getoond dus het wordt er sowieso niet mooier op en de laadtijd wordt langer bij wel laden. Het is te prefereren een design te hebben waar plaatjes vervangen kunnen worden door een achtergrondkleur.

Eigenlijk gebruikt men altijd containertabel waarin men vervolgens de layout opbouwt met tabellen binnen de containertabel. Het is vaak handig om per samenhangend horizontaal blok een nieuwe tabel te gebruiken.

Hierbij wat basic resources:

http://www.campaignmonitor.com/css/ (CSS-ondersteuning in e-mails)
http://www.campaignmonito.../will-it-work/guidelines/ (algemene bouwtips)
http://htmlemailboilerplate.com/ (basis voor een e-mailtemplate)

Cogito ergo dubito

Reageer

Onderwerpen