Concevoir des e-mails réactifs : Cibler des terminaux avec les media queries
Par Campaign Monitor
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 :
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 !)
« Concevoir des e-mails réactifs » est une série de huit articles :
http://www.campaignmonitor.com/guides/mobile/targeting/