Les templates mail mobile font de plus en plus leur apparition dans les stratégies de marketing mobile des marques. Atteindre le plus grand nombre de contacts sur les supports desktop et mobiles est désormais possible. Encore faut-il connaître le Comment.

il y a quelques jours, je vous faisais part de la nouvelle « bim bam boom » de Zurb dans l’article Templates mail responsive presque compatibles mobile. J’y présentais les fameux templates mis à disposition gratuitement par l’équipe du studio. Ces templates mail mobile sont un exemple parmi d’autres de ce qu’il est désormais possible d’envisager pour les campagnes d’emailing. Voyons ce qui ce fait ailleurs.

Il est toujours bon de s’inspirer de la concurrence. Rester dans son coin n’a jamais été une stratégie gagnante. Apprendre par l’exemple, reprendre des idées et les faire évoluer, voilà la bonne attitude à adopter.

Le terme « optimisation mobile » est assez récent, il n’y a pas de voies clairement balisées à suivre pour l’emailing. Bon nombre de personnes vous diront : « Mobile ?… oui mais les media queries… blablabla… ». Le terme « mobile » n’est pas forcément synonyme de « media queries ». D’autres techniques existent. Les templates  mail fluides en sont une et la compatibilité avec les clients mails et les navigateurs mobiles est au rendez-vous. Ce qui n’est pas encore le cas avec les medias queries.

Des bonnes pratiques sont établies et des astuces faciles à mettre en place sont disponibles. Les exemples ci-dessous sont une manière idéale d’apprendre. Découvrons les réalisations de ceux tentant de paver la voie de l’optimisation mobile des emails.

Pour chaque exemple, une brève description des astuces utilisées est disponible.

Sidebar

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Preheader non affiché,
• La largeur des blocs s’adapte au support mobile.

Hongkiat

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Preheader non affiché,
• Alignement vertical des boutons des comptes sociaux,
• Diminution de la taille du logo.

Spotify

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Diminution de la taille de l’image,
• Ajustement de la largeur du bloc.

Google+

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Taille de l’image en footer diminuée,
• Largeur des blocs ajustée.

Longreads

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Format du logo et des images modifié,
• Largeur des blocs restreinte.

Very Chic

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Colonne gauche des produits au-dessus de la colonne droite,
• Texte non affiché pour une meilleure lisibilité. Ex. pourcentage de réduction « Votre séjour à ».

Magazine du Webdesign

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Preheader non affiché,
• Diminution de la taille du logo,
• Logo centré,
• Adaptation de la largeur des blocs.

Next Draft

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Logo centré,
• Largeur des blocs ajustée.

Pinterest

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Changement du background-image en header,
• Image de gauche au-dessus de la colonne de texte,
• Les 3 colonnes s’ajustent pour n’en faire plus qu’une.

Smashing Newsletter

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Réduction de la largeur des blocs.

StartUp Play

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Suppression du bloc texte en header pour une meilleure lisibilité,
• Modification de la largeur de l’image en header.

Grooveshark

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Ajustement de la taille des blocs.

WP App Store

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Modification de la largeur des images.

Etsy

Astuces pour gérer la transition entre la version desktop et la version mobile : 

Promod

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Suppression des blocs images externes.

Demain Je Crée

Astuces pour gérer la transition entre la version desktop et la version mobile : 

• Logo centré,
• Déplacement de la colonne texte au-dessous du logo.

Continuité de l’expérience utilisateur sur mobile

La compatibilité grandissante des clients email et navigateurs sur les smartphones et tablettes promet un bel avenir au mail mobile. Le taux de réactivité et le temps de lecture peuvent croître significativement en optant pour les bonnes techniques. Le mobile ne doit pas être le maillon faible de votre stratégie. Il doit en être le pilier afin d’obtenir une expérience utilisateur homogène et agréable sur l’ensemble des devices. Les résultats ne se feront pas attendre !

ITEMS RELATIFS : EMAIL, MOBILE