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

#prezsynerg
Hashtag twitter :
La Junior-Entreprise du Web

Qui sommes-nous ?
• Synerg’heTiC en chiffres
2004 : Création de la JE
2006 : Label meilleur espoir
120 : Études réalisées en 5 ans
100k€ : CA atteint en 2010 (+20%)
Parmi les 30 meilleures JE en 2010 !
La Junior-Entreprise d’Hétic,
Multimédia / Management / Informatique

Nos références
Viral Film Festival
www.viralfilmfestival.ch
Groupe Chronos
www.groupechronos.org
Générali Formation
Outil interne

Nos références
Portail des Métiers de l’Internet
www.metiers.internet.gouv.fr
Film Danone
Communication interne
Beauty Executive
www.beautyexecutive.com

5
Réaliser et promouvoir
un site internet
5
Robin Llopis
Président
Estelle Courdoisy
Resp. Projets
Hedi Smida
Resp. Commercial

6
Sommaire
La création d’un site web, de A à Z
Objectifs, cibles, concurrence : définir la stratégie de communication
Arborescence, contenus : la structure générale
Conception ergonomique : accès à l’information
Spécifications fonctionnelles : comment ça marche ?
Conception graphique : la première impression
Intégration et développement : ça prend forme !
Recette : debug et finalisation
6
Spécifications techniques : quelle plateforme ?
Communiquer sur Internet
Quelques chiffres clés

7
Sommaire
Un site mais pas seulement
Stratégie de communication globale
Facebook : l’incontournable
Twitter : l’instantané
Blog : un outil à intégrer
7
Newsletter
Quelques pistes à explorer
Le mobile
Quelques chiffres
Déterminez votre stratégie
Conception : outils et best-practices
Développement Web Apps vs Applications
Application vs site mobile

9
Chiffres clés :
9
• Internet en France
20,4 millions d’abonnements au haut débit
37,4 millions d’internautes en juillet
32,5 millions € : chiffre d’affaires prévu sur la vente en ligne
92 % des français se connectent pour surfer tous les jours*
Une population de plus en plus connectée
*Chiffres pour l’année 2010 ARCEP, TNT/Sofres en France

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

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

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

15
15
• 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é

16
16
Organisation des contenus

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

18
18
• 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 !

19
Arborescence, contenus, et référencement naturel
19

20
20
• Le référencement naturel
Le SEO (Search Engine Optimization) se pense dès la création de
l'arborescence 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
L’arborescence du site participe à l’efficacité du référencement
Trouver l’équilibre entre le contenu orienté visiteur et le
contenu orienté moteur de recherche

21
21
• 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é

23
Conception ergonomique
23
WireframesWireframesZoningZoning Cinématiques
(storyboard)
Cinématiques
(storyboard)

24
24
Zoning

25
25
Wireframe

26
26
Cinématiques

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

28
28
Interface de site utilisant un «Grid System» à 16 colonnes

29
29
Interface de site utilisant un «Grid System» à 16 colonnes

30
30
• 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,
auxquels tous les professionnels se fient au quotidien
Penser l’utilisation du site pour ses propres parents

31
31
• Quels outils ?
Du papier et un crayon !
Powerpoint / Keynote (mac)
Mockingbird (en ligne)
Balsamiq
Omnigraffle
Axure
...
Les outils les plus simples sont les meilleurs

32
32
Spécifications fonctionnelles

33
Spécifications fonctionnelle : comment ça marche ?
33
• Les spécifications fonctionnelles
Détailler l’expression des besoins
Recenser toutes les fonctionnalités du site internet
Identifier et caractériser tous les contenus
Des spécifications fonctionnelles complètes garantissent un
développement et un suivi de production optimaux

34
34
Spécifications techniques

35
35
Du fonctionnel au technique
Etude de faisabilité
Mise en place technique de l’ensemble des fonctionnalités
Choix de la plate-forme technique globale
Concrétisation des besoins

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

37
37
• Quels critères ?
Le plus important : couverture fonctionnelle et 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à !

38
38
Wordpress Drupal

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

41
41
• À qui plaire ?
C’est votre client / interlocuteur principal qu’il faut convaincre
Soyez pragmatiques
Votre client aura le dernier mot
Conception graphique

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

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

44
44
Intégration et développement

45
45
• 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éAndroid dépend l’efficacité du plan de
référencement

46
46
• HTML5/CSS3/JS
Nouveaux standard, nouvelles règles
Plus de balises -> plus de sémantique
Plus de libertés
L’intégration s’anime

47
47
<!DOCTYPE html><html lang="fr">
<head></head>
<body>
<header>
<nav></nav>
</header>
<section>
</section>
<aside>
<article>
</article>
</aside>
<footer></footer>
</body>
</html>
Organisation
sémantique
d’une page
HTML5

48
48
• L’optimisation
Optimiser pour tous les navigateurs Internet Explorer 6, oui ou non ?
La validation W3C, oui mais ... Intégration intelligente
Tester, constater, corriger, tester, constater, corriger

49
49
Les méthodes de développement
Développement collaboratif
Utilisation de Subversion (système de gestion de versions)
Extreme Programming (XP)
La phase de développement n’est pas forcément linéaire

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

52
52
 La recette
Un "soupçon" d'Armagnac pour le CDP
Reprise de tous les éléments listés dans les spécifications
Vérifications du respects des différents standards
Report et résolution des différents bugs
 Des outils existent pour organiser le reporting des bugs
 Le client doit s’investir dans la phase de recette
Prévoir la marge nécessaire aux corrections éventuelles
Recette et debug

55
Quelques chiffres
55
• Une révolution des usages
Des technologies maîtrisées : smartphones, réseaux sociaux, 3G, Wifi
Les forfaits Internet explosent : 19,4 millions d’actifs 3G en France en 2010
Plus de 3 milliards d’applications téléchargées sur l’App Store
...
300% de croissance prévus sur 2 ans sur le marché des
applications !

56
Déterminez votre stratégie
56
• Posez-vous les bonnes questions
Quelle est l’histoire à raconter ? Quel message à faire passer ?
Quelle expérience offrir ? Quels objectifs ?
A qui s’adresse t’on ?
Quelle est la finalité de la prise de parole ?
Du mobile, mais pas n’importe comment !

57
Applications VS Site mobile
57
• La guerre des stores
Apple caracole en tête avec 60 % du marché (!)
La forte progression d’Android place Google second à 14%
Plus de 3 milliards d’applications téléchargées sur l’App Store
Des tentatives de réactions de la part de Nokia et Samsung
L’iPhone est ROI

58
58
• Les applications sont reines
Des dispositifs riches en médias (son, vidéo, GPS, Sms …)
Des opérations pérennes pour un usage quotidien (alertes…)
Des accès sécurisés et/ou personnalisés
De nombreuses contraintes à prendre en compte (compatibilité, temps
de développement, validations des Stores…)
Une expérience utilisateur incomparable

59
59
• Un accès instantané
Idéal pour générer un contact rapide
Une démocratisation des technologies (HTML 5 / Javascript)
Un accès direct sans passer par un Store = plus grande liberté
L’utilisation des fonctionnalités des terminaux se simplifie
Une compatibilité du parc mobile bien plus importante
L’information partout et pour le plus grand nombre

60
Conception : outils et best-practices
60
• L’ergonomie utilisateur avant tout
Lisibilité, simplicité d’accès et interfaces tactiles
Règles de bonne conduite dictées par le W3C
Guidelines Apple et Android disponibles en ligne
Simulation en local pour vérifier la cohérence de l’ensemble
Une version mobile n’est pas juste plus petite

61
61
• Des technologies courantes
Le web mobile est (relativement) simple à prendre en main
HTML 5, CSS 3 et Javascript simplifient le développement
Sencha Touch ou jQuery Mobile offrent de nombreuses possibilités
(géolocalisation, ajax, interfaces, animations)
Des modules permettent de générer des pages mobiles pour la plupart des
CMS
Faites tester vos applications par les utilisateurs finaux

62
62
• Des langages propriétaires
L’Objective-C, extension du C chez Apple
Java C/C++ ou encore Go pour Android
Des plateformes de développement telles que Titanium permettent le
développement multi-plateformes (en JS)
Apple a récemment permis l’export via Flash (AS3)
Des langages compilés, complexes et demandant une expertise

63
63
Promouvoir un site internet

64
Stratégie de communication globale
64
• Une communication se pense à 360°
Il est nécessaire d’intégrer les leviers classiques : média, RP, événementiel
Les leviers web doivent rester à l’esprit dès la conception
Organiser sa communication en intégrant :
- le display et l’affiliation
- le référencement naturel et les liens sponsorisés
- le social media
- le mobile
Le bon message au bon moment pour la bonne personne

65
Quelques chiffres
65
[Vidéo] Social Media Revolution 2
http://www.youtube.com/watch?v=lFZ0z5Fm-Ng

67
Sur Facebook : créer et gérer une page fan
67
• Les avantages
+ de 500M 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

68
68
• 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)
Entretenir une relation à dimension humaine
Sources : Agence Vanksen

69
69
• 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
Ne surtout pas censurer ses «fans»

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

72
Sur Twitter : comment se vendre sur Twitter ?
72
• 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
Un outil de communication temps réel, simple et puissant

73
73
Un feedback de ses clients en temps réel
• 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
Un 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)

74
74
Ne pas utiliser Twitter que pour sa promotion personnelle
• 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)

76
Blog : un outil à intégrer
76
• Du contenu de qualité, régulièrement
Se positionner en tant qu’expert sur son domaine
Apporter son point de vue/analyse sur des sujets d’actualité
Création d’une communauté de lecteurs réguliers
Diffusion des billet via RSS, Digg, Delicious, Twitter…
Permet d’améliorer significativement son référencement naturel
Un outil parfois plus rentable qu’une campagne Adwords

78
Mettre en place une newsletter
78
Du trafic qualifié à moindre coût
• 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

79
79

80
80
• Des outils supplémentaires
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
Utilisation de la géolocalisation
- Se référencer sur les différentes plateformes : Google Places, Dismoiou, Foursquare, FB Places
- Maintenir les informations de contact disponibles et à jour
- Demander des feedbacks aux utilisateurs et bénéficier des recommandations sociales
- Utiliser la viralité et le côté hype de ces outils

81
81
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
• Ressources

82
82
Facebook
Inside Facebook.com
Mashable (Facebook Guidebook)
Tigerlily (Personnalisation page
fan)
Grid System
http://960.gs
http://www.thegridsystem.org
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)
• Ressources

83
83
• Quelques lecturesLectures conseillées :
Ergonomie Web
Amélie Boucher
http://www.ergolab.net
The Smashing Book
Smashing Magazine
http://www.smashingmagazine.com
Information Architecture
Louis Rosenfeld & Peter Morville

84
Sources
84
• 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

On reste en contact ?
twitter.com/synerghetic
facebook.com/synerghetic.je
blog.synerghetic.net/
contact@synerghetic.net

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à Formation : Réaliser et promouvoir un site internet (V2)

Similaire à Formation : Réaliser et promouvoir un site internet (V2) (20)

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

Notes de l'éditeur