Meer en meer websites worden responsive, of wel mobiel vriendelijk gemaakt. Ondanks de vele e-mail programma’s en de beperkingen die zij met zich meebrengen worden ook e-mail nieuwsbrieven mobiel vriendelijk gemaakt. In nieuwsbrieven zit vaak een variatie in de opbouw door kolommen te gebruiken. Eén volledige kolom, twee kolommen, drie kolommen, noem maar op. In dit artikel behandel ik het sorteren van kolommen voor als je twee kolommen gebruikt.
Links en rechts sorteren
Bij mobiel vriendelijke nieuwsbrieven worden twee kolommen die naast elkaar staan op kleinere schermen vaak onder elkaar gezet. Normaal gesproken komt dan de eerste kolom bovenaan te staan.
Wanneer je in de rechter kolom bijvoorbeeld een afbeelding gebruikt kan het op een mobiele weergave mooier zijn om de afbeelding boven de tekst te tonen. Dit is mogelijk door een klein trucje hiervoor kan je namelijk de RTL(Right To Left) tekstrichting voor gebruiken.
Standaard links naar rechts tabel.
<table width="100%" cellspacing="0"> <tr> <td width="50%" dir="ltr" class="full"> Left </td> <td width="50%" dir="ltr" class="full"> Right </td> </tr> </table>
Tabel met rechts naar links richting
</pre> <table dir="rtl" width="100%" cellspacing="0"> <tr> <td width="50%" dir="ltr" class="full"> Right </td> <td width="50%" dir="ltr" class="full"> Left </td> </tr> </table>
Je zet op de <table> een dir=”rtl” zodat det tekstrichting van de tabel van rechts naar links gaat. Hierdoor wordt de inhoud van de tabel rechts uitgelijnd. Vervolgens zet je op deelementen in de tabel een dir=”ltr” zodat de inhoud van de tabelcel een tekstrichting van links naar rechts heeft. Hierdoor wordt de inhoud van de tabelcel zelf weer normaal leesbaar.Als laatste plaats je in devan de e-mail template een klein stukje CSS code wat er voor zorgt dat de tabelcellen 100% breed worden zodra het scherm kleiner is dan een bepaalde breedte.
/* Media query for mobile*/
@media only screen and (max-width: 629px) {
.full {
display:block;
width:100%;
padding-right: 0 !important;
padding-bottom: 10px;
padding-left: 0 !important;
}
}
De mail programma’s op mobiele apparaten ondersteunen veel beter de HTML en CSS. Daarom kan de styling in de <head> van de template worden geplaatst. Met een !important opmerking erachter wordt de opmaak die inline wordt opgegeven overschreven.
De hele template van dit voorbeeld is trouwens te downloaden vanaf Github.