Concevoir des e-mails réactifs : Cibler des terminaux avec les media queries

Par Campaign Monitor

Vous avez sûrement remarqué que nous avons utilisé une requête de média dans ce guide, à savoir @media only screen and (max-device-width: 480px) { ... }. C’est parfait pour cibler les iPhones et autres terminaux mobiles qui constituent la majeure partie des clients de messagerie utilisés. Mais si vous ou vos clients voulez cibler des tablettes, des écrans Android plus larges ou quelques-unes des résolutions d’écran plus exotiques de l’écosystème des mobiles, alors il vous faudra recourir à des requêtes de média tout aussi exotiques, et leurs styles associés.

Fignoler vos requêtes de média

Reprenons la condition max-device-width: 480px de notre requête de média précédente. Cette règle indique aux clients de messagerie (et aux navigateurs) que la mise en page pour mobile définie à l’intérieur de cette requête ne s’applique qu’en dessous du seuil de 480px.

Vous pouvez toutefois être bien plus spécifique et ne cibler que les situations où la surface d’affichage mesure entre 320px et 480px, par exemple, avec le code suivant :

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ... }

Ce que beaucoup de gens ignorent, c’est que les requêtes de média peuvent également être utilisées de manière quasi chirurgicales. Il est bien sûr possible de cibler toute sorte de combinaisons largeur/hauteur, mais aussi des orientations d’écran (portrait et paysage) et le ratio des pixels (le rapport entre la largeur théorique d’un pixel et la largeur à laquelle il est effectivement affiché).

Cela vous permet de cibler des terminaux avec une précision absolue. Vous voulez créer un gabarit pour iPad ? Bien sûr. Cibler les écrans Retina ? Pourquoi pas. Les styles ultra-spécifiques ne sont pas forcément très rentables mais, il suffit parfois de quelques lignes de code pour qu’une newsletter s’affiche à la perfection tant sur votre téléphone que sur votre tablette préférée.

Notre ami Andy Clarke a créé un excellent outil pour cibler des écrans de taille standard. C’est une bonne base de travail pour concevoir un design d’e-mail qui ne se limite pas à deux mises en page pour les plus et moins de 480px.

Devenir parano à cause d’Android

Ceci dit, il y a des gens qui critiquent le fait de se concentrer sur la création de gabarits de 480px de largeur, connus dans le milieu sous le nom de « point de rupture ». Comme le dit Marc Drummond :

Si vous utilisez les techniques du webdesign réactif (et vous avez bien raison !), vos points de rupture n’ont aucune raison de dépendre des dimensions de certains appareil — Marc Drummond, "Responsive web design default breakpoints are dead"

Marc signale que l’outil d’Andy Clarke ignore des myriades de points de rupture potentiels, en particulier parmi les appareils Android. De plus, de nouveaux terminaux mobiles sortent tout le temps, ce qui fait que la requête de média que vous utilisez pour cibler les tailles d’écran les plus populaires d’Android peut très bien devenir inutile demain.

Construire un gabarit fluide avec les requêtes de média

L’autre solution consiste à concevoir des gabarits fluides qui s’adaptent harmonieusement à la largeur de l’écran. Il suffit que la requête de média applique des largeurs proportionnelles (plutôt qu’une largeur fixe telle que 320px) pour qu’en dessous d’une largeur « ordinateur de bureau » vos newsletters s’adaptent automatiquement aux écrans même les plus étroits.

Grâce à cette technique, l’affichage sera optimal en toute situation, du petit volet de prévisualisation aux minuscule écran des téléphones Nokia :

JPEG - 77.2 ko

Pour voir cette technique en action, je vous recommande de consulter cette newsletter de Starbucks et de redimensionner votre fenêtre de navigateur. Merci au designer Ed Melly pour ce bel exemple.

Nous avons un billet de blog détaillé qui entre dans le détail des techniques de fluidification de gabarits pour e-mail HTML, et dans le chapitre suivant, nous découvrirons comment les images à largeur variable peuvent être utilisées efficacement dans vos newsletters.

Un petit conseil pour finir : on peut facilement s’emballer et vouloir à tout prix adapter les e-mails à chaque terminal, mais ne laissez pas l’arbre cacher la forêt. Si 85 % de vos clients qui consultent leurs e-mails sur mobile ont des écrans de 320 x 480 pixels, ne vous sentez pas obligé de vous casser la tête parce qu’il existe quelque part un type qui utilise une résolution de 184 x 307 pixels (sauf si c’est justement votre client, bien entendu !)

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