Responsive, Newsletter, Design – Les bonnes pratiques pour créer une newsletter responsive

by Posted on

La question qui agite ce billet est : Comment faire en sorte qu’une newsletter patiemment conçue puisse s’afficher correctement tout aussi bien dans un client de webmail et de “desktop” genre Outlook que sur les écrans plus petits des terminaux mobile (smartphone, desktop) ? Comme pour un site web, la réponse qui vient naturellement est de concevoir votre newsletter selon des principes de responsive design. Oui, il est possible de faire un design responsive qui s’affiche à peu près correctement en ayant en tête les spécificités propres à chaque plate-forme.

On va donc tacher de concevoir en parallèle une intégration desktop et mobile pour une newsletter à l’aide des bonnes pratiques responsive design en matière notamment de CSS.

Eléments de design et Layout mobile

Outre le fait décrire une CSS spécifique pour mobile, plusieurs contraintes sont à prendre en compte pour la création d’une newsletter :

  1. Un design en une seule colonne pas compris en 500 et 600 pixels. Plus facile à lire sur mobile et lorsque votre design part en sucette, ce qui arrive parfois de fait votre design se casse la gueule mais avec un certain style.
  2. Les liens et les boutons doivent avoir un espace au minimum égale à 44×44 pixels, comme ce qui est indiqué dans les guidelines Apple notamment. En effet, si on ne prévoit, ce type de parade, les liens sont minuscules sur un smartphone donc on ne peut pas cliquer dessus que l’on ait des gros doigts ou des petits doigts.
  3. La taille de la police pour iPhone est de 13px. Avoir cela en tête car sinon la police risque d’upscaler et donc casser le layout. Dans le même temps il est possible d’overwriter cette contrainte mais attention prudence.
  4. Placer l’information pertinente et les éléments de design importants dans la partie haute de la newsletter dans la meusre du possible afin d’éviter le scroll autant que possible, plus facile de scroller avec une souris qu’avec le doigt.
  5. Utiliser l’attribut display: none; pour dissimuler les détails superflus dans le “layout” mobile genre boutons de partage, qui passent corrects sur desktop mais sont de toutes les manière difficiles à utiliser sur un support mobile. Voir la version mobile de RFI avec les btns share.

Lorsque vous faites la maquette de votre newsletter, le mieux est de créer deux modèles l’un pour le “desktop” et l’autre pour le “mobile” en effet l’expérience utilisateur (UX) est radicalement différente. Garder bien à l’esprit que sur mobile, il faut que l’utilisateur est accès le plus rapidement possible aux éléments importants un lien vers votre offre promotionnel par exemple (les fameux Call To Action) et éviter de la faire “scroller” sinon vous avez toutes les chances de le perdre.

Il n’est pas nécessaire de séparer les feuilles de style (CSS) pour le mobile. Le mieux est d’indiquer dans la feuille de style directement à l’aide d’un commentaire /* ceci est un commentaire dans une css */ la partie qui concerne spécifiquement les terminaux mobile (smartphone, tablettes….etc.)

        @media only screen and (max-device-width: 480px) {
            /* mobile-specific CSS styles go here */
        }
 
        /* regular CSS styles go here */

Quelques explications sur notre CSS pour mieux comprendre de quoi il retourne.

  • La balise @media indique à quel terminal on s’adresse pour le bon affichage de la newsletter cela évite du même coup la confusion pour un affichage au format d’impression ou pour un quelconque dispositif d’accessibilité.
  • La balise max-device-width: 480px indique l’espace de visualisation de l’appareil mobile ne peut excéder une largeur maximum de 480px.
  • 480px, c’est généralement la mesure admise pour la largeur d’un écran iPhone en mode paysage. On peut bien évidemment à une largeur plus grande si on veut cibler spécifiquement les tablettes.

Si on veut se la jouer un peu et se montrer exhaustif voir à la limite un peu prétentieux, on peut augmenter les paramètres de taille pour chaque appareil et indiquer la hauteur et la largeur.

      @media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) {
 
         /* mobile-specific CSS styles go here */  
 
        }

Table de “class”

Eh, oui, une bonne vielle table HTML vous sera utile alors autant lui affecter une classe CSS pour mettre en forme le texte et les images que cette table va contenir.

        @media only screen and (max-device-width: 480px) { 
        /* CSS spécifique pour mobile */
            table[class=contenutable] { 
                width: 320px !important;
            }
        }
 
        /* CSS par défaut */
        table.contenttable {
            width: 640px;
        }

La class CSS nommé contenutable présente plusieurs bénéfices en terme UX :

  1. Il y a un rétrécissement de la newsletter si le contenu est vu sur un écran de terminal l’écran est de 480px ou moins
  2. Il n’y a aucun changement si bien évidemment la taille de l’écran est de 480px ou plus.
  3. L’ajout de l’attribut !important; est afin de garantir que ce style spécifiquement mobile soit appliqué en priorité lorsque un terminal mobile se présente.

On pourrait faire de même avec d’autres balises class comme dans l’exemple ci-dessous.

        @media only screen and (max-device-width: 480px) {
            /* mobile-specific CSS styles go here */
            table[class=contenutable] { width: 325px !important; }
            img[class="enteteimage"] { width: 325px !important;  }
            p[class="date"] { display: none !important; }
        }

Passons maintenant à des exemples plus avancés d’intégration pour terminaux mobiles.

Construire un “template” de newsletter responsive plus avancé

Il est souvent plus judicieux de construire un template qui qui passe de 2 à 1 colonnes. Certes, ce type de template en 2 colonnes permettra bien souvent d’afficher plus de contenu en tout début de newsletter dans des clients email type Outlook sur Desktop, mais ces templates deviennent vite incommodes à lire et à naviguer sur un terminal mobile. On va donc résorber cette difficulté à l’aide de quelques bonnes pratiques CSS pour rendre la chose lisible aussi bien sur un ordinateur que sur un terminal mobile.

Une des règles essentielles dont il vaut se souvenir lors d’une intégration pour une newsletter, c’est qu’il est préférable d’utiliser des attributs propres à l’HTML plutôt que des éléments CSS en effet, l’interprétation de la CSS varie grandement d’un client mail à un autre.

Ainsi, il faut privilégier dans l’intégration des attributs HTML classiques comme cellpadding="10" align="left" au lieu de leurs equivalents CSS float: left; ou padding: 10px;

Dans l’exemple ci-dessous, la table fait 640px de large et se divise en deux colonnes de 320px chacune avec un cellpadding=”20″ afin d’aérer la mise en page du contenu.

 
    <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>Colonne de gauche</p></td>
          </tr>
        </table>
        <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
          <tr>
            <td><p>Colonne de droite</p></td>
          </tr>
        </table>
        </td>
      </tr>
    </table>

Faire un modèle en HTML sur une seule colonne est généralement l’assurance que le tout passe correctement sur les terminaux mobiles. Néanmoins, qui optant pour une intégration responsive, il est possible de ne pas renoncer à une mise en forme sur 2 colonnes sans pour autant accroitre considérablement la taille de votre CSS.

A ajoutant la ligne de “media query” ci-dessous, on s’assure que la table s’affiche en 640px si l’écran le permet mais que si la taille de l’écran ne le permet pas comme sous l’iPhone, alors la colonne de droite vient se placer en-dessous de la colonne de gauche avec pour les deux colonnes respectivement une taille de 320px.

La CSS pour une table contenutable repsonsive

        @media only screen and (max-device-width: 480px) {
            table[class=contenutable] { 
                width:320px !important;
            }
        }

Le code HTML de la table contenutable repsonsive

      <table width="640" border="0" cellpadding="0" cellspacing="0" class="contenutable">
      <tr>
          <td>
          <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
            <tr>
              <td><p>Colonne de gauche</p></td>
            </tr>
          </table>
          <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
            <tr>
              <td><p>Colonne de droite</p></td>
            </tr>
          </table>
          </td>
        </tr>
      </table>

Le résultat est une integration responsive qui affiche deux colonnes sur les clients Desktop et Web, mais qui passe à une colonne unique de 320px dans le client de messagerie par défaut d’un smartphone sous iOS ou sous Android.

Penser un mode d’affichage propre aux smarphones, orienté UX

De la même manière que pour un site l’expérience utilisateur (UX) diffère selon que le contenu s’affiche sur un écran desktop ou sur un écran de smartphone. Il en va de même pour la newsletter, il y a certaines specificités

Ajout d’un effet de “progressive disclosure” pour la lecture sur smartphone

Sur le web, pas mal de site offre une visualisation progressive approchant de l’effet “infinite scroll” bien connu dans les thèmes WordPress responsive. Pour les terminaux mobiles, on parle de “progressive disclosure”.

Cela consiste à révéler le contenu à l’aide d’un “on-click” ou d’un “tap” sur un lien ou un bouton dans une interface mobile. C’est ce que l’on va s’employer à mettre en place pour cette newsletter.

Jeu de cache cache CSS dans une newsletter

Montrer la totalité de l’article sur desktop et autoriser sur mobile la poursuite de la lecture au gré des envies de l’utilisateur.

Sur le client mobile, le souhait de ne faire apparaître pour chaque article : le titre, un texte d’introduction et un bouton permet de faire apparaitre ou disparaitre le reste du texte. De fait, sur un mobile, on limite drastiquement le “scroll” nécessaire aux utilisateurs pour prendre connaissance du contenu de la newsletter.

Ci-dessous, l’extrait de code qui va permettre d’afficher chaque article avec un en-tête, une mini introduction et un bouton “show/hide”.

 
       <td>
          <h4><a href="http://le_lien" class="link">En-tête</a></h4>
          <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Voir</a>
          <div class="article">
             <p class="bodytext">
                <img src="une_image.jpg" style="float: left;" >Pellentesque habitant morbi...
             </p>
             <a href="http://le_lien">En savoir +...</a> 
          </div>
       </td>

Les “class” CSS mobilehide, mobileshow et article permettent de couvrir toutes les actions souhaitées pour ce comportement.

L’attribut ci-dessous display: none !important; permettra de faire disparaître ces boutons lorsque le mail sera lu sur des clients desktop et webmail.

       a[class="mobileshow"], a[class="mobilehide"] {
           display: none !important;
       }

Afin d’assurer l’affichage sur tes terminaux mobiles, on passe par une ligne spécifique media query.

       @media only screen and (max-device-width: 480px) { 
           a[class="mobileshow"], a[class="mobilehide"] { 
               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.mobileshow:hover { 
               visibility: hidden;
           } 
           .mobileshow:hover + .article, .article:hover {
               display: inline !important;
           }
       }

Le résultat est donc un e-mail avec des boutons show/hide, ce qui va permettre de déployer en fonction des besoins utilisateurs le contenu sur l’iPhone.

Il existe un template sur GitHub qui présente ce principe de “progressive disclosure”

Source : https://gist.github.com/egid/5208136

Cibler des terminaux spécifiques à l’aide des “media queries”

On peut s’amuser à cibler plus spécifiquement un certain nombre de terminaux mobiles à l’aide des “media queries” autrement dit la balise CSS @media.

Ci-dessous, vous trouverez une CSS qui cible le définition d’écran des principaux terminaux que l’on trouve sur le marché. Bien évidemment, si vous souhaitez être exhaustif (ce qui parait illusoire au demeurant) vous serez dans l’obligation de “pondre” une CSS sur-mesure pour cibler cet écosystème spécifique.

Il est clair que les “media queries” ne sont pas supportées par toutes les plate-formes, voici une rapide des clients mobiles et tierces qui donne un bref apercu de l’atomicité des navigateurs du marché.

 

Les clients mobiles

Client Media Query Support
Amazon Kindle Fire Oui
Amazon Kindle Fire HD Oui
Android 2.1 Eclair Non
Android 2.2+ Oui
Apple iPhone Oui
Apple iPad Oui
Apple iPod Touch Oui
BlackBerry OS 5 Non
BlackBerry OS 6+ Oui
BlackBerry Playbook Oui
Microsoft Windows Mobile 6.1 Non
Microsoft Windows Phone 7 Non
Microsoft Windows Phone 7.5 Oui
Microsoft Windows Phone 8 Non
Microsoft Surface Non
Palm Web OS 4.5 Oui
Samsung Galaxy S3+ Non
 

Les clients mail 1/3

Client Media Query Support
Microsoft Outlook Exchange 3rd party app (Android) Non
Gmail mobile app (all platforms) Non
Yahoo! Mail mobile app (all platforms) Non
Plus d’information sur : http://stylecampaign.com/
          /* Smartphones (portrait and landscape) ----------- */
          @media only screen 
          and (min-device-width : 320px) 
          and (max-device-width : 480px) {
          /* Styles */
          }
 
          /* Smartphones (landscape) ----------- */
          @media only screen 
          and (min-width : 321px) {
          /* Styles */
          }
 
          /* Smartphones (portrait) ----------- */
          @media only screen 
          and (max-width : 320px) {
          /* Styles */
          }
 
          /* iPads (portrait and landscape) ----------- */
          @media only screen 
          and (min-device-width : 768px) 
          and (max-device-width : 1024px) {
          /* Styles */
          }
 
          /* iPads (landscape) ----------- */
          @media only screen 
          and (min-device-width : 768px) 
          and (max-device-width : 1024px) 
          and (orientation : landscape) {
          /* Styles */
          }
 
          /* iPads (portrait) ----------- */
          @media only screen 
          and (min-device-width : 768px) 
          and (max-device-width : 1024px) 
          and (orientation : portrait) {
          /* Styles */
          }
 
          /* Desktops and laptops ----------- */
          @media only screen 
          and (min-width : 1224px) {
          /* Styles */
          }
 
          /* Large screens ----------- */
          @media only screen 
          and (min-width : 1824px) {
          /* Styles */
          }
 
          /* iPhone 4 ----------- */
          @media
          only screen and (-webkit-min-device-pixel-ratio : 1.5),
          only screen and (min-device-pixel-ratio : 1.5) {
          /* Styles */
          }

Source : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Un framework ?

Une dernière chose, plutôt que de se fatiguer à répertorier. Vous pouvez utiliser une sorte de “framework” issu de boilerplate pour cibler les terminaux plus populaires. C’est un bon début pour concevoir un template de newsletter responsive.

Plus d’information sur : http://stuffandnonsense.co.uk/projects/320andup/

La balise balise meta viewport

Juste une parenthese sur cette balise qui “désigne schématiquement la surface de la fenêtre du navigateur”. A manier avec précaution.

       <meta name="viewport" content="width=device-width;initial-scale=1.0; user-scalable=1;" />

Source : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Conclusion : Le sujet de l’intégration d’une newsletter multi-support est vaste et assez casse-gueule. Le mieux est de tenter d’isoler des bonnes pratiques notamment à l’aide de test, d’itération et de retour d’usage, un peu sur un mode “lean”. Soyez modeste dans votre intégration, voir conservateur, il y a tellement de support, de clients différents qui mériteraient une intégration mobile spécifique par exemple nous n’avons pas aborder la gestion des images pour Retina, un vrai sujet en soi.

En savoir plus

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts