2. 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
3. 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
4. Nos références
Kultura Viral Film Festival Groupe Chronos
www.kultura.fr www.viralfilmfestival.ch www.groupechronos.org
5. Réaliser et promouvoir
un site internet
Olivier Chatel Colas Fournier Jérémy Gallemard
Président Resp. Projets Resp. Communication
5
6. 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
8. 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
9. 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
10. 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
11. 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
13. 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
14. 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
16. 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
18. 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
19. 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
26. 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
29. Conception ergonomique
Ressources à télécharger :
http://960.gs
http://www.thegridsystem.org
29
30. 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
31. 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
32. 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
34. 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
36. 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
37. 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
39. 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
40. 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
41. Conception ergonomique
Outils en ligne :
http://www.kuler.com
http://www.colourlovers.com
41
42. 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
44. 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
45. 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
46. 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
50. Intégration et développement
Les liens
<a href="http://www.." title="Site de Synerg’heTiC">
Site de Synerg'heTiC</a>
Bonne pratique
50
51. 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
52. Intégration et développement
Ressources :
Alsa Créations (Tutos XHTML, CSS...)
Fran6art (Tutos intégration Wordpress)
52
53. 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
54. 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
55. 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
57. 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
61. 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
62. 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
63. 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
64. 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
65. Sur Facebook : créer et gérer une page fan
Ressources :
Inside Facebook.com (bonnes pratiques)
Mashable (Facebook guidebook)
Tigerlily (Personnalisation page fan)
65
67. 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
68. 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
69. 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
70. Sur Twitter : comment se vendre sur Twitter ?
Outils de monitoring :
Twitter Search
Tweetscan
Ressources :
Présentation complète de l’essentiel par Vanksen
70
72. 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
73. Mettre en place une newsletter
Outils d’e-mailing :
Campaign Monitor
MailChimp
73
75. 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
76. 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
77. On reste en contact ?
twitter.com/synerghetic
facebook.com/synerghetic.je
blog.synerghetic.net/
contact@synerghetic.net