Concevoir des e-mails réactifs : Optimiser les images pour le mobile
Par Campaign Monitor
Dans ce chapitre, nous allons étudier quelques techniques qui tirent profit de propriétés CSS bien supportées comme background-image. Ces techniques ne vont pas seulement vous permettre de proposer des images optimisées pour le mobile à travers vos designs, mais aussi vous assurer qu’elles soient impeccables à n’importe quelle taille.
Utiliser les images de fond pour de meilleurs en-têtes
Nous ne recommandons habituellement pas d’utiliser les images de fond dans un gabarit d’e-mail, mais le support des CSS et des requêtes de média de l’iPhone et du client mail par défaut d’Android est suffisamment solide pour que les avantages soient substantiels.
Parmi ceux-ci, il y a la possibilité de remplacer les images d’origine par celles que vous aurez optimisées pour le mobile en les masquant quand votre e-mail est consulté depuis un terminal mobile.
Jusqu’à maintenant, nous recommandions que les images soient redimensionnées pour les terminaux mobiles. Toutefois, le problème avec cette façon de faire est que l’information contenue dans l’image peut se révéler trop petite pour être bien lue ou comprise.
Une solution plus intéressante consiste à créer une image spécifique pour les abonnés consultant leurs e-mails sur mobile. Pour cela, nous allons placer l’image dans une cellule de tableau ou une div, puis écrire une requête de média qui masquera cette image et en affichera une autre, plus adaptée, en image de fond :
CSS
@media only screen and (max-device-width: 480px) {
td[class="entetedecellule"] {
background-image: url(images/en_tete-325.png);
width: 325px !important;
height: 115px !important;
}
td[class="entetedecellule"] img {
display: none;
}
}HTML
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="entetedecellule">
<img src="images/en_tete.png" border="0" width="600" />
</td>
</tr>
</table>Voici à quoi les choses ressemblent avant et après que les images aient permuté :
L’avantage avec cette technique, c’est que vous pouvez raccourcir la longueur des e-mails en utilisant des images moins hautes (cf ci-dessus). Sur un e-mail mobile, plus c’est court, mieux c’est.
Le problème avec la méthode de permutation des images de fond, c’est que cela ne se révèle vraiment efficace qu’avec des e-mails à largeur statique. Or, ces temps-ci, les terminaux mobiles pouvant prendre n’importe quelle forme ou taille d’écran, la grille fluide devient une option répandue. Même si la solution logique semble être celle du background-size: 100% dans la requête de média précédente, la meilleure combine est celle consistant à utiliser background-size: cover ainsi que le précise Elliot Jay Stocks :
@media only screen and (max-device-width: 480px) {
td[class="entetedecellule"] {
background-image: url(images/en_tete-480.png) !important;
background-size: cover;
}
td[class="entetedecellule"] img {
display: none;
}
}Heureusement, les clients e-mail sous Webkit supportent totalement la règle background-size, ce qui signifie que vous ne risquez rien avec le client mail par défaut de iOS et Android. Si vous avez un doute, on vous recommande la méthode traditionnelle qui consiste à utiliser une balise img dans un gabarit fluide et de la redimensionner comme ceci :
@media only screen and (max-device-width: 480px) {
td[class=entetedecellule] img {
height:auto !important;
width:100% !important;
}
}Proposer des images en haute résolution pour les écrans Retina
Notre dernier conseil concerne les images que l’on cherche à rendre aussi nettes que possibles sur des écrans Retina. On en a déjà parlé avant, mais dans la mesure où ce type d’écran devient de plus en plus courant, cela mérite un petit résumé.
Le truc, c’est de créer des images-clés deux fois plus grandes que celles que vous comptez placer, ce qui offre un rendu impeccable sous iPhone 4, 4s et iPad. Par exemple, en utilisant notre hack avec background-image cité plus haut, nous avons créé un en-tête en image qui faisait vraiment 650 × 230 px (il s’agit de en_tete-325@2x.png), mais qui rétrécit sur les écrans des mobiles. Voici à quoi la requête de média pourrait ressembler :
@media only screen and (max-device-width: 480px) {
td[class="entetedecellule"] {
background-image: url(images/en_tete-650@2x.png) !important;
background-size: 325px 115px;
width: 325px !important;
height: 115px !important;
}
td[class="entetedecellule"] img {
display: none;
}
}
}Si vous souhaitez cibler uniquement les écrans Retina avec une feuille de style particulière, vous pouvez utiliser cette déclaration CSS à la place :
@media all and (min-device-pixel-ratio : 1.5) { ... }
Pour plus d’informations sur cette utilisation, nous vous recommandons de lire ce billet de Ben Frain.
Tandis que cette image d’en-tête sera super nette uniquement sur les terminaux en question, le problème à résoudre est que tout le support des requêtes de médias du client e-mail sera alourdi par le téléchargement de l’image en haute définition.
En effet, l’inconvénient à utiliser ce type de technique est que les images plus grosses auront forcément des tailles plus importantes, augmentant le temps de chargement dans la boîte de réception. Par conséquent, utilisez cette technique judicieusement, car tout le monde n’est pas équipé pour bénéficier d’images en haute résolution.
« Concevoir des e-mails réactifs » est une série de huit articles :