Concevoir des e-mails réactifs : Optimiser les images pour le mobile

Par Campaign Monitor

La surface d’écran disponible étant limitée sur les terminaux mobiles, nous devons être prudent quand il s'agit d’ajouter des images aux e-mails HTML. L'iPhone ayant un très bon support des CSS, il est cependant possible d'insérer des images de manière créative.

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é :

JPEG - 42.3 ko

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.

Fiche technique

À propos de l'auteur

Campaign Monitor est une plate-forme d’e-mailing créée en 2004 par Ben Richardson et David Greiner, gérants d’une société de Web Design, à la suite de nombreuses demandes de la part de leurs clients pour gérer des campagnes d’envoi d’e-mails. Après avoir fait le tour des solutions existantes sur le marché, ils ont décidé de créer l’outil qui correspondait à leurs besoins.

Aujourd’hui, plus de 700 000 designers, agences et autres sociétés utilisent Campaign Monitor et de nouveaux clients les rejoignent régulièrement.
Ils continuent à ajouter de nouvelles fonctionnalités à leur produit et à le peaufiner mais leur objectif premier reste le même : rendre plus facile pour quiconque l’envoi et la gestion de jolies newsletters.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Web Mobile

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site