Comment concevoir un emailing Responsive Design ?

Pourquoi choisir le Responsive Design pour vos emailing ?

Selon une étude de Litmus publiée en 2013, plus de 51% des e-mails s'ouvrent maintenant sur les appareils mobiles et les mobinautes vérifient leurs téléphones en moyenne 150 fois par jour. Une autre enquête menée par BlueHornet a révélé que si un e-mail n'est pas optimisé pour la lecture sur mobile; plus de 80% des destinataires l'effacent immédiatement et 30% se désabonnent. Dans le même temps, plus de 63% des consommateurs se disent plus intéressés pour réaliser un acte d'achat si l'e-mail s'affiche correctement sur leurs appareils mobiles.

Toutes ces statistiques démontrent non seulement l'adoption rapide des appareils mobiles pour accéder à Internet, mais aussi elles doivent vous faire prendre conscience de la manière dont les internautes consomment la lecture de leurs e-mails en déplacement. Voyons maintenant les principales raisons pour lesquelles vous devriez rapidement optimiser votre e-mail pour les appareils mobiles :

Comment rendre vos emailing Responsive Design ?

Maintenant que vous avez compris l'importance de la conception Responsive Design pour votre stratégie de communication digitale, nous allons voir comment intégrer cette conception à vos e-mails.

Les e-mails Responsive Design font appel à des requêtes CSS un peu particulières, appellées "Media Queries", qui sont la caractéristique principale du Responsive Design. Ces requêtes sont un ensemble de styles CSS qui fonctionnent comme des règles dynamiques ou des instructions conditionnelles du type «si-alors». Ils détectent d'abord la taille de l'écran de l'appareil, puis appliquent dynamiquement des règles différentes pour afficher le contenu selon que la taille de cet écran. Mis en oeuvre avec soin, ces requêtes peuvent optimiser la lisibilité de vos e-mails pour les différentes tailles d'écran.

Différents types de dispositifs mobiles prennent en charge les différentes requêtes de ces médias. Cela signifie que vous devez connaitre les principales tailles d'écran et cibler les différents dispositifs selon leurs résolutions d'écran.
Par exemple :

.affichage-standard{
    color: red;
    font-size: 20px;
}

@media only screen and (max-width:480px){
	.affichage-mobile{
	color: blue !important;
	font-size: 25px; !important;
	}
}

Dans cet exemple très simplifié, le texte est affiché par défaut en 20px et en rouge. Nous ajoutons une requête pour les appareils dont la taille de l'écran est inférieure ou égale à 480 pixels. Dans ce cas, c'est la classe CSS affichage-mobile qui s'applique : le texte est affiché en bleu et en 25px.

Chaque règle de style que vous écrivez dans la balise média doit se terminer par "!important".

Voici une liste des requêtes média CSS pour les périphériques les plus courants :

• Smartphones: Portrait : @media only screen and (max-width : 320px)
• Smartphones: Landscape : @media only screen and (min-width : 321px)
• Smartphones: Portrait and Landscape : @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
• iPads: Portrait : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
• iPads: Landscape : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
• iPads: Portrait and Landscape : @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
• iPhone4 : @media only screen and (-webkit-min-device-pixel-ratio : 1.5), screen and (min-device-pixel-ratio : 1.5)
• iPhone 5: Portrait : @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)
• iPhone 5: Landscape : @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)
• iPhone 5: Portrait and Landscape : @media only screen and (min-device-width : 320px) and (max-device-width : 568px)
• Desktops and Laptops : @media only screen and (min-width : 1224px)
• Large Screens : @media only screen and (min-width : 1824px)

Quels clients e-mails supportent les Média Quéries ?

Malheureusement, les requêtes médias ne sont pas encore prises en charge par tous les clients de messagerie et les appareils mobiles. C'est pourquoi, il est très important de connaître quels dispositifs supportent l'affichage Responsive Design pour le courrier électronique. Sauf si vous avez déjà une liste complète des périphériques qui les prennent en charge, vous ne serez pas en mesure d'assurer un parfait affichage de votre e-mail sur tous les appareils mobiles.

En gardant cela à l'esprit, voici une liste de clients de messagerie / appareils mobiles avec leur support aux requêtes médias.