#prezsynerg Hashtag twitter : La Junior-Entreprise du Web
Notre Junior  <ul><li>Synerg ’heTiC  en chiffres </li></ul><ul><li>2004  : Création de la JE </li></ul><ul><li>2006  : Lab...
Nos références Jeeves et vous http://jeevesetvous.com/ Générali Formation Outil interne Film Danone Communication interne
Nos références Portail des Métiers de l ’Internet www.metiers.internet.gouv.fr Beauty Executive www.beautyexecutive.com Cr...
Le marché du multimédia <ul><li>2   milliards  d’internautes dans le monde en janvier 2011 </li></ul><ul><li>47   millions...
Concevoir  et  promouvoir son site Internet Julien Gouvernet Resp. Qualité Adrien Pepin Resp. Communication Audrey Wermeis...
Sommaire Promouvoir son site Internet Concevoir et réaliser son site Internet Do it your self Adopter une démarche structu...
Concevoir et réaliser
Adopter une démarche réfléchie
Objectifs , cibles, concurrence Définir sa stratégie de conception et son équipe type <ul><li>Pourquoi ? </li></ul><ul><li...
Objectifs,  cibles,  concurrence Définir sa stratégie de conception et son équipe type <ul><li>Pour qui ? </li></ul><ul><l...
Objectifs, cibles,  concurrence Définir sa stratégie de conception et son équipe type <ul><li>La concurrence </li></ul><ul...
Objectifs, cibles, concurrence Définir sa stratégie de conception  et son équipe type <ul><li>La stratégie </li></ul><ul><...
Objectifs, cibles, concurrence Définir sa stratégie de communication et son  équipe type <ul><li>L’équipe type </li></ul><...
Concevoir : la phase de réflexion
Hiérarchisation de l’information
Arborescence , contenus <ul><li>L ’arborescence </li></ul><ul><li>L ’organisation des pages et de la navigation </li></ul>...
Arborescence , contenus
Arborescence,  contenus <ul><li>Les contenus </li></ul><ul><li>Quelles sont les natures de contenus qui serviront au mieux...
Conception ergonomique
Conception ergonomique : généralités <ul><li>Un site ergonomique ? </li></ul><ul><li>Objectif 1 : Efficacité </li></ul><ul...
Conception ergonomique Wireframes Zoning Cinématiques ( storyboard)
Conception ergonomique Zoning
Conception ergonomique Wireframe
Conception ergonomique Cinématiques
Conception ergonomique <ul><li>Quels outils ? </li></ul><ul><li>Du papier et un crayon ! </li></ul><ul><li>Powerpoint / Ke...
Conception ergonomique <ul><li>Le «Grid System» </li></ul><ul><li>Impossible de concevoir une interface sans grille de réf...
Conception ergonomique Interface de site utilisant un «Grid System» à 16 colonnes
Conception ergonomique Interface de site utilisant un «Grid System» à 16 colonnes
Spécifications fonctionnelles
Spécifications fonctionnelles <ul><li>Les spécifications fonctionnelles </li></ul><ul><li>Détailler l’expression des besoi...
Conception graphique
<ul><li>À qui plaire ? </li></ul><ul><li>Aux utilisateurs finaux </li></ul><ul><li>Convaincre votre client de la pertinenc...
<ul><li>L ’esprit créatif </li></ul><ul><li>Un webdesigner n ’est pas un artiste </li></ul><ul><li>Un benchmark graphique ...
<ul><li>Le choix des typos </li></ul><ul><li>Maximum 3 typos différentes sur un même support </li></ul><ul><li>Jouer avec ...
Référencement
Référencement naturel, référencement payant
Référencement naturel,  référencement payant <ul><li>SEO ? </li></ul><ul><li>Search Engine Optimization </li></ul><ul><li>...
Référencement naturel,  référencement payant <ul><li>SEA ? </li></ul><ul><li>Search Engine Advertising </li></ul><ul><li>C...
Réaliser : la phase concrète
<ul><li>Du fonctionnel au technique </li></ul><ul><li>Etude de faisabilité </li></ul><ul><li>Mise en place technique de l’...
<ul><li>CMS ou Framework ? </li></ul><ul><li>Avec un CMS, la phase de développement consiste principalement  à installer e...
<ul><li>Quels critères ? </li></ul><ul><li>Le plus important : couverture fonctionnelle et pérennité de la solution </li><...
Réaliser : la phase  concrète Wordpress Drupal
<ul><li>Outils de benchmark </li></ul><ul><li>Le benchmark devient quasi inutile avec l ’expérience </li></ul><ul><li>Exce...
Recetter : la phase finale
<ul><li>La recette </li></ul><ul><li>Un &quot;soupçon&quot; d'Armagnac pour le CDP </li></ul><ul><li>Reprise de tous les é...
Trac Recetter  : la phase finale
Etendre son offre, pensez mobilité
Quelques  chiffres <ul><li>Une révolution des usages </li></ul><ul><li>Des technologies maîtrisées : smartphones, réseaux ...
Déterminez votre  stratégie <ul><li>Posez-vous les bonnes questions </li></ul><ul><li>Quelle est l’histoire à raconter ? Q...
Applications  VS   Site mobile <ul><li>Les applications sont reines </li></ul><ul><li>Des dispositifs riches en média (son...
Applications   VS  Site mobile <ul><li>Site mobile </li></ul><ul><li>Idéal pour générer un contact rapide </li></ul><ul><l...
Conception : outils et best-practices <ul><li>L’ergonomie utilisateur avant tout </li></ul><ul><li>Lisibité, simplicité d’...
<ul><li>Des langages propriétaires </li></ul><ul><li>L’ Objective-C, extension du C chez Apple </li></ul><ul><li>Java C/C+...
Développement :  Applications   VS  Site mobile <ul><li>Des technologies courantes </li></ul><ul><li>Le web mobile est (re...
Les differents supports par l’ exemple
Promouvoir un site Internet
Adopter une démarche structurée et cohérente
Adopter une démarche structurée et cohérente <ul><li>Vous devez élaborer une stratégie de communication </li></ul><ul><li>...
Adopter une démarche structurée et cohérente <ul><li>Différents leviers peuvent servir votre stratégie </li></ul><ul><li>I...
Adopter une démarche structurée et cohérente <ul><li>Quelques conseils pour batir une stratégie efficace </li></ul><ul><li...
Adopter une démarche structurée et cohérente Problématique Besoins Actions Optimisations Objectifs Mesure/Analyse
Votre présence sur les médias sociaux <ul><li>Comment réagir en cas de problème ? </li></ul><ul><li>Ne pas s ’énerver et d...
Cas d’école <ul><li>Le cas Nestlé </li></ul><ul><li>Demande de retrait de la vidéo sur Youtube </li></ul><ul><li>Tentative...
Actionner les leviers
Facebook
Facebook <ul><li>Les avantages </li></ul><ul><li>+ de 600 millions d ’utilisateurs dans le monde / 20M en France </li></ul...
Facebook <ul><li>Les bonnes pratiques pour sa page fan </li></ul><ul><li>Créer une page fan plutôt qu ’un groupe </li></ul...
Facebook <ul><li>Démarquez-vous avec des opérations originales ! </li></ul>Gifts Coca Cola “Ma nuit de rêve” par Ikea Retr...
Twitter
Twitter <ul><li>Twitter, c ’est quoi ? </li></ul><ul><li>C ’est comme un article de blog sauf que  vous n’avez que 140 car...
Twitter Communiquer en temps réel <ul><li>Les avantages </li></ul><ul><li>Une progression exponentielle (460 000 nouveaux ...
Twitter Sur Twitter, l’échange prime sur la promotion individuelle <ul><li>Les bonnes pratiques sur Twitter </li></ul><ul>...
Twitter <ul><li>Quelques utilisations originales de Twitter </li></ul>Le CV Twitter “L’aventure dont je suis le héros” sur...
Plateformes photos et vidéos
Plateformes photos et vidéos <ul><li>Diffusez vos contenus multimédias </li></ul><ul><li>Utiliser les plateformes comme Fl...
Plateformes photos et vidéos <ul><li>Les bonnes pratiques </li></ul><ul><li>Personnaliser vos comptes autant que possible ...
Blog
Blog <ul><li>Du contenu de qualité, régulièrement </li></ul><ul><li>Se positionner en tant qu’ expert  sur son domaine </l...
Blog <ul><li>Les bonnes pratiques </li></ul><ul><li>Définir un planning de publication </li></ul><ul><li>Tenir un rythme d...
Newsletter
Newsletter Du trafic qualifié à moindre coût <ul><li>Les avantages </li></ul><ul><li>Facilité d ’inscription et d’utilisat...
Newsletter <ul><li>Les bonnes pratiques </li></ul><ul><li>Faliciter l’inscription à la newsletter (récompense lors de l’in...
Géolocalisation
Géolocalisation Suivre les dernières tendances et les expérimenter <ul><li>Les avantages </li></ul><ul><li>Utiliser des sy...
Géolocalisation <ul><li>Les bonnes pratiques </li></ul><ul><li>Remplissez correctement toutes les informations de vos prof...
Géolocalisation <ul><li>Êtes-vous simplement présent sur Google Maps ? </li></ul>
Mesurer et analyser
Mesurer et analyser <ul><li>Mesurer et analyser vos actions de communication </li></ul><ul><li>Fixer des KPI (Key Performa...
Pour récapituler <ul><li>Ce qu’il faut que vous gardiez à l’esprit </li></ul><ul><li>Elaborez une stratégie centrée autour...
Ressources Développement mobile http://www.appcelerator.com/ http://jquerymobile.com/   http://developer.android.com/ http...
Ressources Facebook Inside Facebook.com Mashable  (Facebook Guidebook) Involver (Personnalisation page fan) <ul><li>Grid S...
Lectures conseillées Ergonomie Web Amélie Boucher http://www.ergolab.net The Smashing Book Smashing Magazine http://www.sm...
Sources <ul><li>On les remercie beaucoup : </li></ul><ul><li>Vanksen pour le partage de toutes leurs présentations </li></...
Merci de votre attention Des questions ?
Do it yourself ! <ul><li>Regardons votre communication de plus près ! </li></ul><ul><li>Des personnes sont à votre disposi...
On reste en contact ? twitter.com/synerghetic facebook.com/synerghetic.je blog.synerghetic.net/ [email_address]
Formation : "Concevoir et promouvoir son site Internet"
Upcoming SlideShare
Loading in...5
×

Formation : "Concevoir et promouvoir son site Internet"

2,022

Published on

Créer un site Internet pour sa structure n'est plus un atout mais est devenu un passage obligé. Le tout étant de ne pas laisser ce site se fondre dans la masse. Pour cela nous vous proposons de découvrir ou redécouvrir les bonnes pratiques pour communiquer efficacement autour de leur site Internet.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,022
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Mettre à jour graphique -&gt; Chiffres ?
  • Mettre à jour ? -&gt; une libanaise à paris -&gt; Application FB -&gt; jeeves
  • Mettre à jour ?
  • Chercher des chiffres : Conseil multimédia Site Mobile Audiovisuel … Données : 37,8 % des internautes vont sur les RS soit taux de pénétration de 84,7% (décembre 2010) Facebook : 20,3 millions de comptes actifs Facebook : 1,5 millions d’entreprises sont présentes en 2010 55 min / jour pour FB (2010) Twitter : 225 000 LinkedIn : 1 million Viadeo : 4 millions.
  • Mettre à jour les noms
  • I –Créer son site internet Adopter une démarche réfléchie -&gt; Objectifs, cibles, concurrence, équipe type -Concevoir : la phase de réflexion -&gt;Graphisme, Ergonomie et hiérarchisation de l’information, Référencement -Réaliser : la phase concrète -&gt; dev, plateformes (CMS, Framework) Recetter : la phase finale -Etendre son offre, pensez mobilité -&gt; Chiffres, Stratégie, Site VS application, Supports Communication 360° ? II – Leviers de communication Adopter une démarche structurée et cohérente –&gt; ne pas être sur les réseaux, pour être sur les réseaux -&gt; Stratégie de communication globale (on/off line) - Actionner les leviers -Facebook -Twitter Newsletter Blog - Boite à outils -Flickr -… Etudier les résultats et s’adapter III – Do it your self
  • SWOT
  • On vient de voir l’utilité = capter l’internaute. Maintenant nous allons passer à la partie utilisabilité, c’est-à-dire que l’internaute reste sur le vite grace à une interface simple et bien conçue = une interface ergonomique
  • Possibilité de faire des tests par tri de cartes afin de connaitre les regroupements paraissant logiques à nos internautes. Sans ces tests, il faut réaliser des regroupements logiques. Le sens de vos regroupements est d’autant plus important du point de vue de l’utilisateur que ce dernier s’arrête très tôt dans le processus de lecture des titres de rubriques. En effet, il s’attend à trouver la catégorie à un endroit particulier car ça lui parait logique. S’il ne la trouve pas, il ne cherchera pas plus. Vous devez mettre en avant les pages ou fonctionnalités les plus recherchées par vos internautes afin de créer un parcours fluide et facile pour l’utilisateur. =&gt; Voir si présence exemple nespresso (94)
  • Après avoir organisé le parcours des internautes dans votre site web, vous devez passer à un travail sur l’organisation visuelle des éléments à l’écran. A savoir : réaliser un site web ergonomique reste du domaine de l’utopie. Mais quelques conseils sont à suivre pour prétendre son site ergonomique
  • Objectif 1 : Efficacité Un utilisateur doit réussir à faire ce qu’il veut faire. Implique les notions d’aisance d’utilisation et de facilité d’apprentissage. Critère le plus important pour satisfaire les utilisateurs des sites grand public, mais aussi séduire de nouveaux utilisateurs. Objectif 2 : Efficience L’utilisateur doit réussir à accomplir ses objectifs, mais il doit le faire rapidement et avec le moins d’erreurs possibles. Cet objectif est très important dans le cadre d’applications spécialisées ou dans des sites grand public que les utilisateurs sont amenés à visiter souvent voire très souvent, tels que Amazon, eBay… Une interface web doit tendre vers la double optimisation de l’efficacité et de l’efficience. Objectif 3 : Satisfaction des utilisateurs Un site internet est un support multi-fonctions, qui permet la réalisation de certaines tâches, mais qui intègre également des composantes esthétiques, marketing et plus largement de plaisir. Il faut donc faire en sorte que son utilisateur se plaise sur notre site, y reste un certain temps en naviguant au gré de ses rencontres. Puis revienne. Retour sur investissement, par exemple : refonte des sites d’IBM en 1999 : une semaine après le lancement de la nouvelle version, les ventes augmentaient de 400 %.
  • Rarement la totale… En fonction des types de sites Wireframes = storyboard = cinématiques
  • On fixe une résolution d’écran. Souvent 1024 x 768 px mais on tend à aller vers du 1280 × 1024. Ce document met en avant les emplacements des différents éléments dans la page. Il s’agit de découper cette dernière en autant de zones que nécessaire. Vous choisissez alors l’emplacement de votre navigation, du slide show s’il y en a un, le nombre de blocs présents dans la colonne de droite…
  • Une fois les positions des zones validées, on peut commencer à affiner les éléments. En réalité ce sont des maquettes en noir et blanc de préférence (car ce n’est pas du graphisme et il ne faut pas brider les graphistes) mais qui permettent de réfléchir aux aspects fonctionnels et ergonomiques des éléments qui rempliront les boites.
  • Pour réaliser toutes ces interfaces, l’outils incontournable est le grid system.
  • ATTENTION : lien mord Se fait en parrallele de l’ergonomie
  • Loi de Hick-Hyman : Affirme qu’il est plus facile de décider parmi un nombre réduit d’éléments. Le temps de décision croît proportionnellement aux nombres d’éléments parmi lesquels faire un choix
  • La création dépend de l’objectif du futur site : site de contenu, site pour enfants, site vitrine… Facilité la lisibilité avec de bon contraste de couleurs = on préconise d’utiliser un contraste positif, cad couleur sombre/couleur claire On peut jouer avec l’utilisation de graisses et taille de caractères : plus le caractères est grand et gras, moins il peut nécessiter de contraste
  • Un texte en majuscule est lu 13 à 20% moins vite qu’un texte en minuscule. Les majuscules sont les caractères les plus appropriés pour facilité l’activité de recherche dans une page Les minuscules sont recommandés pour la lecture des textes L’ensemble des typos est utilisable : libre de droit. Grace au CSS3 (fontface). Sur un site on lit que 30% d’une page.
  • On s’attarde sur google car c’est 90% du marché.
  • Liens entrants : Plus une page est la cible de liens en rapport avec son contenu, plus elle a de poids, plus elle remonte dans les résultats de recherche
  • Se placer dans les 3 meilleurs.
  • Compléter cette partie -&gt; Ne pas entrer en conflit avec les spécifications techniques et le choix de la solution Julien: évolution du slide
  • Compléter cette partie -&gt; Ne pas entrer en conflit avec les spécifications techniques et le choix de la solution
  • Enlever joomla Ajouter magento Ezpublish ? Apuis sur le choix de la solution technique Ajout CMS vs Framework Fait partie de la technique
  • Pertinence ici ?
  • Trouver des chiffres sur l’importance d’une bonne recette Nous recommandons : 30% de la production
  • Ajouter redmine
  • Ajouter le taux de pénétration internet mobile 2010 pour pouvoir comparer
  • Démonstration d’une marque utilisant un site web + site mobile + tablette + application
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • - Augmentation de la base de données mail -&gt; plus de cible à fidéliser
  • Plus sous forme de liens vers des outils ?
  • - Augmentation de la base de données mail -&gt; plus de cible à fidéliser
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • A revoir
  • Plus sous forme de liens vers des outils ?
  • Plus sous forme de liens vers des outils ?
  • Ajouter le site
  • Formation : "Concevoir et promouvoir son site Internet"

    1. 1. #prezsynerg Hashtag twitter : La Junior-Entreprise du Web
    2. 2. Notre Junior <ul><li>Synerg ’heTiC en chiffres </li></ul><ul><li>2004 : Création de la JE </li></ul><ul><li>2006 : Label meilleur espoir </li></ul><ul><li>156 : Études réalisées en 6 ans </li></ul><ul><li>110k€ : CA signé atteint en 2011 </li></ul><ul><li>Parmi les 30 meilleures JE en 2010 et 2011 ! </li></ul>La Junior-Entreprise d ’ Hétic , Multimédia / Management / Informatique
    3. 3. Nos références Jeeves et vous http://jeevesetvous.com/ Générali Formation Outil interne Film Danone Communication interne
    4. 4. Nos références Portail des Métiers de l ’Internet www.metiers.internet.gouv.fr Beauty Executive www.beautyexecutive.com Croix-rouge française haiti.croix-rouge.fr/
    5. 5. Le marché du multimédia <ul><li>2 milliards d’internautes dans le monde en janvier 2011 </li></ul><ul><li>47 millions d’internautes en France en décembre 2010 </li></ul><ul><li>15,5 millions de mobinautes en France </li></ul><ul><li>43,4 millions d’utilisateurs de mobile en France </li></ul><ul><li>1,5 millions d’entreprises sont présentes en 2010 </li></ul>Internet est un médium de communication et un canal de vente incontournable !
    6. 6. Concevoir et promouvoir son site Internet Julien Gouvernet Resp. Qualité Adrien Pepin Resp. Communication Audrey Wermeister Trésorière
    7. 7. Sommaire Promouvoir son site Internet Concevoir et réaliser son site Internet Do it your self Adopter une démarche structurée et cohérente Adopter une démarche réfléchie Concevoir : la phase de réflexion Réaliser : la phase concrète Recetter : la phase finale Etendre son offre, pensez mobilité Actionner les leviers Etudier les résultats et s’adapter Cas pratique
    8. 8. Concevoir et réaliser
    9. 9. Adopter une démarche réfléchie
    10. 10. Objectifs , cibles, concurrence Définir sa stratégie de conception et son équipe type <ul><li>Pourquoi ? </li></ul><ul><li>Se faire connaître ? </li></ul><ul><li>Pour faire comme tout le monde ? </li></ul><ul><li>Générer / augmenter le chiffre d ’affaires ? </li></ul><ul><li>Constituer une base de données qualifiée ? </li></ul><ul><li>Déclencher un premier contact / une demande de devis ? </li></ul>Comprendre et anticiper les attentes du client
    11. 11. Objectifs, cibles, concurrence Définir sa stratégie de conception et son équipe type <ul><li>Pour qui ? </li></ul><ul><li>Particuliers ou professionnels ? </li></ul><ul><li>Quel est leur sexe et leur tranche d’âge ? </li></ul><ul><li>Sont-ils à l ’aise sur internet ? </li></ul><ul><li>Quelles sont leurs habitudes de consommation ? </li></ul><ul><li>Création de «personas» </li></ul>Pensez à l’utilisateur final
    12. 12. Objectifs, cibles, concurrence Définir sa stratégie de conception et son équipe type <ul><li>La concurrence </li></ul><ul><li>Quels sont mes concurrents directs / indirects ? </li></ul><ul><li>Quels sont mes concurrents fonctionnels ? </li></ul><ul><li>Quels sont leurs points forts ? </li></ul><ul><li>Quelles sont leurs faiblesses / leurs erreurs ? </li></ul><ul><li>Comment faire mieux ou se différencier ? </li></ul>Se positionner face à ses concurrents
    13. 13. Objectifs, cibles, concurrence Définir sa stratégie de conception et son équipe type <ul><li>La stratégie </li></ul><ul><li>Atteindre les objectifs fixés en amont </li></ul><ul><li>Immerger l’utilisateur et faciliter la navigation </li></ul><ul><li>Faire les choix techniques en fonction du type de site : </li></ul><ul><ul><li>Un site événementiel ? </li></ul></ul><ul><ul><li>Un site à fort contenu éditorial ou E-commerce ? </li></ul></ul>Pour un site internet utile, utilisable et utilisé
    14. 14. Objectifs, cibles, concurrence Définir sa stratégie de communication et son équipe type <ul><li>L’équipe type </li></ul><ul><li>Un chef de projet </li></ul><ul><li>Un graphiste </li></ul><ul><li>Un ergonome </li></ul><ul><li>Un référenceur </li></ul><ul><li>Un community manager </li></ul>La conception de votre équipe influe sur la réussite du projet <ul><li>Un intégrateur </li></ul><ul><li>Un intégrateur spécialisé </li></ul><ul><li>Un développeur spécialisé </li></ul><ul><li>Un web marketeur </li></ul>
    15. 15. Concevoir : la phase de réflexion
    16. 16. Hiérarchisation de l’information
    17. 17. Arborescence , contenus <ul><li>L ’arborescence </li></ul><ul><li>L ’organisation des pages et de la navigation </li></ul><ul><li>Regrouper les rubriques de façon pertinente et intuitive </li></ul><ul><li>Hiérarchiser les contenus selon leur importance vis-à-vis des objectifs </li></ul>L’utilisateur doit trouver rapidement l’information
    18. 18. Arborescence , contenus
    19. 19. Arborescence, contenus <ul><li>Les contenus </li></ul><ul><li>Quelles sont les natures de contenus qui serviront au mieux la stratégie ? </li></ul><ul><li>Textes / Photos (HD) / Vidéos (HD) / Sons </li></ul><ul><li>Comment les valoriser pour les moteurs de recherche ? </li></ul>Les contenus constituent le coeur du site
    20. 20. Conception ergonomique
    21. 21. Conception ergonomique : généralités <ul><li>Un site ergonomique ? </li></ul><ul><li>Objectif 1 : Efficacité </li></ul><ul><li>Objectif 2 : Efficience </li></ul><ul><li>Objectifs 3 : Satisfaction des utilisateurs </li></ul>Penser l ’utilisation du site pour ses utilisateurs finaux
    22. 22. Conception ergonomique Wireframes Zoning Cinématiques ( storyboard)
    23. 23. Conception ergonomique Zoning
    24. 24. Conception ergonomique Wireframe
    25. 25. Conception ergonomique Cinématiques
    26. 26. Conception ergonomique <ul><li>Quels outils ? </li></ul><ul><li>Du papier et un crayon ! </li></ul><ul><li>Powerpoint / Keynote (mac) </li></ul><ul><li>Mockingbird (en ligne) </li></ul><ul><li>Balsamiq </li></ul><ul><li>Axure </li></ul><ul><li>... </li></ul>Les outils les plus simples sont les meilleurs
    27. 27. Conception ergonomique <ul><li>Le «Grid System» </li></ul><ul><li>Impossible de concevoir une interface sans grille de référence </li></ul><ul><li>Sert d’armature à la page et structure le contenu </li></ul><ul><li>Garantit la cohérence entre les différents gabarits de page </li></ul><ul><li>Il guide la lecture et confère une sensation d ’harmonie </li></ul>L’outils incontournable
    28. 28. Conception ergonomique Interface de site utilisant un «Grid System» à 16 colonnes
    29. 29. Conception ergonomique Interface de site utilisant un «Grid System» à 16 colonnes
    30. 30. Spécifications fonctionnelles
    31. 31. Spécifications fonctionnelles <ul><li>Les spécifications fonctionnelles </li></ul><ul><li>Détailler l’expression des besoins </li></ul><ul><li>Recenser toutes les fonctionnalités du site internet </li></ul><ul><li>Identifier et caractériser tous les contenus </li></ul>Des spécifications fonctionnelles complètes garantissent un suivi de production optimal
    32. 32. Conception graphique
    33. 33. <ul><li>À qui plaire ? </li></ul><ul><li>Aux utilisateurs finaux </li></ul><ul><li>Convaincre votre client de la pertinence de vos choix </li></ul><ul><li>Limiter le nombre de propositions différentes </li></ul><ul><li>Elles ne feront jamais l’unanimité </li></ul>Votre client aura le dernier mot Conception graphique
    34. 34. <ul><li>L ’esprit créatif </li></ul><ul><li>Un webdesigner n ’est pas un artiste </li></ul><ul><li>Un benchmark graphique est obligatoire </li></ul><ul><li>La création dépend de la cible du futur site </li></ul><ul><li>Faciliter la lisibilité avec de bons contrastes de couleurs </li></ul>Le graphisme se juge sur des critères objectifs Conception graphique
    35. 35. <ul><li>Le choix des typos </li></ul><ul><li>Maximum 3 typos différentes sur un même support </li></ul><ul><li>Jouer avec les tailles et les graisses (sans abus) </li></ul><ul><li>Avec ou sans empattement ? Majuscules ou minuscules ? </li></ul><ul><li>Les typos dites «web safe» : Arial, Times, Georgia, Trebuchet, Verdana... </li></ul>Un site internet n ’a pas la lisibilité d’un magazine papier Conception graphique
    36. 36. Référencement
    37. 37. Référencement naturel, référencement payant
    38. 38. Référencement naturel, référencement payant <ul><li>SEO ? </li></ul><ul><li>Search Engine Optimization </li></ul><ul><li>Se pense dès la création de l'arborescence du site et se poursuit lors de la création des contenus </li></ul><ul><li>Définir des mots-clés ou expressions-clés ordonnés par importance </li></ul><ul><li>Les liens entrants sont primordiaux </li></ul>Trouver un équilibre entre optimisation et langage courant
    39. 39. Référencement naturel, référencement payant <ul><li>SEA ? </li></ul><ul><li>Search Engine Advertising </li></ul><ul><li>Création et diffusion d’annonces publicitaires </li></ul><ul><li>Objectifs : notoriété, création de valeur, trafic événementiel </li></ul>Interdit pour les Junior-Entreprises
    40. 40. Réaliser : la phase concrète
    41. 41. <ul><li>Du fonctionnel au technique </li></ul><ul><li>Etude de faisabilité </li></ul><ul><li>Mise en place technique de l’ensemble des fonctionnalités </li></ul><ul><li>Choix de la plate-forme technique : performance / fonctionnalité </li></ul><ul><li>Penser maintenance et évolutions </li></ul>Concrétisation des besoins Réaliser : la phase concrète
    42. 42. <ul><li>CMS ou Framework ? </li></ul><ul><li>Avec un CMS, la phase de développement consiste principalement à installer et à configurer les différents modules </li></ul><ul><li>Avec un Framework, le développement spécifique est facilité par l ’emploi de librairies pré-existantes </li></ul><ul><li>Le «from scratch» est à proscrire, même pour des projets simples (sécurité, maintenance, pérennité...) </li></ul>Différents chemins face au besoin Réaliser : la phase concrète
    43. 43. <ul><li>Quels critères ? </li></ul><ul><li>Le plus important : couverture fonctionnelle et pérennité de la solution </li></ul><ul><li>Facilité de mise à jour ou de reprise par un autre prestataire </li></ul><ul><li>Présence et efficacité de la communauté ou de l ’entreprise </li></ul>Du benchmark en veux-tu ? En voilà ! Réaliser : la phase concrète
    44. 44. Réaliser : la phase concrète Wordpress Drupal
    45. 45. <ul><li>Outils de benchmark </li></ul><ul><li>Le benchmark devient quasi inutile avec l ’expérience </li></ul><ul><li>Excel est votre ami </li></ul><ul><li>alpha.benchmarkr.com : générateur et facilitateur de benchmark </li></ul>Des outils et de la logique Réaliser : la phase concrète
    46. 46. Recetter : la phase finale
    47. 47. <ul><li>La recette </li></ul><ul><li>Un &quot;soupçon&quot; d'Armagnac pour le CDP </li></ul><ul><li>Reprise de tous les éléments listés dans les spécifications </li></ul><ul><li>Vérifications du respect des différents standards </li></ul><ul><li>Report et résolution des différents bugs </li></ul><ul><li>Des outils existent pour organiser le reporting des bugs </li></ul><ul><li>Le client doit s’investir dans la phase de recette </li></ul>Prévoir la marge nécessaire aux corrections éventuelles Recetter : la phase finale
    48. 48. Trac Recetter : la phase finale
    49. 49. Etendre son offre, pensez mobilité
    50. 50. Quelques chiffres <ul><li>Une révolution des usages </li></ul><ul><li>Des technologies maîtrisées : smartphones, réseaux sociaux , 3G, Wifi </li></ul><ul><li>Les forfaits Internet explosent : 19,4 millions d’actifs 3G en France en 2010 </li></ul><ul><li>Plus de 3 milliards d’applications téléchargées sur l’App Store </li></ul><ul><li>Taux de pénétration de l’Internet mobile en France en 2014 : 41% </li></ul>300% de croissance prévue sur 2 ans sur le marché des applications
    51. 51. Déterminez votre stratégie <ul><li>Posez-vous les bonnes questions </li></ul><ul><li>Quelle est l’histoire à raconter ? Quel message à faire passer ? </li></ul><ul><li>Quelle expérience offrir ? Quels objectifs ? </li></ul><ul><li>A qui s’adresse-t-on ? </li></ul><ul><li>Quelle est la finalité de la prise de parole ? </li></ul>Du mobile oui, mais pas n’importe comment
    52. 52. Applications VS Site mobile <ul><li>Les applications sont reines </li></ul><ul><li>Des dispositifs riches en média (son, vidéo, GPS, SMS …) </li></ul><ul><li>Des opérations pérennes pour un usage quotidien (alertes…) </li></ul><ul><li>Des accès sécurisés et/ou personnalisés </li></ul><ul><li>De nombreuses contraintes à prendre en compte (compatibilité, temps de développement, validations des Stores…) </li></ul>Une expérience utilisateur incomparable
    53. 53. Applications VS Site mobile <ul><li>Site mobile </li></ul><ul><li>Idéal pour générer un contact rapide </li></ul><ul><li>Une démocratisation des technologies (HTML 5 / JavaScript) </li></ul><ul><li>U n accès direct sans passer par un Store = plus grande liberté </li></ul><ul><li>L’utilisation des fonctionnalités des terminaux se simplifie </li></ul><ul><li>Une compatibilité du parc mobile bien plus importante </li></ul>L’information partout et pour le plus grand nombre
    54. 54. Conception : outils et best-practices <ul><li>L’ergonomie utilisateur avant tout </li></ul><ul><li>Lisibité, simplicité d’accès et interface tactiles </li></ul><ul><li>Règles de bonne conduite dictées par le W3C </li></ul><ul><li>Guidelines Apple et Android disponibles en ligne </li></ul><ul><li>Simulation en local pour vérifier la cohérence de l’ensemble </li></ul>La version mobile n’est pas une miniature du site Internet
    55. 55. <ul><li>Des langages propriétaires </li></ul><ul><li>L’ Objective-C, extension du C chez Apple </li></ul><ul><li>Java C/C++ ou encore Go pour Android </li></ul><ul><li>Des plateformes de développement telles que Titanium permettent le développement multi-plateformes (en JS) </li></ul><ul><li>Apple a récemment permis l’export via Flash (AS3) </li></ul>Des langages compilés et complexes demandent une expertise Développement : Applications VS Site mobile
    56. 56. Développement : Applications VS Site mobile <ul><li>Des technologies courantes </li></ul><ul><li>Le web mobile est (relativement) simple à prendre en main </li></ul><ul><li>HTML 5, CSS 3 et JavaScript simplifient le développement </li></ul><ul><li>Sencha Touch ou jQuery Mobile offrent de nombreuses possibilités (géolocalisation, ajax, interfaces, animations) </li></ul><ul><li>Des modules permettent de générer des pages mobiles pour la plupart des CMS </li></ul>Faites tester vos applications sur les différents terminaux
    57. 57. Les differents supports par l’ exemple
    58. 58. Promouvoir un site Internet
    59. 59. Adopter une démarche structurée et cohérente
    60. 60. Adopter une démarche structurée et cohérente <ul><li>Vous devez élaborer une stratégie de communication </li></ul><ul><li>Celle-ci répond à des besoins spécifiques et identifiés </li></ul><ul><ul><li>Qui est ma cible ? </li></ul></ul><ul><ul><li>Où se trouve-t-elle ? </li></ul></ul><ul><ul><li>Quels sont les objectifs ? </li></ul></ul><ul><ul><li>Quels leviers vont être actionnés ? </li></ul></ul><ul><ul><li>Que font mes concurrents ? </li></ul></ul>Agir de manière organisée, réfléchie et efficace
    61. 61. Adopter une démarche structurée et cohérente <ul><li>Différents leviers peuvent servir votre stratégie </li></ul><ul><li>Il est nécessaire d’intégrer les leviers classiques : média, RP, événementiel </li></ul><ul><li>Sur Internet, de nombreux leviers existent : </li></ul><ul><ul><li>Blog </li></ul></ul><ul><ul><li>Newsletter </li></ul></ul><ul><ul><li>Medias sociaux </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><li>Ils doivent rester à l’esprit dès la conception </li></ul>Délivrer le message au bon moment, à la bonne personne
    62. 62. Adopter une démarche structurée et cohérente <ul><li>Quelques conseils pour batir une stratégie efficace </li></ul><ul><li>Faites vivre une véritable expérience à l’internaute </li></ul><ul><li>Faites le premier pas vers votre cible </li></ul><ul><li>Il n’est plus question de « crier le plus fort possible » mais plutôt de « faire parler de soi » le plus (et le mieux) possible </li></ul><ul><li>Un « consommateur » transformé en « ambassadeur » est une arme de communication redoutable </li></ul>Le champs des possible ouvert à vous est immense
    63. 63. Adopter une démarche structurée et cohérente Problématique Besoins Actions Optimisations Objectifs Mesure/Analyse
    64. 64. Votre présence sur les médias sociaux <ul><li>Quelque soit le réseau, la démarche est similaire </li></ul><ul><li>Vous devez oublier le marketing traditionnel, souvent unidirectionnel </li></ul><ul><li>Les réseaux sociaux exigent une démarche «  conversationnelle  » </li></ul><ul><li>Soyez humains, transparents et ouverts </li></ul><ul><li>Etre à l’écoute </li></ul><ul><li>Engager les discussions et intéragissez avec les autres </li></ul><ul><li>Animer votre communauté de manière régulière </li></ul>Oubliez vos cours de marketing traditionnel, pensez « conversation »
    65. 65. Votre présence sur les médias sociaux <ul><li>Comment réagir en cas de problème ? </li></ul><ul><li>Ne pas s ’énerver et devenir agressif </li></ul><ul><li>Ne pas se cacher ou se taire </li></ul><ul><li>Écouter et suivre les discussions </li></ul><ul><li>Admettre les faits, remettre en contexte, agir en conséquence </li></ul><ul><li>Garder un visage et un langage humain, pas de «blabla» juridique </li></ul><ul><li>Mobiliser ses influents internes/externes </li></ul>Un bad buzz bien géré peut devenir bénéfique
    66. 66. Cas d’école <ul><li>Le cas Nestlé </li></ul><ul><li>Demande de retrait de la vidéo sur Youtube </li></ul><ul><li>Tentative de censure des réactions des «fans» Facebook </li></ul>Autoritarisme, mépris et absence
    67. 67. Actionner les leviers
    68. 68. Facebook
    69. 69. Facebook <ul><li>Les avantages </li></ul><ul><li>+ de 600 millions d ’utilisateurs dans le monde / 20M en France </li></ul><ul><li>Les utilisateurs passent un peu moins de 6h par mois sur Facebook ! </li></ul><ul><li>Des «fans» inscrits volontairement à une page </li></ul><ul><li>Centralisation des discussions autour d ’une marque, qu’elles soient bonnes ou mauvaises </li></ul><ul><li>Communiquer facilement et à moindre coût </li></ul>Rien ne sert d’être sur Facebook juste pour faire comme les concurrents
    70. 70. Facebook <ul><li>Les bonnes pratiques pour sa page fan </li></ul><ul><li>Créer une page fan plutôt qu ’un groupe </li></ul><ul><li>Personnaliser sa page (photo de profil, onglet personnalisé, landing page...) </li></ul><ul><li>Ne pas bloquer les contributions des utilisateurs </li></ul><ul><li>Animer la page régulièrement (mais pas plus de 2 messages par jour) </li></ul><ul><li>Interpeler et intéragir avec les fans </li></ul><ul><li>Définir une URL facilement accessible (ex : facebook.com/synerghetic.je) </li></ul>Entretenir une relation à dimension humaine
    71. 71. Facebook <ul><li>Démarquez-vous avec des opérations originales ! </li></ul>Gifts Coca Cola “Ma nuit de rêve” par Ikea Retrouvez de nombreuses campagnes Facebook sur Facebook Studio
    72. 72. Twitter
    73. 73. Twitter <ul><li>Twitter, c ’est quoi ? </li></ul><ul><li>C ’est comme un article de blog sauf que vous n’avez que 140 caractères </li></ul><ul><li>C ’est comme une mise à jour de statut Facebook sauf que c’est visible sur une infinité de supports </li></ul><ul><li>C ’est comme un grand t’chat sauf que vous choisissez qui vous voulez suivre </li></ul><ul><li>C ’est comme un client de messagerie instantanée sauf que c’est public et archivé sur le web </li></ul>Un outil de communication temps réel, simple et puissant
    74. 74. Twitter Communiquer en temps réel <ul><li>Les avantages </li></ul><ul><li>Une progression exponentielle (460 000 nouveaux utilisateurs par jour) </li></ul><ul><li>Une analyse en temps réel des pensées et perceptions de prospects potentiels </li></ul><ul><li>Un moteur de recherche en temps réel </li></ul><ul><li>Un potentiel de viralisation très important </li></ul><ul><li>Améliorer son référencement naturel (tweets indexés quasi-instantanément dans les moteurs de recherche) </li></ul>
    75. 75. Twitter Sur Twitter, l’échange prime sur la promotion individuelle <ul><li>Les bonnes pratiques sur Twitter </li></ul><ul><li>Personnaliser son compte (background et informations) en reprenant la charte graphique de la marque </li></ul><ul><li>Définir une ligne éditoriale </li></ul><ul><li>Suivre les influents du domaine et ceux qui parlent de vous </li></ul><ul><li>Alterner contenus pros et discussions plus informelles </li></ul><ul><li>Publier par vagues discontinues (5 tweets par jour maximum) </li></ul>
    76. 76. Twitter <ul><li>Quelques utilisations originales de Twitter </li></ul>Le CV Twitter “L’aventure dont je suis le héros” sur Twitter
    77. 77. Plateformes photos et vidéos
    78. 78. Plateformes photos et vidéos <ul><li>Diffusez vos contenus multimédias </li></ul><ul><li>Utiliser les plateformes comme Flickr pour les photos </li></ul><ul><li>Utiliser YouTube, Dailymotion ou Vimeo pour les vidéos </li></ul><ul><li>Bénéficier d’une nouvelle source de trafic </li></ul><ul><li>Augmenter sa visibilité et améliorer son référencement </li></ul><ul><li>Toucher une autre typologie de votre cible </li></ul>Une photo ou une vidéo est souvent plus parlante qu’un pavé de texte
    79. 79. Plateformes photos et vidéos <ul><li>Les bonnes pratiques </li></ul><ul><li>Personnaliser vos comptes autant que possible </li></ul><ul><li>Organiser et trier vos contenus </li></ul><ul><li>Attribuer des titres explicites et clairs </li></ul><ul><li>Ajouter des tags </li></ul>Le visuel permet de développer une certaine proximité avec votre cible
    80. 80. Blog
    81. 81. Blog <ul><li>Du contenu de qualité, régulièrement </li></ul><ul><li>Se positionner en tant qu’ expert sur son domaine </li></ul><ul><li>Création d’une communauté de lecteurs réguliers </li></ul><ul><li>Diffusion des billets via différentes plateformes (RSS, Facebook, Twitter …) </li></ul><ul><li>Permet d’améliorer significativement son référencement naturel </li></ul>Le blog est la vitrine dynamique d’une structure
    82. 82. Blog <ul><li>Les bonnes pratiques </li></ul><ul><li>Définir un planning de publication </li></ul><ul><li>Tenir un rythme de publication </li></ul><ul><li>Être rigoureux sur la mise en page et l’orthographe </li></ul><ul><li>Relayer ne suffit pas </li></ul><ul><li>Apporter son point de vue/analyse sur des sujets d’actualité </li></ul>Partager votre expertise, c’est la valoriser auprès de tous
    83. 83. Newsletter
    84. 84. Newsletter Du trafic qualifié à moindre coût <ul><li>Les avantages </li></ul><ul><li>Facilité d ’inscription et d’utilisation : une adresse e-mail suffit </li></ul><ul><li>Fidéliser ses utilisateurs </li></ul><ul><li>Possibilité de personnaliser le contenu en fonction de l ’utilisateur </li></ul><ul><li>Des outils permettent d ’obtenir des statistiques précises (taux d’ouverture, liens les plus cliqués, etc) </li></ul><ul><li>Un moyen supplémentaire d ’augmenter le trafic vers son site internet </li></ul>
    85. 85. Newsletter <ul><li>Les bonnes pratiques </li></ul><ul><li>Faliciter l’inscription à la newsletter (récompense lors de l’inscription, etc) </li></ul><ul><li>Automatiser son envoi pour un gain de productivité </li></ul><ul><li>Personnaliser autant que faire se peut </li></ul><ul><li>Elaborer une mise en page visuellement agréable </li></ul><ul><li>Être pragmatique dans le sujet de mail des newsletters </li></ul>Une newsletter ne peut être entièrement remplacée par les médias sociaux
    86. 86. Géolocalisation
    87. 87. Géolocalisation Suivre les dernières tendances et les expérimenter <ul><li>Les avantages </li></ul><ul><li>Utiliser des systèmes qui sont dans l’ère du temps (Foursquare, Facebook Places, etc) </li></ul><ul><li>Se référencer sur de nouvelles plateformes </li></ul><ul><li>Exploiter un nouveau levier pour faire connaitre sa structure </li></ul>
    88. 88. Géolocalisation <ul><li>Les bonnes pratiques </li></ul><ul><li>Remplissez correctement toutes les informations de vos profils </li></ul><ul><li>Agrémenter vos profils (photos sur Foursquare par exemple) </li></ul><ul><li>Proposer des offres spéciales, notamment avec Foursquare </li></ul>Un nouveau moyen de promouvoir sa structure
    89. 89. Géolocalisation <ul><li>Êtes-vous simplement présent sur Google Maps ? </li></ul>
    90. 90. Mesurer et analyser
    91. 91. Mesurer et analyser <ul><li>Mesurer et analyser vos actions de communication </li></ul><ul><li>Fixer des KPI (Key Performance Indicator) pour chaque levier </li></ul><ul><li>Faites un suivi périodique </li></ul><ul><li>Analyser et interpréter ces données </li></ul><ul><li>Pour quelle finalité ? </li></ul><ul><li>Suivre son évolution </li></ul><ul><li>Optimiser ses actions de communication ! </li></ul>Mesurer pour se donner la possibilité de faire toujours mieux
    92. 92. Pour récapituler <ul><li>Ce qu’il faut que vous gardiez à l’esprit </li></ul><ul><li>Elaborez une stratégie centrée autour de votre cible </li></ul><ul><li>L’ensemble de vos actions doivent être cohérentes vis-à-vis de votre stratégie </li></ul><ul><li>Faites vivre une expérience unique aux internautes </li></ul><ul><li>Soyez créatif et original </li></ul><ul><li>Chaque support possède ses propres spécificités, votre stratégie aussi </li></ul><ul><li>Mesurer et analyser ses actions pour les optimiser </li></ul>
    93. 93. Ressources Développement mobile http://www.appcelerator.com/ http://jquerymobile.com/ http://developer.android.com/ http://developer.apple.com/ Plateforme de blogging : http://wordpress.org/ https://www.blogger.com/ http://www.feedburner.com/ Outils d ’e-mailing : Campaign Monitor MailChimp Outils de monitoring : Twitter Search Tweetscan Tweetdeck et Seesmic
    94. 94. Ressources Facebook Inside Facebook.com Mashable (Facebook Guidebook) Involver (Personnalisation page fan) <ul><li>Grid System </li></ul><ul><ul><ul><li>http://960.gs </li></ul></ul></ul><ul><ul><ul><li>http://www.thegridsystem.org </li></ul></ul></ul>Design http://www.kuler.com http://www.colourlovers.com Conception d’interface mobile Développement Alsa Créations (Tutos XHTML, CSS...) Fran6art (Tutos intégration Wordpress)
    95. 95. Lectures conseillées Ergonomie Web Amélie Boucher http://www.ergolab.net The Smashing Book Smashing Magazine http://www.smashingmagazine.com Internet Marketing 2011 Julia Jouffro, Martin Tissier & Guillaume Ber
    96. 96. Sources <ul><li>On les remercie beaucoup : </li></ul><ul><li>Vanksen pour le partage de toutes leurs présentations </li></ul><ul><ul><li>http://www.slideshare.net/culturebuzz/agence-vanksen-digitalviraladvertising-confrence-buzzthebrand-2009 </li></ul></ul><ul><ul><li>http://www.slideshare.net/Vanksen/bien-grer-sa-rputation-en-ligne </li></ul></ul><ul><ul><li>http://www.slideshare.net/gregfromparis/bien-gerer-son-ereputation </li></ul></ul><ul><ul><li>http://www.slideshare.net/Vanksen/twitter-prsentation-complte-de-lessentiel-1903868 </li></ul></ul><ul><li>ReadWriteWeb pour leur excellent article </li></ul><ul><ul><li>http://fr.readwriteweb.com/2010/03/30/a-la-une/greenpeace-nestl-sur-facebook-lart-de-guerre/ </li></ul></ul><ul><li>HETIC </li></ul>
    97. 97. Merci de votre attention Des questions ?
    98. 98. Do it yourself ! <ul><li>Regardons votre communication de plus près ! </li></ul><ul><li>Des personnes sont à votre disposition </li></ul><ul><li>Auditer, analyser et vous conseiller </li></ul>Assez parlé de nous, parlons un peu de vous !
    99. 99. On reste en contact ? twitter.com/synerghetic facebook.com/synerghetic.je blog.synerghetic.net/ [email_address]

    ×