CONCEPTION D S ADAPTATIFS

Transcription

1 CONCEPTION D S ADAPTATIFS

2 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 Conception adaptative (ou responsive design) Metatag ou balise meta Viewport Requête média DESCRIPTION Approche visant à concevoir des sites web ou s 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. Balise HTML utilisée pour stocker l information relative à une page mais non affichée dans le navigateur. Le «viewport», ou fenêtre d affichage, est une zone virtuelle utilisée par le moteur de rendu pour navigateur/ afin de déterminer comment le contenu est mis à l échelle et redimensionné lors du rendu initial sur l écran. 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. 2

3 Table des matières 1. Objectif 4 2. Conception de l CE QU IL NE FAUT PAS FAIRE MISE À L ÉCHELLE SKINNY DESIGN COMPRENDRE VOTRE AUDIENCE MISE EN PAGE DE L SE LIMITER À UNE SEULE COLONNE QUELQUES EXEMPLES À SUIVRE BONNES PRATIQUES MOBILES DOCTYPE FENÊTRE DE RENDU INUTILISABLE REQUÊTES MÉDIA SUPPORT DES REQUÊTES MÉDIA L IMPORTANCE DE «!IMPORTANT» RÉINITIALISATION DU CORPS DE L REDIMENSIONNEMENT DES POLICES HYPERLIENS MISE EN PAGE LIQUIDE DÉGRAISSAGE DU CONTENU PENSER EN TERMES DE PAQUETS PLUSIEURS COLONNES SUR UN SEUL ÉCRAN SUPPRESSION D UNE BALISE D ESPACEMENT TD IMAGES ADAPTATIVES TEST DE VOTRE MISE EN PAGE ADAPTATIVE 20 3

4 1. Objectif L avenir de l 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 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 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 s. En septembre 2013, Litmus annonçait que 47% de tous les s ouverts le sont sur des appareils mobiles. Lorsque l on sait que la moitié de l audience ne lit pas les s 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 qui n est pas optimisé. Pour conserver l attention du lecteur, nous devons nous adapter et modifier nos s. 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 s adaptatifs efficaces. 4

5 2. Conception de l 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 s, tels que les requêtes média, les images et mises en page fluides, et une rédaction personnalisée des s 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 s 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 s 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 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 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 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 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 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

6 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 s. 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 s. 2.2 MISE EN PAGE DE L 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 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

7 2.2.2 QUELQUES EXEMPLES À SUIVRE DOMINO S JOY THE STORE EXPEDIA 7

8 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 . 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 . 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 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 pour éviter des conflits avec Hotmail/Gmail dans la phase de test. <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//en w3.org/tr/ xhtml1/dtd/xhtml1-strict.dtd > 8

9 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 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 DE- FAUT INITIAL- SCALE MAXIMUM- SCALE 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 à envi- ron 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 «maxi- mumscale» à 1.0 désactive la fonction zoom pour cet appareil. Définir la propriété «maxi- mum-scale» commande le zoom avant et arrière maximal. Xoom Définir les propriétés «initial-scale» et «maxi- mumscale» à 1.0 désactive la fonction zoom pour cet appareil. Définir la propriété «maxi- mum-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 s 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

10 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 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 s. 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 & screen and (min-device-width : 320px) and (max-device-width : 480px) Smartphones - screen and (min-width : 321px) Smartphones - screen and (max-width : 320px) ipads Portrait & screen and (min-device-width : 768px) and (max-device-width : 1024px) ipads screen and (min-device-width : 768px) and (maxdevice-width : 1024px) and (orientation : landscape) Smartphones screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) Ordinateurs de bureau et ordinateurs screen and (min-width : 1224px) Ecrans screen and (min-width : 1824px) iphone 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

11 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 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

12 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 ( ) 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 , 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

13 2.8 RÉINITIALISATION DU CORPS DE L 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-text- size-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 sans aucun effort, et leur proposer un 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 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 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

14 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{ width:100%!important; 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

15 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 > <td align= center > Custom text goes here </td> 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 > <td align= center > Custom text goes here </td> 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 DÉGRAISSAGE DU CONTENU Aujourd hui, les s sont, pour la plupart, remplis d informations sur toutes sortes de choses différentes. Mais toutes les informations contenues dans un 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 . Les s 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

16 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 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{ display:none!important; Dans le code HTML de l , 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 > <td align= center > Custom text goes here </td> 16

17 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 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 . 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 , 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 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 > <td> <table cellpadding= 0 cellspacing= 0 width= 600 > <td width= 600 > Webversion </td> <td width= 600 > <table cellspacing= 0 cellpadding= 0 width= 600 > <td width= 600 > content </td> </td> </td> 17

18 SOUPLE <table width= 100% border= 0 cellspacing= 0 celpadding= 0 > <td> <table cellpadding= 0 cellspacing= 0 width= 600 class= transf_100 > <td width= 600 > Webversion </td> <table cellspacing= 0 cellpadding= 0 width= 600 > <td width= 600 > content </td> </td> 2.13 PLUSIEURS COLONNES SUR UN SEUL ÉCRAN Aujourd hui, les s 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 à 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]{ width:100%!important; float:left!important; 18

19 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». <table border= 0 cellpadding= 0 cellspacing= 0 width= 660 class= transf_100 > <td class= transf_2column width= 330 valign= top ></td> <td class= transf_2column width= 330 valign= top ></td> 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]{ width:100%!important; float:left!important; *[class].nok_mobile{ display:none!important; HTML <table border= 0 cellpadding= 0 cellspacing= 0 width= 660 class= transf_100 > <td class= transf_2column width= 310 valign= top ></td> <td class= nok_mobiles width= 40 valign= top ></td> <td class= transf_2column width= 310 valign= top ></td> 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 s, 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 est reçu sur un appareil mobile. 19

20 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 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. Un PDF qui donne plus d informations sur les s mobiles. 20