Emailing responsive pour les mobiles

Emailing responsive pour les mobiles

Avec l’arrivée des nouveaux supports mobiles connectés, smart phones et tablettes, l’adaptation des emailings à l’affichage de ces appareils devient une nécessité croissante.

Pourquoi optimiser l’affichage des emails pour mobiles ?

Comparé aux résolutions des écrans classiques d’ordinateurs de bureau ou portables (1024 ou 1280 pixels de large pour les plus courantes), celle des mobiles en version portrait (300 pixels) ou en mode paysage (480 pixels) peuvent poser problème si rien n’est fait pour optimiser la largeur du contenu proposé.

D’après des études récentes, les ouvertures d’emails sur les mobiles représentent maintenant plus de 30% de l’ensemble des terminaux d’affichage. Pour faire face à cette demande croissante, des solutions existent.

La réponse de l’email adaptatif

Optimiser l’affichage de l’emailing sur un large panel de supports est possible, pour s’adapter aux tailles d’écran mais aussi aux différents types de messageries du marché. Les feuilles de style étant (à la différence des logiciels de mail classiques et webmails) largement utilisées par les mobiles, l’adaptabilité est rendue plus aisée.

Pour cela, un certain nombre de méthodes permettent d’y parvenir :

  •  Réorganiser son contenu en passant du multi colonnes à une colonne unique.
  • Utiliser des media queries (ou feuilles de style @media) qui pourront sélectionner des styles (largeur, taille de police, etc) au moyen de commandes définies.
  • Favoriser l’adaptabilité des images et leur proportion pour qu’elles puissent s’ajuster aisément aux différents supports
  • Eliminer les éléments inutiles au web mobile et placer le maximum de contenu pertinent en haut, permettant un clic rapide.

Même si ces méthodes nécessitent encore plus de tests techniques et de travail d’adaptation en amont, le jeu en vaut certainement la chandelle dans la mesure ou le support mobile est devenu un acteur majeur du marché qu’on ne peut plus se permettre de négliger.

Ecrire un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>