Loading...

Responsive Design Vs Mobile-Friendly

Créer un email qui soit facile à lire, instructif et attrayant est un processus complexe. Afin d’être en phase avec les évolutions des modes de communication, les emails doivent plus que jamais être lisibles sur les terminaux mobiles (Smartphones, tablettes et phablettes). Optimiser ses messages pour les appareils nomades est devenu une évidence mais parmi les différentes techniques d’optimisation existantes, de nombreux marketers se demandent quelle est la meilleure approche à adopter.

responsive designDeux solutions s’offrent aux designers, le Responsive Design et le Mobile-Friendly. La technologie Responsive Design va modifier l’apparence et le contenu du message en fonction du terminal de lecture. Un même code HTML envoyé aura un rendu différent sur un téléphone mobile et sur un écran classique. La technologie Mobile-Friendly permet de réaliser un design unique qui sera lisible sur l’ensemble des terminaux. La création sera faite en anticipant les spécificités des plus petits écrans.

Il n’y a pas d’oppositions dans le choix de ces deux types d’optimisation. La décision de recourir au Responsive Design ou au Mobile-Friendly dépend de nombreux critères et notamment du contenu de l’email et des désirs créatifs de l’expéditeur.

Déterminer la meilleure approche dépend aussi de la fréquence d’envoi, des mises à jour éventuelles des contenus d’un envoi à l’autre. Une mise à jour trop fréquente d’un email en Responsive Design est plus chronophage que celle d’un email Mobile-Friendly.

La quantité d’informations à présenter est un critère à prendre en compte. On peut afficher beaucoup plus de contenu sur un message conçu en Responsive Design, ne serait-ce que par l’utilisation de tailles de typographies appropriées là où le Mobile-Friendly exige une taille minimale de 16 pixels pour rester lisible dans tous les cas.

En termes de délais, la conception Mobile-Friendly permet de réduire le temps des créations et des modifications de dernière minute. Le Mobile-Friendly nécessite moins de ressources aussi bien en création qu’en intégration HTML.

Côté HTML, un email responsive est évidemment beaucoup plus complexe à intégrer. Les règles à respecter changent régulièrement et un suivi fréquent du rendu sur les différents terminaux est indispensable. Par contre, les alternatives d’affichage seront bien plus fines puisque le rendu pourra être ciblé par catégories de tailles d’écrans. On peut donc imaginer un affichage et un contenu différents sur les ordinateurs de bureau, les tablettes et les mobiles.

L’intégration HTML d’emails Mobile-Friendly est plus simple et moins sujette aux erreurs d’affichage. Les caractéristiques de conception de ce type d’emails, à travers un code très basique, font que presque tous les navigateurs et applications arrivent à le lire correctement, même s’ils sont mis à jour après l’envoi.

Pour conclure si vous avez un message simple avec un contenu court à mettre en place, et que vous avez des délais serrés ou un besoin de réactivité, privilégiez les versions Mobile-Friendly. Si vous avez un message plus complexe sur lequel vous cherchez une optimisation de vos taux en travaillant davantage la personnalisation de vos différentes versions, la technologie Responsive Design sera plus appropriée.

En ce qui concerne la conception d’email Mobile-Friendly, voici quelques règles à suivre pour s’assurer que votre message apparaisse sans failles sur tous les appareils :

1 – La largeur de l’email doit être plus étroite qu’un email classique. Une largeur d’environ 560 pixels est appropriée.
2 – La taille de la police ne doit pas être inférieure à 16 points.
3 – Un espace suffisant doit être laissé entre les Call To Action afin d’éviter les clics involontaires dus à une zone plus grande de clic qu’est le doigt. On estime à 44px de côté la taille minimale d’une zone de clic sur mobile.
4 – Les éléments du message doivent être proportionnels à la largeur de l’email. Si l’email est large, l’image doit être grande afin de s’assurer qu’elle sera visible une fois l’email rétréci sur un appareil mobile.

Pour un message en Responsive Design, quelques conseils à suivre :

1 – Déterminer les terminaux types sur lesquels vous voulez adapter votre message.
2 –  Choisir les éléments à afficher selon les versions (lien vers un formulaire sur la version PC, lien téléphonique sur un mobile).
3 – Prévoir un allégement du contenu sur les versions mobiles.

N’hésitez pas à nous demander conseil !