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

1. La Junior-Entreprise du Web
Hashtag twitter :
#prezsynerg

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. Nos références
Croix Rouge
Les caves d’Augustin EMLIFE
Webdocumentaire Portail étudiant de l’EMLYON
Site vitrine

4. Nos références

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. 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. 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. Communiquer sur Internet
Communiquer sur internet
8

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. 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. Pourquoi sur la toile :
• Des opportunités multiples
11

12. Créer son site web

13. Bien définir ses objectifs

14. Cibles
• Pour qui ?
 Analyse de l’existant
 Hiérarchisation des besoins
 Définition des cibles
Connaître son marché numérique
14

15. Étude concurrentielle
• Le monde qui vous entoure
 Junior-Entreprises
 Entreprises
 Entrepreneurs
Se positionner face à ses concurrents
15

16. Audit
• Et vous maintenant ?
16

17. Se positionner
• Faire avec ses moyens
 Moyens financiers
 Moyens humains
17

18. Les spécifications

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. Les spécifications fonctionnelles
20

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. Les spécifications techniques
UML
Complément de spécifications fonctionnelles
Parcours utilisateur
22

23. Le référencement
23

24. Référencement
24

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
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
Trouver l’équilibre entre le contenu orienté visiteur et le
contenu orienté moteur de recherche
25

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. Référencement
27

28. Référencement
28

29. Référencement
29

30. Référencement
30

31. Référencement
31

32. Référencement
http://www.opensiteexplorer.org/
32

33. Référencement
http://chrispederick.com/work/web-developer/
33

34. Référencement
34

35. Référencement
35

36. Référencement
36

37. Architecture de l’information
37

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. 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. Ergonomie
Zoning Cinématiques
Wireframes (storyboard)
40

41. Ergonomie
Zoning
41

42. Ergonomie
Wireframe
42

43. Ergonomie
Cinématiques
43

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. 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. 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. Webdesign
47

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. Typographie
49

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. Typographie
• Le typos web
 Verdana  Georgia
 Arial  Times
 Lucida  Palatino
 Tahoma  Cambria
 Trébuchet
 Calibri
Plutôt limité non?
51

52. Typographie
 Alors, comment mettre ça…
52

53. Typographie
 Dans ça ?
53

54. Typographie

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. 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. 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
industry's 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. Typographie

59. Typographie

60. Le reste

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. Webdesign
Interface de site utilisant un «Grid System» à 16 colonnes
http://960.gs/
62

63. Webdesign
Interface de site utilisant un «Grid System» à 16 colonnes
http://960.gs/
63

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

68. Webdesign
• Pensez à l’intégrateur
 Fournissez-lui vos typos
 Utilisez des formants graphiques simples
 Rangez vos calques
68

69. Intégration
69

70. Intégration
• Bonnes pratiques
 Validité W3C
 Compatibilité avec les
standards utilisés par votre
cible
 Code commenté = pérennité
70

71. 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

72. 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

73. Intégration
• Quelques exemples
73

74. Développement
74

75. 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

76. 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

77. Recette et debug
77

78. 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

79. Promouvoir un site internet
79

80. Réseaux sociaux
80

81. 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

82. 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

83. 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

84. 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

85. 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

86. 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

87. 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

88. Blog
88

89. 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

90. Newsletter
90

91. 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

92. Place à la mobilité
92

93. 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

94. 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

95. 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

96. 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

97. 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

98. 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

99. Quelques pistes à explorer
99

100. 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

101. C’est pas fini
101

102. Web analytics
102

103. Web analytics
• “Mesures d'audience et de fréquentation sur
Internet”
 “Elles regroupent la mesure, la collecte, l'analyse et la présentation de données
provenant d'Internet utilisées afin de comprendre et d'optimiser l'utilisation du
Web”
Les données nécessaires afin de déterminer l’évolution de son site
103

104. 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

105. 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

106. Création de contenu

107. 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

108. 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

109. 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

110. Sur Facebook : créer et gérer une page fan
• Ressources
Facebook
Grid System
Inside Facebook.com
Mashable (Facebook Guidebook) http://960.gs
Socialshaker (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

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