La question qui agite ce billet est : Comment faire en sorte qu’une newsletter patiemment con\u00e7ue puisse s’afficher correctement tout aussi bien dans un client de webmail et de “desktop” genre Outlook que sur les \u00e9crans plus petits des terminaux mobile (smartphone, desktop) ? Comme pour un site web, la r\u00e9ponse 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 \u00e0 peu pr\u00e8s correctement en ayant en t\u00eate les sp\u00e9cificit\u00e9s propres \u00e0 chaque plate-forme.<\/p>\n
On va donc tacher de concevoir en parall\u00e8le une int\u00e9gration desktop et mobile pour une newsletter \u00e0 l’aide des bonnes pratiques responsive design en mati\u00e8re notamment de CSS.<\/b><\/p>\nEl\u00e9ments de design et Layout mobile<\/h4>\n
Outre le fait d\u00e9crire une CSS sp\u00e9cifique pour mobile, plusieurs contraintes sont \u00e0 prendre en compte pour la cr\u00e9ation d’une newsletter :<\/p>\n
display: none;<\/code> pour dissimuler les d\u00e9tails superflus dans le “layout” mobile genre boutons de partage, qui passent corrects sur desktop mais sont de toutes les mani\u00e8re difficiles \u00e0 utiliser sur un support mobile. Voir la version mobile de RFI avec les btns share.<\/li>\n<\/ol>\n Lorsque vous faites la maquette de votre newsletter, le mieux est de cr\u00e9er deux mod\u00e8les l’un pour le “desktop” et l’autre pour le “mobile” en effet l’exp\u00e9rience utilisateur (UX) est radicalement diff\u00e9rente. Garder bien \u00e0 l’esprit que sur mobile, il faut que l’utilisateur est acc\u00e8s le plus rapidement possible aux \u00e9l\u00e9ments importants un lien vers votre offre promotionnel par exemple (les fameux Call To Action) et \u00e9viter de la faire “scroller” sinon vous avez toutes les chances de le perdre.<\/p>\n
Il n’est pas n\u00e9cessaire de s\u00e9parer les feuilles de style (CSS) pour le mobile. Le mieux est d’indiquer dans la feuille de style directement \u00e0 l’aide d’un commentaire \/* ceci est un commentaire dans une css *\/<\/code> la partie qui concerne sp\u00e9cifiquement les terminaux mobile (smartphone, tablettes….etc.)<\/p>\n\r\n @media only screen and (max-device-width: 480px) {\r\n \/* mobile-specific CSS styles go here *\/\r\n }\r\n\r\n \/* regular CSS styles go here *\/\r\n <\/pre>\n Quelques explications sur notre CSS pour mieux comprendre de quoi il retourne.<\/p>\n
\n- La balise
@media<\/code> indique \u00e0 quel terminal on s’adresse pour le bon affichage de la newsletter cela \u00e9vite du m\u00eame coup la confusion pour un affichage au format d’impression ou pour un quelconque dispositif d’accessibilit\u00e9.<\/li>\n- La balise
max-device-width: 480px<\/code> indique l’espace de visualisation de l’appareil mobile ne peut exc\u00e9der une largeur maximum de 480px. <\/li>\n- 480px, c’est g\u00e9n\u00e9ralement la mesure admise pour la largeur d’un \u00e9cran iPhone en mode paysage. On peut bien \u00e9videmment \u00e0 une largeur plus grande si on veut cibler sp\u00e9cifiquement les tablettes.<\/li>\n<\/ul>\n
Si on veut se la jouer un peu et se montrer exhaustif voir \u00e0 la limite un peu pr\u00e9tentieux, on peut augmenter les param\u00e8tres de taille pour chaque appareil et indiquer la hauteur et la largeur.<\/p>\n
\r\n @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) {\r\n\r\n \/* mobile-specific CSS styles go here *\/ \r\n\r\n }\r\n <\/pre>\nTable de “class”<\/h4>\n
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.<\/p>\n
\r\n @media only screen and (max-device-width: 480px) { \r\n \/* CSS sp\u00e9cifique pour mobile *\/\r\n table[class=contenutable] { \r\n width: 320px !important;\r\n }\r\n }\r\n\r\n \/* CSS par d\u00e9faut *\/\r\n table.contenttable {\r\n width: 640px;\r\n }\r\n <\/pre>\n La class CSS nomm\u00e9 contenutable<\/code> pr\u00e9sente plusieurs b\u00e9n\u00e9fices en terme UX :<\/p>\n\n- Il y a un r\u00e9tr\u00e9cissement de la newsletter si le contenu est vu sur un \u00e9cran de terminal l’\u00e9cran est de 480px ou moins<\/li>\n
- Il n’y a aucun changement si bien \u00e9videmment la taille de l’\u00e9cran est de 480px ou plus.<\/li>\n
- L’ajout de l’attribut
!important;<\/code> est afin de garantir que ce style sp\u00e9cifiquement mobile soit appliqu\u00e9 en priorit\u00e9 lorsque un terminal mobile se pr\u00e9sente.<\/li>\n<\/ol>\n On pourrait faire de m\u00eame avec d’autres balises class<\/code> comme dans l’exemple ci-dessous.<\/p>\n\r\n @media only screen and (max-device-width: 480px) {\r\n \/* mobile-specific CSS styles go here *\/\r\n table[class=contenutable] { width: 325px !important; }\r\n img[class=\"enteteimage\"] { width: 325px !important; }\r\n p[class=\"date\"] { display: none !important; }\r\n }\r\n <\/pre>\n Passons maintenant \u00e0 des exemples plus avanc\u00e9s d’int\u00e9gration pour terminaux mobiles.<\/p>\n
Construire un “template” de newsletter responsive plus avanc\u00e9<\/h4>\n
Il est souvent plus judicieux de construire un template qui qui passe de 2 \u00e0 1 colonnes. Certes, ce type de template en 2 colonnes permettra bien souvent d’afficher plus de contenu en tout d\u00e9but de newsletter dans des clients email type Outlook sur Desktop, mais ces templates deviennent vite incommodes \u00e0 lire et \u00e0 naviguer sur un terminal mobile. On va donc r\u00e9sorber cette difficult\u00e9 \u00e0 l’aide de quelques bonnes pratiques CSS pour rendre la chose lisible aussi bien sur un ordinateur que sur un terminal mobile.<\/p>\n
Une des r\u00e8gles essentielles dont il vaut se souvenir lors d’une int\u00e9gration pour une newsletter, c’est qu’il est pr\u00e9f\u00e9rable d’utiliser des attributs propres \u00e0 l’HTML plut\u00f4t que des \u00e9l\u00e9ments CSS en effet, l’interpr\u00e9tation de la CSS varie grandement d’un client mail \u00e0 un autre.<\/b><\/p>\n
Ainsi, il faut privil\u00e9gier dans l’int\u00e9gration des attributs HTML classiques comme cellpadding=\"10\"<\/code> align=\"left\"<\/code> au lieu de leurs equivalents CSS float: left;<\/code> ou padding: 10px;<\/code><\/p>\n 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\u00e9rer la mise en page du contenu.<\/p>\n
\r\n\r\n <table width=\"640\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">\r\n <tr>\r\n <td>\r\n <table width=\"320\" border=\"0\" cellspacing=\"0\" cellpadding=\"20\" align=\"left\">\r\n <tr>\r\n <td><p>Colonne de gauche<\/p><\/td>\r\n <\/tr>\r\n <\/table>\r\n <table width=\"320\" border=\"0\" cellspacing=\"0\" cellpadding=\"20\" align=\"right\">\r\n <tr>\r\n <td><p>Colonne de droite<\/p><\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/td>\r\n <\/tr>\r\n <\/table>\r\n\r\n <\/pre>\n Faire un mod\u00e8le en HTML sur une seule colonne est g\u00e9n\u00e9ralement l’assurance que le tout passe correctement sur les terminaux mobiles. N\u00e9anmoins, qui optant pour une int\u00e9gration responsive, il est possible de ne pas renoncer \u00e0 une mise en forme sur 2 colonnes sans pour autant accroitre consid\u00e9rablement la taille de votre CSS.<\/p>\n
A ajoutant la ligne de “media query” ci-dessous, on s’assure que la table s’affiche en 640px si l’\u00e9cran le permet mais que si la taille de l’\u00e9cran 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.<\/p>\n
La CSS pour une table contenutable<\/code> repsonsive<\/b><\/p>\n\r\n @media only screen and (max-device-width: 480px) {\r\n table[class=contenutable] { \r\n width:320px !important;\r\n }\r\n }\r\n <\/pre>\n Le code HTML de la table contenutable<\/code> repsonsive<\/b><\/p>\n\r\n <table width=\"640\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"contenutable\">\r\n <tr>\r\n <td>\r\n <table width=\"320\" border=\"0\" cellspacing=\"0\" cellpadding=\"20\" align=\"left\">\r\n <tr>\r\n <td><p>Colonne de gauche<\/p><\/td>\r\n <\/tr>\r\n <\/table>\r\n <table width=\"320\" border=\"0\" cellspacing=\"0\" cellpadding=\"20\" align=\"right\">\r\n <tr>\r\n <td><p>Colonne de droite<\/p><\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/td>\r\n <\/tr>\r\n <\/table>\r\n <\/pre>\n Le r\u00e9sultat est une integration responsive qui affiche deux colonnes sur les clients Desktop et Web, mais qui passe \u00e0 une colonne unique de 320px dans le client de messagerie par d\u00e9faut d’un smartphone sous iOS ou sous Android.<\/p>\n
Penser un mode d’affichage propre aux smarphones, orient\u00e9 UX<\/h4>\n
De la m\u00eame mani\u00e8re que pour un site l’exp\u00e9rience utilisateur (UX) diff\u00e8re selon que le contenu s’affiche sur un \u00e9cran desktop ou sur un \u00e9cran de smartphone. Il en va de m\u00eame pour la newsletter, il y a certaines specificit\u00e9s<\/p>\n
Ajout d’un effet de “progressive disclosure” pour la lecture sur smartphone<\/h4>\n
Sur le web, pas mal de site offre une visualisation progressive approchant de l’effet “infinite scroll” bien connu dans les th\u00e8mes WordPress responsive. Pour les terminaux mobiles, on parle de “progressive disclosure”. <\/p>\n
Cela consiste \u00e0 r\u00e9v\u00e9ler le contenu \u00e0 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 \u00e0 mettre en place pour cette newsletter.<\/p>\n
Jeu de cache cache CSS dans une newsletter<\/h4>\n
Montrer la totalit\u00e9 de l’article sur desktop et autoriser sur mobile la poursuite de la lecture au gr\u00e9 des envies de l’utilisateur.<\/p>\n
Sur le client mobile, le souhait de ne faire appara\u00eetre 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\u00e9cessaire aux utilisateurs pour prendre connaissance du contenu de la newsletter. <\/p>\n
Ci-dessous, l’extrait de code qui va permettre d’afficher chaque article avec un en-t\u00eate, une mini introduction et un bouton “show\/hide”.<\/p>\n
\r\n \r\n <td>\r\n <h4><a href=\"http:\/\/le_lien\" class=\"link\">En-t\u00eate<\/a><\/h4>\r\n <a href=\"#\" class=\"mobilehide\">Hide<\/a> <a href=\"#\" class=\"mobileshow\">Voir<\/a>\r\n <div class=\"article\">\r\n <p class=\"bodytext\">\r\n <img src=\"une_image.jpg\" style=\"float: left;\" >Pellentesque habitant morbi...\r\n <\/p>\r\n <a href=\"http:\/\/le_lien\">En savoir +...<\/a> \r\n <\/div>\r\n <\/td>\r\n \r\n <\/pre>\n Les “class” CSS mobilehide<\/code>, mobileshow<\/code> et article<\/code> permettent de couvrir toutes les actions souhait\u00e9es pour ce comportement.<\/p>\n L’attribut ci-dessous display: none !important;<\/code> permettra de faire dispara\u00eetre ces boutons lorsque le mail sera lu sur des clients desktop et webmail.<\/p>\n\r\n a[class=\"mobileshow\"], a[class=\"mobilehide\"] {\r\n display: none !important;\r\n } \r\n <\/pre>\nAfin d’assurer l’affichage sur tes terminaux mobiles, on passe par une ligne sp\u00e9cifique media query<\/code>.<\/p>\n \r\n @media only screen and (max-device-width: 480px) { \r\n a[class=\"mobileshow\"], a[class=\"mobilehide\"] { \r\n display: block !important; \r\n color: #fff !important; \r\n background-color: #aaa; \r\n border-radius: 20px; \r\n padding: 0 8px; \r\n text-decoration: none; \r\n font-weight: bold; \r\n font-family: \"Helvetica Neue\", Helvetica, sans-serif; \r\n font-size: 11px; \r\n position: absolute; \r\n top: 25px; \r\n right: 10px; \r\n text-align: center; \r\n width: 40px;\r\n }\r\n div[class=\"article\"] {\r\n display: none;\r\n }\r\n a.mobileshow:hover { \r\n visibility: hidden;\r\n } \r\n .mobileshow:hover + .article, .article:hover {\r\n display: inline !important;\r\n }\r\n }\r\n <\/pre>\n Le r\u00e9sultat est donc un e-mail avec des boutons show\/hide<\/code>, ce qui va permettre de d\u00e9ployer en fonction des besoins utilisateurs le contenu sur l’iPhone.<\/p>\n Il existe un template sur GitHub qui pr\u00e9sente ce principe de “progressive disclosure”<\/b><\/p>\n
Source : https:\/\/gist.github.com\/egid\/5208136<\/a><\/i><\/p>\nCibler des terminaux sp\u00e9cifiques \u00e0 l’aide des “media queries”<\/h4>\n
On peut s’amuser \u00e0 cibler plus sp\u00e9cifiquement un certain nombre de terminaux mobiles \u00e0 l’aide des “media queries” autrement dit la balise CSS @media<\/code>.<\/p>\n Ci-dessous, vous trouverez une CSS qui cible le d\u00e9finition d’\u00e9cran des principaux terminaux que l’on trouve sur le march\u00e9. Bien \u00e9videmment, si vous souhaitez \u00eatre exhaustif (ce qui parait illusoire au demeurant) vous serez dans l’obligation de “pondre” une CSS sur-mesure pour cibler cet \u00e9cosyst\u00e8me sp\u00e9cifique.<\/p>\n
Il est clair que les “media queries” ne sont pas support\u00e9es par toutes les plate-formes, voici une rapide des clients mobiles et tierces qui donne un bref apercu de l’atomicit\u00e9 des navigateurs du march\u00e9.<\/p>\n