Responsive e-maildesign: e-Village gaat een stap verder.

Een “Responsive Design" is een design waarvan de lay-out zich aanpast aan de beschikbare ruimte op het scherm. Dus ook een perfecte weergave op een klein scherm van bijvoorbeeld een mobiele telefoon. Tot voor kort leek het onmogelijk om het Responsive Design-principe toe te passen voor e-mail. Onze developers van Campaign Services zijn altijd bezig om de grenzen van het mogelijke op te zoeken. Wat blijkt, Responsive Design voor e-mails is wel degelijk mogelijk. En dat schept nieuwe mogelijkheden.

Verder gaan waar Fluid design ophoudt

Als een e-mail slecht te lezen is op het scherm van je mobiel zal een ontvanger al snel voor de 'delete' knop kiezen. Om die negatieve reactie te voorkomen wil je je e-mail content optimaliseren voor mobiel. Met de 'Fluid Design'-techniek, waarover we vorige maand hebben geschreven kom al een heel eind. Dat geldt echter alleen voor e-mailontwerpen met één kolom. Bij een e-mailontwerp met meerdere kolommen, ontstaat een nieuw probleem. De kolommen worden te veel smal op het scherm van telefoon. Daardoor wordt de content tegen elkaar gedrukt. En dat leest niet lekker. Kortom: met alleen Fluid Design kun je een e-mailontwerp 'Mobile Proof' maken als het om een e-mailontwerp niet meer dan één kolom heeft.

Meerdere kolommen?

De oplossing om ook e-mailontwerpen met meerdere kolommen Mobile Proof te maken is Responsive Design. Een Responsive Design heeft de zelfde basis als Fluid Design, maar gaat een stap verder. De lay-out wordt niet alleen versmald, maar wordt ook echt veranderd. Twee kolommen blijven op een smaller scherm bijvoorbeeld niet naast elkaar staan, maar komen onder elkaar te staan. En dat wordt gewaardeerd door de ontvanger. Want de inhoud van het bericht is nu wel goed leesbaar. Responsive Design past het weergegeven ontwerp automatisch aan.

Meerdere kolommen

Het verschil is duidelijk. Het rechtervoorbeeld is opgemaakt volgens het Responsive Design-principe en daardoor beter leesbaar.

Zo doe je het

De basis van een Responsive Design programmeren is simpel. Het is namelijk mogelijk om een 'Align Attribuut' op de 'Tabel Tag' toe te passen. Daardoor kunnen tabellen naast elkaar worden gezet. In de code ziet dat er als volgt uit:

<table>
<tbody>
<tr>
    <td id="wrapper " style="width:600px; max-width:600px;" bgcolor="#CCCCCC">
        <table align="left" width="300">
        <tbody>
        <tr>
            <td bgcolor="#99CCFF" width="300">
tabel 1
            </td>
        </tr>
        </tbody>
        </table>

De Wrapper-tabel is schaalbaar volgens het Fluid design principe. Binnen de Wrapper staan twee nieuwe tabellen. Alleen de bovenste tabel bevat een Align Attribuut.

De tabellen komen naast elkaar te staan in plaats van onder elkaar

Omdat de eerste (linker) tabel een Align Attribuut heeft met de waarde “left" komen tabellen naast elkaar te staan in plaats van onder elkaar.

Wanneer de ruimte kleiner wordt, komen de twee tabellen onder elkaar te staan

Wanneer de ruimte kleiner wordt, komen de twee tabellen onder elkaar te staan. De grijze kleur is van de Wrapper Tabel.

Een fix voor Outlook

Als je het bovenstaande hebt toegepast, doet Outlook nog wat weerspannig bij de weergave van de e-mail. Want zodra er een Align Attribuut op een Tabel Tag wordt gezet, zal Outlook 2007 (en 2010) ook 3px marge aan de linkerkant en de rechterkant van die tabel toepassen. Gevolg: de twee tabellen passen in Outlook niet meer naast elkaar, ze komen altijd onder elkaar te staan op het scherm. Geen nood. We hebben een CSS-oplossing gevonden die in-line op de Table Tag wordt toegepast:

style="mso-table-lspace:0pt; mso-table-rspace:0pt;"

Dit stukje CSS voorkomt de marge die Outlook ongewenst toepast.

De twee tabellen op deze manier naast elkaar zetten levert nog niet het ideale resultaat. Er zijn nog enkele aanvullende wensen:

  1. Er moet een witruimte komen tussen de linker- en rechterkolom, opdat ze niet tegen elkaar gaan staan.
  2. Wanneer de content wordt versmald en de kolommen onder elkaar komen te staan moeten de twee kolommen de volledige breedte innemen.

Dit maakt het programmeren iets complexer. Hieronder een voorbeeld van wat de bedoeling is.

Tussen beide kolommen is 20px witruimte opgenomen

Tussen beide kolommen is 20px witruimte opgenomen

Zodra de content smaller is geworden dan 600px komen de twee tabellen onder elkaar te staan

Zodra de content smaller is geworden dan 600px komen de twee tabellen onder elkaar te staan. De breedte van de beide tabellen is nu geen 290px meer, maar 100%. De 20px tussenruimte is verborgen.

Om dit resultaat te bereiken moet de tabellenstructuur worden aangepast en wordt gebruik gemaakt van een Media Query. Bekijk de code hieronder:

<table width="300">
<tbody>
<tr>
    <td bgcolor="#FF99FF" width="300">
tabel 2
    </td>
</tr>
</tbody>
</table>
<table id="wrapper">
<tbody>
<tr>
    <td style="width:600px; max-width:600px;" bgcolor="#CCCCCC">
   class="resetWidth" align="left" width="
        <span style="color: #06c;" rel="color: #06c;">310</span>"
        <span style="color: #06c;" rel="color: #06c;"></span>
        <table <span="" style="color: #06c;" rel="color: #06c;">
        <tbody>
        <tr>
            <td <span="" style="color: #06c;" rel="color: #06c;">
                        class="resetWidth" width="
                <span style="color: #06c;" rel="color: #06c;">290</span>" bgcolor="#99CCFF" <span style="color: #06c;" rel="color: #06c;">style="mso-table-lspace:0pt; mso-table-rspace:0pt;"</span>>
tabel 1
            </td>
            <td class="hide" width="20">
                <!-- 20px witruimte -->
                <span style="color: #06c;" rel="color: #06c;"></span>
            </td>
        </tr>
        </tbody>
        </table>
290" 
        <span style="color: #06c;" rel="color: #06c;">style="mso-table-lspace:0pt; mso-table-rspace:0pt;"</span>>
        <table class="resetWidth" color:="" #06c;"="" data-verified=" rel=" width="<span style=">
        <tbody>
        <tr>
            <td <span="" style="color: #06c;" rel="color: #06c;">
                        class="resetWidth" width="
                <span style="color: #06c;" rel="color: #06c;">290</span>" bgcolor="#FF99FF">
tabel 2
            </td>
        </tr>
        </tbody>
        </table>
    </td>
</tr>
</tbody>
</table>

In blauw is aangegeven wat er is veranderd. De tabelcellen hebben dus een andere breedte gekregen. Tabel 1 heeft een tabelcel van 20px erbij gekregen om de witruimte te creëren. Er zijn bovendien classes toegevoegd om de Media Query toe te passen.

@media only screen and (max-width:600px) {

[class=resetWidth]{

width:100% !important;

}

[class=hide]{

display:none;

}

}

De class “resetWidth" zorgt ervoor dat de breedte van de twee tabellen wordt aangepast. De tabelcel voor de 20px tussenruimte wordt verborgen door de class “hide".



Gmail-app?

Misschien denk je nu: 'En de Gmail-app dan? Die ondersteunt geen Media Queries.' Klopt. Hier is de optimalisatie op een punt gekomen dat een correcte weergave van de lay-out afhankelijk kan gaan worden van Media Queries. In de Gmail komen beide tabellen wel onder elkaar te staan, maar ze worden niet 100% breed getoond zoals in de Media Query is gedefinieerd. De tabellen behouden dan gewoon de breedte die in de HTML is gedefinieerd.

In de Gmail-app wordt de breedte van de twee tabellen niet aangepast door de Media Query maar blijft de breedte die in de HTML is gedefinieerd behouden. In deze situatie is het nadeel dat de Gmail-app geen Media Queries ondersteunt niet bijzonder groot. Beide tabellen zijn 290px breed. Dat wordt prima weergegeven op de meeste telefoonschermen. Feit blijft natuurlijk wel, hoe breder het telefoonscherm, hoe meer witruimte er rechts naast die tabellen overblijft.

Meer informatie?

Bel gerust naar e-Village Campaign Services: 030-6988080 of neem deel aan de discussie via

de Linkedin-groep E-mailmarketing Nederland.

  • Design


Ja, natuurlijk wil ik dit artikel delen:




Reageer op dit artikel


Best bekeken blogs


Vraag aan e-Village?

Wist je dat...

Wist je dat...

...e-Village een deliverability ratio (afleverpercentage) heeft van 99,72%?

Meer weetjes? Schrijf je in voor de nieuwsbrief en blijf altijd op de hoogte