La Junior-Entreprise du Web                              Hashtag twitter :                              #prezsynerg
Qui sommes-nous ? • Synerg’heTiC en chiffres  2004 : Création de la J.E.  2006 : Label meilleur espoir  150 : Études réali...
Nos références   Croix Rouge                    Les caves d’Augustin              EMLIFE  Webdocumentaire                 ...
Nos références
Concevoir et promouvoir   votre site internet Renaud Bressand   Élodie Mermet       Johann Pinson    Alexandre Conca     P...
Sommaire     Communiquer sur Internet           Pourquoi sur la toile ?     La création d’un site web, de A à Z           ...
Sommaire     Au-delà du site internet           La place des réseaux sociaux           Votre blog           Emailing      ...
Communiquer sur Internet Communiquer sur internet 8
Pourquoi sur la toile ?       • Internet en France            38 millions de connectés            23,2 millions utilisat...
Pourquoi sur la toile ?     • Les entrepreneurs migrent vers le web          73 % des dirigeants de TPE / PME vont sur in...
Pourquoi sur la toile :• Des opportunités multiples                            11
Créer son site web
Bien définir ses objectifs
Cibles• Pour qui ? Analyse de l’existant Hiérarchisation des besoins Définition des cibles                  Connaître s...
Étude concurrentielle• Le monde qui vous entoure Junior-Entreprises Entreprises Entrepreneurs                Se positio...
Audit• Et vous maintenant ?                         16
Se positionner• Faire avec ses moyens Moyens financiers Moyens humains                          17
Les spécifications
Les spécifications fonctionnelles• Cadrage du projet Détailler l’expression des besoins Recenser toutes les fonctionnali...
Les spécifications fonctionnelles                                    20
Les spécifications techniques• Détail l’aspect technique du projet Étude de faisabilité Document de base pour le dévelop...
Les spécifications techniques                                                     UMLComplément de spécifications fonction...
Le référencement 23
Référencement                24
Les bases du référencement• Le référencement naturel Le SEO (Search Engine Optimization) se pense dès la création de   la...
Les bases du référencement• Les leviers Soigner la densité des mots-clés Soigner son arborescence et ses liens internes...
Référencement                27
Référencement                28
Référencement                29
Référencement                30
Référencement                31
Référencementhttp://www.opensiteexplorer.org/                              32
Référencement                http://chrispederick.com/work/web-developer/                      33
Référencement                34
Référencement                35
Référencement                36
Architecture de l’information 37
Arborescence, contenus : la structure générale• L’arborescence Comment découper la réponse aux besoins en plusieurs secti...
Arborescence, contenus : la structure générale• Les contenus Le site internet a ses spécificités. Arrêtons les sites pla...
Ergonomie    Zoning                Cinématiques             Wireframes     (storyboard)                40
Ergonomie                 Zoning            41
Ergonomie                 Wireframe            42
Ergonomie                 Cinématiques            43
Conception ergonomique• Quels outils ? Du papier et un crayon ! PowerPoint / Keynote (mac) Mockingbird (en ligne) Bals...
Conception ergonomique• KISS (Keep it simple, stupid) L’ergonomie est synonyme de simplicité Ôtez de vos spécifications ...
Conception ergonomique• S’adapter au contexte Pensez au support    Différenciez les contenus et fonctionnalités en fonct...
Webdesign 47
Conception graphique• À qui plaire ? Vous Le visiteur final (Prospects, étudiants, membres de l’école, autres J.E.)     ...
Typographie 49
Typographie• 95% de l’information sur internet est écrite 95% du design est donc fait par la typo   http://www.informatio...
Typographie• Le typos web Verdana         Georgia Arial           Times Lucida          Palatino Tahoma          C...
Typographie Alors, comment mettre ça…                              52
Typographie Dans ça ?                 53
Typographie
Typographie CSS3 : @font-face@font-face { font-family: Delicious; src: url(Delicious-Roman.otf); } @font-face { font-fami...
Typographie• Maintenant, comment choisir sa typo ? Avez-vous une charte? Connaissez-vous les codes de votre secteur ?   ...
Typographie Ne pas utiliser trop de typos (2-3 max)               LOREM IPSUM                                            ...
Typographie
Typographie
Le reste
Webdesign• Le «Grid System» Impossible de concevoir une interface sans grille de référence Structure la page Garantit l...
Webdesign       Interface de site utilisant un «Grid System» à 16 colonnes                               http://960.gs/   ...
Webdesign       Interface de site utilisant un «Grid System» à 16 colonnes                               http://960.gs/   ...
Webdesign• Restez simple Belles typos Photographies travaillées Une dose d’originalité dans les zonings ou le traitemen...
Webdesign• Pensez à l’intégrateur Fournissez-lui vos typos Utilisez des formants graphiques simples Rangez vos calques ...
Intégration 69
Intégration• Bonnes pratiques Validité W3C Compatibilité avec les  standards utilisés par votre  cible Code commenté = ...
Intégration• HTML5 Structure sémantique                              + Expérience utilisateur améliorée                 ...
Intégration• CSS3 et CSS2 @font-face Ombrage Positionnement Rotation Transition etc.                        Attentio...
Intégration• Quelques exemples                      73
Développement 74
Développement• Choix de l’outil Couverture fonctionnelle Niveau de performances Pérennité /maintenance From scratch / ...
Développement• Méthode de développement Utiliser au maximum les APIs existantes Code commenté = pérennité Développement...
Recette et debug 77
Recette et debug• Recette à la fin de chaque phase Concepteur fonctionnel - wireframes Ergonome - maquettes graphiques ...
Promouvoir un site internet 79
Réseaux sociaux 80
La place des réseaux sociaux• Communiquer en 2.0 Les leviers web doivent rester à l’esprit dès la conception Une nouvell...
Facebook : votre communauté avant tout• Converser avant de marketer Être à l’écoute de ses « fans » Échange et interacti...
Facebook : votre communauté avant tout• Best Practices Créer un page plutôt qu’un profil ou un groupe Personnalisation d...
Twitter : votre expertise en 140 caractères• L’avènement micro-blogging Jargon technique (tweet, followers, reply…) Mote...
Twitter : votre expertise en 140 caractères• Best Practices Personnalisation du compte (background, couleurs et profil) ...
Viadeo : l’image du junior devenu professionnel• Plus qu’un CV 2.0 Présence professionnelle sur les réseaux sociaux Gard...
Place aux contenus !• Centraliser vos vidéos Youtube / Vimeo• Centraliser vos photos Flickr• Centraliser vos contenus S...
Blog 88
Blog : une seconde vitrine• Un contenu riche et de qualité Vitrine interne    Retracer les évènements marquants de l’éco...
Newsletter 90
Newsletter• Un canal à ne pas oublier Facilité d’inscription : une adresse e-mail suffit Adapter son contenu à la cible ...
Place à la mobilité 92
Chiffres clés :       • Nouveaux usages français            18,3 millions de mobinautes            iOS toujours devant A...
Application native• Le « rich content » est roi Utilisation du son, vidéo, GPS, appareil photo, accéléromètre… L’ergonom...
Application native• Un environnement concurrentiel La guerre des stores (iOS leader français) Des contraintes de toute p...
Site mobile• Un accès universel Générer un contact simple et immédiat Pas de contrainte software (Store / téléchargement...
Responsive design• Mobile + Tablette + Ordinateur L’alternative au site multi-version La pensée mobile first À réfléchi...
Plug-in tout-en-un• (re)Partir d’une base existante Utilisation d’un plug-in (WordPress Mobile Pack, Drupal Mobile  Tools...
Quelques pistes à explorer 99
Quelques pistes à explorer• Micro-blogging Émergence de nouvelles plateformes Leadership de Tumblr face à la concurrence...
C’est pas fini 101
Web analytics 102
Web analytics• “Mesures daudience et de fréquentation sur   Internet” “Elles regroupent la mesure, la collecte, lanalyse ...
Web analytics• Pourquoi ? Savoir qui visite votre site, comment, pourquoi et quand Obtenir des retours sur vos actions d...
Web analytics• Revenons-en aux objectifs définis Fixer des indicateurs de performances à mesurer Définir un plan de taga...
Création de contenu
Création de contenus• Un site internet doit vivre après sa création Se positionner sur une expertise Entretenir le référ...
Création de contenus• Comment? Identifier les sources d’informations au sein de votre structure Sélectionner et relayer ...
Développement Web Apps vs Applications• Ressources Développement mobile                      Plateforme de blogging : http...
Sur Facebook : créer et gérer une page fan• Ressources          Facebook                                                  ...
On reste en contact ?twitter.com/synergheticfacebook.com/synerghetic.jeblog.synerghetic.net/contact@synerghetic.net
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
Prochain SlideShare
Chargement dans…5
×

Formation : "Concevoir et promouvoir votre site internet" V3

2 019 vues

Publié le

Cette formation a été présentée à des Juniors Entrepreneurs lors du Congrès National d’Hiver 2011 par Renaud Bressand, Élodie Mermet, Johann Pinson, Alexandre Conca.

Sommaire :
1. Communiquer sur Internet
a. Pourquoi sur la toile ?

2. La création d’un site web, de A à Z
a. Bien définir ses objectifs
b. Architecture de l’information
c. Création graphique
d. Référencement
e. Développement
f. Recette et débug

3. Au-delà du site internet
a. La place des réseaux sociaux
b. Votre blog
c. Emailing
d. Place à la mobilité
e. Quelques pistes à explorer

4. Conclusion
a. C’est pas fini

Publié dans : Technologie
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 019
Sur SlideShare
0
Issues des intégrations
0
Intégrations
58
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation : "Concevoir et promouvoir votre site internet" V3

  1. 1. La Junior-Entreprise du Web Hashtag twitter : #prezsynerg
  2. 2. Qui sommes-nous ? • Synerg’heTiC en chiffres 2004 : Création de la J.E. 2006 : Label meilleur espoir 150 : Études réalisées en 6 ans 110k€ : CA atteint en 2010 (+10%) Parmi les 30 meilleures J.E. en 2010 et 2011 ! La Junior-Entreprise d’Hétic, Multimédia / Management / Informatique
  3. 3. Nos références Croix Rouge Les caves d’Augustin EMLIFE Webdocumentaire Portail étudiant de l’EMLYON Site vitrine
  4. 4. Nos références
  5. 5. Concevoir et promouvoir votre site internet Renaud Bressand Élodie Mermet Johann Pinson Alexandre Conca Président Trésorière Resp. Qualité Resp. Commercial 5
  6. 6. Sommaire Communiquer sur Internet Pourquoi sur la toile ? La création d’un site web, de A à Z Bien définir ses objectifs Architecture de l’information Création graphique Référencement Intégration Développement Recette et débug 6
  7. 7. Sommaire Au-delà du site internet La place des réseaux sociaux Votre blog Emailing Place à la mobilité Quelques pistes à explorer Conclusion C’est pas fini 7
  8. 8. Communiquer sur Internet Communiquer sur internet 8
  9. 9. Pourquoi sur la toile ? • Internet en France  38 millions de connectés  23,2 millions utilisateurs de Facebook  37 milliards € de chiffre d’affaires prévu sur la vente en ligne pour 2011  +12 millions de Français ont déjà acheté via leurs mobiles  92 % des Français se connectent pour surfer tous les jours Une population de plus en plus connectée 9*Chiffres pour l’année 2011 selon Mediatmétrie, Insee et Arcep
  10. 10. Pourquoi sur la toile ? • Les entrepreneurs migrent vers le web  73 % des dirigeants de TPE / PME vont sur internet pour leur société  +500k créations d’entreprises chaque année* +1 000 prospects potentiels par jour ! 10*Chiffres pour l’année 2011 selon Insee et journaldunet.com
  11. 11. Pourquoi sur la toile :• Des opportunités multiples 11
  12. 12. Créer son site web
  13. 13. Bien définir ses objectifs
  14. 14. Cibles• Pour qui ? Analyse de l’existant Hiérarchisation des besoins Définition des cibles Connaître son marché numérique 14
  15. 15. Étude concurrentielle• Le monde qui vous entoure Junior-Entreprises Entreprises Entrepreneurs Se positionner face à ses concurrents 15
  16. 16. Audit• Et vous maintenant ? 16
  17. 17. Se positionner• Faire avec ses moyens Moyens financiers Moyens humains 17
  18. 18. Les spécifications
  19. 19. Les spécifications fonctionnelles• Cadrage du projet Détailler l’expression des besoins Recenser toutes les fonctionnalités du site internet Identifier et caractériser tous les contenus Ce document servira de référence pour tous les intervenants du projet 19
  20. 20. Les spécifications fonctionnelles 20
  21. 21. Les spécifications techniques• Détail l’aspect technique du projet Étude de faisabilité Document de base pour le développeur Choix technique des outils (APIs, plugin, CMS, CMF, Framework) Permet de valider l’aspect fonctionnel du projet 21
  22. 22. Les spécifications techniques UMLComplément de spécifications fonctionnelles Parcours utilisateur 22
  23. 23. Le référencement 23
  24. 24. Référencement 24
  25. 25. Les bases du référencement• Le référencement naturel Le SEO (Search Engine Optimization) se pense dès la création de larborescence du site et se poursuit lors de la création des contenus 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 Définir des mots-clés ou expressions-clés (long tail) ordonnés par importance Trouver l’équilibre entre le contenu orienté visiteur et le contenu orienté moteur de recherche 25
  26. 26. Les bases du référencement• Les leviers Soigner la densité des mots-clés Soigner son arborescence et ses liens internes Créer une stratégie de back link efficace Soigner vos balises meta en début de page (title, description et keywords) Respecter la sémantique du code Privilégier la qualité à la quantité 26
  27. 27. Référencement 27
  28. 28. Référencement 28
  29. 29. Référencement 29
  30. 30. Référencement 30
  31. 31. Référencement 31
  32. 32. Référencementhttp://www.opensiteexplorer.org/ 32
  33. 33. Référencement http://chrispederick.com/work/web-developer/ 33
  34. 34. Référencement 34
  35. 35. Référencement 35
  36. 36. Référencement 36
  37. 37. Architecture de l’information 37
  38. 38. Arborescence, contenus : la structure générale• L’arborescence Comment découper la réponse aux besoins en plusieurs sections Regrouper les rubriques de façon pertinente et intuitive Hiérarchiser les contenus selon leur importance vis-à-vis des objectifs Répondre de la manière la plus intuitive possible aux besoins 38
  39. 39. Arborescence, contenus : la structure générale• Les contenus Le site internet a ses spécificités. Arrêtons les sites plaquettes Texte / Photos (HD) / Vidéos (HD) / Sons Comment les valoriser pour les moteurs de recherche ? Les contenus constituent le coeur du site ! 39
  40. 40. Ergonomie Zoning Cinématiques Wireframes (storyboard) 40
  41. 41. Ergonomie Zoning 41
  42. 42. Ergonomie Wireframe 42
  43. 43. Ergonomie Cinématiques 43
  44. 44. Conception ergonomique• Quels outils ? Du papier et un crayon ! PowerPoint / Keynote (mac) Mockingbird (en ligne) Balsamiq Omnigraffle Axure ... Les outils les plus simples sont les meilleurs 44
  45. 45. Conception ergonomique• KISS (Keep it simple, stupid) L’ergonomie est synonyme de simplicité Ôtez de vos spécifications toutes les données et fonctionnalités superflues  Simplification de la maintenance (contenu et développement).  Faciliter l’accès à l’information pour votre utilisateur Appuyez-vous sur les éléments qui existent déjà Mettez-vous à la place des utilisateurs de votre site 45
  46. 46. Conception ergonomique• S’adapter au contexte Pensez au support  Différenciez les contenus et fonctionnalités en fonction des usages et de vos cibles  Les usages et cibles changent sur mobile  Les usages et cibles changent sur Facebook Essayer d’anticiper les attentes de vos utilisateurs 46
  47. 47. Webdesign 47
  48. 48. Conception graphique• À qui plaire ? Vous Le visiteur final (Prospects, étudiants, membres de l’école, autres J.E.) Pour une fois vous avez le dernier mot 48
  49. 49. Typographie 49
  50. 50. Typographie• 95% de l’information sur internet est écrite 95% du design est donc fait par la typo http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/ La typographie est au centre de tout webdesign 50
  51. 51. Typographie• Le typos web Verdana  Georgia Arial  Times Lucida  Palatino Tahoma  Cambria Trébuchet Calibri Plutôt limité non? 51
  52. 52. Typographie Alors, comment mettre ça… 52
  53. 53. Typographie Dans ça ? 53
  54. 54. Typographie
  55. 55. Typographie CSS3 : @font-face@font-face { font-family: Delicious; src: url(Delicious-Roman.otf); } @font-face { font-family: Delicious; font-weight: bold; src: url(Delicious-Bold.otf); } Services de typos en ligne (Google Font, FontSquirrel, Typekit, Fontdeck, etc.) Remplacement en canvas (Cufon) Remplacement par flash (siFr) http://www.slideshare.net/matthewbuchanan/the-state-of-web-type Intégrer n’importe quelle typographie dans vos sites 55
  56. 56. Typographie• Maintenant, comment choisir sa typo ? Avez-vous une charte? Connaissez-vous les codes de votre secteur ? http://www.paris-web.fr/2010/programme/la-typographie-comme-outil-de-design.php Comment procéder ? 56
  57. 57. Typographie Ne pas utiliser trop de typos (2-3 max) LOREM IPSUM Lorem Ipsum is simply dummy text of the printing Jouer sur les tailles and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and Jouer sur les graisses scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularise https://shop.smashingmagazine.com/ebook-the-big-book-of-font-combinations.html 57
  58. 58. Typographie
  59. 59. Typographie
  60. 60. Le reste
  61. 61. Webdesign• Le «Grid System» Impossible de concevoir une interface sans grille de référence Structure la page Garantit la cohérence entre les différents gabarits de page Il guide la lecture et confère une sensation d’harmonie Conserver une mise en page cohérente 61
  62. 62. Webdesign Interface de site utilisant un «Grid System» à 16 colonnes http://960.gs/ 62
  63. 63. Webdesign Interface de site utilisant un «Grid System» à 16 colonnes http://960.gs/ 63
  64. 64. Webdesign• Restez simple Belles typos Photographies travaillées Une dose d’originalité dans les zonings ou le traitement des photos Rappelez vous de vos objectifs business Ôtez le surplus d’information qui vient parasiter votre contenu Regardez ce qui se fait de mieux 64
  65. 65. Webdesign• Pensez à l’intégrateur Fournissez-lui vos typos Utilisez des formants graphiques simples Rangez vos calques 68
  66. 66. Intégration 69
  67. 67. Intégration• Bonnes pratiques Validité W3C Compatibilité avec les standards utilisés par votre cible Code commenté = pérennité 70
  68. 68. Intégration• HTML5 Structure sémantique + Expérience utilisateur améliorée = Création d’applications Attention aux compatibilités ! http://html5readiness.com/ !--[if IE]script src=scripts/html5- ie.js/script![endif]-- 71
  69. 69. Intégration• CSS3 et CSS2 @font-face Ombrage Positionnement Rotation Transition etc. Attention aux compatibilités !!--[if !IE]-- link href=ie.css rel=stylesheet type=text/css !--![endif]-- 72
  70. 70. Intégration• Quelques exemples 73
  71. 71. Développement 74
  72. 72. Développement• Choix de l’outil Couverture fonctionnelle Niveau de performances Pérennité /maintenance From scratch / CMS / Framework Wordpress Drupal Ne pas réinventer la roue ! 75
  73. 73. Développement• Méthode de développement Utiliser au maximum les APIs existantes Code commenté = pérennité Développement collaboratif Subversion, Git Méthode agile vs méthode linéaire Ne pas oublier le référencement : URL rewriting ! product_page.php?cat=15id=149 chaussures-femme/converses.php 76
  74. 74. Recette et debug 77
  75. 75. Recette et debug• Recette à la fin de chaque phase Concepteur fonctionnel - wireframes Ergonome - maquettes graphiques Graphiste - intégration Référenceur - intégration Trac Équipe de test - développement etc. Attention aux compatibilités ! 78
  76. 76. Promouvoir un site internet 79
  77. 77. Réseaux sociaux 80
  78. 78. La place des réseaux sociaux• Communiquer en 2.0 Les leviers web doivent rester à l’esprit dès la conception Une nouvelle façon de converser avec sa communauté Un atout majeur pour sa visibilité Des opportunités à saisir 81
  79. 79. Facebook : votre communauté avant tout• Converser avant de marketer Être à l’écoute de ses « fans » Échange et interactions sociales Communiquer et transmettre un message Un outil pour s’exprimer et partager 82
  80. 80. Facebook : votre communauté avant tout• Best Practices Créer un page plutôt qu’un profil ou un groupe Personnalisation de la page (display picture, landing page…) Animer et inciter au dialogue (questions ouvertes, Facebook Questions…) Définir une URL facilement accessible (ex. : facebook.com/synerghetic.je) Rester poli et ne pas censurer ses « fans » Donnez à votre communauté et elle vous le rendra 83
  81. 81. Twitter : votre expertise en 140 caractères• L’avènement micro-blogging Jargon technique (tweet, followers, reply…) Moteur de veille en temps réel Partager son expertise via de l’information Follower Following Moi (ou abonné) (ou abonnement) Vive le temps réel ! 84
  82. 82. Twitter : votre expertise en 140 caractères• Best Practices Personnalisation du compte (background, couleurs et profil) Suivre les influents du domaine Alterner les « RT » et « classic RT » Alterner contenus pros et discussions Pas de publications maximum/jour, mais rester pertinent (3 tweets/jour recommandé) Ne pas utiliser Twitter pour sa promotion personnelle 85
  83. 83. Viadeo : l’image du junior devenu professionnel• Plus qu’un CV 2.0 Présence professionnelle sur les réseaux sociaux Garder un contact avec vos clients Nouvelle forme de prospection Notion de page d’entreprise (LinkedIn) Rappel : Vous disposez d’un compte premium gratuitement ! 86
  84. 84. Place aux contenus !• Centraliser vos vidéos Youtube / Vimeo• Centraliser vos photos Flickr• Centraliser vos contenus SlideShare, Scribd… Attention à ne pas multiplier les outils ! 87
  85. 85. Blog 88
  86. 86. Blog : une seconde vitrine• Un contenu riche et de qualité Vitrine interne  Retracer les évènements marquants de l’école et de la J.E. Vitrine externe  Se positionner en tant qu’expert sur son domaine  Apporter son analyse des sujets d’actualité  Améliorer son référencement Un outil brandé et centré sur une communauté fidèle 89
  87. 87. Newsletter 90
  88. 88. Newsletter• Un canal à ne pas oublier Facilité d’inscription : une adresse e-mail suffit Adapter son contenu à la cible (newsletter interne ou externe ?) Utiliser les outils permettant d’obtenir des statistiques précises sur les liens qui ont attirés l’attention Bien choisir sa plateforme d’envoi Ne pas oublier la CNIL ! 91
  89. 89. Place à la mobilité 92
  90. 90. Chiffres clés : • Nouveaux usages français  18,3 millions de mobinautes  iOS toujours devant Android en France (30%versus 22%)  Samsung leader français sur les ventes  12 % des entreprises françaises ont développé un site mobile* Un marché toujours en expansion 93*Chiffres pour l’année 2011 selon Mediatmétrie, Insee et Arcep
  91. 91. Application native• Le « rich content » est roi Utilisation du son, vidéo, GPS, appareil photo, accéléromètre… L’ergonomie et la gestuelle englobent le contenu L’habitude du téléchargement est devenue courante L’expérience utilisateur avant tout 94
  92. 92. Application native• Un environnement concurrentiel La guerre des stores (iOS leader français) Des contraintes de toute part (mise à jour de l’application comme du software, validation des stores, multi-développement…) Du développement multi-plateformes avec Titanium ou PhoneGap Marche des tablettes = nouveaux supports à prendre en compte Savoir faire le bon choix 95
  93. 93. Site mobile• Un accès universel Générer un contact simple et immédiat Pas de contrainte software (Store / téléchargement) Ouverture aux nouveaux standards web (HTML5 /CSS3) La simplicité du bout des doigts au bout du monde 96
  94. 94. Responsive design• Mobile + Tablette + Ordinateur L’alternative au site multi-version La pensée mobile first À réfléchir dès la conception ! Une librairie d’inspirations : http://mediaqueri.es/ Réfléchir plus tôt, pour avoir à agir moins plus tard 97
  95. 95. Plug-in tout-en-un• (re)Partir d’une base existante Utilisation d’un plug-in (WordPress Mobile Pack, Drupal Mobile Tools…) Nouvelle mise en forme ≠ nouveau site Une solution à chaque problème 98
  96. 96. Quelques pistes à explorer 99
  97. 97. Quelques pistes à explorer• Micro-blogging Émergence de nouvelles plateformes Leadership de Tumblr face à la concurrence (Posterous, WordPress…)• Géolocalisation Multiplicité des outils (Foursquare, Gplaces, Yelp, Dismoioù?, etc.) Opportunité forte, mais adoption encore faible en France 100
  98. 98. C’est pas fini 101
  99. 99. Web analytics 102
  100. 100. Web analytics• “Mesures daudience et de fréquentation sur Internet” “Elles regroupent la mesure, la collecte, lanalyse et la présentation de données provenant dInternet utilisées afin de comprendre et doptimiser lutilisation du Web” Les données nécessaires afin de déterminer l’évolution de son site 103
  101. 101. Web analytics• Pourquoi ? Savoir qui visite votre site, comment, pourquoi et quand Obtenir des retours sur vos actions de communication ou sur vos supports Optimiser ces actions et supports suite aux données obtenues Faire évoluer votre site intelligemment pour atteindre vos objectifs 104
  102. 102. Web analytics• Revenons-en aux objectifs définis Fixer des indicateurs de performances à mesurer Définir un plan de tagage Intégrer le code permettant la mesure Pour Google Analytics : http://code.google.com/apis/analytics/docs/gaJS/gaJSApi.html Observer et analyser les variations d’audiences Agir en conséquences Tester : AB testing / MV testing (pertinent pour des sites à gros trafic) Mesurer et analyser les retombées de vos actions 105
  103. 103. Création de contenu
  104. 104. Création de contenus• Un site internet doit vivre après sa création Se positionner sur une expertise Entretenir le référencement de votre site Un site qui vit se signale auprès de Google Entretenir une stratégie de contenu brandé Attirer de nouveaux utilisateurs grâce à du nouveau contenu Mettre en avant vos références Pensez à mesurer et à optimiser les retours de vos actions 107
  105. 105. Création de contenus• Comment? Identifier les sources d’informations au sein de votre structure Sélectionner et relayer du contenu externe (Curation) Création de contenu riche (livres blancs, outils en ligne, contenu interactif, etc.) Faciliter la redistribution de votre contenu (inciter aux relais sur les réseaux sociaux) Penser à relayer votre contenu (Newsletter, réseaux sociaux) 108
  106. 106. Développement Web Apps vs Applications• Ressources Développement mobile Plateforme de blogging : http://www.appcelerator.com/ http://jquerymobile.com/ http://wordpress.org/ http://developer.android.com/ https://www.blogger.com/ http://developer.apple.com/ http://www.feedburner.com/ Outils d’e-mailing : Outils de monitoring : Campaign Monitor Twitter Search MailChimp Tweetscan 109
  107. 107. Sur Facebook : créer et gérer une page fan• Ressources Facebook Grid System Inside Facebook.comMashable (Facebook Guidebook) http://960.gsSocialshaker (Personnalisation http://www.thegridsystem.org page fan) Design Développement Alsa Créations (Tutos XHTML, http://www.kuler.com CSS...) http://www.colourlovers.com Fran6art (Tutos intégration Conception d’interface mobile Wordpress) 110
  108. 108. On reste en contact ?twitter.com/synergheticfacebook.com/synerghetic.jeblog.synerghetic.net/contact@synerghetic.net

×