• Save
Formation : Réaliser et promouvoir un site internet (V1)
Upcoming SlideShare
Loading in...5
×
 

Formation : Réaliser et promouvoir un site internet (V1)

on

  • 2,334 views

Support de notre présentation donnée au Congrès National d'été 2010 des Junior-Entreprises en Arles

Support de notre présentation donnée au Congrès National d'été 2010 des Junior-Entreprises en Arles

Statistics

Views

Total Views
2,334
Views on SlideShare
2,018
Embed Views
316

Actions

Likes
5
Downloads
0
Comments
2

5 Embeds 316

http://blog.synerghetic.net 257
http://www.slideshare.net 53
http://alsagora.blogspot.com 3
http://www.business-marketing-internet.fr 2
http://static.slidesharecdn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • o
    Are you sure you want to
    Your message goes here
    Processing…
  • ok
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Formation : Réaliser et promouvoir un site internet (V1) Formation : Réaliser et promouvoir un site internet (V1) Presentation Transcript

    • La Junior-Entreprise du Web Hashtag twitter : #prezsynerg
    • Qui sommes-nous ? • Synerg’hetic en chiffres 7% ★ 2004 : Création de la JE 19% ★ 2006 : Label meilleur espoir ★ 110 : Études réalisées en 5 ans 50% ★ 100k€ : CA atteint en 2010 (+20%) 25% La Junior-Entreprise d’Hétic, Multimédia / Management / Informatique Créa%on  ou  refonte  de  site  Web Design  et  ergonomie Etude  et  conseil Media  et  référencement
    • Nos références Portail des Métiers de l’Internet Les Enfoirés Beauty Executive www.metiers.internet.gouv.fr http://www.enfoires.com www.beautyexecutive.com
    • Nos références Kultura Viral Film Festival Groupe Chronos www.kultura.fr www.viralfilmfestival.ch www.groupechronos.org
    • Réaliser et promouvoir un site internet Olivier Chatel Colas Fournier Jérémy Gallemard Président Resp. Projets Resp. Communication 5
    • Sommaire La création d’un site web, de A à Z Définir correctement les objectifs, les cibles, la concurrence et la stratégie Arborescence, contenus, et référencement naturel Conception ergonomique Spécifications fonctionnelles, choix d’une solution technique adaptée Conception graphique Développement et intégration Recette : debug, dernières vérifications et livraison Communiquer autour de son site internet Sur Facebook : créer et gérer une page fan Sur Twitter : comment se vendre sur Twitter Mettre en place une newsletter Quelques pistes à explorer 6
    • Expression des besoins 7
    • Définir correctement les objectifs, les cibles, la concurrence et la stratégie • Pourquoi ? ★ Générer / augmenter le chiffre d’affaires ? ★ Constituer une base de données utilisateurs ? ★ Déclencher un premier contact / une demande de devis ? ★ ... Aider le client à formuler clairement ses attentes 8
    • Définir correctement les objectifs, les cibles, la concurrence et la stratégie • Pour qui ? ★ Particuliers ou professionnels ? ★ Quelle tranche d’âge ? ★ Sont-ils à l’aise sur internet ? ★ Quelles sont leurs habitudes de consommation ? ★ Création de «personas» (profils d’utilisateurs fictifs) Apprendre à connaître ses futurs utilisateurs 9
    • Définir correctement les objectifs, les cibles, la concurrence et la stratégie • La concurrence ★ Ai-je identifié mes concurrents, ou ceux de mon client ? ★ Quels sont leurs points forts ? ★ Quelles sont leurs faiblesses / leurs erreurs ? ★ Comment faire mieux ? Se positionner face à ses concurrents 10
    • Définir correctement les objectifs, les cibles, la concurrence et la stratégie • La stratégie ★ Les actions à mettre en oeuvre pour atteindre les objectifs fixés ★ Déterminer l’expérience souhaitée pour l’utilisateur ★ Un site à dimension événementielle (période limitée dans le temps) ? ★ Un site à fort contenu éditorial ? ★ Ce choix pré-détermine en partie les choix techniques Pour un site internet utile, utilisable et utilisé 11
    • Organisation des contenus 12
    • Arborescence, contenus, et référencement naturel • L’arborescence ★ L’organisation des pages et de la navigation ★ Regrouper les rubriques de façon pertinente et intuitive ★ Hiérarchiser les contenus selon leur importance vis-à-vis des objectifs Organiser le site de la façon la plus intuitive pour l’utilisateur 13
    • Arborescence, contenus, et référencement naturel • Les contenus ★ Quelles sont les natures de contenus qui serviront au mieux la stratégie ? ★ Texte / Photos (HD) / Vidéos (HD) / Sons ★ Comment les valoriser pour les moteurs de recherche ? Les contenus constituent le coeur du site ! 14
    • Arborescence, contenus, et référencement naturel 15
    • Arborescence, contenus, et référencement naturel • Le référencement naturel ★ Le SEO (Search Engine Optimization) se pense dès la création de l'arborescence du site ★ Répartir le poids sémantique par le linking interne ★ 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 L’arborescence du site participe à l’efficacité du référencement 16
    • Arborescence, contenus, et référencement naturel 17
    • Arborescence, contenus, et référencement naturel • Le référencement naturel ★ Le référencement se pense dès la création des contenus ★ Définir un champ de mots-clés ou expressions-clés (long tail) ★ Ne pas se contenter de se référencer sur les mots-clés relatifs au coeur de l'activité du site ★ Ordonner les mots-clés par importance Trouver l’équilibre entre le contenu orienté visiteur et le contenu orienté moteur de recherche 18
    • Arborescence, contenus, et référencement naturel • 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é 19
    • Arborescence, contenus, et référencement naturel 20
    • Conception ergonomique 21
    • Conception ergonomique Zoning Wireframes Cinématiques (storyboard) 22
    • Conception ergonomique Zoning 23
    • Conception ergonomique Wireframe 24
    • Conception ergonomique Cinématiques 25
    • Conception ergonomique • 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 26
    • Conception ergonomique Interface de site utilisant un «Grid System» à 16 colonnes 27
    • Conception ergonomique Interface de site utilisant un «Grid System» à 16 colonnes 28
    • Conception ergonomique Ressources à télécharger : http://960.gs http://www.thegridsystem.org 29
    • Conception ergonomique • Avant tout du bon sens ★ L’ergonomie est synonyme de simplicité ★ Les bonnes pratiques ergonomiques s’acquièrent facilement en observant les sites à très forte audience : Amazon, Yahoo, Google, Facebook... ★ Ces géants du web ont tous mené des études et des tests utilisateurs coûteux, auquels tous les professionnels se fient au quotidien Penser l’utilisation du site pour ses propres parents 30
    • Conception ergonomique • Quels outils ? ★ Du papier et un crayon ! ★ Powerpoint / Keynote (mac) ★ Photoshop ★ Illustrator ★ Omnigraffle ★ Axure ★ ... Les outils les plus simples sont les meilleurs 31
    • Conception ergonomique Lectures conseillées : Ergonomie Web The Smashing Book Information Architecture Amélie Boucher Smashing Magazine Louis Rosenfeld & Peter Morville http://www.ergolab.net http://www.smashingmagazine.com 32
    • Spécifications fonctionnelles 33
    • Spécifications fonctionnelles, choix d’une solution technique adaptée • Les spécifications fonctionnelles ★ C'est long et c'est bon ... sauf pour le chef de projet ★ Recenser toutes les fonctionnalités du site internet ★ Identifier et caractériser tous les contenus ★ Un exemple ? Prenons un article de presse online Des spécifications fonctionnelles complètes garantissent un développement et un suivi de production optimaux 34
    • Spécifications fonctionnelles, choix d’une solution technique adaptée Wordpress Joomla Drupal 35
    • Spécifications fonctionnelles, choix d’une solution technique adaptée • Quels critères ? ★ Le plus important : couverture fonctionnelle ★ Pérennité de la solution ★ Facilité de mise à jour ou de reprise par un autre prestataire ★ Présence et efficacité de la communauté ou de l’entreprise Du benchmark en veux-tu ? En voilà ! 36
    • Spécifications fonctionnelles, choix d’une solution technique adaptée • Outils de benchmark ★ Le benchmark devient quasi inutile avec l’expérience ★ Excel est votre ami ★ Alpha.benchmarkr.com : générateur et facilitateur de benchmark Des outils et de la logique 37
    • Conception graphique 38
    • Conception graphique • À qui plaire ? ★ Pas forcément à l’utilisateur final ! ★ C’est votre client / interlocuteur principal qu’il faut convaincre ★ Soyez pragmatiques ★ Ne pas s’acharner Votre client aura le dernier mot 39
    • Conception graphique • L’esprit créatif ★ Un webdesigner n’est pas un artiste ! ★ La création sert des objectifs business ★ Un site moche peut inspirer confiance (Craiglist, Amazon...) ★ Un benchmark graphique du secteur est indispensable Le graphisme se juge sur des critères objectifs 40
    • Conception ergonomique Outils en ligne : http://www.kuler.com http://www.colourlovers.com 41
    • Conception graphique • Le choix des typos ★ Maximum 3 typos différentes sur un même support ★ Avec ou sans empattement ? ★ Les typos dites «web safe» : Arial, Times, Georgia, Trebuchet, Verdana... ★ Grâce au CSS3, il est possible d’utiliser quasiment n’importe quelle typo Un site internet n’a pas la lisibilité d’un magazine papier 42
    • Intégration et développement 43
    • Intégration et développement • L’intégration ★ Intégrer un site sans jouer à Tetris ! ★ L'intégration comme outil de référencement ★ Les balises html ont un sens et sont régies par des règles De la qualité de l’intégration dépend l’efficacité du plan de référencement 44
    • Intégration et développement <ul> <li>Le concept</li> <li>Les missions</li> <li>La CNJE</li> <li>Le Prix d'Excellence et les labels</li> Liste d’éléments <li>L'environnement des J.E.</li> <li>JADE, le réseau européen</li> </ul> 45
    • Intégration et développement <dl> <dt>Chad Smith</dt> <dd>Batteur</dd> <dd>47 ans</dd> <dt>John Frusciante</dt> <dd>Guitariste</dd> <dd>47 ans</dd> Liste d’éléments avec titre et <dt>Flea</dt> description <dd>Bassiste</dd> <dd>47 ans</dd> <dt>Anthony Kiedis</dt> <dd>Chanteur</dd> <dd>47 ans</dd> </dl> 46
    • Intégration et développement Les images <img src=“img/logo.jpg” alt=“” /> À éviter 47
    • Intégration et développement Les images <img src=“img/logo-synerghetic.jpg” alt=“Logo de Synerg’heTiC” /> Bonne pratique 48
    • Intégration et développement Les liens <a href="http://www..">Cliquez ici</a> À éviter 49
    • Intégration et développement Les liens <a href="http://www.." title="Site de Synerg’heTiC"> Site de Synerg'heTiC</a> Bonne pratique 50
    • Intégration et développement • L’optimisation ★ Optimiser pour tous les navigateurs ★ Internet Explorer 6, oui ou non ? ★ La validation W3C, oui mais ... Tester, constater, corriger, tester, constater, corriger 51
    • Intégration et développement Ressources : Alsa Créations (Tutos XHTML, CSS...) Fran6art (Tutos intégration Wordpress) 52
    • Intégration et développement • CMS ou Framework ? ★ En utilisant un CMS, la phase de développement consiste principalement à installer et à configurer les différents modules ★ En utilisant un Framework, le développement spécifique est facilité par l’emploi de librairies pré-existantes ★ Le «from scratch» est à proscrire, même pour des projets simples (sécurité, maintenance, pérennité...) Différents chemins face au besoin 53
    • Intégration et développement • Les méthodes de développement ★ La méthode AGILE (pas celle à Franck) ★ Développement collaboratif ★ Extreme Programming (XP) ★ Utilisation de Subversion (système de gestion de versions) La phase de développement n’est pas forcément linéaire 54
    • Intégration et développement • L’url rewriting ★ Eviter les url du type "product_page.php?cat=34&id=25&color=3" ★ Préférer les url du type produits-salles-de-bains/R2D2-bathroom- soap.html ★ Respecter les règles habituelles : pas d'accents, d'espaces, de caractères exotiques Utile pour les moteurs de recherche et les visiteurs 55
    • Recette et debug 56
    • Recette et debug • La recette ★ Un "soupçon" d'Armagnac pour le CDP ★ Reprise de tous les éléments listés dans les spécifications ★ Prévoir la marge nécessaire aux corrections éventuelles ★ Des outils existent pour organiser le reporting des bugs Le client doit s’impliquer dans la phase de recette 57
    • Recette et debug Trac 58
    • Promouvoir un site internet 59
    • Facebook 60
    • Sur Facebook : créer et gérer une page fan • Les avantages ★ + de 400M d’utilisateurs dans le monde / 15M en France ★ Les «fans» sont des prospects qualifiés puisqu’ils se sont inscrits spontanément ★ Elle centralise les discussions autour d’une marque, que les critiques soient bonnes ou mauvaises ★ Elle permet de communiquer facilement et à moindre coût avec ses clients ou prospects et désamorcer des crises éventuelles La question n’est pas de savoir si on va sur Facebook, mais plutôt de savoir comment 61
    • Sur Facebook : créer et gérer une page fan • Les bonnes pratiques pour sa page fan ★ Créer une page fan plutôt qu’un groupe ★ Personnaliser sa page (photo de profil, onglet personnalisé...) ★ Ne pas bloquer les contributions des utilisateurs ★ Animer la page régulièrement (mais pas plus de 2 messages par jour) ★ Inviter les fans à participer ★ Définir une URL facilement accessible (ex : facebook.com/synerghetic.je) Sources : Agence Vanksen Entretenir une relation à dimension humaine 62
    • Sur Facebook : créer et gérer une page fan • En cas de problème ★ Ne pas s’énerver et devenir agressif ★ Ne pas se cacher ou se taire ★ Écouter, suivre le buzz online ★ Admettre les faits, remettre en contexte, prendre les choses en main ★ Être honnête, ouvert et clair sur le problème (causes et solutions) ★ Garder un visage et un langage humain, pas de «blabla» juridique ★ Mobiliser ses influents internes/externes ★ Expliquer les mesures prises pour corriger et empêcher le problème dans le futur Sources : Agence Vanksen Ne surtout pas censurer ses «fans» 63
    • Sur Facebook : créer et gérer une page fan • Le cas Nestlé ★ Demande de retrait de la vidéo sur Youtube ★ Tentative de censure des réactions des «fans» Facebook Autoritarisme, mépris et absence 64
    • Sur Facebook : créer et gérer une page fan Ressources : Inside Facebook.com (bonnes pratiques) Mashable (Facebook guidebook) Tigerlily (Personnalisation page fan) 65
    • Twitter 66
    • Sur Twitter : comment se vendre sur Twitter ? • Twitter, c’est quoi ? ★ C’est comme un article de blog sauf que vous n’avez que 140 caractères ★ C’est comme une mise à jour de statut Facebook sauf que c’est visible sur une infinité de supports ★ C’est comme un grand tchat’ sauf que vous choisissez qui vous voulez suivre ★ C’est comme un client de messagerie instantanée sauf que c’est public et archivé sur le web Sources : Agence Vanksen Un outil de communication temps réel, simple et puissant 67
    • Sur Twitter : comment se vendre sur Twitter ? • Les avantages ★ Une progression exponentielle (300 000 nouveaux utilisateurs par jour) ★ Une analyse en temps réel des pensées et perceptions de prospects potentiels ★ Le seul moteur de recherche en temps réel ★ Le canal par lequel les informations sont diffusées le plus rapidement ★ Améliorer son référencement naturel (tweets indexés quasi- instantanément dans les moteurs de recherche) Un feedback de ses clients en temps réel 68
    • Sur Twitter : comment se vendre sur Twitter ? • Les bonnes pratiques sur Twitter ★ Personnaliser son compte (background et informations) en reprenant la charte graphique de la marque ★ Définir une ligne éditoriale ★ Suivre les personnes susceptibles de vous suivre ★ Suivre les influents du domaine ★ Suivre ceux qui parlent de vous ★ Alterner contenus pros et discussions plus informelles ★ Publier par vagues discontinues (5 tweets par jour maximum) Sources : Agence Vanksen Ne pas utiliser Twitter que pour sa promotion personnelle 69
    • Sur Twitter : comment se vendre sur Twitter ? Outils de monitoring : Twitter Search Tweetscan Ressources : Présentation complète de l’essentiel par Vanksen 70
    • Newsletter 71
    • Mettre en place une newsletter • Les avantages ★ Facilité d’inscription et d’utilisation : une adresse e-mail suffit ★ Fidéliser ses utilisateurs ★ Possibilité de personnaliser le contenu en fonction de l’utilisateur ★ Des outils permettent d’obtenir des statistiques précises sur les liens qui ont intéressés les abonnés ★ Un moyen supplémentaire d’augmenter le trafic vers son site internet Du trafic qualifié à moindre coût 72
    • Mettre en place une newsletter Outils d’e-mailing : Campaign Monitor MailChimp 73
    • Quelques pistes à explorer 74
    • Quelques pistes à explorer • Des outils supplémentaires ★ Création d’un blog - Se positionner en tant qu’expert de son domaine, sur internet - Apporter son point de vue sur des sujets d’actualité - Pas de contrainte sur le fond (volume et types de contenus) - Améliorer significativement son référencement naturel ★ Création de chaînes youtube, dailymotion, viméo... - Centraliser toutes ses vidéos - Proposer une forme alternative à l’écrit - Permettre aux utilisateurs de diffuser les vidéos sur leurs propres réseaux - Améliorer son référencement naturel 75
    • Sources • On les remercie beaucoup : ★ Vanksen pour le partage de toutes leurs présentations ★ http://www.slideshare.net/culturebuzz/agence-vanksen-digitalviraladvertising-confrence-buzzthebrand-2009 ★ http://www.slideshare.net/Vanksen/bien-grer-sa-rputation-en-ligne ★ http://www.slideshare.net/gregfromparis/bien-gerer-son-ereputation ★ http://www.slideshare.net/Vanksen/twitter-prsentation-complte-de-lessentiel-1903868 ★ ReadWriteWeb pour leur excellent article ★ http://fr.readwriteweb.com/2010/03/30/a-la-une/greenpeace-nestl-sur-facebook-lart-de-guerre/ ★ HETIC 76
    • On reste en contact ? twitter.com/synerghetic facebook.com/synerghetic.je blog.synerghetic.net/ contact@synerghetic.net