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

Sites web propriétaires

Sites web propriétaires Ce document est disponible à : C:\Users\pc_samba\Documents\Doc sites prop.docx Sommaire 1 Introduction... 3 2 Création du mini-site... 4 2.1 Autorisation de création... 4 2.2 Création de votre site Web...

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

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

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

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

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

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

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

Campagnes d e-mailings v.1.6

Campagnes d e-mailings v.1.6 Campagnes d e-mailings v.1.6 Sommaire Objet Page I Préparation de la campagne 3 I 1 / Le compte de messagerie pour l envoi des emails 3 I 2 / Configurer le modèle de l email 4 I 3 / La préparation des

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

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

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

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

Plus en détail

Création d un formulaire de contact Procédure

Création d un formulaire de contact Procédure Création d un formulaire de contact Procédure Description : Cette procédure explique en détail la création d un formulaire de contact sur TYPO3. Outil Procédure CMS: TYPO3 Auteur : hemmer.ch SA Extension:

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

GED MARKETING. Page 1 sur 18

GED MARKETING. Page 1 sur 18 GED MARKETING I. Présentation du produit... 2 II. Page principale de l application... 3 L arbre... 3 Le menu... 4 La fenêtre de navigation... 4 III. La recherche de documents... 4 Rechercher tous les documents...

Plus en détail

Espace de travail. Les éléments... 12 Modifications de l affichage... 17

Espace de travail. Les éléments... 12 Modifications de l affichage... 17 Espace de travail Les éléments... 12 Modifications de l affichage... 17 Chapitre 1 Espace de travail L espace de travail d InDesign CS4 s inscrit dans la lignée de tous les produits de la gamme Creative

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

Approche Design Méthodologie de conduite de sites web

Approche Design Méthodologie de conduite de sites web Approche Design Méthodologie de conduite de sites web Phase 02 Concevoir le site (C) Conception visuelle N. Vanassche www.nathalievanassche.be Phase 2 (C) : Conception visuelle Facilité d utilisation:

Plus en détail

Facebook, Google, LinkeIdn... Optez pour la double validation

Facebook, Google, LinkeIdn... Optez pour la double validation 1. Bien protéger tous ses comptes Facebook, Google, LinkeIdn... Optez pour la double validation Voilà quelques mois que le phénomène prend de l ampleur, et à juste raison. Car sur le net, on n'est jamais

Plus en détail

Comment accéder à d Internet Explorer

Comment accéder à d Internet Explorer Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application

Plus en détail

Writer. Le logiciel se présente directement avec une page vierge, prête à l emploi pour créer votre nouveau document.

Writer. Le logiciel se présente directement avec une page vierge, prête à l emploi pour créer votre nouveau document. Writer Attention : Les documents faits avec Writer ne pourront être lu qu avec Writer, sauf manipulation permettant l échange avec d autres logiciels. Le logiciel se présente directement avec une page

Plus en détail

Windows XP. Microsoft. Sommaire :

Windows XP. Microsoft. Sommaire : Microsoft Windows XP Sommaire : OUVERTURE DE SESSION...2 LE BUREAU...3 CHANGER D ENVIRRONEMENT...4 NOUVEAU RACCOURCI...7 LE MENU DEMARRER...9 LES PROGRAMMES AU DEMARRAGE...11 LA GESTION DES FICHIERS...12

Plus en détail

Zeendo est la nouvelle manière de créer unseul site Web pour n importe quel dispositif

Zeendo est la nouvelle manière de créer unseul site Web pour n importe quel dispositif Zeendo est la nouvelle manière de créer unseul site Web pour n importe quel dispositif Zeendo permet aux utilisateurs d Internet n ayant pas de connaissances en programmation de concevoir leur site Web

Plus en détail

ESPACE COLLABORATIF SHAREPOINT

ESPACE COLLABORATIF SHAREPOINT Conseil de l Europe Service des Technologies de l Information ESPACE COLLABORATIF SHAREPOINT DOSSIER D UTILISATEUR 1/33 Sommaire 1. Présentation de SharePoint... 3 1.1. Connexion... 4 2. Les listes...

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

guide d utilisation My Friends pour téléphones Android

guide d utilisation My Friends pour téléphones Android guide d utilisation My Friends pour téléphones Android Sommaire 1 introduction...1 2 experience utilisateur...2 2.1 page d accueil...2 2.2 connexion à un service...3 2.3 Facebook Chat...3 2.3.1 connexion

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

DÉCOUVRIR POWERPOINT 2010

DÉCOUVRIR POWERPOINT 2010 CHAPITRE 1 DÉCOUVRIR POWERPOINT 2010 Qu est-ce que PowerPoint?... 15 Lancer PowerPoint... 15 Découvrir l interface... 15 Recourir aux aides et aux info-bulles... 22 Modifier les principales options de

Plus en détail

Créer des styles CSS simples

Créer des styles CSS simples Créer des styles CSS simples Les styles CSS mémorisent les attributs de caractère et de paragraphe comme la police, la taille, la couleur, l alignement du texte, etc... Vous pouvez ensuite les appliquer

Plus en détail

Créer une carte de visite Avec Open Office Writer

Créer une carte de visite Avec Open Office Writer Introduction Créer une carte de visite Concurrent direct de Microsoft Office, OpenOffice.org est une suite bureautique gratuite. Aujourd hui nous voyons le programme Writer (comparable à Word), c'est-à-dire

Plus en détail

Documentation télémaintenance

Documentation télémaintenance Documentation télémaintenance Table des matières Introduction... 2 Interface web du technicien... 2 Connexion à l interface... 2 Mon compte... 3 Configuration... 4 1. Jumpoint... 4 2. Jump clients... 4

Plus en détail

Proloquo4Text Taper. Parler. Communiquer.

Proloquo4Text Taper. Parler. Communiquer. Guide de démarrage rapide VERSION 1.0 Proloquo4Text Taper. Parler. Communiquer. Par by AssistiveWare Proloquo4Text contact : support@assistiveware.com Proloquo4Text est une marque déposée d AssistiveWare

Plus en détail

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne.

Nous allons détailler dans cette documentation les fonctionnalités pour créer un objet colonne. Généralités Dans le générateur d états des logiciels Ciel pour Macintosh vous avez la possibilité de créer différents types d éléments (texte, rubrique, liste, graphiques, tableau, etc). Nous allons détailler

Plus en détail

CHAPITRE 15. Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR IMPRESSION ET PARTAGE DE PHOTOS

CHAPITRE 15. Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR IMPRESSION ET PARTAGE DE PHOTOS Utilisation d ADOBE PHOTOSHOP ELEMENTS 8 EDITOR CHAPITRE 15 IMPRESSION ET PARTAGE DE PHOTOS Impression de photos Options d impression Envoi de photos à des services de partage en ligne Partage de photos

Plus en détail

Procédure de migration pour Smartphones

Procédure de migration pour Smartphones TRIGO IT Core 2014 AD and Office 365 Migration Project Procédure de migration pour Smartphones Table des matières 1. Objectifs de ce document... 1 2. Definitions... 1 3. Paramétrer votre nouvelle messagerie

Plus en détail

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

Mettre en place sa plateforme de veille avec Netvibes

Mettre en place sa plateforme de veille avec Netvibes Mettre en place sa plateforme de veille avec Netvibes Karine Pasquier 6 mai 2011 HEG, Genève 1 Sommaire 1. Introduction... 3 1.1 Qu est-ce que c est... 3 1.2 A quoi ça sert pour la veille?... 3 1.3 Netvibes

Plus en détail

Espace Client Aide au démarrage

Espace Client Aide au démarrage Espace Client Aide au démarrage 1. A propos de l Espace Client... 2 a. Nouvelles fonctionnalités... 2 b. Reprise de vos documents... 2 c. Migration vers l Espace Client... 2 2. Accès à l Espace Client...

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

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

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

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

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

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

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

Synchroniser ses photos

Synchroniser ses photos Synchroniser Avec l'arrivée des smartphones et tablettes équipés de fonctions «appareils photos», nous réalisons de plus en plus de photos avec ceux-ci. Soucis, la mémoire de ces outils n'est pas aussi

Plus en détail

COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE

COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE - Le référencement : Qu est ce que c est? - Le nom de votre site - Le contenu de

Plus en détail

Un nouveau visage pour le fil d actualité

Un nouveau visage pour le fil d actualité Un nouveau visage pour le fil d actualité Nous annonçons aujourd hui une nouvelle version de Facebook, plus aérée et plus orientée que jamais sur les actualités des personnes qui vous sont chères. Le contenu

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

Sommaire : tutorial Powerpoint 2003

Sommaire : tutorial Powerpoint 2003 Sommaire : tutorial Powerpoint 2003 Ouvrir le logiciel PowerPoint 2003...2 Affichage «mode normal» : mode de travail...3 Ajouter un modèle de conception existant...4 Insertion d une nouvelle diapositive

Plus en détail

Comment créer un Quizz mort subite

Comment créer un Quizz mort subite Comment créer un Quizz mort subite Novembre 2014 Sommaire 3. 4. 5. 6-7. 8. 9-10. 11. 12. 13. 14. 15. 16. 17. 18. Choisissez votre type de campagne Choisissez un canal de publication Ajoutez une soft gate

Plus en détail

1 Module 1 : feuille de style, position des blocs, nombre d éléments

1 Module 1 : feuille de style, position des blocs, nombre d éléments Plugin d'habillage d'eva-web 4 Le plugin d'habillage d'eva-web permet de : adapter la position, la taille des divers éléments la composant choisir les couleurs de fonds des divers secteurs choisir la taille,

Plus en détail

Créer son adresse email

Créer son adresse email Rappel sur le courriel Une adresse courriel (ou email) est toujours composée de la manière suivante : Utilisateur@site.domaine @ : arobase touche Alt Gr + à.fr ;.com etc Qu est ce qu un Webmail? Un webmail

Plus en détail

CMS Modules Dynamiques - Manuel Utilisateur

CMS Modules Dynamiques - Manuel Utilisateur CMS Modules Dynamiques - Manuel Utilisateur 1. Introduction Le modèle CMS Le modèle des «Content Management Systems» proposé par MUM est un type particulier de sites web dynamiques, ayant comme avantage

Plus en détail

www.riaq.ca de Microsoft NIVEAU 2 Initiation à une messagerie Web en ligne.

www.riaq.ca de Microsoft NIVEAU 2 Initiation à une messagerie Web en ligne. NIVEAU Initiation à une messagerie Web en ligne. de Microsoft Windows Live Mail peut vous aider à classer tout ce qui vous intéresse au même endroit sur votre PC. Ajoutez et consultez plusieurs comptes

Plus en détail

Guide administrateur AMSP

Guide administrateur AMSP Guide administrateur AMSP Alinto Version Auteur Date Remarque V1.0 Nicolas Polin 19/10/2015 - Lyon Paris Köln Madrid Table des matières 1. Introduction... 3 2. Se connecter à Factory... 3 3. Gestion des

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

SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5

SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5 SOMMAIRE 1 INTRODUCTION 3 2 CONTACTER VOTRE SUPPORT 3 3 ESPACE DE GESTION DES CARTES 4 4 CONFIGURER UNE CARTE 5 4.1 Ajouter une carte 5 4.1.1 Détails : nom, taille, marqueur 5 4.1.2 Ajout d un marqueur

Plus en détail

Publipostage avec Microsoft WORD

Publipostage avec Microsoft WORD Septembre 2014 révision février 2015 Publipostage avec Microsoft WORD Présentation Le logiciel Elite vous offre la possibilité d effectuer des courriers automatiques avec Microsoft Word. La technique utilisée

Plus en détail

2. Réglages de base. 2.1 Général. 2.1.1 Se brancher à un réseau sans fil

2. Réglages de base. 2.1 Général. 2.1.1 Se brancher à un réseau sans fil 2. Réglages de base Cette section permet de personnaliser et de configurer votre appareil mobile. Il est possible de configurer les informations générales et vos options : réseau, notifications, luminosité,

Plus en détail

Utiliser iphoto avec icloud

Utiliser iphoto avec icloud 5 Utiliser iphoto avec icloud Dans ce chapitre Configurer le Flux de photos avec icloud...................... 84 Travailler avec le Flux de photos et iphoto...................... 87 Supprimer des photos.................................

Plus en détail

Aide Webmail. L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels.

Aide Webmail. L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels. Aide Webmail 1. Découverte de l environnement : L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels. 1. La barre d application (1) Les

Plus en détail

Présentation du site internet EcoleDirecte

Présentation du site internet EcoleDirecte Présentation du site internet EcoleDirecte La vie scolaire de votre enfant sur https://www.ecoledirecte.com Janvier 2013 SOMMAIRE 1 PRESENTATION DU SITE INTERNET ECOLEDIRECTE DEDIE AUX FAMILLES ET AUX

Plus en détail

Solutions informatiques. Mobilité avec Zimbra. Zimbra 1/20

Solutions informatiques. Mobilité avec Zimbra. Zimbra 1/20 Zimbra Mobilité Zimbra Solutions informatiques Procédure 1/20 Sommaire SOMMAIRE 1 Introduction... 3 2 Android... 3 2.1 Connaître sa version d android... 3 2.2 Android 2.1 ou antérieurs... 5 2.3 Android

Plus en détail

http://vanconingsloo.be/les-cours/modules-informatiques-et-internet/internet/gmail/libelles

http://vanconingsloo.be/les-cours/modules-informatiques-et-internet/internet/gmail/libelles Les libellés http://vanconingsloo.be/les-cours/modules-informatiques-et-internet/internet/gmail/libelles Pour ranger vos messages, Gmail utilise un procédé un peu déroutant, mais très pratique. En effet,

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

Mise en œuvre d un Site Sharepoint-V1

Mise en œuvre d un Site Sharepoint-V1 Mise en œuvre d un Site Sharepoint- MAJ 20/01/2015 Ce document décrit le paramétrage pour la mise en œuvre des fonctionnalités standard de Microsoft SharePoint 2013 NADAP et SharePoint NADAP ( Nouvelle

Plus en détail

Informations sur l utilisation du webmail du CNRS. Webmail du CNRS. Manuel Utilisateur

Informations sur l utilisation du webmail du CNRS. Webmail du CNRS. Manuel Utilisateur Informations sur l utilisation du webmail du CNRS Webmail du CNRS Manuel Utilisateur V1.0 Octobre 2012 Table des matières Généralités... 2 Navigateurs testés... 2 Internet Explorer... 2 Firefox... 3 Connexion...

Plus en détail

Au travail avec le Samsung Chat! 1 Première mise en marche. 1.1 Choix de langue. 1.2 Régler réseau sans fil Wi-Fi

Au travail avec le Samsung Chat! 1 Première mise en marche. 1.1 Choix de langue. 1.2 Régler réseau sans fil Wi-Fi Au travail avec le Samsung Chat! 1 Première mise en marche 1.1 Choix de langue Les images dans ce mode d emploi ont été prises avec un autre appareil Android. Elles resteront quand même représentatives

Plus en détail

IUT Nice-Côte d Azur Informatique appliquée 2005 2006. TP N o 4. Tableur : affichage et impression

IUT Nice-Côte d Azur Informatique appliquée 2005 2006. TP N o 4. Tableur : affichage et impression 1 IUT Nice-Côte d Azur TC-Nice 1 re année Informatique appliquée 2005 2006 TP N o 4 Tableur : affichage et impression I Options d affichage Les options concernant l affichage dans les feuilles de calcul

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

Sommaire. Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog

Sommaire. Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog Sommaire Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog Premiers pas sur Wordpress Créer un compte utilisateur Créer un blog Tableau de bord et administration Interface

Plus en détail

Personnalisation de votre ordinateur

Personnalisation de votre ordinateur Quelles sont les nouveautés dans Windows 7? Même si de nombreuses fonctionnalités sont identiques à la version précédente de Windows, vous aurez peut-être besoin d aide pour effectuer vos tâches plus rapidement.

Plus en détail

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...

Plus en détail

-Le traitement de texte. -Le courrier électronique

-Le traitement de texte. -Le courrier électronique 1/17 SOMMAIRE : -Windows -Le traitement de texte -Internet -Le courrier électronique 2/17 WINDOWS PRISE EN MAIN DE WINDOWS Lorsque vous démarrez votre ordinateur vous devez voir arriver un écran qui ressemble

Plus en détail

Utiliser Net Support School (NSS Version 10.50.14) Philippe Cailleretz Er-Tice Avion mars 2011.

Utiliser Net Support School (NSS Version 10.50.14) Philippe Cailleretz Er-Tice Avion mars 2011. Utiliser Net Support School (NSS Version 10.50.14) Philippe Cailleretz Er-Tice Avion mars 2011. Table des matières Utiliser NetSupport School (NSS) Avertissements Démarrer l exécution de NetSupport School

Plus en détail

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

Pour augmenter la taille du texte, plusieurs possibilités sont disponibles :

Pour augmenter la taille du texte, plusieurs possibilités sont disponibles : Agrandir le texte A l'ouverture de la page, l'écran contient l'ensemble de la fiche. Ceci vous permet de visualiser l'architecture de la fiche, mais peut rendre difficile la lecture du texte. Pour augmenter

Plus en détail

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie

Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Leçon N 11 Faire un Album de photo avec ALBELLI 2 ème partie Vous allez créer avec cette leçon un album de photo avec le logiciel «Albelli livre photo». 2 La préparation Le travail le plus important pour

Plus en détail

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle

Création de page Web. Microsoft Publisher. 1. Ouvrez Microsoft Publisher. 2. Cliquez sur Sites Web. 3. Choisissez un modèle Création de page Web Microsoft Publisher 1. Ouvrez Microsoft Publisher 2. Cliquez sur Sites Web 3. Choisissez un modèle 4. Personnalisez votre jeu de couleurs et les options 5. Cliquez sur «créer», lorsque

Plus en détail

Plateforme d'évaluation professionnelle. Manuel d utilisation de l interface de test d EvaLog

Plateforme d'évaluation professionnelle. Manuel d utilisation de l interface de test d EvaLog Plateforme d'évaluation professionnelle Manuel d utilisation de l interface de test d EvaLog Un produit de la société AlgoWin http://www.algowin.fr Version 1.0.1 du 18/01/2015 Table des matières Présentation

Plus en détail

Support de cours Dreamweaver CS5 les images. MC Benveniste

Support de cours Dreamweaver CS5 les images. MC Benveniste Support de cours Dreamweaver CS5 les images MC Benveniste 2013 Insertion de contenu > insertion d images image hors du dossier racine Si l image ne se trouve pas dans le site dans lequel vous travaillez

Plus en détail

Site internet du collège Comment écrire un article?

Site internet du collège Comment écrire un article? Site internet du collège Comment écrire un article? Préambule : les rôles. L administrateur du site vous a attribué des droits. L utilisateur simple peut, par exemple, simplement commenter un article ou

Plus en détail

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet Sommaire [page 4] Lancement Identification Multi Comptes [page 5] Créer un nouveau projet [page6] Editer un projet [page 7] Supprimer un projet Prévisualiser un projet Mettre un projet par défaut [page

Plus en détail

Utiliser un modèle d état prédéfini

Utiliser un modèle d état prédéfini Chapitre 8 Etats rapides Certains boutons sont désactivés, en fonction du type de cellule sélectionné. 4 Répétez les étapes 2 et 3 pour chaque bordure à paramétrer. 5 Cliquez sur le bouton OK pour valider

Plus en détail

ACCUEIL...2 LA DEMANDE DE DEVIS...11 COMPLETER UN DEVIS...12 ACCEPTER OU A REFUSER LE DEVIS...13

ACCUEIL...2 LA DEMANDE DE DEVIS...11 COMPLETER UN DEVIS...12 ACCEPTER OU A REFUSER LE DEVIS...13 ACCUEIL...2 LA COMMANDE...3 ONGLET "NATURE DES TRAVAUX"...3 ONGLET INFORMATIONS...8 ONGLET RECAPITULATIF...9 LA COMMANDE SIMPLE A VALIDER PAR LES ACHETEURS...10 LA DEMANDE DE DEVIS...11 COMPLETER UN DEVIS...12

Plus en détail

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation Interactive 2.0 Manuel d utilisation 1 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu.... 3 Ordonner les menus... 6 Destruction d un menu.... 6 Chapitre 2 : Les pages... 7 Titre de votre page....

Plus en détail

Créer un formulaire (une enquête) en ligne sur Google

Créer un formulaire (une enquête) en ligne sur Google Créer un formulaire (une enquête) en ligne sur Google Google vous permet de réaliser différents travaux en ligne, notamment des formulaires que vous pouvez ensuite envoyer via votre boîte Gmail et dont

Plus en détail

Guide d utilisation. Configurateur d échafaudage

Guide d utilisation. Configurateur d échafaudage Guide d utilisation «www.mefranvision.fr» Configurateur d échafaudage Edition du 15/06/2015 www.mefranvision.fr Page 1 sur 29 Table des matières 1. Avant propos... 4 2. Introduction... 4 3. Réglages à

Plus en détail

GUIDE D UTILISATION DU BACKOFFICE

GUIDE D UTILISATION DU BACKOFFICE GUIDE D UTILISATION DU BACKOFFICE 1. Modifier les pages du site : - Aller dans l onglet «PAGE HTML», puis «Liste des pages HTML» - Pour visualiser votre page, cliquer sur le nom écrit en vert, dans la

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

Présentation du site internet EcoleDirecte

Présentation du site internet EcoleDirecte Présentation du site internet EcoleDirecte Mise à jour : Octobre 2013 La vie scolaire de votre enfant sur https://www.ecoledirecte.com SOMMAIRE 1 PRESENTATION DU SITE INTERNET ECOLEDIRECTE DEDIE AUX FAMILLES

Plus en détail

Office 365/WIFI/Courrier. Guide pour les étudiants

Office 365/WIFI/Courrier. Guide pour les étudiants Office 365/WIFI/Courrier Guide pour les étudiants Table des matières Guide Office365... 2 Pour accéder à la suite Microsoft Office.... 5 Pour créer un nouveau document/télécharger un nouveau document...

Plus en détail

Création et utilisation de la boutique

Création et utilisation de la boutique Création et utilisation de la boutique Ce guide a pour but de présenter l organisation et le fonctionnement de l outil boutique de Sopixi, ainsi que les fonctions de base, nécessaire au bon fonctionnement

Plus en détail

1 Comment créer, administrer et participer à un sondage Doodle

1 Comment créer, administrer et participer à un sondage Doodle 1 Comment créer, administrer et participer à un sondage Doodle 1.1 Introduction Doodle est un mot anglais signifiant «gribouillage». Mais il s agit surtout d un site permettant à n importe qui possédant

Plus en détail

4. Créer un compte utilisateur

4. Créer un compte utilisateur 4. Créer un compte utilisateur 1 - Cliquez sur le menu Outils puis sur Compte. 2 - Cliquez sur l onglet «Courrier». 3 - Cliquez sur «Ajouter» puis «Courrier». 4 - Tapez votre nom. 5 - Ecrivez votre mél

Plus en détail

Présentation rapide. Intranet. Planning. Office 365. Mars 2015

Présentation rapide. Intranet. Planning. Office 365. Mars 2015 Présentation rapide Intranet Planning Office 365 Mars 2015 Informations Vous les utiliserez pour vous connecter : - A votre espace Intranet - A votre espace Office 365 - Au réseau Wifi de l IPAG - Aux

Plus en détail

Thème Prestashop : 01 Oslo v1.0

Thème Prestashop : 01 Oslo v1.0 Thème Prestashop : 01 Oslo v1.0 (Pour Prestashop 1.6.0 au supérieur) Merci d avoir choisi 01 Oslo Table des matières Installation... 3 Installation automatique pour Prestashop 1.6.x... 3 Mise à jour du

Plus en détail