CONCEPTION D S ADAPTATIFS

Dimension: px
Commencer à balayer dès la page:

Download "CONCEPTION D E-MAILS 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

Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH

Design adaptatif. Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH Design adaptatif Guide de l utilisateur VIENNA LONDON MUNICH BERLIN PARIS HONG KONG MOSCOW ISTANBUL BEIJING ZURICH Contenu Définition... 3 Avantages... 3 Fonctionnalités... 5 Modèle de Design mobile...

Plus en détail

Optimisation des e-mails pour les supports mobiles. Améliorez vos taux de clics sans augmenter votre charge de travail.

Optimisation des e-mails pour les supports mobiles. Améliorez vos taux de clics sans augmenter votre charge de travail. Enterprise Email Marketing Solutions & Services 27% DES E-MAILS SONT OUVERTS SUR SUPPORTS MOBILES Optimisation des e-mails pour les supports mobiles Améliorez vos taux de clics sans augmenter votre charge

Plus en détail

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels

Plus en détail

Conception Adaptative "Responsive Web Design"

Conception Adaptative Responsive Web Design Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues RWD in the wild quelques exemples : http://incredibletypes.com/

Plus en détail

Le courriel responsive Optimiser vos campagnes pour l affichage mobile

Le courriel responsive Optimiser vos campagnes pour l affichage mobile 1 Le courriel responsive Optimiser vos campagnes pour l affichage mobile SOMMAIRE Du téléphone portable au téléphone intelligent... 2 L apparition du téléphone intelligent... 2 Le téléphone intelligent

Plus en détail

Travaux dirigés n 10

Travaux dirigés n 10 Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones

Plus en détail

RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le

Plus en détail

6. Utiliser la messagerie

6. Utiliser la messagerie "Tablette Windows 8" Sélection de Bonnes Feuilles Août 2012 6. Utiliser la messagerie D e nos jours, la messagerie est devenue un outil du quotidien. Nous recevons tous des e-mails, des messages instantanés,

Plus en détail

BONNES PRATIQUES AUDIENCE MOBILE

BONNES PRATIQUES AUDIENCE MOBILE BONNES PRATIQUES AUDIENCE MOBILE IDENTIFIEZ VOS MOBINAUTES Identifiez les mobinautes de votre base de contacts et leur équipement mobile. Combien de contacts consultent vos emails sur mobile? Quel(s) équipement(s)

Plus en détail

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS Courrielleur privilégie l usage des courriels HTML pour les envois marketing. En effet, le HTML permet d organiser graphiquement l information de manière

Plus en détail

Les nouveaux comportements... 9

Les nouveaux comportements... 9 Sommaire Du téléphone portable au smartphone... 4 L apparition du smartphone... 4 Le marché français des smartphones... 6 Le smartphone vs. l ordinateur... 7 Les familles des périphériques... 8 Les nouveaux

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

vous permet d agrandir la fenêtre Lync à la taille de votre écran.

vous permet d agrandir la fenêtre Lync à la taille de votre écran. Lync 2013 Lync 2013 est doté d un nouvel aspect qui vous aide à communiquer facilement et rapidement. Vous découvrirez également de nouvelles fonctionnalités, telles que les salles de conversation permanente,

Plus en détail

Messagerie Étudiante

Messagerie Étudiante Messagerie Étudiante Accès Web... 3 Présentation de Outlook Web... 4 Envoi de message... 6 Transfert... 7 Configurer Outlook sur ses périphériques... 9 Android... 9 Smartphone Android... 9 Tablette Android...

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE

11/02/14 SITE WEB RÉACTIFS CONTEXTE ENVIRONNEMENT NAVIGATEURS PRINCIPES GÉNÉRAUX LES POINTS DE RUPTURE 11/02/14 CONTEXTE SITE WEB RÉACTIFS S. LANQUETIN ENVIRONNEMENT Clavier (standard, mini, virtuel) Souris / doigt / stylet Rotation de l écran Performances CPU et GPU Capacité de stockage GPS Mobile/fixe

Plus en détail

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE

E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le

Plus en détail

Introduction à Expression Web 2

Introduction à Expression Web 2 Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer

Plus en détail

Migration vers Excel

Migration vers Excel Dans ce guide Microsoft Microsoft Excel 2010 ne ressemble pas à Excel 2003, aussi nous avons créé ce guide afin de vous en faciliter la prise en main. Vous trouverez dans ce guide une présentation des

Plus en détail

Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN

Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN Cas client : Mise en place d une créa d Email Responsive RESPONSIVE EMAIL DESIGN La demande : Un de nos clients nous interroge pour faire évoluer ses emails de recrutement prestataires, vers du responsive.

Plus en détail

EMAIL MOBILE GUIDE PRATIQUE

EMAIL MOBILE GUIDE PRATIQUE EMAIL MOBILE GUIDE PRATIQUE 1UN CONSTAT Le mobile est partout, y compris dans l email marketing. La révolution du mobile est en marche. Mais en tant que marketer, quelle importance accordez-vous à l engagement

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent La

Plus en détail

Freeway 7. Nouvelles fonctionnalités

Freeway 7. Nouvelles fonctionnalités ! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

Guide de configuration. Courriel Affaires

Guide de configuration. Courriel Affaires Guide de configuration Courriel Affaires Juin 2013 Table des matières Introduction 3 Fourniture du service courriel affaires à un utilisateur Ouverture de session dans la console de gestion unifiée Ajout

Plus en détail

Formation pour les parents Se familiariser avec la tablette ipad et les applications d apprentissage pour enfants

Formation pour les parents Se familiariser avec la tablette ipad et les applications d apprentissage pour enfants Formation pour les parents Se familiariser avec la tablette ipad et les applications d apprentissage pour enfants 1. Le fonctionnement de base de l ipad 2. Les applications utilitaires 3. Se connecter

Plus en détail

DÉMARRER AVEC OUTLOOK 2010

DÉMARRER AVEC OUTLOOK 2010 CHAPITRE 1 DÉMARRER AVEC OUTLOOK 2010 Lancer Outlook... 15 Quitter Outlook... 16 L Assistant Démarrage d Outlook... 17 Les barres... 19 Le Ruban... 22 Afficher ou masquer les info-bulles... 29 Définir

Plus en détail

BASEDPSY 7 (PsyTablet_7)

BASEDPSY 7 (PsyTablet_7) BASEDPSY 7 (PsyTablet_7) Logiciel de gestion des dossiers cliniques et de gestion financière pour psychothérapeutes de toutes disciplines. Base de données développée par Alain Barbeau www.basedpsy.com

Plus en détail

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti

RESPONSIVE DESIGN. Gobelins 2014.2015. Isabelle Biamonti RESPONSIVE DESIGN Gobelins 2014.2015 Isabelle Biamonti Plan Principe général Exemples Sans responsive Avec responsive Versions séparées Responsive design ou versions séparées? Comment rendre un design

Plus en détail

Utiliser l e-mail. Dans ce chapitre, vous apprendrez à :

Utiliser l e-mail. Dans ce chapitre, vous apprendrez à : 2 Utiliser l e-mail Dans ce chapitre, vous apprendrez à : Configurer votre ipad avec vos comptes de courrier électronique existants Utiliser l app Mail pour rédiger, envoyer et gérer vos e-mails Envoyer

Plus en détail

Comment utiliser FileMaker Pro avec Microsoft Office

Comment utiliser FileMaker Pro avec Microsoft Office Guide d utilisation Comment utiliser FileMaker Pro avec Microsoft Office Comment utiliser FileMaker Pro et Microsoft Office page 1 Table des matières Introduction... 3 Avant de commencer... 4 Partage de

Plus en détail

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet!

TUTORIAL. www.benevolat.org TUTORIAL. Créez en quelques minutes votre site Internet! Créez en quelques minutes votre site Internet! SOMMAIRE : Choisir une interface graphique - Nommez votre site... page 03 5 étapes de création... page 04 Les outils de création graphique... page 05 Mise

Plus en détail

Guide de base WordPress

Guide de base WordPress Guide de base WordPress Pour créer et gérer votre blogue ou site Internet 1- La création du blogue Wordpress Créez votre propre compte Wordpress.com en quelques secondes. C est gratuit. Entrez cette adresse

Plus en détail

Créer son mini-site sur la plateforme Mécatronique LR

Créer son mini-site sur la plateforme Mécatronique LR Créer son mini-site sur la plateforme Mécatronique LR 1 Sommaire Accéder à l interphase de création.....3 Préambule d ergonomie...4 Ajouter votre logo.....5 Transférer des fichiers sur le serveur.6 Remplir

Plus en détail

Introduction à HTML5, CSS3 et au responsive web design

Introduction à HTML5, CSS3 et au responsive web design 1 Introduction à HTML5, CSS3 et au responsive web design Jusqu à une période récente, les sites web étaient conçus avec une largeur fixe de l ordre de 960 pixels, en espérant que les visiteurs en tirent

Plus en détail

Normes techniques 2011

Normes techniques 2011 Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique

Plus en détail

Le Windows que vous connaissez, simplement amélioré. Petit guide rapide pour Windows 8.1 en Entreprise

Le Windows que vous connaissez, simplement amélioré. Petit guide rapide pour Windows 8.1 en Entreprise Le Windows que vous connaissez, simplement amélioré. Petit guide rapide pour Windows 8.1 en Entreprise Découvrez l écran d accueil. Votre écran d accueil concentre les informations les plus importantes

Plus en détail

Atelier du 25 juin 2012. «Les bonnes pratiques dans l e-mailing» Club

Atelier du 25 juin 2012. «Les bonnes pratiques dans l e-mailing» Club Atelier du 25 juin 2012 «Les bonnes pratiques dans l e-mailing» Agenda de l atelier Introduction et rappel des bonnes pratiques Exemple et retour d expérience Maison Tasset Partage d expérience entre les

Plus en détail

LES TABLETTES : GÉNÉRALITÉS

LES TABLETTES : GÉNÉRALITÉS LES TABLETTES : GÉNÉRALITÉS Fonctionnement Qu est-ce qu une tablette tactile? Une tablette tactile est un appareil doté d'un écran qui permet d'interagir simplement en touchant l'écran ou à l'aide d'un

Plus en détail

Guide 2015 site web classique L édition de site

Guide 2015 site web classique L édition de site Guide 2015 site web classique L édition de site L interface d édition Navigation... 03 Langue... 04 Thèmes... 05 Options... 06 Aperçu... 07 Paramètres de page... 08 Partage sur les médias sociaux... 09

Plus en détail

10 Etats rapides. Introduction

10 Etats rapides. Introduction 10 Etats rapides Introduction La génération d états récapitulatifs est l une des tâches les plus courantes et les plus élémentaires en matière de gestion de données. L éditeur d états rapides est l un

Plus en détail

Manuel d utilisation email NETexcom

Manuel d utilisation email NETexcom Manuel d utilisation email NETexcom Table des matières Vos emails avec NETexcom... 3 Présentation... 3 GroupWare... 3 WebMail emails sur internet... 4 Se connecter au Webmail... 4 Menu principal... 5 La

Plus en détail

SOMMAIRE 1- INTRODUCTION 1

SOMMAIRE 1- INTRODUCTION 1 www.c-toucom.com SOMMAIRE 1- INTRODUCTION 1 2- ACCEDER À L INTERFACE D ADMNISTRATION DU SITE INTERNET 1 2.a) Procédure de connexion 1 2.b) L interface d administration 1 3- QUITTER L INTERFACE D ADMNISTRATION

Plus en détail

Lotus Notes Traveler 8.5.2. GUIDE DE SURVIE http://traveler.gouv.nc/servlet/traveler

Lotus Notes Traveler 8.5.2. GUIDE DE SURVIE http://traveler.gouv.nc/servlet/traveler Lotus Notes Traveler 8.5.2 GUIDE DE SURVIE http://traveler.gouv.nc/servlet/traveler Le service http://traveler.gouv.nc/servlet/traveler issu de la technologie IBM «Lotus Notes Traveler» est une application

Plus en détail

Améliorer la sécurité de vos comptes Windows Live avec la vérification en 2 étapes

Améliorer la sécurité de vos comptes Windows Live avec la vérification en 2 étapes Améliorer la sécurité de vos comptes Windows Live avec la vérification en 2 étapes Pour protéger vos comptes Windows Live (Outlook, SkyDrive, Windows 8, Skype, etc) contre les keyloggers et les personnes

Plus en détail

SOMMAIRE ÉTAPES OBLIGATOIRES. Récupérer le connecteur... 3

SOMMAIRE ÉTAPES OBLIGATOIRES. Récupérer le connecteur... 3 SOMMAIRE Futur Telecom a fait évoluer son service de messagerie professionnel Futur Office. Le présent document va vous accompagner pas à pas vers la récupération de vos divers éléments de messagerie suite

Plus en détail

sommaire ÉTAPES OBLIGATOIRES Récupérer le connecteur... 3

sommaire ÉTAPES OBLIGATOIRES Récupérer le connecteur... 3 sommaire Futur Telecom a fait évoluer son service de messagerie professionnel Futur Office. Le présent document va vous accompagner pas à pas vers la récupération de vos divers éléments de messagerie suite

Plus en détail

DÉBUTER AVEC APP INVENTOR

DÉBUTER AVEC APP INVENTOR Terminale STMG SIG Année 2013-2014 DÉBUTER AVEC APP INVENTOR App Inventor est un outil de développement en ligne pour les téléphones et les tablettes sous Android. App Inventor est un OS créé par Google,

Plus en détail

PROCÉDURE D AIDE AU PARAMÉTRAGE

PROCÉDURE D AIDE AU PARAMÉTRAGE PROCÉDURE D AIDE AU PARAMÉTRAGE SOMMAIRE Futur a fait évoluer son service de messagerie professionnel Futur Office. Le présent document va vous accompagner pas à pas vers la récupération de vos divers

Plus en détail

Responsive Web design, périphériques mobiles et accessibilité

Responsive Web design, périphériques mobiles et accessibilité Responsive Web design, périphériques mobiles et accessibilité Qui suis-je? Victor Brito Situé près de Paris, dans la France non voisine Intégrateur HTML / CSS freelance Expert Accessiweb en évaluation

Plus en détail

A - Composants d un Cloud

A - Composants d un Cloud A - Composants d un Cloud Rappel pratique des principes et Composants 2015-02-05 AG - 1 Objectifs du Cloud : de faire communiquer automatiquement et instantanément entre eux différents appareils : Mac,

Plus en détail

Centres d accès communautaire Internet des Îles

Centres d accès communautaire Internet des Îles Centres d accès communautaire Internet des Îles TRAITEMENT DE TEXTE AVEC MICROSOFT WORD INTRODUCTION Les logiciels de traitement de texte permettent d écrire un texte et d y apporter quelques petites modifications,

Plus en détail

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web. Création d une carte heuristique avec Freeplane Version : 1.1.3 Barre de menus Barre d outils Barre des touches de fonctions Espace de travail Barre d icônes Éditeur de notes Freeplane est un logiciel

Plus en détail

BUREAU VIRTUEL. Utilisation de l application sur ipad. Guide utilisateur. Sciences Po Utilisation du bureau virtuel sur ipad 1 / 6

BUREAU VIRTUEL. Utilisation de l application sur ipad. Guide utilisateur. Sciences Po Utilisation du bureau virtuel sur ipad 1 / 6 BUREAU VIRTUEL Utilisation de l application sur ipad Guide utilisateur Sciences Po Utilisation du bureau virtuel sur ipad 1 / 6 Utilisation du bureau virtuel sur ipad Table des matières PREAMBULE...2 QU

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Document de présentation pour la formation de Windows XP. Dans le cadre des Mardis TIC du centre de formation générale Le Retour.

Document de présentation pour la formation de Windows XP. Dans le cadre des Mardis TIC du centre de formation générale Le Retour. Document de présentation pour la formation de Windows XP. Dans le cadre des Mardis TIC du centre de formation générale Le Retour. MARDI TIC - Windows XP TABLE DES MATIÈRES A. WINDOWS XP - UTILISATION 1.

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

Construire des sites pour l'iphone avec Freeway

Construire des sites pour l'iphone avec Freeway Construire des sites pour l'iphone avec Freeway La création de pages pour l'iphone (ou l'ipod Touch) n'est pas très différente de la création de pages pour un ordinateur. Apple a tout fait pour que cela

Plus en détail

Utilisation avancée de SugarCRM Version Professional 6.5

Utilisation avancée de SugarCRM Version Professional 6.5 Utilisation avancée de SugarCRM Version Professional 6.5 Document : Utilisation_avancee_SugarCRM_6-5.docx Page : 1 / 32 Sommaire Préambule... 3 I. Les rapports... 4 1. Les principes du générateur de rapports...

Plus en détail

Formation (X)HTML-CSS avancé

Formation (X)HTML-CSS avancé Formation (X)HTML-CSS avancé Table des matières 1 Introduction 3 1.1 La philosophie W3C.................................. 3 1.2 Du HTML au XHTML................................. 3 1.3 Et dans la pratique...................................

Plus en détail

Utilisation avancée de SugarCRM Version Professional 6.0

Utilisation avancée de SugarCRM Version Professional 6.0 Utilisation avancée de SugarCRM Version Professional 6.0 Document : Utilisation_avancee_SugarCRM_6-0.docx Page : 1 / 29 Sommaire Préambule... 3 I. Les rapports... 4 1. Les principes du générateur de rapports...

Plus en détail

Administration de votre site web

Administration de votre site web Administration de votre site web WordPress Date de révision : 11/12/2012 1 Mestres All Dev, tous droits réservés, reproduction interdite. Sommaire Connexion... 3 Gestion des articles... 4 Créer un article...

Plus en détail

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables

Plus en détail

Guide de prise en main Windows 8

Guide de prise en main Windows 8 Guide de prise en main Windows 8 Découvrez le nouveau Windows Premiers pas La barre d icônes Commandes Applications Bureau Zoom sémantique Dernière application utilisée Fermer une application Défilement

Plus en détail

BaseDPsy 6.0 (PsyTablet) Logiciel de gestion des dossiers cliniques et de gestion financière pour psychothérapeutes de toute discipline.

BaseDPsy 6.0 (PsyTablet) Logiciel de gestion des dossiers cliniques et de gestion financière pour psychothérapeutes de toute discipline. BaseDPsy 6.0 (PsyTablet) Logiciel de gestion des dossiers cliniques et de gestion financière pour psychothérapeutes de toute discipline. Base de données développée Par Alain Barbeau www.basedpsy.com alainbarbeau@basedpsy.com

Plus en détail

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES...

OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT... 6 LES TITRES ET LES SOUS-TITRES... Diffusion de l information dans Internet Guide de création de documents Word accessibles 5 novembre 2009 OBJECTIFS DE CE GUIDE... 5 QU EST-CE QU UN DOCUMENT ACCESSIBLE... 5 LA STRUCTURE D UN DOCUMENT...

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

Pack numérique. Guide d installation : comment installer et télécharger vos manuels numériques

Pack numérique. Guide d installation : comment installer et télécharger vos manuels numériques Pack numérique Guide d installation : comment installer et télécharger vos manuels numériques Si vous avez acheté un Pack numérique sur notre site, vous pourrez avoir accès sur votre ordinateur et sur

Plus en détail

L email responsive. Optimisez vos campagnes pour les smartphones Guillaume Fleureau»

L email responsive. Optimisez vos campagnes pour les smartphones Guillaume Fleureau» L email responsive Optimisez vos campagnes pour les smartphones Guillaume Fleureau» Sarbacane Software Editeur de solutions e-marketing Implantée à Lille et à Barcelone Société créée en 2001 40 collaborateurs

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

Balises pour le choix d une tablette

Balises pour le choix d une tablette Balises pour le choix d une tablette Petit guide issu de nos tests et expériences sur les différents modèles de tablettes dans le cadre du handicap. N hésitez pas à approfondir le sujet sur le site http://lestactiles.be

Plus en détail

Réalisation d une Interface Utilisateur

Réalisation d une Interface Utilisateur Réalisation d une Interface Utilisateur Pour manipuler facilement les données enregistrées dans une base de données, il est nécessaire de cacher leur implantation technique dans les tables et d offrir

Plus en détail

Un portail-cdi avec Google.

Un portail-cdi avec Google. Un portail-cdi avec Google. Le moteur de recherche Google, tout le monde connaît. Mais Google c est aussi un ensemble de services souvent gratuits tels qu une messagerie (Gmail), un agenda en ligne, la

Plus en détail

NOUVELLE INTERFACE POWERPOINT 2013

NOUVELLE INTERFACE POWERPOINT 2013 NOUVELLE INTERFACE POWERPOINT 2013 Barre de lancement rapide Onglets Groupe Fonctions Commande Lanceur boîte de dialogue(options) Ruban PROCEDURE D UTILISATION D UN MASQUE DE DIAPOSITIVE Nouveau document

Plus en détail

WINDOWS 8. Windows 8 se distingue par la présence de 2 interfaces complémentaires :

WINDOWS 8. Windows 8 se distingue par la présence de 2 interfaces complémentaires : WINDOWS 8 Windows 8 : généralités Windows 8 est la dernière version du système d'exploitation de Windows, sortie en octobre 2012. Si vous possédez un ordinateur récent, il y a de fortes chances que votre

Plus en détail

Guide de l interface utilisateur d Optymo

Guide de l interface utilisateur d Optymo Guide de l interface utilisateur d Optymo Notes de lecture : dans ce document, les textes soulignés font référence à des libellés des fenêtres ou aux libellés associés à des boutons d Optymo. Les textes

Plus en détail

Passer d un Smartphone APPLE à ANDROID

Passer d un Smartphone APPLE à ANDROID Passer d un Smartphone APPLE à ANDROID SOMMAIRE Gardez tous vos Contacts Configurez votre adresse de Messagerie Emmenez vos Photos et Musique avec vous Retrouvez toutes vos applis Comptes Contacts Si

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS

MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS MODE D EMPLOI DE CKFINDOR ET CKEDITOR AVERTISSEMENTS En renommant, déplaçant ou supprimant des images déjà insérées dans des pages, ou en renommant, déplaçant ou supprimant des sous-dossiers, les images

Plus en détail

À LA DÉCOUVERTE d Excel 2010

À LA DÉCOUVERTE d Excel 2010 Vous venez d installer Excel 2010 sur votre ordinateur et vous avez eu raison de le faire car vous disposez maintenant d un outil d une puissance redoutable. Avec cette dernière version du tableur, vous

Plus en détail

Rendu multi-support DOCUMENTATION

Rendu multi-support DOCUMENTATION DOCUMENTATION Rendu multi-support Jahia, le CMS open source de nouvelle génération apportant à vos projets la convergence applicative (web, document, social, recherche et portail) unifiée par la simplicité

Plus en détail

Passer de PowerPoint 2007 à Office 365 pour les entreprises

Passer de PowerPoint 2007 à Office 365 pour les entreprises Passer de PowerPoint 2007 à Office 365 pour les entreprises Découverte L apparence de la version de bureau de Microsoft PowerPoint 2013 a changé par rapport à celle des versions précédentes. Voici une

Plus en détail

Wonderware Mobile reporting

Wonderware Mobile reporting Mobile reporting www.wonderware.fr Introduction Aujourd hui, plus que jamais, pour les décideurs et tous les personnels mobiles dans les industries du process, de l énergie et du manufacturier notamment,

Plus en détail

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale

Institut Méditerranéen de Biodiversité et d Ecologie marine et continentale Documentation pour l administration de Pages personnelles sur www.imbe.fr Update : 05/12/2013 Les pages personnelles Ouverture d une page personnelle La demande de création d une page personnelle doit

Plus en détail

Les pré-requis pour créer un.ave pour Android

Les pré-requis pour créer un.ave pour Android Les pré-requis pour créer un.ave pour Android 1 Sommaire Spécificités d Android : conseils pour la création d un.ave... 3 Conseils génériques (également valable pour ios et le Web)... 4 Compatibilité détaillée

Plus en détail

Trucs et astuces pour exploiter au mieux votre messagerie Outlook.

Trucs et astuces pour exploiter au mieux votre messagerie Outlook. www.labo77.fr g.alex@labo77.fr Trucs et astuces pour exploiter au mieux votre messagerie Outlook. Pour consulter vos mèls ou en expédier, vous vous connectez peut-être directement sur Internet et vous

Plus en détail

Publier des données sur le Web

Publier des données sur le Web Publier des données sur le Web Introduction Microsoft Excel fournit les outils dont vous avez besoin pour créer et enregistrer votre classeur sous forme d une page web et le publier sur le Web. La commande

Plus en détail

Version 4.0. Multinet Ressources Inc. Page 1 sur 13

Version 4.0. Multinet Ressources Inc. Page 1 sur 13 Version 4.0 Page 1 sur 13 Introduction Lorsque vous obtenez l accès à Méganet, votre site est déjà construit. C est-à-dire qu il a fait l objet d une étude de style selon les couleurs de votre entreprise

Plus en détail

Photoshop / Taille et résolution de l image

Photoshop / Taille et résolution de l image 1 sur 9 03/04/2015 14:24 Photoshop / Taille et résolution de l image A propos des dimensions de pixel et de la résolution de l image imprimée Taille du fichier A propos de la résolution du moniteur A propos

Plus en détail

MANUEL D INSTALLATION

MANUEL D INSTALLATION Data Processing Commission Fast Advanced Software for Table soccer - v 1.0 Logiciel de gestion de tournoi de football de table MANUEL D INSTALLATION INSTALLATION INFORMATIQUE DE LA TABLE DE MARQUE & CONFIGURATION

Plus en détail

Manuel utilisateur. Mini-site régions. Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source.

Manuel utilisateur. Mini-site régions. Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Manuel utilisateur Mini-site régions Version 07/2012 Drupal est un système de gestion de contenu (abrégé CMS en anglais) libre et open source. Un CMS est un logiciel qui permet de gérer le contenu d un

Plus en détail

Fiche Technique. Présentation du problème. MAJ le 11/05/2011

Fiche Technique. Présentation du problème. MAJ le 11/05/2011 MAJ le 11/05/2011 Présentation du problème Généralement on constate que tous les fournisseurs d'accès à Internet ont une solution pour transférer les contacts de leur messagerie. Il s'agit en général de

Plus en détail

Mettre ses photos en ligne

Mettre ses photos en ligne Mettre ses photos en ligne Ne laissez plus vos photos de vacances végéter dans votre appareil photo numérique pendant des mois! Apprenez à les partager avec vos proches rapidement et en toute sécurité!

Plus en détail

Mon ipad et moi. There s an app for that! Document de démarrage version 1.0 Cs des Chênes. Karine St-Georges Cs des Chênes, Page 1

Mon ipad et moi. There s an app for that! Document de démarrage version 1.0 Cs des Chênes. Karine St-Georges Cs des Chênes, Page 1 Mon ipad et moi There s an app for that! Document de démarrage version 1.0 Cs des Chênes Karine St-Georges Cs des Chênes, Page 1 L appareil Allumer ou éteindre Appuyez de façon prolongée sur le bouton

Plus en détail

Hosted Exchange 2003

Hosted Exchange 2003 Hosted Exchange 2003 0 Customer Manual Hosted Exchange Sommaire 1. CREER UN NOUVEL UTILISATEUR... 2 1.1. Données d utilisateur «individuelles»... 3 1.1.1..Vérifications dans l interface web admin... 4

Plus en détail

Création d un site Internet

Création d un site Internet Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter

Plus en détail

Portail des communes Guide Référent ville

Portail des communes Guide Référent ville Portail des communes Guide Référent ville Services aux communes Introduction Vous êtes Référent pour votre commune et venez de recevoir vos identifiants de connexion à l ENT école. Ce document va vous

Plus en détail