L’intégration de newsletter responsive

Newsletter

Nous allons aborder un sujet particulièrement intéressant qui rapproche des technologies préhistoriques (mise en page en tableaux) avec des concepts modernes (du responsive design).

Nous allons essayer d’expliquer les bonnes pratiques pour afficher correctement nos newsletters tout aussi bien dans un client de webmail sur « desktop » genre Outlook /Thunderbird ainsi que sur les écrans des terminaux mobile (Smartphone, tablette).

La structure et le layout mobile

Plusieurs contraintes techniques doivent être prises en compte pour intégrer une newsletter responsive :

  • Le design optimum devrait avoir qu’une seule colonne et compris entre 500 et 600 pixels afin de faciliter la lecture sur mobile, cette technique permet de corriger beaucoup de bugs sur Smartphones.
  • Un espacement minimum égal à 44× 44 pixels devrait être observé entre les liens et les boutons, si on se réfère à la documentation et guidelines d’Apple.
    En effet, si on ne prévoit pas l’espacement, les liens seront vraisemblablement trop minuscules sur un Smartphone pour qu’on puisse cliquer là-dessus.
  • Par défaut, pour l’Iphone la taille de la police est de 13px, prendre cela en compte si vous utiliser un unité relative au risque de casser le layout.
    La seul solution c’est de le surcharger mais il faut bien faire attention.
  • Positionner les informations les plus pertinentes et les éléments de design importants dans la partie haute de la newsletter dans la mesure du possible afin d’éviter de scroller autant que possible sur le Smartphone.
  • Ne pas se limiter sur l’utilisation de l’attribut display: none; pour dissimuler les détails superflus incompatible sur le « layout » mobile genre boutons de partage, qui ne passeront pas sur un support mobile.

L’intégration newsletter ne prend pas en compte les fichiers externes donc il n’est pas nécessaire de séparer les feuilles de style (CSS) pour le mobile.
Le mieux est d’insérer directement dans le layout la partie qui concerne spécifiquement les terminaux mobile (Smartphone, tablettes….etc.)

Mise en pratique

Nombreux d’entre le savent déjà que lors d’une intégration pour une newsletter, il est obligatoire d’utiliser des attributs propres à l’HTML plutôt que des éléments CSS.
Cela du fait que l’interprétation de la CSS varie largement d’un client mail à un autre.

Ainsi, en pratique on utilisera les attributs HTML classiques comme cellpadding=”10″ align=”left” au lieu des propriétes CSS float: left; ou padding: 10px;

Dans notre exemple, la table fera 640px de large et qui se divisera en deux colonnes égales ( 320px chacune) avec un cellpadding « 20 » afin d’aérer notre mise en page.

Faire une newsletter en HTML en uni-colonne est généralement plus sûr pour avoir un affichage correct sur tous les supports. Néanmoins, dans notre cas on va opter une intégration responsive avec une mise en forme sur 2 colonnes

On va utiliser le « media query » ci-dessous, pour adapter notre contenu à la fois sur mobile et tablette car sur desktop la table s’affichera correctement car la résolution de celle-ci est supérieur à 640px, par contre si la taille de l’écran ne le permet pas comme sous l’iPhone ou Android, alors la colonne de droite viendra se placer en-dessous de la colonne de gauche avec pour les deux colonnes respectivement une taille de 320px.

Le css

Le tableau

Répondre