Sommaire. Introduction. p. 03

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

Download "Sommaire. Introduction. p. 03"

Transcription

1

2 Sommaire Introduction 1. Usages du mobile : Ce qu il faut savoir A. Les bonnes questions du mobile B. Les spécificités du mobile C. Un projet global 2. Technique : Let s go Responsive! A. Le Design évolue... B. le code aussi C. Bonnes pratiques 3. Applications : Je fais du Responsive! A. Cas client : Amoleen Watches, création Responsive Design B. Cas client : Casino, adapter la newsletter aux plateformes mobiles C. Bonnes... et moins bonnes idées Conclusion p. 03 p. 12 p. 13 p. 18 p. 20 p. 21 p. 22 p. 27 p. 37 p. 46 p. 48 p. 51 p. 60 p. 68 2

3 3 Introduction La révolution de l ing?

4 En août 2013, le spécialiste de la data web Comscore a communiqué les résultats de son étude sur le trafic web mobile 1. Les chiffres sont édifiants : avec 18 % du trafic web global, le trafic mobile prend une place grandissante. Quel est l impact de cette évolution sur l ing? Entre nouvelles opportunités et complexité technique, quelles solutions peuvent être adoptées pour accompagner les nouveaux comportements des destinataires? Une effervescence des professionnels du secteur autour du «Responsive Design» fait de cette expression la nouvelle clé du succès des campagnes Mais avant d envisager l application du Responsive Design dans l ing, il est important d en comprendre son environnement, ses implications et ses conséquences. Qu est-ce que le Responsive Design? Comment décrypter les nouveaux comportements des Mobinautes et développer une stratégie adaptée? Quelles connaissances techniques doivent être maîtrisées? Comment appliquer les bonnes pratiques liées à cette évolution de l ing, et maximiser son ROI? C'est sans détour que nous offrons dans ce livre blanc les clés utiles à la compréhension, et à l'intégration de Responsive Design dans les projets Web-Marketing. Un objectif : contribuer au développement de stratégies contrôlées, et proposer aux destinataires de ces campagnes l'expérience la plus aboutie, qu'ils soient en situation de mobilité - ou pas! 4 1

5 Responsive Design : une évolution naturelle Lorsque l on crée un contenu destiné à être lu par un utilisateur depuis un support électronique lui-même variable se préoccuper d ajuster ce contenu pour qu il soit lisible quel que soit le matériel destinataire n est pas nouveau! C est même essentiel. Les premières générations d ordinateurs offraient déjà une interface sous forme de fenêtres redimensionnables, avec un contenu optimisé en fonction du matériel utilisé, et s adaptant automatiquement à la forme de la zone d affichage choisie par l utilisateur. L optimisation des sites Web au contexte de l Internaute, à son matériel, au logiciel de navigation qu il utilise à la version même du navigateur! - fait appel à des techniques toujours améliorées au fil des évolutions des langages informatiques. Quel webmaster n a pas eu à écrire deux fonctions JavaScript d un même contrôle de saisie, pour assurer la compatibilité de sa page Internet avec les deux navigateurs les plus répandus sur le marché? L ne déroge pas à la règle! Voilà bien des années que l on s assure que le rendu des campagnes envoyées est correct quelle que soit la solution de messagerie utilisée par les destinataires : logiciel, Webmail, navigateur pour accéder au Webmail, résolution de l écran toutes les configurations sont régulièrement testées et coder un est devenu une spécialisation à part entière. Au-delà de la qualité d affichage d un ing selon le contexte de lecture de ses destinataires, c est l évolution du comportement même de l Internaute, devenu Mobinaute, devenu nouveau consommateur, qui explique l intérêt des annonceurs et des professionnels pour ces nouvelles plateformes. Nouvelles possibilités techniques, pour répondre à de nouveaux comportements, que se cache-t-il donc vraiment derrière le «Responsive Design? «5

6 Esthétique, technique et efficace Qu est-ce que le «Responsive Design»? Littéralement, l expression signifie «design qui répond bien». C est donc la conjonction d une esthétique et d une technique. Appliquée à l ing, son objectif est de déclencher une expérience client réussie, quelle que soit la plateforme sur laquelle il consulte un . Design (n.m.) esthétique industrielle qui cherche à harmoniser les formes et les fonctions des objets Responsive (adj.) qui répond, qui est sensible à qqch Le Responsive Design s inscrit ainsi dans une certaine évolution de l ing : au fil des nouveaux supports, ou des nouvelles versions des supports existants, les techniques d adaptation des contenus deviennent plus précises et ouvrent de nouveaux horizons marketing. Mais avant d envisager la révolution dans l marketing, les fondamentaux et les codes de l classique doivent être maîtrisés, et notamment : Respecter les contraintes : limiter le poids de l , éviter commentaires HTML et JavaScript... Suivre les conseils techniques liés à l intégration : insérer des couleurs de fond... S assurer que le message soit lisible : par exemple en renseignant les attributs "alt" des balises images, certaines plateformes pouvant bloquer le téléchargement des images. 6

7 Savoir adapter le code HTML pour contourner des problèmes connus d'affichage (ici sur Outlook) Savoir optimiser un dans les conditions du blocage des images. Problématiques de compatibilité? Des lignes blanches sur un ing consulté sur Outlook, des images qui ne se téléchargent pas sur Hotmail (ci-contre) Les problématiques liées à l optimisation de la lecture sont connues, et leurs solutions aussi. Maîtriser les solutions techniques pour améliorer la qualité d affichage des s dans ce contexte est déjà un pas dans le Responsive Design. Si ces techniques permettent d adapter un même contenu en tenant compte de la variabilité des configurations pouvant exister chez les destinataires des s, d autres techniques peuvent ensuite être mises en œuvre pour optimiser ce rendu en fonction de la taille de leurs écrans. Un même , plusieurs résultats différents en fonction du contexte de lecture du destinataire, c est déjà envisager un ing "Responsive". 7

8 Votre , vous le voulez optimisé, fluide ou adaptatif? Trois méthodes pour adapter un contenu à la variété des écrans sur le marché peuvent être comparées. Chacune a ses avantages et ses inconvénients, lorsqu il est question de passer d un affichage sur PC à un affichage sur mobile. L optimisé : conçu pour l ordinateur et le mobile L optimisé est conçu pour un rendu identique sur ordinateur et sur mobile. La typologie d ing à laquelle il convient le mieux est le dialogue spécifique. Il contient peu d informations, une accroche importante et un Call to Action indispensable, aussi bien sur ordinateur que sur mobile. Quelques exemples : les s publicitaires, les s transactionnels. Quelques points ma jeurs sont à respecter : Un design en une colonne, la moins large possible, afin d être lisible en totalité sur smartphone, Les images ainsi que la police doivent être de grande taille, Les liens, comme les boutons, doivent être assez gros pour être lisibles sur smartphone. Les + : il convient à tout type de mobile. Le développement est accessible même sans compétence approfondie en HTML. Les - : principalement optimisé pour le mobile (texte large, boutons très visibles...) il ne permet pas une grande liberté de design et se prive de tout l'espace disponible sur un écran plus large. 8

9 L fluide : redimensionné de façon automatique L fluide se redimensionne de façon automatique, pour s adapter à la taille de l écran sur lequel il est consulté. La taille de chaque cellule et image est exprimée en % et non en pixels. Les + : l fluide s adapte à une grande majorité de mobiles. Il se redimensionne en fonction de la taille de l écran. Les - : il n offre pas toujours une qualité convenable pour les images. L fluide s adapte bien à tout type d ing ne contenant pas beaucoup d images, ou des images de faible résolution. 9

10 L adaptatif : un rendu optimal pour l ordinateur et le mobile L adaptatif permet d avoir une version différente sur ordinateur et sur mobile. Cette technique est possible grâce à un code HTMLbien spécifique. Les + : la possibilité d'obtenir des rendus totalement différents d'un support à l'autre, pour un même . Les - : une technique de développement complexe nécessitant davantage de temps et de compétences. Comme son nom l indique, l adaptatif s adapte à tout type d ing : newsletter, offre promotionnelle ou bien dialogue spécifique. 10

11 L' adaptatif ouvre de nouvelles perspectives. L usage du mobile explose, modifiant l approche de l ing mobile. En 2012, 13,5 millions de smartphones et 3,6 millions de tablettes ont été vendus 2, Au premier trimestre 2013, on comptait plus de 24 millions de Mobinautes en France, Plus de la moitié d entre eux utilisent l internet mobile au quotidien. La technique permet de s adapter aux contraintes des plateformes mobiles et de favoriser la fluidité et le confort de lecture. Au-delà, elle permet même d apporter une expérience propre à l utilisateur sur mobile. Il n est donc plus question d optimiser un affichage unique sur un écran d ordinateur. Avec le Responsive Design, il s agit de proposer la meilleure expérience client possible, quelle que soit la plateforme sur laquelle il reçoit l , et même si cela suppose des rendus différents sur les différentes plateformes. Si le succès d un ing est porté par le commandement «envoyer le bon message, à la bonne personne, au bon moment», le Responsive Design devient un nouveau canal d expression offrant des possibilités variées. Le Responsive Design doit être conçu dans une stratégie globale... avec sa logique et ses limites. En concevant l expérience de navigation du client, depuis l jusqu au site internet. En donnant du sens à cette évolution, sans en faire une révolution coûteuse. Un projet, des idées un budget! Comment comprendre et maîtriser ces nouveaux formats? Sur quels comportements spécifiques s'appuyer? Comment répondre à cette évolution sans perdre de vue les habitudes et le confort de chacun de ses contacts? Pensée autour de ces questions et réalisée en suivant des jalons prédéfinis, l adaptation au Responsive Design pourra respecter un budget cohérent. Il s agit ainsi d améliorer l expérience du destinataire, tout en optimisant le retour sur investissement. Responsive Design : comment poser les bons jalons? Définir la stratégie de l ing Mieux connaître les comportements de ses contacts Connaître les possibilités et limites techniques du Responsive Design Mediamétrie Mars 2013 / Baromètre du Marketing Mobile en France : 1er trimestre 2013

12 1. Usages du mobile Ce qu il faut savoir 12

13 L ing Responsive se tourne vers les nouvelles habitudes des consommateurs, en utilisant les supports mobiles comme canal de communication. Plusieurs études cernent plus précisément les habitudes du consommateur. Elles constituent un point de départ à une vraie gestion de projet autour d un ing. Pour qu une campagne soit opérationnelle et efficace, bien connaître l'équipement de ses destinataires est incontournable. Intégrer son ing en Responsive Design, c est avant tout différencier la réception sur ordinateur et la réception sur mobile. Le mobile est dans la place Les Mobinautes sont de plus en plus nombreux à consulter leurs s depuis un mobile. Litmus, référence américaine du tracking et du testing de l marketing, annonce 3 même une augmentation de 330 % de l ouverture des s sur mobile depuis Dans quelle mesure faut-il prendre en compte cette différence entre le comportement de l utilisateur sur ordinateur, et son comportement sur mobile? Jusqu à quel point peut-on et doit-on adapter un ing à ces nouvelles habitudes? A. Les bonnes questions du mobile Comment les destinataires sont-ils équipés? Disposent-ils de plusieurs appareils et comment les utilisent-ils? Leurs comportements diffèrent-ils selon le moment de la journée ou la plateforme d ouverture? Quand ont-ils le comportement le plus favorable aux objectifs fixés? Répondre à ces questions est essentiel pour apporter une valeur ajoutée auprès des destinataires d une campagne et mesurer, par exemple, l intérêt d une intégration en Responsive. Cette bonne connaissance des destinataires permet d appliquer la meilleure stratégie : envoyer le bon message aux bonnes personnes au bon moment. Des études livrent des éléments de réponses et complètent efficacement l analyse de sa base de données pour aborder le plus finement les destinataires. Cette évolution montre à quel point les mobiles sont au coeur de notre quotidien et au coeur de l ing. Depuis le 2 eme trimestre 2012, le nombre d s ouverts sur mobile dépasse même celui des s ouverts sur desktop ou sur Webmail. Cette augmentation ne devrait d ailleurs pas s arrêter là https://litmus.com/blog/ s-opened-on-mobile-start-designing-for-fingers-and-thumbs

14 Où je veux, quand je veux Le mobile, par définition transportable, bouscule les habitudes de consultation des s. Comscore et le Consumerlab d EriCSSon apportent des éléments de réponse. Le mobile plébiscité le matin, la tablette le soir. L étude «France Digital future in focus » de Comscore s est penchée sur l utilisation des devices au cours d une journée type, en suivant le schéma «métro boulot dodo». Le PC est la plateforme de prédilection de la journée de travail. La tablette est privilégiée pour un usage le soir. Le mobile, chouchou des Français dans les transports. Le Consumerlab d EriCSSon 5 donne encore plus de précisions. Les Français ont une préférence pour l utilisation du smartphone dans les transports. Le trajet du matin, notamment, est le moment le plus propice pour l utiliser. Le smartphone est également utilisé dans le lit, le matin dès le réveil ou avant le coucher

15 Les destinataires consultent donc leurs s «où ils veulent, quand ils veulent». Autre tendance forte de l usage des mobiles : l utilisation simultanée de plusieurs écrans. Le destinataire consulte son mobile et au même moment, a une toute autre activité, sur un tout autre écran. L impact de cet usage dans la qualité de réception du message envoyé est indéniable. Dans son étude «The New Multi-Screen World Study 6», Google explique que 57% du temps passé sur un mobile n est pas réservé uniquement à l'utilisation de ce dernier. En effet au même moment l écran d ordinateur et celui de la télévision sont également consultés, à hauteur de 28% du temps pour l'ordinateur, et de 29% pour la télévision. Le smartphone est le device qui accompagne le plus l utilisateur devant la télévision, l ordinateur ou la tablette

16 Objectif : impact! Autre point soulevé par Google : l activité pendant laquelle on utilise le plus un autre écran est la consultation des s (60%). Dans ces conditions, les destinataires des messages ne sont pas concentrés à 100% sur le contenu transmis. Pour être efficace, sur un Mobinaute, un doit : Être concis : le destinataire n a pas ou peu de temps à accorder au contenu, Être accrocheur : le destinataire s adonne probablement à une seconde activité au moment où il ouvre l' . Cela implique un effet spécifique tant sur la création graphique que sur le ciblage et le choix du moment de l'envoi. Dans le métro, en regardant sa série préférée ou pendant le repas, l environnement n est pas optimal pour lire, cliquer, s inscrire ou acheter. Le temps d attention pour chaque est réduit, il faut donc être impactant et aller à l essentiel pour atteindre ses objectifs. 16

17 Le mobile : avec une ou deux mains? De la même façon que chaque device a ses spécificités, chaque utilisateur a ses habitudes. C est ce que démontre une étude américaine 7 réalisée par Steven Hoober, président du groupe 4ourth Mobile. 49% des utilisateurs tiennent leur smartphone d une seule main. 67% d entre eux utilisent la main droite. 36% des utilisateurs tiennent leur mobile dans une main et utilisent l autre pour naviguer. Enfin, 15% naviguent avec leurs deux mains

18 B. Les spécificités du mobile Des spécificités en matière de hardware d abord, avec un choix pléthorique de modèles. Taille des écrans, navigation tactile, stylet, résolutions d affichage : cette multiplication des modèles de smartphones et des tablettes complexifie l optimisation des s. Les spécificités software sont également importantes : les applications s sont nombreuses sur le marché et elles interprètent chacune le code HTML à leur façon. La question est donc : s adapter oui, mais jusqu où et comment? Optimiser son pour toutes les plateformes : s adapter sans se perdre! Ne pas développer une version pour chaque taille d écran, le développement de l serait trop fastidieux. Il n est pas possible d obtenir un rendu identique au pixel près sur tous les terminaux mobiles. Privilégier deux versions : une version pour ordinateur (600px de large) et une version pour mobile (320px). Pour les tablettes, une version PC adaptée, ou légèrement modifiée sans être totalement différente s affichera très bien. Le site recense les différentes tailles d écran, ce qui peut aider à sélectionner les tailles pour lesquelles l va être adapté. En analysant plus finement la base de données et les devices dont elle est équipée, il sera plus facile de définir les résolutions prioritaires. Et donc, de choisir la technique la plus adaptée pour la mise en place de l Responsive. Parmi toutes ces possibilités d écran, comment faire le tri? 18

19 Proposer à l Internaute une navigation optimale Lire un sur son mobile peut être fastidieux. Polices trop petites, images trop grandes, liens sur lesquels on ne peut pas cliquer sans souris il est souvent difficile de se repérer et d interagir avec le contenu. Pourtant, la première impression doit être la bonne : un peu lisible et peu attractif, risque d'être supprimé immédiatement par le Mobinaute. Deux études montrent l importance de bien penser la version mobile des s et de respecter quelques règles de base pour proposer aux destinataires une navigation optimale. 41% des Européens ont tendance à refermer voire effacer un non optimisé pour leur interface mobile, selon une étude Return Path réalisée au premier trimestre ,7% des destinataires suppriment le message s il n est pas optimisé à la lecture sur mobile, selon l étude «Consumer Views of Marketing 9» de BlueHornet Study aux Etats-Unis. Seuls 3% des destinataires ouvrent le message sur plusieurs supports, selon la même étude. S il ne s affiche pas correctement, très peu auront le réflexe de revenir sur l' plus tard à partir de leur ordinateur de bureau par exemple. Comment faire bonne impression et bien penser mobile? L écran des mobiles est étroit Optimiser l espace disponible! Il existe une multitude de modèles de mobiles différents Concentrer ses efforts sur les résolutions les plus répandues! Les destinataires ne sont pas aussi impliqués que sur un ordinateur Aller à l essentiel! Un écran = une idée

20 C. Un projet global Plusieurs plateformes, mais un seul HTML! L ing Responsive est conçu autour d une seule version HTML. Enrichi avec les styles CSS, il s adapte aux plateformes mobiles - mais il ne faut pas oublier qu il peut toujours être consulté sur un écran d ordinateur. C'est donc une nouvelle version de l' ing habituel qui doit etre développée pour les deux plateformes ordinateurs et mobile, simultanément. L apparence générale de l ing en est du coup directement impactée. Jusqu à quel point peut-on bouleverser les habitudes de ses destinataires habituels? Faut-il créer un nouvel ing, ou peut-on modifier une newsletter existante? Est-il nécessaire de développer un site web Responsive ou une landing page dédiée? Avant les premières étapes du développement et de l intégration HTML, l ing est pensé dans le cadre d une stratégie globale. C est là que peut intervenir l agence Web qui accompagne cette évolution, pour offrir une valeur a joutée à la vision d ensemble. Mesurer les risques Un changement de charte graphique, par exemple, doit être mûrement réfléchi et testé auprès d'échantillons de la base de données. Il peut entraîner un manque d identification des lecteurs fidèles, et un rapport à la marque différent. Privilégier certains axes Un ing Responsive et un Call to Action efficace ne pourront pas être rentabilisés si l Internaute n est pas accueilli par un site web Responsive. Accepter les compromis Dans certains cas, il n est pas nécessaire de proposer une création graphique totalement nouvelle : l ing actuel peut être adapté au Responsive Design. Quoi qu'il en soit, des choix devront être faits, sur les informations à mettre en avant, ou à retirer. La technique : à aborder sans complexe! De quels outils faut-il disposer pour aborder le Responsive Design? La question peut se poser pour les intégrateurs spécialisés dans le développement HTML. La technique est accessible, et doit s'envisager sans complexe! Elle repose exclusivement sur la maîtrise des tableaux et la bonne gestion des styles CSS, qui permettent à l ing de s adapter aux nouvelles plateformes de lecture. 20

21 21 2. Technique Let s go Responsive!

22 Quelles sont les étapes techniques à suivre, et quels aspects demandent une attention particulière? Quelles sont les bonnes pratiques à respecter, avant et pendant l adaptation d un ing en Responsive Design? A. Le design évolue Dans sa version ordinateur comme dans sa version mobile, le Responsive Design entraîne des effets directs sur l aspect général de l ing. La composition du message doit être pensée en tenant compte de ces modifications. Entre une version sur ordinateur et une version sur mobile, plusieurs éléments peuvent évoluer grâce au Responsive Design. Il est indispensable de tenir compte de ces évolutions dans le message. La place donnée aux bandeaux et aux colonnes peut évoluer. Un basculement des blocs les uns au-dessous des autres est possible. Des images spécifiques à chaque plateforme peuvent être intégrées dans l ing. Certaines peuvent être visibles ou non selon la plateforme d ouverture. Par exemple, un lien de téléchargement vers une application spécifique au système d exploitation. Les textes et les liens peuvent être modifiés. Un lien cliquable sur une version ordinateur est transformable en bouton sur une version mobile. Ces nouvelles possibilités entraînent une réflexion nécessaire sur l ensemble du projet, notamment pour connaître et maîtriser les risques inhérents à l évolution de la newsletter. Quels sont ces risques? Comment éviter les pièges? - Respecter le cadre du projet défini, - Limiter les changements visuels de la newsletter, - S assurer que les destinataires reconnaissent la newsletter à laquelle ils sont habitués, - Tester les modifications envisagées sur un échantillon de la base de données, - Solliciter un retour de cet échantillon, par exemple par le biais d un questionnaire de satisfaction. 22

23 23 L utilisation des styles CSS dans une version Responsive Design rend possible le basculement de blocs les uns en dessous des autres.

24 24 Certains éléments peuvent être cachés pour alléger le résultat sur une plateforme mobile. C est le cas de l exemple ci-dessous, avec la disparition de l'image de fond.

25 25 Le passage en Responsive Design ouvre également la possibilité de redimensionner les images selon la plateforme d'ouverture à des dimensions adaptées à la taille de l'écran.

26 26 Des éléments (comme ici les liens «mot de passe oublié», «aide», «contactez-nous») peuvent être remplacés par un large bouton cliquable dans une version mobile.

27 B. le code aussi Cette dernière phase n est pas seulement technique mais aussi stratégique. Trois étapes la rythment : Création graphique des versions PC et mobile de façon simultanée, Intégration HTML de la version PC, Intégration des styles CSS pour la version Responsive Design. Quels sont les aspects qui vont évoluer d une version à l autre? Quelle est la somme de modifications estimée? Une fois cette étape franchie, les deux suivantes, tournées vers l intégration, se dérouleront naturellement. Etape 1 : création Le design Responsive : simplicité et efficacité La première étape peut faire l objet d une réflexion sur une simple feuille de papier, en réalisant un zoning. Objectif : ne pas laisser de côté la version PC en se concentrant sur la version mobile. Les deux versions sont imaginées simultanément, afin de bien placer les éléments et anticiper leurs déplacements. 1. Avant de commencer la création graphique, imaginer la mise en page en Responsive Design pour s assurer de la compatibilité. La réalisation d un zoning va prévoir les contraintes de mise en place d un en Responsive. 2. Afin de mieux organiser ce contenu, certains outils comme les grilles peuvent être utilisés. Le site par exemple, permet de visualiser la taille des marges, la largeur, et le nombre de colonnes maximum. On obtient alors une grille de référence pour la création de l . Le contenu ainsi organisé est plus lisible. 27

28 Etape 2 : l intégration HTML 1. Construction du HTML : penser Responsive Design Le principe n est plus d utiliser uniquement les balises <tr> et <td> pour créer des lignes ou des colonnes, mais d utiliser des tableaux qui se succèdent! Englober le code HTML dans un tableau de taille "100%" pour les messageries qui ne tiennent pas compte de la balise <body>. Ce tableau principal contient une seule balise <tr> et une seule balise <td>. La balise <td> aura l attribut align="center" afin de centrer l ensemble des tableaux qu elle contiendra elle-même. Dans la première balise <td> insérer le contenu dans des tableaux successifs. Ici, la première <table> est en violet. Elle contient deux tableaux l un à côté de l autre et la deuxième <table> est en vert. Attention : Il existe une particularité pour les tableaux contenant deux colonnes ou plus. - Au lieu de créer des colonnes avec la balise <td>, utiliser successivement des balises <table>. - Les colonnes seront alignées grâce à la propriété align= "left" qu il faut insérer dans chaque <table> concernée. 28

29 Par exemple, le code s écrira de la manière suivante pour l'affichage des trois blocs de couleurs ci-dessous : Astuce : bien visualiser les s sur Outlook À partir de trois blocs côte à côte, il est important que la somme des largeurs des tableaux soit déduite au minimum de 20px par rapport au tableau principal qui les contient. Dans l exemple ci-contre, le tableau contenant les trois blocs fait 600px. Au lieu de créer des tableaux de 200px de large chacun, la largeur est de 193px, ce qui fait un total de 579 px. 21 px ont donc été déduits. Le visuel de ce code sur ordinateur est le suivant : les blocs sont côte à côte. Sur mobile, les blocs se présenteront les uns sous les autres. Cette astuce est essentielle pour un bon rendu de l sur Outlook. Si cette règle n est pas respectée, le troisième bloc passe en dessous des deux premiers, sur la version ordinateur. 29

30 2. La balise Meta "viewport" : définir les dimensions de la page web Ajouter une balise Meta "viewport" dans la balise <head> du fichier HTML. Cette balise facultative définit les dimensions d une page web : la largeur de la page, la hauteur et même le zoom sur cette page. Elle contrôle ainsi le formatage du mobile. Astuce : quelques codes à ne pas oublier width=device-width : redimensionne le HTML sur la largeur de l écran du mobile initial-scale=1.0 : correspond à la profondeur initiale du zoom maximum-scale=5.0 : donne la possibilité de zoomer jusqu à cinq fois la valeur initiale du zoom user-scale=yes : donne la possibilité de zoomer et dézoomer sur la page 30

31 Etape 3 : Les styles CSS Maîtriser les Mediaqueries a. Commencer par intégrer un code CSS par défaut qui permet de corriger les bugs fixes 10. Le CSS utilise des sélecteurs appelés "id" et "class". Rappel : Le sélecteur "id" est utilisé pour spécifier un style pour un seul et unique élément. Le sélecteur "class" est utilisé pour spécifier un style pour un ou plusieurs éléments en même temps. Le code CSS doit être intégré dans la balise <head>, et non dans une feuille de style externe. Ce code est l équivalent du CSS reset d Eric Meyer 11 utilisé pour les sites internet et adapté pour l ing

32 b. Intégrer ensuite un code CSS spécifique pour la version mobile : les Mediaqueries. Que sont les Mediaqueries? Il s'agit «des spécifications de CSS3 qui permettent d attribuer des propriétés CSS en fonction de conditions particulières (exemple : largeur de l écran). Ces spécifications sont particulièrement connues pour leur utilité dans la conception d un Responsive design. 12» Pour la version mobile (taille d'écran inférieure à 480 pixels), utiliser les Mediaqueries suivantes only screen and (max-device-width: 480px){ } only screen and (max-width: 480px){ } Pour un affichage spécifique sur tablette, utiliser ces Mediaqueries only screen and (min-device-width: 490px) and (max-device-width: 768px){ } Entre les deux accolades, intégrer le code CSS qui permettra d adapter l ing aux mobiles. Les contraintes de certains webmails obligent a écrire le CSS d une manière inhabituelle. Habituellement le code CSS s écrit de la manière suivante : Class="header" =>.header { } id="contain" => #contain { } Pour éviter que Yahoo n affiche la version en Responsive Design par défaut, écrire le CSS de la façon suivante : Class="header" => table[class=header], td[class= header], img[class= header]{ } id="contain" => table[id=contain], td[id=contain], img[id=contain]{ } Utiliser de préférence les Mediaqueries pour les versions mobiles appliquées au smartphone. En effet, la résolution d une tablette en format portrait n est pas inférieure à 650 px de largeur qui est la taille maximum préconisée pour un ing. Préférer donc la version pc par défaut pour les tablettes. En revanche, il est également possible d utiliser les Mediaqueries pour les tablettes si on souhaite que le contenu de cette version soit différent de la version pc (par exemple : un article en moins ou un bouton différent). c. Intégrer un code CSS spécifique pour ios (Apple). Le moteur de rendu ios (Apple) redimensionne les caractères automatiquement. Pour éviter cela et respecter la taille attribuée aux polices, ajouter dans la balise <body> le style en ligne suivant : style="-webkit-text-size-adjust:none;". d. Intégrer le code CSS qui permet le redimenssionnement des cellules. Par exemple, pour redimensionner une cellule à 320px, le préciser dans l'attribut "class" à la fois dans la balise <table> et dans la balise <td>. Le code CSS sera le suivant : table[class= header], td[class= header] {width:320px!important; height:auto!important;} La mention!important force la prise en compte du style. La cellule sera alors redimensionnée à une largeur de 320px et la hauteur s adaptera automatiquement au contenu

Sommaire. Introduction. p. 03

Sommaire. Introduction. p. 03 Sommaire Introduction 1. Usages du mobile : Ce qu il faut savoir A. Les bonnes questions du mobile B. Les spécificités du mobile C. Un projet global 2. Technique : Let s go Responsive! A. Le Design évolue...

Plus en détail

Le groupe Casino choisit NP6 pour adapter sa communication email aux enjeux du Responsive Design

Le groupe Casino choisit NP6 pour adapter sa communication email aux enjeux du Responsive Design Le groupe Casino choisit NP6 pour adapter sa communication email aux enjeux du Responsive Design Client de NP6 depuis 2010, le groupe Casino, l un des leaders mondiaux du commerce alimentaire, souhaitait

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

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

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

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

Créer une Newsletter. Les étapes LE MARKETING PRAGMATIQUE DES ENTREPRISES HIGH TECH

Créer une Newsletter. Les étapes LE MARKETING PRAGMATIQUE DES ENTREPRISES HIGH TECH Créer une Newsletter Les étapes LE MARKETING PRAGMATIQUE DES ENTREPRISES HIGH TECH Les grandes étapes marketing rédactionnel web - Objectifs - Cibles - Messages - Gabarit html - Intégration web Best- practices

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

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

Dans une stratégie de fidélisation, l emailing comprend notamment l envoi d emails d informations, d offres spéciales et de newsletters.

Dans une stratégie de fidélisation, l emailing comprend notamment l envoi d emails d informations, d offres spéciales et de newsletters. L email, vers une communication électronique. Que ce soit à la maison ou au travail, presque tous les internautes utilisent l email pour communiquer. Aujourd hui encore, l email reste le seul moyen de

Plus en détail

THEME RESPONSIVE DESIGN

THEME RESPONSIVE DESIGN THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale.

Plus en détail

Optimiser les e-mails marketing Les points essentiels

Optimiser les e-mails marketing Les points essentiels Optimiser les e-mails marketing Les points essentiels Sommaire Une des clés de succès d un email marketing est la façon dont il est créé puis intégré en HTML, de telle sorte qu il puisse être routé correctement

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

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Page 1 / 1 Table des matières 1. Activation de la version mobile 3 2. Personnalisation de la version mobile : premiers pas 2.1. Apparence générale et

Plus en détail

Créer un site internet (ou des pages)

Créer un site internet (ou des pages) Ce qu il faut savoir avant de commencer Driss SABRI Une page Web est un outil de communication pour lequel on a des contraintes spécifiques 1. avant d en créer il faut se poser les questions habituelles

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

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? 9 Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? Le trafic d un site internet Le référencement naturel Les freins

Plus en détail

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0)

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0) G U I D E D U T I L I S AT I O N Publishare Plate-forme de gestion de contenu Module Article PubliShare utilise la librairie javascript (AJAX - Web.0) Sommaire Généralités Schéma de navigation Identification

Plus en détail

CREER ET DIFFUSER UNE NEWSLETTER

CREER ET DIFFUSER UNE NEWSLETTER CREER ET DIFFUSER UNE NEWSLETTER Lorraine De plus en plus d entreprises décident d éditer une newsletter. Cette publication électronique permet de valoriser ses produits et ses services, de générer des

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

STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE

STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE STANDARDS PUBLICITAIRES POUR LA PUBLICITE SUR TELEPHONE MOBILE Edités par la Mobile Marketing Association France, juin 2010 http://www.mmafrance.org La Mobile Marketing Association France, association

Plus en détail

Utilisation de Sarbacane 3 Sarbacane Software

Utilisation de Sarbacane 3 Sarbacane Software Tutorial par Anthony Da Cruz Utilisation de Sarbacane 3 Sarbacane Software Ambiance Soleil 17 Rue Royale 74000, Annecy Sommaire 1. Présentation générale 2. Guide étape par étape 3. Astuces de l éditeur

Plus en détail

S y m M a i l i n g. S o l u t i o n d e - m a i l i n g. SymMailing est un outil professionnel de création et de gestion de campagnes d emailing.

S y m M a i l i n g. S o l u t i o n d e - m a i l i n g. SymMailing est un outil professionnel de création et de gestion de campagnes d emailing. S y m M a i l i n g S o l u t i o n d e - m a i l i n g Introduction SymMailing est un outil professionnel de création et de gestion de campagnes d emailing. SymMailing intègre à la fois les outils de

Plus en détail

Création WEB avec DreamweaverMX

Création WEB avec DreamweaverMX Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans

Plus en détail

Félicitation, votre site est créé!

Félicitation, votre site est créé! Guide de démarrage e-monsite.com Félicitation, votre site est créé! Vous avez fait le plus difficile. A présent, découvrez comment administrer votre site web. 1 Comprendre l interface du manager de votre

Plus en détail

Amélie Dauvin. Responsable Projets Clients ad@np6.com

Amélie Dauvin. Responsable Projets Clients ad@np6.com Amélie Dauvin Responsable Projets Clients ad@np6.com 1 UNE SOLUTION DU GROUPE NP6 + 2 3 ILS NOUS FONT CONFIANCE 4 4 5 5 Un e-mailing impactant 1- Arrive en boîte de réception 2- Est ouvert 3- Transforme

Plus en détail

Comment utiliser votre espace association

Comment utiliser votre espace association PORTAIL ASSOCIATIF DE LA MAIRIE DE PESSAC http://portailasso.pessac.fr/ Comment utiliser votre espace association SOMMAIRE 1 ACCES A VOTRE COMPTE... 3 2 PAGE DE BIENVENUE... 4 3 RUBRIQUE «MES INFORMATIONS»...

Plus en détail

Analyse comparative de trois sites d e commerce

Analyse comparative de trois sites d e commerce Analyse comparative de trois sites d e commerce M1105 Par Benjamin ANDRE Romain LUTIC - Jérémy MONIER (A/B) I/ Analyse des sites Amazon.com 1 ère 1 ère impression bonne, site épuré, bien organisé, on reconnait

Plus en détail

Créer sa première présentation :

Créer sa première présentation : PowerPoint est une application dédiée à la conception de présentations de toutes sortes, utilisées en projection ou en affichage sur écran. Ces présentations peuvent intégrer aussi bien du texte, des diagrammes,

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

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

La Clé informatique. Formation Word XP Aide-mémoire

La Clé informatique. Formation Word XP Aide-mémoire La Clé informatique Formation Word XP Aide-mémoire Septembre 2003 Table des matières Édition et insertion de texte... 4 Manipulation d un document Exploration de la fenêtre de travail Bouton de maximisation

Plus en détail

Utiliser le site Voyages-sncf.com

Utiliser le site Voyages-sncf.com voyages-sncf.com 17 mars 2014 p 1 Utiliser le site Voyages-sncf.com Avec ce tutoriel, vous apprendrez à utiliser le site de la SNCF dédié aux trajets grandes lignes et plus particulièrement à : rechercher

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

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas.

4. Créer des compteurs, des curseurs ou des bandes déroulantes : a) Création des objets. b) Affectation à une cellule et réglage du pas. Logiciel Excel version Office 2007. Voici une liste non exhaustive de fonctions de ce logiciel en relation avec le stage. Au sommaire : 1. Créer des boutons de raccourci dans une barre d outils: a) Sélection

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

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

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

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

Fidélisation clients et optimisation des campagnes de publicité. Laurent Bizot Responsable Formation Oxatis www.oxatis.fr

Fidélisation clients et optimisation des campagnes de publicité. Laurent Bizot Responsable Formation Oxatis www.oxatis.fr Fidélisation clients et optimisation des campagnes de publicité Laurent Bizot Responsable Formation Oxatis www.oxatis.fr Sommaire Lettres d information Astuces de création d un WebBlock sans texte enrichi

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

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56)

Guide d'utilisation. De Kompozer. AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Guide d'utilisation De Kompozer AUTEUR INITIAL : S. LOIZEL Collège Saint Joseph Caudan (56) Table des matières Fiche1 : Créer, nommer et sauvegarder une page...2 Fiche2 : Modifier les couleurs et le fond

Plus en détail

1. Introduction / Identification

1. Introduction / Identification Table des matières 1. Introduction / Identification... 3 2. Création de campagne... 4 1.1. Création de campagne / nouvelle campagne...4 1.1.1. Nommage de la campagne...4 1.1.2. Gestion des contacts...4

Plus en détail

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12

Pages et sites Web. Table des matières 1. Microsoft Expression Web S'orienter vers l'accessibilité...12 Pages et sites Web Table des matières 1 Microsoft Expression Web S'orienter vers l'accessibilité...12 Espace de travail Installer le logiciel...13 Lancer/quitter Microsoft Expression Web 2...13 Découvrir

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

NOTICE INTERFACE WIFI

NOTICE INTERFACE WIFI NOTICE INTERFACE WIFI Notre interface d administration WIFI vous permet de : Personnaliser votre portail WIFI Gérer & paramétrer votre installation WIFI Tél : 02 40 71 71 21 Email : contact@va-solutions.fr

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

INFORM@TIQUE PROGRAMME PROVISOIRE. Degré 9 (1CO)

INFORM@TIQUE PROGRAMME PROVISOIRE. Degré 9 (1CO) INFORM@TIQUE PROGRAMME PROVISOIRE Degré 9 (1CO) DECS SE, mai 2011 PREAMBULE L ordinateur et les moyens multimédias en général font partie du quotidien des élèves. Ils sont utilisés comme instruments de

Plus en détail

Guide de l'utilisateur

Guide de l'utilisateur Guide de l'utilisateur Version 1.0 Mars 2013 1 / 19 Table des matières Envoyer ma première Newsletter avec Hydremail Connexion au service Téléchargement de votre base de données Création de votre segment

Plus en détail

LES ASTUCES POUR OFFICE 2010

LES ASTUCES POUR OFFICE 2010 CHAPITRE 1 LES ASTUCES POUR OFFICE 2010 Des astuces communes aux logiciels... 11 9 Microsoft Office 2010, d abord désigné sous le nom d Office 14, est la dernière version de la suite bureautique de Microsoft.

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

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

Microsoft Word barres d outils. Par : Patrick Kenny

Microsoft Word barres d outils. Par : Patrick Kenny Microsoft Word barres d outils Par : Patrick Kenny 17 novembre 2004 Table des matières Mode affichage :... 3 Barre d outils Standard :... 4-5 Barre d outils Mise en forme :... 6-7 Activation de la barre

Plus en détail

EXCEL 1 - PRISE EN MAIN

EXCEL 1 - PRISE EN MAIN EXCEL 1 - PRISE EN MAIN I - Qu est-ce qu un tableur? Excel est un logiciel permettant d élaborer des feuilles de calculs automatiques présentées la plupart du temps sur de grandes feuilles quadrillées.

Plus en détail

Formation à l administration de votre site Internet

Formation à l administration de votre site Internet Rédacteur : B2F Concept Date : 01/08/2012 Destinataire : Mairie de Drumettaz Formation à l administration de votre site Internet Introduction...2 Connexion à l administration...2 Gestion de contenu...3

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

Mairie de Bayonne. Manuel utilisateur Agenda BAB

Mairie de Bayonne. Manuel utilisateur Agenda BAB Mairie de Bayonne Manuel utilisateur Agenda BAB Contact : Laurie Dumora 05 59 46 60 17 18/05/2012 Sommaire 1 Se connecter à typo3... 3 2 Présentation de l interface «typo3»... 3 2.1 Menu principal et tableau

Plus en détail

VOLUME 1 CRÉATION D UN SITE WEB

VOLUME 1 CRÉATION D UN SITE WEB VOLUME 1 CRÉATION D UN SITE WEB Comprendre les principales étapes TABLE DES MATIÈRES PARTIE 1 - RENCONTRE DE DÉMARRAGE 03 PARTIE 2 - ANALYSE FONCTIONNELLE 03 PARTIE 3 - ARBORESCENCE 04 PARTIE 4 - MAQUETTES

Plus en détail

Mode d emploi d artishoc mobile

Mode d emploi d artishoc mobile Mode d emploi d artishoc mobile Version gratuite Version 4 Mise à jour le 05/01/2011 Ce mode d emploi est à l usage exclusif des utilisateurs de l offre mobile gratuite d artishoc mobile. Il n a pas de

Plus en détail

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Formation > Développement > Internet > Réseaux > Matériel > Maintenance Formation > Développement > Internet > Réseaux > Matériel > Maintenance SOMMAIRE 1. ACCEDER A L'INTERFACE D'ADMINISTRATION...5 1.1. Le navigateur... 5 1.2. L'interface d'administration... 5 2. METTRE

Plus en détail

Je débute avec. FastStone Image Viewer

Je débute avec. FastStone Image Viewer Je débute avec FastStone Image Viewer 1 FastStone Image Viewer Importer des photos Menus et Icônes Redresser les photos Sélectionner des photos Envoyer des photos par Email Corriger les yeux rouges 2 FastStone

Plus en détail

Tableau de bord Commerçant

Tableau de bord Commerçant Paiement sécurisé sur Internet Paiement sécurisé sur Internet Tableau de bord Commerçant Paiement sécurisé sur Internet Paiement sécurisé sur Internet au de bord Commerçant au de bord Commerçant au de

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

HPP - INITIATION TEXTEDIT (version 1.5 avec Léopard)

HPP - INITIATION TEXTEDIT (version 1.5 avec Léopard) HPP - INITIATION TEXTEDIT (version 1.5 avec Léopard) TextEdit est un logiciel de traitement de texte intégré Apple qui s'est amélioré au fur et à mesure des versions système. (version 1.4 avec Tiger) Comme

Plus en détail

Site Internet WWW.CAPSANTE93.FR

Site Internet WWW.CAPSANTE93.FR Site Internet WWW.CAPSANTE93.FR Table des matières Présentation du site internet de Cap Santé 93.... 3 Structure du site internet de Cap Santé 93.... 4 Les fonctions du site CAP Santé 93.... 5 L abonnement

Plus en détail

L. THERMIDOR / UIAD-TIC / Octobre 2015.

L. THERMIDOR / UIAD-TIC / Octobre 2015. 1 L ORDINATEUR DE BUREAU L. THERMIDOR / UIAD-TIC / Octobre 2015. DEBUTER AVEC WINDOWS 10 / Partie-1 (en 12 points) L unité centrale, (boîtier) contient tous les composants électroniques permettant à l

Plus en détail

Classilio Via 8 est l outil le plus simple et le plus facile à utiliser grâce à ses nouvelles fonctionnalités!

Classilio Via 8 est l outil le plus simple et le plus facile à utiliser grâce à ses nouvelles fonctionnalités! L équipe CLASSILIO est très fière de vous présenter sa toute nouvelle génération d outil de classe virtuelle/webconférence/webinar. En effet, Classilio Via 8 est la plus grosse évolution de notre outil

Plus en détail

matthieumarce.com - Fiches pratiques - Emailing Emailing

matthieumarce.com - Fiches pratiques - Emailing Emailing Emailing Cette fiche pratique tente de répondre aux questions suivantes : - Qu est-ce qu un emailing? - Comment réaliser une campagne emailing auprès de mes contacts? - Comment fidéliser mes clients? L

Plus en détail

eshop Guide de démarrage rapide Ouvrir et créer une e-boutique attractive en quelques clics

eshop Guide de démarrage rapide Ouvrir et créer une e-boutique attractive en quelques clics eshop Guide Ouvrir et créer une e-boutique attractive en quelques clics Sommaire 1. Connexion à l interface d administration eshop 2. Mise en page générale 3. Assistant de Création Design de votre e-boutique

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

Je me familiarise avec un logiciel de traitement de texte et avec un logiciel de présentation : Word et PowerPoint 2003

Je me familiarise avec un logiciel de traitement de texte et avec un logiciel de présentation : Word et PowerPoint 2003 Je me familiarise avec un logiciel de traitement de texte et avec un logiciel de présentation : Word et PowerPoint 2003 Cahier de formation 5 Apprendre à utiliser les TIC dans la vie de tous les jours

Plus en détail

Maîtriser le backend

Maîtriser le backend 4 Maîtriser le backend Les nouveaux utilisateurs de Magento sont souvent impressionnés par la qualité de son interface d administration, mais ils en redoutent aussi la richesse fonctionnelle. Connaître

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

Website Express Créer un site professionnel avec Orange

Website Express Créer un site professionnel avec Orange Website Express Créer un site professionnel avec Orange mars 2015 Safiétou Ndao Ndiaye Sommaire Présentation... 3 Description du service... 3 Configuration requise... 4 Consignes... 4 Pour bien démarrer...

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

MOBILE MARKETING POURQUOI DEVEZ VOUS OFFRIR LE MOBILE A VOTRE SITE

MOBILE MARKETING POURQUOI DEVEZ VOUS OFFRIR LE MOBILE A VOTRE SITE MOBILE MARKETING POURQUOI DEVEZ VOUS OFFRIR LE MOBILE A VOTRE SITE Le simple fait de pouvoir consulter votre site Web sur un mobile ne signifie pas qu il est adapté aux mobiles. Les sites pour mobile doivent

Plus en détail

Fiche n 4 Utilisation de Kompozer Table des matières

Fiche n 4 Utilisation de Kompozer Table des matières Fiche n 4 Utilisation de Kompozer Table des matières 1-Travail préparatoire...1 1.1-Contraintes sur les noms de fichier...1 1.2-Préparation du dossier de stockage...1 1.3-Barre d'outils...1 1.4-Création

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

CRO checklist. Les 6 règles d or. Que faire avant de tester? Où concentrer ses efforts? Comment aborder le testing en général?

CRO checklist. Les 6 règles d or. Que faire avant de tester? Où concentrer ses efforts? Comment aborder le testing en général? Les 6 règles d or Que faire avant de tester? Où concentrer ses efforts? Comment aborder le testing en général? Découvrez les 6 règles d or incontournables pour se lancer dans une démarche de testing :

Plus en détail

Envoyez de vraies cartes postales personnalisées

Envoyez de vraies cartes postales personnalisées La Poste, http://www.laposte.fr/, aime les nouvelles technologies et offre de plus en plus de nouveaux services en ligne afin de faciliter les démarches de ses clients. C est ainsi que la lettre recommandée

Plus en détail

Créer et gérer une newsletter Comment créer et faire vivre une lettre d information au sein de votre entreprise?

Créer et gérer une newsletter Comment créer et faire vivre une lettre d information au sein de votre entreprise? 4 Créer et gérer une newsletter Comment créer et faire vivre une lettre d information au sein de votre entreprise? à quoi sert une newsletter? Objectifs et atouts Fabriquer sa newsletter Gérer vos envois

Plus en détail

Outils et bonnes pratiques LES DIX COMMANDEMENTS DU QR CODE. Le guide de référence. by Unitag

Outils et bonnes pratiques LES DIX COMMANDEMENTS DU QR CODE. Le guide de référence. by Unitag Outils et bonnes pratiques LES DIX COMMANDEMENTS DU QR CODE Le guide de référence by Unitag Préface Une campagne QR Code doit être structurée, organisée afin de se révéler efficace. Pour cela ce guide

Plus en détail

Découverte de l ordinateur. Explorer l ordinateur et gérer ses fichiers

Découverte de l ordinateur. Explorer l ordinateur et gérer ses fichiers Découverte de l ordinateur Explorer l ordinateur et gérer ses fichiers SOMMAIRE I L ORDINATEUR ET L EXPLORATEUR... 3 1.1 : PRESENTATION ET GENERALITES... 3 1.2 : CONNAÎTRE LES PROPRIETES D UN ELEMENT...

Plus en détail

Wordpress Manuel utilisateur. Manuel utilisateur

Wordpress Manuel utilisateur. Manuel utilisateur Wordpress Manuel utilisateur Projet : WORDPRESS Auteur : Référence : Version : ALEOS2i Date de dernière modification : 13 septembre 2013 2.0 Objet : Manuel utilisateur Table des matières Connexion au BackOffice...3

Plus en détail

EasyNewsletter. 1. Création d un groupe d envoi de newsletter

EasyNewsletter. 1. Création d un groupe d envoi de newsletter EasyNewsletter Créez et envoyez des newsletters contenant textes, images, liens, et téléchargements en toute simplicité. Avec cet outil, vous pouvez également gérer vos listes de diffusion en quelques

Plus en détail

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles 46 HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles enfin deux points importants pour les sites mobiles, les nouveautés sur les formulaires ainsi que le mode hors-ligne. 2. Bonnes

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

Présentation du logiciel WINK

Présentation du logiciel WINK BIU de Montpellier Présentation du logiciel WINK 14 octobre 2010 Olivier Doré BU Droit Sciences économiques Sommaire 1/ Présentation... 3 1.1 Exemples... 3 1.2 Installer Wink en français... 3 2/Créer un

Plus en détail

Formation Gestion concours Version 2011.1.2 du 3 février 2011

Formation Gestion concours Version 2011.1.2 du 3 février 2011 Formation Gestion concours Version 2011.1.2 du 3 février 2011 PROGRAMME - Présentation du logiciel - Installation du logiciel, identification des éléments du logiciel - Récupération des licenciés de la

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Atelier «pour débuter» La Gestion des photos avec Windows 7 1 Généralités sur le jargon de l image numérique Les différents formats d image : o BMP : il s'agit

Plus en détail

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

Concevoir son premier espace de cours sur la plateforme pédagogique Moodle

Concevoir son premier espace de cours sur la plateforme pédagogique Moodle Concevoir son premier espace de cours sur la plateforme pédagogique Moodle Formation URFIST 19 mars 2013 Formatrice : Florie Brangé Description de la formation Nom : Concevoir son premier espace de cours

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

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

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

Créer un dessin avec Word

Créer un dessin avec Word Créer un dessin avec Word Introduction Introduction Deux écoles, pour la création du dessin La réalisation du dessin Dessin à partir d une image Afficher les dessins Dans le menu, choisir : Outils Option

Plus en détail

Sites et logiciels. Quel que soit le revendeur, il n y a pas que les albums, mais aussi les posters, t-shirts

Sites et logiciels. Quel que soit le revendeur, il n y a pas que les albums, mais aussi les posters, t-shirts Sites et logiciels Le but étant de préparer toute la mise en page de votre album en choisissant : - la couleur de fond ou un motif, - le placement de vos photos, - des éléments décoratifs (encadrements,

Plus en détail

Adaptation visuelle d un ordinateur sous Windows 7

Adaptation visuelle d un ordinateur sous Windows 7 Adaptation visuelle d un ordinateur Document à utilisation interne Mis à jour le 04 mars 2013 Page 1 sur 3 Table des matières Compte utilisateur déficient visuel... 3 Curseur de souris... 5 Personnalisation

Plus en détail