{"id":228,"date":"2016-02-07T01:54:37","date_gmt":"2016-02-07T00:54:37","guid":{"rendered":"http:\/\/www.jacquescortes.fr\/blog\/?p=228"},"modified":"2017-03-09T17:13:56","modified_gmt":"2017-03-09T16:13:56","slug":"responsive-email","status":"publish","type":"post","link":"http:\/\/www.jacquescortes.fr\/blog\/2016\/02\/responsive-email\/","title":{"rendered":"Responsive email"},"content":{"rendered":"

Responsive email<\/h1>\n

\"Responsive<\/a><\/p>\n

Apr\u00e8s les sites web qui doivent \u00eatre pens\u00e9s \u00ab\u00a0mobile first\u00a0\u00bb, voici venu le temps o\u00f9 les mails doivent \u00eatre responsives.<\/p>\n

Voici un article donnant des statistiques int\u00e9ressantes sur l’usage des mails :
\n2015 Mobile-Friendly Email & Landing Page Trends [Infographic] (litmus.com)<\/a><\/p>\n

On peut y lire que l’on approche les 50% de mails lus sur mobile et 56% des mails B2C sont mobile friendly (2015).<\/p>\n

Il est donc grand temps de produire des mails qui puissent \u00eatre lu sur toute les tailles d’\u00e9cran et pour cela, d’utiliser des outils qui facilite la t\u00e2che.<\/p>\n

Une soci\u00e9t\u00e9 sp\u00e9cialis\u00e9e du secteur (Mailjet<\/a>) nous indique pourquoi elle a cr\u00e9\u00e9 et mis en open source un framework pour faciliter\u00a0le travail\u00a0:
\nMJML: Why We Created A New Open-source Framework For Email Coding<\/a><\/span><\/p>\n

Le framework en question s’appelle MJML : https:\/\/mjml.io\/<\/a>\u00a0\u00ab\u00a0The only framework that makes responsive-email easy<\/span>\u00a0\u00bb<\/p>\n

Pour la d\u00e9mo en live, voyons par exemple : https:\/\/mjml.io\/try-it-live\/kili<\/a>\u00a0ou bien https:\/\/mjml.io\/try-it-live\/basic<\/a>
\nA noter la grosse diff\u00e9rence entre la simplicit\u00e9\u00a0du MJML et la complexit\u00e9 du HTML g\u00e9n\u00e9r\u00e9 ensuite par le moteur qui embarque tout le css n\u00e9cessaire pour que le mail soit le mieux rendu, y compris sur Outlook.<\/p>\n

Simple \u00ab\u00a0Hello World\u00a0\u00bb en MJML<\/strong> :<\/p>\n

\n
<mj-body>\r\n<\/code>\u00a0\u00a0 <mj-section>\r\n<\/code> \u00a0\u00a0\u00a0 <mj-column>\r\n<\/code>\u00a0\u00a0\u00a0\u00a0\u00a0 <mj-image src=\"\/assets\/img\/logo-small.png\"><\/mj-image>\r\n<\/code>\u00a0\u00a0\u00a0\u00a0\u00a0 <mj-divider border-color=\"#F45E43\"><\/mj-divider>\r\n<\/code>\u00a0\u00a0\u00a0\u00a0\u00a0 <mj-text font-size=\"20px\" color=\"#F45E43\" font-family=\"helvetica\">Hello World<\/mj-text>\r\n<\/code>\u00a0\u00a0\u00a0 <\/mj-column>\r\n<\/code> \u00a0 <\/mj-section>\r\n<\/code> <\/mj-body><\/code><\/pre>\n<\/blockquote>\n
La m\u00eame chose g\u00e9n\u00e9r\u00e9e en HTML<\/strong> :<\/p>\n
\n
<!doctype html><\/code>\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<\/code><head><\/code>\r\n\u00a0 <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n<\/code>\u00a0 <title>undefined<\/title>\r\n<\/code>\u00a0 <style type=\"text\/css\"><\/code>\r\n\u00a0\u00a0\u00a0 <\/code>\r\n\u00a0 #outlook a { padding: 0; }\r\n<\/code>\u00a0 .ReadMsgBody { width: 100%; }<\/code>\r\n\u00a0 .ExternalClass { width: 100%; }\r\n<\/code>\u00a0 .ExternalClass * { line-height:100%; }<\/code>\r\n\u00a0body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }\r\n<\/code>\u00a0table, td { border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }\r\n<\/code>\u00a0 img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; }\r\n<\/code>\u00a0 p {<\/code>\r\n\u00a0\u00a0\u00a0 display: block;<\/code>\r\n\u00a0\u00a0\u00a0 margin: 13px 0;\r\n<\/code>\u00a0 }<\/code>\r\n\u00a0 @media only screen and (min-width:480px) {<\/code>\r\n\u00a0\u00a0\u00a0 .mj-2column, * [aria-labelledby=\"mj-2column\"] { width:50%!important; }\r\n<\/code>\u00a0\u00a0\u00a0 .mj-3column, * [aria-labelledby=\"mj-3column\"] { width:33.3333%!important; }\r\n<\/code>\u00a0\u00a0\u00a0 .mj-4column, * [aria-labelledby=\"mj-4column\"] { width:25%!important; }\r\n<\/code>\u00a0 }<\/code><\/pre>\n
\u00a0 <\/style><\/code>\r\n\u00a0 <!--[if !mso]><!--><\/code>\r\n\u00a0 <style type=\"text\/css\"><\/code>\r\n\u00a0\u00a0\u00a0 @import url(https:\/\/fonts.googleapis.com\/css?family=Ubuntu:400,500,700,300);<\/code>\r\n\u00a0 <\/style><\/code>\r\n\u00a0 <style type=\"text\/css\"><\/code>\r\n\u00a0\u00a0\u00a0 @media only screen and (max-width:480px) {<\/code>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 @-ms-viewport { width:320px; }<\/code>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 @viewport { width:320px; }<\/code>\r\n\u00a0\u00a0\u00a0 }<\/code>\r\n\u00a0 <\/style><\/code>\r\n\u00a0 <link href=\"https:\/\/fonts.googleapis.com\/css?family=Ubuntu:400,500,700,300\" rel=\"stylesheet\" type=\"text\/css\"><\/code>\r\n\u00a0 <!--<![endif]--><\/code>\r\n<style type=\"text\/css\"><\/code>\r\n\u00a0\u00a0\u00a0 @media only screen and (min-width:480px) {<\/code>\r\n\u00a0\u00a0\u00a0 }<\/style><\/head><\/code>\r\n<body id=\"YIELD_MJML\" style=\"\"><div class=\"mj-body\"><!--[if mso]><\/code>\r\n\u00a0 \u00a0\u00a0<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"600\" align=\"center\" style=\"width:600px;\"><tr><td><\/code>\r\n\u00a0 \u00a0\u00a0<![endif]--><div style=\"margin:0 auto;max-width:600px;\"><table class=\"\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:100%;font-size:0px;\" align=\"center\"><tbody><tr><td style=\"text-align:center;vertical-align:top;font-size:0;padding-top:20px;padding-bottom:20px;\"><!--[if mso]><\/code>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td style=\"width:600px;\"><\/code>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <![endif]--><div style=\"vertical-align:top;display:inline-block;font-size:13px;text-align:left;\" class=\"mj-1column\" aria-labelledby=\"mj-1column\" data-column-width=\"NaN\"><table width=\"100%\"><tbody><tr><td style=\"font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;\" align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse:collapse;border-spacing:0px;\" align=\"center\"><tbody><tr><td><img alt=\"\" src=\"\/assets\/img\/logo-small.png\" style=\"border:none;display:block;outline:none;text-decoration:none;max-width:NaN;\"><\/td><\/tr><\/tbody><\/table><\/td><\/tr><tr><td style=\"font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;\"><div style=\"height:0px;font-size:1px;border-color:#F45E43;border-style:solid;border-width:4px 0 0;margin-bottom:30px;margin-left:10px;margin-right:10px;margin-top:30px;\"><\/div><\/td><\/tr><tr><td style=\"font-size:0;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;\" align=\"left\"><div class=\"mj-content\" style=\"cursor:auto;color:#F45E43;font-family:helvetica;font-size:20px;line-height:22px;\">Hello World<\/div><\/td><\/tr><\/tbody><\/table><\/div><!--[if mso]><\/code>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/td><\/tr><\/table><\/code>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <![endif]--><\/td><\/tr><\/tbody><\/table><\/div><!--[if mso]><\/code>\r\n\u00a0 \u00a0\u00a0<\/td><\/tr><\/table><\/code>\r\n\u00a0 \u00a0\u00a0<![endif]--><\/div><\/body><\/code>\r\n<\/html><\/code><\/pre>\n<\/blockquote>\n
 <\/p>\n
Voil\u00e0 donc \u00e0 mes yeux un projet tout \u00e0 fait prometteur que l’on peut encourager avec un petit click pour le faire monter dans le classement de producthunt. com : https:\/\/www.producthunt.com\/tech\/mjml<\/a><\/p>\n
Si vous n’\u00eates pas convaincu, voici 2 liens qui pr\u00e9sentent un peu le sujet et diverses astuces pour contourner des probl\u00e8mes sur divers lecteurs de mail :
\nhttp:\/\/www.alsacreations.com\/tuto\/lire\/1533-un-e-mail-en-html-responsive-multi-clients.html<\/a>
\nhttp:\/\/webdesign.tutsplus.com\/fr\/articles\/creating-a-simple-responsive-html-email–webdesign-12978<\/a>
\nOn voit rapidemment que le sujet est complexe et \u00e9volue sans arr\u00eat. D’o\u00f9 l’int\u00e9r\u00eat de se reposer sur un framework et si possible open source.<\/p>\n
MAJ 2017 : Le tutoriel de Grafikart.fr<\/p>\n