Concevoir des e-mails réactifs : Gabarits réactifs

Par Campaign Monitor

Il est généralement recommandé de choisir un gabarit à une seule colonne quand on veut que ses e-mails soient optimisés pour mobile, mais il existe une technique élégante pour créer des gabarits réactifs à deux colonnes sans devoir écrire des kilomètres de CSS.

Alors que les gabarits à 2 colonnes permettent souvent d’afficher plus de contenu au-dessus de la ligne de flottaison avec un client de messagerie de bureau comme Outlook, ils sont beaucoup plus difficiles à lire et à parcourir sur les périphériques mobiles. Nous allons corriger cela en codant un peu à l’ancienne.

Une des règles d’or du design pour e-mail dit ceci : « dans la mesure du possible, utilisez des attributs HTML au lieu des CSS ». Alors que l’interprétation des CSS peut être assez inégale au vu de la diversité des clients de messagerie, les attributs ont tendance à être solides comme le roc. Par exemple, les attributs comme align=”left” et cellpadding=”10” sont beaucoup plus fiables que leurs équivalents CSS, float: left; et padding: 10px;. C’est exactement ces attributs que nous allons utiliser pour construire notre gabarit à 2 colonnes linéarisables.

Observons un gabarit de ce genre dans Outlook 2007 :

Dans l’exemple ci-dessus, nous avons un tableau de 640px de large, les 2 colonnes intérieures étant à leur tour des tableaux de 320px de large, comme dans nos exemples précédents.
Ces colonnes ont un cellpadding=”20” appliqué pour que le contenu n’aille se coller aux bords disgracieusement.

En codant pour le web, on utiliserait généralement float: left; sur la colonne de gauche, pour les positionner côte-à-côte. Mais à la place, on peut utiliser align=”left”. Tant que la largeur du tableau principal est supérieure ou égale à la largeur combinée des deux colonnes intérieures, elles vont parfaitement s’adapter. Voici le code simplifié pour un gabarit à 2 colonnes :

<table width="640" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
                <tr>
                    <td><p>Contenu de la colonne de gauche</p></td>
                </tr>
            </table>
            <table width="320" border="0" cellspacing="0" cellpadding="20">
                <tr>
                    <td><p>Contenu de la colonne de droite</p></td>
                </tr>
           </table>
       </td>
    </tr>
</table>

Le résultat :

Si le tableau principal fait 640px de large, vous obtiendrez un gabarit à 2 colonnes. Mais il suffit de retirer rien qu’un pixel pour forcer la colonne de droite à aller se positionner sous celle de gauche. Pour peu que le tableau extérieur soit de même largeur que les tableaux intérieurs (320px), vous obtenez un parfait gabarit à une colonne qui correspond exactement à l’écran d’un iphone, sans zoom nécessaire. Le tout en ne rajoutant qu’une seule requête de media dans votre code HTML :

<style type="text/css">
@media only screen and (max-device-width: 480px) {
    table[class=tableaudecontenu] {
        width:320px !important;
    }
}
</style>

<table width="640" border="0" cellpadding="0" cellspacing="0" class="tableaudecontenu">

Et voilà un gabarit à 2 colonnes sur les clients de messagerie en ligne et de bureau qui passe sur 1 colonne pour les clients de messagerie iPhone et Android.

Ajouter l’affichage progressif façon Wikipédia

Sur le web, de nombreux sites réactifs convertissent les longs formulaires en formulaires ultra-courts pour les périphériques mobiles en utilisant une technique appelée l’« affichage progressif ». Il s’agit de cacher du contenu derrière un élément interactif comme un bouton ou un lien, puis de l’afficher au clic (ou au tap). Wikipédia l’utilise, comme beaucoup d’applications mobiles. On peut aussi l’utiliser dans les e-mails sur mobile. Afficher ou masquer du contenu dynamiquement en pur CSS

Prenons une newsletter contenant plusieurs articles. Dans les clients de messagerie de bureau, nous voulons afficher un titre et le contenu de chaque article :

Toutefois, sur les clients mobiles, nous voulons uniquement afficher le titre avec un bouton Afficher/Masquer à côté (qui gère l’affichage du texte). Cela transforme l’e-mail en un tableau de contenu interactif, ce qui réduit considérablement la longueur du message :

Pour ce faire, nous allons tout d’abord nous tourner vers le code HTML et créer un article avec un titre, du texte et un bouton Afficher/Masquer. Nous allons également ajouter quelques classes pour afficher le bouton uniquement sur les périphériques mobiles. Voici une version simplifiée du code de chaque article.

<td>
    <h4><a href="http://votredomaine.com" class="link">Premier titre</a></h4>
    <a href="#" class="mobilemasquer">Masquer</a> <a href="#" class="mobileafficher">Afficher</a>
    <div class="article">
        <p class="corpsdetexte">
            <img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi...
        </p>
        <a href="http://votredomaine.com">Lire la suite...</a>
    </div>
</td>

Notez bien les classes mobilemasquer, mobileafficher et article : celles-ci vont se charger du gros du travail.

Dans notre feuille de style, nous allons cacher le bouton Afficher/Masquer lorsque l’e-mail est affiché dans un client de messagerie en ligne ou de bureau, en utilisant display: none; dans notre feuille de style comme ceci :

a[class="mobileafficher"], a[class="mobilemasquer"] {
    display: none !important;
}

Pour être sûrs que les boutons Afficher/Masquer ne sont visibles que sur les appareils mobiles, nous allons passer aux requêtes de média. Voici le code, comprenant les propriétés utilisées par .mobileafficher et .mobilemasquer et quelques styles de boutons adaptés pour webkit en bonus... :

@media only screen and (max-device-width: 480px) {
    a[class="mobileafficher"], a[class="mobilemasquer"] {
        display: block !important;
        color: #fff !important;
        background-color: #aaa;
        border-radius: 20px;
        padding: 0 8px;
        text-decoration: none;
        font-weight: bold;
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        font-size: 11px;
        position: absolute;
        top: 25px;
        right: 10px;
        text-align: center;
        width: 40px;
    }
    div[class="article"] {
        display: none;
    }
    a.mobileafficher:hover {
        visibility: hidden;
    }
    .mobileafficher:hover + .article {
        display: inline !important;
    }
}

Et si tout se passe bien, vous devriez obtenir un e-mail avec des boutons Afficher/Masquer qui gèrent l’affichage du contenu sur iPhone. Si vous voulez vous exercer à cette technique pour vos propres campagnes d’e-mails, n’hésitez pas à télécharger gratuitement notre exemple (sur Github) et à l’adapter à vos besoins. Nous en profitons pour remercier chaleureusement Eric Gideon pour sa contribution à ce projet.

Fiche technique

À propos de l'auteur

Campaign Monitor est une plate-forme d’e-mailing créée en 2004 par Ben Richardson et David Greiner, gérants d’une société de Web Design, à la suite de nombreuses demandes de la part de leurs clients pour gérer des campagnes d’envoi d’e-mails. Après avoir fait le tour des solutions existantes sur le marché, ils ont décidé de créer l’outil qui correspondait à leurs besoins.

Aujourd’hui, plus de 700 000 designers, agences et autres sociétés utilisent Campaign Monitor et de nouveaux clients les rejoignent régulièrement.
Ils continuent à ajouter de nouvelles fonctionnalités à leur produit et à le peaufiner mais leur objectif premier reste le même : rendre plus facile pour quiconque l’envoi et la gestion de jolies newsletters.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Web Mobile

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site