Intégration d'une newsletter responsive à partir d'un email reçu d'Onabags.com non optimisé pour les mobiles et composé uniquement d'images. Utilisation des tableaux HTML et des media queries pour l'optimisation sur mobiles (479px de large). Compatible sur les différents clients de messagerie (Outlook, Thunderbird) et Webmails (Gmail, Yahoo! Mail). Testé avec l'outil en ligne "Limus Email Preview").
voir en ligne
Actuellement, d'après plusieurs études (Litmus,Equinux...) 47% des emails sont ouverts depuis un appareil mobile alors que seulement 11% des emails sont optimisés pour les mobiles. Il est donc devenu incontournable !
Le principe de base est d'utiliser une mise en page avec des tableaux pour la compatibilité avec les différentes messageries et webmails et priviligier le texte aux images pour la délivrabilité. Comme pour un site mobile, on utilise les Media Queries en ajoutant des classes aux éléments de tableau. Ici pour les clients ayant une largeur maximum de 479px, on passe (pour la partie présentant les 3 produits) de 3 cellules de tableau de 152px à 3 lignes avec une largeur de 320px à l'aide d'un display:block. De même grâce à la classe display:none les images et le contenu vont être différents selon que nous sommes sur un affichage supérieur ou inférieur à 479px. Il existe différentes approches et techniques pour arriver à un résultat acceptable au niveau compatibilité; Mon expérience en emailing à Easyvoyage ainsi que l'étude d'email reçus et de template sur le net me permettent d'arriver à ce résultat.
