Modèle d`email « responsive

Transcription

CONCEPTION D’E-MAILS
RESPONSIVE
© SELLIGENT
Le contenu de ce manuel porte sur du matériel protégé par les droits d’auteurs appartenant à Selligent.
Ce manuel ne peut être ni reproduit, en tout ou en partie, ni distribué, transféré par quelque procédé
électronique ou mécanique que ce soit, ni photocopié, sans l’accord écrit préalable d’un représentant
de Selligent.
Glossaire
TERME
DESCRIPTION
Conception adaptative
(ou responsive design)
Approche visant à concevoir des sites web ou e-mails de manière à offrir une
expérience de visualisation optimale (facilité de lecture et de navigation avec un
minimum de redimensionnement, de réorientation et de défilement) sur une
vaste gamme d’appareils.
Metatag ou balise meta
Balise HTML utilisée pour stocker l’information relative à une page mais non affichée dans le navigateur.
Viewport
Le « viewport », ou fenêtre d’affichage, est une zone virtuelle utilisée par le
moteur de rendu pour navigateur/e-mail afin de déterminer comment le contenu
est mis à l’échelle et redimensionné lors du rendu initial sur l’écran.
Requête média
Consiste en un type de média et au moins une expression qui limite le champ
d’action de la feuille de style à l’aide de caractéristiques telles que la largeur, la
hauteur et la couleur. Elle permet d’adapter la présentation du contenu à une
gamme spécifique d’appareils sans avoir à modifier le contenu en lui-même.
Initial-scale
Cette propriété contrôle le niveau de zoom lors du chargement initial de la page.
Maximum- &
minimum-scale
Ces propriétés contrôlent l’utilisation des fonctions de zoom avant ou arrière par
les utilisateurs.
Selligent GUIDE PRATIQUE
2
Table des matières
1. Objectif
4
2. Conception de l’e-mail
2.1 CE QU’IL NE FAUT PAS FAIRE
2.1.1 MISE À L’ÉCHELLE
2.1.2 SKINNY DESIGN
5
5
5
5
2.1.3 COMPRENDRE VOTRE AUDIENCE
2.2 MISE EN PAGE DE L’EMAIL
6
6
2.2.1 SE LIMITER À UNE SEULE COLONNE
2.2.2 QUELQUES EXEMPLES À SUIVRE
2.3 BONNES PRATIQUES MOBILES
2.4 DOCTYPE
6
7
8
8
2.5 FENÊTRE DE RENDU INUTILISABLE
2.6 REQUÊTES MÉDIA
9
10
2.6.1 SUPPORT DES REQUÊTES MÉDIA
2.7 L’IMPORTANCE DE « !IMPORTANT »
11
12
2.8 RÉINITIALISATION DU CORPS DE L’EMAIL
2.9 REDIMENSIONNEMENT DES POLICES
2.10 HYPERLIENS
13
13
13
2.11 MISE EN PAGE LIQUIDE
14
2.12 DÉGRAISSAGE DU CONTENU
15
2.12.1 PENSER EN TERMES DE PAQUETS
17
2.13 PLUSIEURS COLONNES SUR UN SEUL ÉCRAN
18
2.13.1 SUPPRESSION D’UNE BALISE D’ESPACEMENT TD
2.14 IMAGES ADAPTATIVES
19
2.15 TEST DE VOTRE MISE EN PAGE ADAPTATIVE
19
20
3
1. Objectif
L’avenir de l’e-mail marketing réside dans la capacité d’adaptation à ce qui nous
entoure. Les smartphones, tablettes, etc. sont partout. Ces petits appareils ont tous
des résolutions d’écran différentes des ordinateurs traditionnels. Si votre e-mail
n’est pas optimisé pour s’afficher sur un plus petit écran, votre appareil mobile fera
de son mieux pour le visualiser en y ajoutant une barre de défilement ou en mettant
le contenu à l’échelle. Dans ces deux cas, ce que fait le mobile, c’est tenter de faire
entrer dans ce plus petit écran un contenu qui n’a pas été conçu pour cela. L’art
d’optimiser un e-mail pour le représenter sur de multiples tailles d’écran s’appelle
« responsive design », ou conception adaptative, et c’est le sujet principal de ce
guide pratique.
Les dispositifs mobiles ont pratiquement détrôné les ordinateurs classiques et
s’imposent désormais comme les appareils préférés des utilisateurs lorsqu’il s’agit
de lire leurs e-mails. En septembre 2013, Litmus annonçait que 47% de tous les
e-mails ouverts le sont sur des appareils mobiles. Lorsque l’on sait que la moitié
de l’audience ne lit pas les e-mails tels qu’ils ont été prévus, il devient évident
qu’un changement est nécessaire. Et le changement peut être salutaire pour une
entreprise aussi, parce que :
LES UTILISATEURS MOBILES FERONT TOUT CE QUE FONT LES
UTILISATEURS D’ORDINATEURS. A CONDITION QUE CE SOIT
PRÉSENTÉ DE FAÇON UTILISABLE.
Nous savons que 63% des Américains et 41% des Européens ferment, voire
suppriment, un e-mail qui n’est pas optimisé. Pour conserver l’attention du lecteur,
nous devons nous adapter et modifier nos e-mails.
Nous devons présenter le contenu d’une manière utilisable. Les boutons importants
doivent être affichés en plus grand pour que les utilisateurs puissent facilement
cliquer dessus. Les images doivent être moins lourdes afin de réduire le temps de
téléchargement sur une connexion mobile. Ce sont là quelques exemples parmi
tant d’autres de ce qu’il faut améliorer.
Dans ce guide pratique, nous tenterons de vous donner quelques conseils, astuces
et bonnes pratiques pour mettre en place des modèles d’e-mails adaptatifs efficaces.
4
2. Conception
de l’e-mail
Alors, que signifie précisément le terme « conception adaptative » ? Il s’agit d’un
ensemble de techniques et de principes appliqués à la conception d’e-mails, tels
que les requêtes média, les images et mises en page fluides, et une rédaction
personnalisée des e-mails qui convienne à la fois aux ordinateurs et aux appareils
mobiles. Les techniques adaptatives permettent aux designers de cacher, empiler,
développer/réduire ou encore modifier le contenu pour en optimiser l’affichage sur
les plus petits écrans. Elles incluent également de simples réflexions pour rendre les
e-mails plus faciles à consommer par les utilisateurs mobiles, comme la présence
de gros boutons faciles à actionner, de mises en page de contenus selon une
hiérarchie qui leur permettent de fonctionner même sans l’affichage d’images...
Concevoir des e-mails adaptatifs peut se faire de différentes manières, en fonction
du résultat final que vous souhaitez obtenir. Vous pouvez opter pour le design fixe
où vous convertissez tous les pixels à la bonne taille. Par exemple, lorsque vous
avez un tableau de 600 pixels de large et que vous voulez qu’il s’affiche sur un
écran de smartphone dont la résolution est de 320 pixels, vous allez convertir tous
les 600 pixels en 320 pixels.
L’alternative, c’est d’opter pour une mise en page fluide, plus flexible que le design
fixe. Tout comme dans le design fixe, les pixels vont être convertis, mais cette fois
en pourcentages. Une mise en page en 600 pixels représentera 100% et s’adaptera
automatiquement à l’écran de l’appareil.
2.1 CE QU’IL NE FAUT PAS FAIRE
2.1.1 MISE À L’ÉCHELLE
La mise à l’échelle permet de créer une mise en page totalement fluide qui va
s’adapter à la taille de l’écran. Cependant, comme la taille du texte, des images, etc.
ne sera pas adaptée, l’e-mail sera rigoureusement identique à sa version PC - juste
plus petite.
Les utilisateurs auront donc du mal à lire le texte et à cliquer sur les boutons. Il est
fort probable qu’ils referment l’e-mail sans le lire. Cette méthode n’est pas conviviale
et n’est pas recommandée. Quoi qu’il en soit, elle devrait fonctionner sur n’importe
quel appareil, puisque vous utilisez une mise en page fluide.
2.1.2 SKINNY DESIGN
La méthode « Skinny design » est en fait une mise en page suffisamment petite pour
répondre aux exigences de taille d’un écran de portable ; le design sera le même
pour les utilisateurs d’ordinateurs, ce qui donnera comme résultat un e-mail très
minimaliste sur PC. Cette méthode est un peu plus conviviale que la précédente,
mais ce n’est toujours pas véritablement de la conception adaptative. Dans ce
cas, les utilisateurs de PC seront limités et des informations supplémentaires
potentiellement importantes ne seront jamais montrées à l’utilisateur, tout
simplement parce que la place manque pour les afficher.
5
2.1.3 COMPRENDRE VOTRE AUDIENCE
Des deux méthodes citées précédemment, la mise à l’échelle est la moins mauvaise,
mais ce n’est pas une « véritable » mise en page mobile. Cependant, cette méthode
fonctionnera dans tous les cas et reste envisageable lors du choix d’une stratégie.
Il est important de comprendre votre audience et les environnements qu’elle utilise
le plus fréquemment pour visualiser vos e-mails. Une fois que vous disposez de
ces données, vous pouvez déterminer votre investissement en matière de stratégie
mobile.
Cependant, en termes de bonnes pratiques, vous devriez faire LES DEUX ; une mise
en page évolutive qui devient adaptative. La suite de ce document se concentre sur
cette idéologie. Nous allons prendre le meilleur des deux mondes et tenter de les
combiner pour obtenir une véritable conception adaptative des e-mails.
2.2 MISE EN PAGE DE L’EMAIL
Lorsque l’on part d’une page blanche, il est important de ne jamais perdre de
vue l’aspect adaptatif, en particulier lorsque l’on en est encore qu’aux étapes de
conception. Rien n’est plus important qu’une conception optimisée à la fois pour
le PC et le mobile. Cela facilitera nettement la suite du processus.
Une bonne approche est de d’abord réfléchir à une mise en page mobile et de
créer ensuite la version PC basée sur cette mise en page. Si vous travaillez dans
l’autre sens, vous réduirez les options possibles pour les utilisateurs mobiles.
Essayez de garder votre version mobile aussi élégante et minimaliste que possible.
Plus vous utilisez d’images et de graphismes spéciaux, plus il sera difficile d’obtenir
une version correcte à la fois pour le mobile et l’ordinateur de bureau.
2.2.1 SE LIMITER À UNE SEULE COLONNE
Pour rendre le processus d’optimisation de votre newsletter le moins douloureux
possible, optez pour une mise en page à une seule colonne. Comme vous devez
désormais utiliser des tables imbriquées, il est très difficile de réorganiser les
colonnes ou d’empiler des blocs de contenu les uns sur les autres. Cette opération
relativement simple en CSS est pratiquement impossible compte tenu de la rigidité
des tables HTML.
Cela ne veut pas dire pour autant qu’une mise en page à plusieurs colonnes ne
fonctionnera pas sur les appareils mobiles ; il sera simplement plus difficle de la
faire fonctionner à la fois sur un ordinateur et sur un mobile. Si vous optez pour une
mise en page à deux ou trois colonnes, vous avez toujours la possibilité de masquer
certains colonnes. Si vous utilisez une colonne pour du contenu secondaire,
accessoire, c’est sans doute une option valable pour votre version mobile.
Vous trouverez plus d’informations sur la manière de travailler avec plusieurs
colonnes dans la suite de ce document.
6
2.2.2 QUELQUES EXEMPLES À SUIVRE
JOY
THE
STORE
DOMINO’S
EXPEDIA
7
2.3 BONNES PRATIQUES MOBILES
●● Contenu clair et concis: plus l’écran est petit, plus l’efficacité du message est
cruciale.
●● Mise en page à une seule colonne: la simplicité est fondamentale, comme
nous l’avons déjà dit. Une mise en page limitée une largeur de 640 pixels se
réduit élégament. L’usage d’une seule colonne garantit qu’aucun contenu ne
soit perdu.
●● Large call-to-action (CTA): les bonnes pratiques pour l’interface hommemachine d’Apple iOS recommandent une zone cliquable de minimum 44x44
points. Cela varie toutefois d’un appareil à l’autre.
●● Polices généreuses: assurez-vous que votre message puisse être lu facilement.
●● Pre-header: une autre zone fondamentale en matière de visibilité dans la boîte
de réception. Evitez si possible de n’afficher que le texte « visualiser dans un
navigateur ».
●● Texte aligné à gauche: il y a de nombreuses raisons qui justifient l’alignement
à gauche de la zone de contenu. Des études d’oculométrie (ou eye tracking)
suggèrent que les utilisateurs occidentaux concentrent la majorité de leur
attention sur la partie gauche du contenu de l’e-mail. Rien d’étonnant à cela,
puisque nous lisons de gauche à droite. Certains systèmes d’exploitation, tels
qu’Android, ne réduiront pas le contenu pour l’adapter à l’écran et n’afficheront
que la moitié gauche d’un e-mail. D’un point de vue ergonomique, la majorité
des utilisateurs trouvera plus facile d’interagir avec les éléments placés en bas à
gauche ou au millieu de l’écran.
●● Hiérarchie verticale: une plus petite surface utile rend plus crédible que jamais
l’idée du « pli ». Les CTA importants doivent être placés le plus près possible du
haut ; s’ils ne sont pas vus immédiatement, ils ne seront probablement pas vus
du tout.
●● Utilisation prudente des images: ne partez pas du principe que vos images
seront visibles. L’application de messagerie native de l’iPhone affiche les
images par défaut, mais ce n’est pas le cas d’un grand nombre de clients de
messagerie. Si votre e-mail ne contient pas suffisamment de texte, il peut aussi
être détecté par un filtre anti-spam.
2.4 DOCTYPE
Certains clients de messagerie sont connus pour supprimer le DOCTYPE. C’est le cas
de Hotmail et Gmail. Ils insèrent automatiquement le XHTML 1.0 Strict DOCTYPE. Ce
n’est pas une mauvaise idée de l’ajouter lorsque vous concevez votre e-mail pour
éviter des conflits avec Hotmail/Gmail dans la phase de test.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//en” “http://www. w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd”>
8
2.5 FENÊTRE DE RENDU INUTILISABLE
Le « viewport », ou fenêtre d’affichage, est une zone virtuelle utilisée par le moteur
de rendu pour le navigateur/l’e-mail afin de déterminer comment le contenu est
mis à l’échelle et redimensionné lors du rendu initial sur l’écran. A l’origine, la balise
meta viewport a été créée par Apple ; elle a ensuite été exploitée et poursuivie par
d’autres. Cependant, en matière d’e- mails adaptatifs, la balise meta viewport ne
vous donnera que l’illusion du contrôle, car elle n’est pas supportée uniformément
par tous les navigateurs, et encore moins par les clients de messagerie.
EXEMPLE
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0,” />
Voici une liste de résultats de tests du viewport sur divers clients mobiles :
APPAREIL
AUTORISE
LE ZOOM
PAR DEFAUT
INITIALSCALE
MAXIMUMSCALE
NOTES
Android
La propriété « Initial-scale » semble empêcher l’utilisateur
de dézoomer. Sans cette propriété, les utilisateurs
peuvent dézoomer jusqu’à environ 5X. Avec et sans
la balise meta, il zoome jusqu’à la même dimension
maximale (environ 2X). La propriété « maximum-scale »
n’est visiblement pas supportée.
iPhone
Cet appareil fonctionne de la même manière quels que
soient les paramètres du viewport. Son zoom maximal
est beaucoup plus élevé que sous Android (environ 5X).
Kindle Fire
Définir les propriétés « initial-scale » et « maximumscale » à 1.0 désactive la fonction zoom pour cet
appareil. Définir la propriété « maximum-scale »
commande le zoom avant et arrière maximal.
Xoom
Définir les propriétés « initial-scale » et « maximumscale » à 1.0 désactive la fonction zoom pour cet appareil.
Définir la propriété « maximum-scale » commande le
zoom avant et arrière maximal. Cet appareil ne répond
pas aux requêtes média avec la balise meta.
iPad
Cet appareil fonctionne de la même manière quels que
soient les paramètres du viewport. Son zoom maximal
est beaucoup plus élevé que sous Android (environ 5X).
BlackBerry
Les e-mails envoyés avec <meta name = ”viewport”
content=”...” /> et quoi que ce soit dans l’attribut de
contenu apparaissent vides lorsqu’ils sont visualisés sur
BlackBerry.
9
2.6 REQUÊTES MÉDIA
Les requêtes média sont l’élément essentiel de la conception adaptative. Elles vous
permettront de transformer votre e-mail en une version simplifiée pour les appareils
mobiles. Les requêtes média sont également utilisées par les designers web pour
rendre leur site web adaptatif et peuvent aussi être utilisées pour la mise en page
d’e-mails. Cependant, comme elles font partie de la balise « style », certains clients
de messagerie ne les accepteront pas, ce qui empêchera votre version mobile de
s’afficher.
Différent types d’appareils mobiles peuvent avoir différents types de requêtes
média. Ce qui veut dire que vous pouvez cibler différents appareils en fonction
de leur résolution d’écran. La liste suivante vous donne quelques exemples de
requêtes média :
●● Smartphones – Portrait & paysage: @media screen and (min-device-width
: 320px) and (max-device-width : 480px)
●● Smartphones - Paysage: @media screen and (min-width : 321px)
●● Smartphones - Portrait: @media screen and (max-width : 320px)
●● iPads – Portrait & paysage: @media screen and (min-device-width : 768px)
and (max-device-width : 1024px)
●● iPads – Paysage: @media screen and (min-device-width : 768px) and (maxdevice-width : 1024px) and (orientation : landscape)
●● Smartphones – Portrait: @media screen and (min-device-width : 768px)
and (max-device-width : 1024px) and (orientation : portrait)
●● Ordinateurs de bureau et ordinateurs portables: @media screen and
(min-width : 1224px)
●● Ecrans larges: @media screen and (min-width : 1824px)
●● iPhone 4: @media screen and (-webkit-min-device-pixel-ratio : 1.5), screen
and (min-device-pixel- ratio : 1.5)
Il existe une grande variété de requêtes média qui couvre bien plus d’appareils
mobiles que n’en comporte la liste ci-dessus. Mais il est très difficile de créer
une mise en page adaptative qui va fonctionner à 100% sur tous les appareils. Le
meilleur moyen pour éviter de devoir configurer toute une liste de requêtes média,
c’est de voir quels sont les appareils les plus populaires ou, mieux encore, les plus
populaires parmi vos utilisateurs. Cela vous donnera une idée des appareils que
vous devez absolument cibler.
NOTE
Certains nouveaux appareils ont un écran plus grand que celui des smartphones standard, ce qui signifie
qu’ils peuvent passer entre les mailles du filet.
10
2.6.1 SUPPORT DES REQUÊTES MÉDIA
Tous les clients de messagerie par défaut sur les appareils mobiles ne supportent
pas les requêtes média, ce qui implique que, à moins d’avoir une liste complète de
tous les appareils de vos clients et des applications de messagerie qu’ils utilisent,
vous ne pourrez pas créer un e-mail qui s’adaptera à tous les appareils mobiles.
CLIENTS DE MESSAGERIE PAR DÉFAUT
CLIENT
SUPPORT DES REQUÊTES MÉDIA
Amazon Kindle Fire
Amazone Kindle Fire HD
Android 2.1 Eclair
Android 2.2+
Apple iPhone
Apple iPad
Apple iPod Touch
BlackBerry OS 5
BlackBerry OS 6+
BlackBerry Playbook
Microsoft Windows Mobile 6.1
Microsoft Windows Mobile 7
Microsoft Windows Mobile 7.5
Microsoft Windows Mobile 8
Microsoft Surface
Palm Web OS 4.5
sSamsung Galaxy S3+
11
CLIENTS DE MESSAGERIE TIERS
CLIENT
SUPPORT DES REQUÊTES MÉDIA
Application tierce Microsoft Outlook Exchange (Android)
Application mobile Gmail (toutes plates-formes)
Application mobile Yahoo! Mail (toutes plates-formes)
SUPPORT GÉNÉRAL
SYSTEME D’EXPLOITATION
APERÇU
TEXTE
REQUÊTES
MEDIA
IMAGES
TEXTE ALT
ECHELLE
Android 4.0 (Gmail)
Android 4.0 (email)
BlackBerry OS 6
iOS 6
Windows Phone 7.5
= sort of
2.7 L’IMPORTANCE DE « !IMPORTANT »
Quel que soit le code CSS que vous placez dans la balise média, il doit toujours se
terminer par « !important ». Cela garantit que tous les styles présents seront écrasés
par le code CSS repris dans la balise de style. C’est la méthode que l’on utilise pour
créer deux styles de mise en page différents pour les utilisateurs mobiles et les
utilisateurs d’ordinateurs de bureau.
Mais tous les clients de messagerie ne sont pas fans des balises de style. C’est
notamment le cas de Gmail, qui enlèvera toute balise de style à l’intérieur de l’email, quelle que soit sa position (dans l’en-tête, dans le corps du texte,...) Dans ce
cas, vous devez vous faire à l’idée que Gmail affichera toujours la version prévue
pour l’ordinateur de bureau.
12
2.8 RÉINITIALISATION DU CORPS DE L’EMAIL
Veillez à remettre à zéro les marges et l’espacement du corps. Sinon le contenu
s’affichera entouré d’un bord blanc dans iOS mail. Ensuite, désactivez l’adaptation
automatique de la taille du texte sur certains clients mobiles avec –webkit-textsize-adjust et –ms-textsize-adjust, ce qui empêchera les appareils de réduire ou
d’augmenter la taille du texte en fonction de leurs paramètres par défaut.
<body bgcolor=”#fffff” topmargin=”0” leftmargin=”0” marginheight=”0” marginwidth=”0”
style=”height: auto; padding:0; margin:0; -webkit-text-size- adjust:none; -ms-text-size-adjust:
100%;”>
2.9 REDIMENSIONNEMENT DES POLICES
De plus petits écrans peuvent rendre le texte illisible car trop petit. Or, le texte doit
se transformer, comme le reste de votre mise en page, en fonction de la résolution
d’écran. Pour s’assurer que les utilisateurs puissent lire votre e-mail sans aucun
effort, et leur proposer un e-mail convivial. Essayez de conserver des proportions
équilibrées, par exemple un texte entre balises H1 doit être plus grand qu’un texte
entre balises P ordinaires.
*[class].transf_tekst{
font-size:17px !important;
line-height:21px !important;
}
Vous pouvez également le faire pour tout le corps de l’e-mail si vous ne voulez pas
définir une classe spécifique pour chaque balise P ou SPAN.
LA TAILLE EST IMPORTANTE
D’après les bonnes pratiques d’Apple, les liens et les boutons doivent avoir une
zone cible de minimum 44 x 44 pixels. Rien n’est moins utilisable qu’un nuage
de liens minuscules sur un appareil à écran tactile. On recommande une taille de
police de 17 à 21 pixels ; la police habituelle est d’environ 19 pixels.
2.10 HYPERLIENS
Cliquer sur un lien peut également s’avérer difficile sur un plus petit écran. Vous ne
voulez pas obliger les utilisateurs à zoomer pour pouvoir cliquer sur un bouton ou
un hyperlien. La bonne pratique consiste donc à augmenter la taille des boutons
et des hyperliens. Plus le bouton sera grand, plus il sera facile de cliquer dessus.
Lorsque c’est possible, un bouton qui occupe toute la largeur de l’écran n’est jamais
une mauvaise idée.
La façon la plus simple de le faire est d’utiliser des hyperliens et des boutons en
CSS pur. Lorsque vous utilisez des images, vous devez prévoir l’une ou l’autre forme
d’alternance d’images pour que chaque bouton ait cet effet. Tandis qu’un bouton
CSS peut être complètement modifié en changeant la classe sur les appareils
mobiles.
13
EXEMPLE
a[class=transf_btn]{
display:block !important;
font-size:14px !important;
font-weight:bold !important;
padding:6px 4px 8px 4px !important;
line-height:18px !important;
background:#dddddd !important;
border-radius:5px !important;
margin:10px auto;width:70%;
text-align:center; color:#111 !important;
text-decoration:none;
text-shadow:#fff 1px 0 0;
}
2.11 MISE EN PAGE LIQUIDE
Comme indiqué précédemment, il existe différentes méthodes pour créer une
mise en page adaptative. La plus simple consiste à créer une mise en page liquide
qui va s’adapter à la largeur de l’appareil sur lequel elle est affichée. Cela implique
l’utilisation de pourcentages pour contrôler votre mise en page.
Cette méthode permet de réduire la longueur du code CSS puisqu’il ne s’agit plus
de calculer le nombre de pixels pour chaque résolution et de les convertir. Les deux
sont acceptables, bien sûr, et une combinaison des deux peut être pratique parfois.
Dans l’exemple ci-dessous, vous pouvez voir le code CSS utilisé pour convertir une
table d’une largeur fixe à une largeur variable.
table[class=transf_100],
img[class=transf_100]{
width:100% !important;
height:auto !important;
}
ou
*[class.transf_100{
height:auto !important;
}
En réglant la largeur sur 100%, vous vous assurez que la mise en page couvre toute
la largeur de l’appareil, quelle que soit sa résolution. La hauteur sera proportionnelle
à la largeur, puisqu’elle est réglée sur « auto ».
14
Vous devez encore déclarer la largeur de la table pour les clients sur ordinateurs
de bureau. Vous pouvez le faire en définissant l’attribut de largeur de la table. Ne
l’ajoutez pas comme un paramètre supplémentaire dans l’attribut de style, parce
que cela écrasera toujours la classe CSS dans la balise de style (à moins d’utiliser «
!important »).
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”transf_100”>
<tr>
<td align=”center”> Custom text goes here </td>
</tr>
</table>
Lorsque vous n’utilisez pas cette méthode, c’est la méthode fixe qui s’applique. Elle
peut être réalisée comme suit :
.w320 {
width: 320px !important;
}
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”w320”>
<tr>
</tr>
</table>
L’inconvénient de cette méthode est que la table va rester en 320 pixels sur les
appareils mobiles. Donc, même si l’écran est plus petit, la table reste identique.
2.12 DÉGRAISSAGE DU CONTENU
Aujourd’hui, les e-mails sont, pour la plupart, remplis d’informations sur toutes sortes
de choses différentes. Mais toutes les informations contenues dans un e-mail n’ont
pas la même importance ; certaines sont plus cruciales que d’autres. Lorsque vous
créez votre mise en page adaptative, ne perdez pas cela de vue et sélectionnez les
informations « les plus importantes » de l’e-mail. Les e-mails mobiles ont tendance
à paraître encombrés lorsqu’ils contiennent trop d’information.
Le principal objectif d’une version mobile est d’assurer qu’elle soit aussi facile
à balayer et aussi lisible que possible. Souvent, cela passe par un masquage du
contenu secondaire de votre newsletter pour conserver le focus sur ce qui est le
plus important.
15
Appliquer une simple classe de masquage de contenu sur n’importe quel paragraphe,
table ou image non prioritaire masquera automatiquement cet élément sur la
version mobile. Voici quelques éléments qui peuvent être considérés comme non
nécessaires pour la version mobile :
●● Liens vers la version web et le centre de préférences: En général vous
accordez sans doute une grande importance au lien qui permet de visualiser
l’e-mail dans un navigateur pour l’appareil mobile. Mais, en optimisant la
conception, vous vous assurez que la version envoyée soit la meilleure
possible.
●● Contenu supplémentaire dans le pied de page: Liens vers Flickr, Twitter,
Facebook, etc.
●● Mois de l’édition
●● Liens de partage social: Cela peut sembler compliqué, mais pour « aimer »
sur Facebook, l’abonné doit être connecté à Facebook sur son téléphone
(et pas seulement utiliser l’application Facebook). Il en va de même pour le
partage sur Twitter ou l’utilisation de la fonction « informer un ami ». Ces
opérations sont simples sur un ordinateur de bureau, mais sans doute trop
compliquées sur un appareil mobile.
●● ...
Vous pouvez masquer du contenu non désiré en ajoutant une simple ligne dans
votre requête média.
table[class=nok_mobile],
td[class=nok_mobile],
img[class=nok_mobile],
span[class=nok_mobile],
div[class=nok_mobile]{
display:none !important;
}
Ou, si vous voulez qu’il soit accessible pour tout type de balise, vous pouvez utiliser
ce code :
*[class].nok_mobile{
}
Dans le code HTML de l’e-mail, vous pouvez utiliser ce code CSS pour les éléments
que vous souhaitez masquer. Par exemple, si vous avez une table avec un texte
personnalisé qui ne doit pas s’afficher dans la version mobile, vous pouvez faire
comme suit :
<table border=”0” cellpadding=”0” cellspacing=”0” width=”660” class=”nok_mobile”>
<tr>
</tr>
</table>
16
2.12.1 PENSER EN TERMES DE PAQUETS
Lorsque vous dégraissez votre mise en page pour les utilisateurs mobiles, arrêtez
de penser en terme de pages et réfléchissez en termes de paquets. Considérez
chaque partie de votre e-mail comme un paquet que vous pouvez choisir d’afficher
ou non. Pour vous donner un exemple, voici ce que l’on pourrait considérer comme
des paquets :
●● En-tête
●● Navigation
●● Article principal
●● ...
La réflexion en termes de paquets vous donne plus de liberté dans la conception de
votre e-mail. Cependant vous avez également la possibilité de masquer certaines
parties au sein d’un paquet, si nécessaire. Créer une hiérarchie de contenu est un
bon exercice pour sélectionner le bon contenu à afficher dans la version adaptative.
MISE EN PAGE SOUPLE
Normalement, lorsque vous créez un e-mail, vous placez tous les éléments dans
des tables fixes et utilisez autant que possible des largeurs et des hauteurs afin
de faire en sorte que la mise en page reste la même dans les différents clients de
messagerie. Mais, dans le cas de la conception adaptative, vous voulez que les
tables puissent évoluer légèrement lorsque vous affichez l’e-mail dans un client de
messagerie mobile. Vous devrez combiner largeur/hauteur fixes tout en gardant les
tables flottantes.
L’utilisation de cette méthode facilitera le codage de votre mise en page en HTML.
Tenter de convertir une mise en page fixe en mise en page adaptative est très
difficile et, dans la plupart des cas, cela ne fonctionnera pas comme vous le
souhaitez. Optez donc pour une mise en page souple. Vous trouverez ci-après un
exemple de structure de table :
FIXE
<table width=”100%” border=”0” cellspacing=”0” celpadding=”0”>
<tr>
<td>
<table cellpadding=”0” cellspacing=”0” width=”600”>
<tr>
<td width=”600”> Webversion </td>
</tr>
<tr>
<td width=”600”>
<table cellspacing=”0” cellpadding=”0” width=”600”>
<tr>
<td width=”600”> content </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
17
SOUPLE
<table width=”100%” border=”0” cellspacing=”0” celpadding=”0”>
<tr>
<td>
<table cellpadding=”0” cellspacing=”0” width=”600” class=”transf_100”>
<tr>
<td width=”600”> Webversion </td>
</tr>
</table>
<table cellspacing=”0” cellpadding=”0” width=”600”>
<tr>
<td width=”600”> content </td>
</tr>
</table>
</td>
</tr>
</table>
2.13 PLUSIEURS COLONNES SUR UN SEUL ÉCRAN
Aujourd’hui, les e-mails sont, pour la plupart, constitués de plusieurs colonnes. Cela
peut poser des problèmes lors de la conversion de la mise en page en mise en
page adaptative. Il est toujours préférable d’avoir une seule colonne pour la version
mobile, parce que toute colonne supplémentaire réduit la taille de l’affichage.
Cela ne veut pas dire qu’il est interdit avoir plusieurs colonnes dans la version PC. Mais
vous devez les réduire à une seule colonne pour la version mobile. Heureusement,
les clients de messagerie mobiles nous permettent d’utiliser la technique des «
flottants » sans aucun problème. Cette technique permet de faire flotter une balise
de table TD à la gauche de l’écran.
Faire flotter la balise TD de droite à la gauche de l’écran donnera l’illusion de
visualiser un e-mail à une seule colonne alors qu’en fait il peut être constitué de
plusieurs colonnes. Mais ce n’est pas tout : vous devez aussi définir la largeur de
cette TD à 100% pour qu’elle prenne toute la largeur de l’écran et ne conserve pas
les pixels de la version PC.
td[class=transf_2column]{
float:left !important;
}
18
Dans le code HTML, vous aurez également une table avec une largeur fixée à 100%
et un certain nombre de TD ayant la classe « transf_2column ».
<tr>
<td class=”transf_2column” width=”330” valign=”top”></td>
</tr>
</table>
2.13.1 SUPPRESSION D’UNE BALISE D’ESPACEMENT TD
Il arrive qu’une balise TD soit utilisée entre deux TD de contenu pour créer un
espace entre les deux. Ce n’est pas conseillé dans une version mobile car cela
créera trop d’espaces vides entre les TD de contenu qui seront désormais affichées
l’une en-dessous de l’autre. Vous pouvez résoudre ce problème en supprimer les
TD d’espacement entre les TD de contenu en procédant comme suit :
STYLE
td[class=transf_2column]{
float:left !important;
}
*[class].nok_mobile{
}
HTML
<tr>
<td class=”nok_mobiles” width=”40” valign=”top”></td>
</tr>
</table>
2.14 IMAGES ADAPTATIVES
Lorsque vous travaillez avec des images sur des appareils mobiles, vous devez
garder à l’esprit que la plupart de ces appareils utiliseront une connexion du genre
3G, et pas un routeur sans fil. De ce fait, certains appareils mobiles chargeront
certains éléments de contenu plus lentement que sur un ordinateur avec une
connexion internet directe.
Les gens n’aiment pas attendre le chargement de leurs e-mails, ce qui sera le cas
si vous utilisez la même taille d’image à la fois pour la version mobile et la version
ordinateur. Pour éviter cela, vous pouvez remplacer les images par une version plus
petite lorsque l’e-mail est reçu sur un appareil mobile.
19
Il y a donc deux choses à faire : masquer l’image existante (version ordinateur) et la
remplacer avec une image plus petite. Il existe différentes méthodes pour ce faire,
mais elles ne fonctionnent pas toutes sur les différents clients de messagerie. La
méthode ci-dessous est un peu plus sûre et très rapide à mettre en oeuvre.
Il s’agit d’ajouter une règle à la balise de style (à l’intérieur de la requête média) pour
définir le contenu d’une balise d’image donnée. Cela peut se faire comme suit :
img[id:”ID_OF_IMAGE”] {
Content:url(“URL_TO_MOBILE_IMAGE”) !important;
}
Le code HTML ressemblerait à ceci :
<img border=”0” id=”ID_OF_IMAGE” src=”URL_TO_DESKTOP_IMG” alt=”” width=”660”
height=”197” />
Cette technique n’est pas seulement utilisée pour afficher une version plus petite
de l’image d’origine, mais elle peut aussi être utilisée pour afficher une image
totalement différente sur les appareils mobiles. Vous pouvez cibler encore mieux
les utilisateurs d’appareils mobiles en leur proposant des images spécifiques.
2.15 TEST DE VOTRE MISE EN PAGE ADAPTATIVE
Vous pouvez utiliser l’un des outils suivants pour tester votre mise en page mobile :
●● mattkersley.com/responsive: saisissez l’URL de votre mise en page adaptative
et l’outil vous donnera un aperçu de son rendu sur différentes tailles d’écran.
●● resizemybrowser.com: tous les développeurs ne disposent pas de tous
les différents appareils sur lesquels tester leur mise en page. Ce site
redimensionnera votre navigateur à la résolution désirée.
●● pxtoem.com: cet outil convertit vos pixels en pourcentages/ems. C’est
toujours mieux lors de l’utilisation d’une mise en page adaptative.
●● www.mrss.com/wp-content/uploads/2012/04/12NTC_Mobile_Email.pdf:
Un PDF qui donne plus d’informations sur les e-mails mobiles.
20
Sources
www.emailmonday.com/mobile-email-usage-statistics
litmus.com/blog/mobile-opens-hit-record-high-of-47
www.digitalglare.com.au/news_what-is-responsive-email_190.html
www.webdesignerdepot.com/2013/06/responsive-html-email-design/
econsultancy.com/be/blog/63427-responsive-email-design-10-great-examples
www.emailonacid.com/blog/details/C13/emailology_viewport_metatag_
rendered_unusable
litmus.com/blog/connections-2012-key-takeaway-design-for-all-inboxes
css-tricks.com/snippets/css/media-queries-for-standard-devices/
www.campaignmonitor.com/guides/mobile/
stephen.io/mediaqueries/
litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic/fullview
www.returnpath.com/resource/email-in-motion/
SELLIGENT FRANCE 20 Place des vins de France | 75012 Paris
SELLIGENT SA Avenue de Finlande 2 | 1420 Braine-l’Alleud | Belgium
www.selligent.fr
21

Modèle d`email « responsive

Transcription

Documents pareils

DEMANDE DE PRIX BusE à oBTuRATEuR

Le module EPG de Progdvb

la démarche 5s - Formation Industries Loire

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

OFFICE DE TOURISME ST TROJAN LES BAINS

bon de commande

PSY-Formation int2015:PSY-Int-Form-06

Cherche famille d`accueil à Heidelberg - Montpellier-Haus

BI Réduire la DMR-code FF5

Selligent et Optizen, pionnier du marketing interactif intègrent