.design .design

Du moniteur au mobile – optimisation des templates mail mobile

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.

.design
.design

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.

Template mail mobile Sidebar

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.

Template mail mobile Hongkiat

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.

Template mail mobile Spotify

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.

Template mail mobile Google+ Event

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.

Template mail mobile Longreads

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 à ».

Template mail mobile Very Chic

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.

Template mail mobile Magazine du Webdesign

Next Draft

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

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

Template mail mobile Next Draft

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.

Template mail mobile Pinterest

Smashing Newsletter

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

  • Réduction de la largeur des blocs.

Template mail mobile Smashing newsletter

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.

Template mail mobile Startup Play

Grooveshark

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

  • Ajustement de la taille des blocs.

Template mail mobile Grooveshark

WP App Store

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

  • Modification de la largeur des images.

Template mail mobile WP App Store

Etsy

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

  • Suppression des images.

Template email mobile Etsy

Promod

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

  • Suppression des blocs images externes.

Template email mobile Promod

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.

Template email mobile Demain Je Crée

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 !

Accédez au meilleur des interfaces directement depuis votre boîte mail

Pixels à explorer