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
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
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
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
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
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
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
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
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
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
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
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
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
65.
66.
67.
68. Webdesign
• Pensez à l’intégrateur
Fournissez-lui vos typos
Utilisez des formants graphiques simples
Rangez vos calques
68
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
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
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
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
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
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
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
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
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