Qu'est-ce qu'une vitrine virtuelle? C'est un outil pour faire vivre, partager, communiquer, évoluer son projet ou produit sur le web; pour ultimement le VENDRE.

1. Vitrine virtuelle
CEFQ, 19 janvier 2012

2. Vitrine virtuelle
• Qui suis-je?
Marie-Andrée Roger
• Co-proprio de Overture Project
• Projet Kobolaa
• Pour plus de détails:
http://www.linkedin.com/in/marieandreeroger

3. Vitrine virtuelle
• Qu’est-ce qu’une vitrine virtuelle?
• Faire vivre, partager, communiquer, évoluer son projet/
son produit sur le web; ultimement le VENDRE.
Un site web n’est qu’UNE partie d’une stratégie web;
elle n’est pas l’unique avenue.
Et il y a plusieurs manières de le faire…

4. Vitrine virtuelle
• À quoi ça sert?
• Partager l’information
• Faire découvrir son projet/produit
• Attirer l’attention
• Établir sa crédibilité
• Supporter votre service à la clientèle 24h/24, 7 jours/7
• Réduire les coûts d’opérations : marketing, ventes, service,
production, etc.
• Augmenter ses revenus, si bien fait!
• Peut contenir des outils pour soutenir vos opérations :
e-Boutique, questionnaire, inscription évènements, etc.

5. Vitrine virtuelle
• Pourquoi j’en ai besoin?
• Parce que vos clients estiment que vous DEVEZ en avoir un!
• Ne pas avoir de site = pas sérieux, aucune crédibilité
• La plupart des gens visitent un site web pour résoudre un
problème qu’ils ont :
• Ils ont besoin d’information
• Ils veulent faire un achat ou un don
• Ils veulent être divertis
• Ils veulent faire partie d’une communauté
Si vous pouvez les aider efficacement → SUCCÈS

6. Vitrine virtuelle
• Activité de réflexion

7. Vitrine virtuelle
• Présentation d’aujourd’hui
1. Création de sa propre vitrine virtuelle
• Processus itératif en 4 temps
2. Les règles de l’art
• Comment faire un excellent site web qui génèrera des revenus
3. Atelier
• Plan de création de la vitrine virtuelle d’un participant

8. 1. Processus itératif de
création de sa propre
vitrine virtuelle

9. Créer sa propre vitrine virtuelle
• Les premiers pas : informer un client potentiel, avoir une
présence sur le web
• Médias Sociaux
• GRATUITS : Facebook, (Twitter), LinkedIn, Google+, YouTube
• PAYANTS : ning
• Répertoires
• GRATUITS : Yelp.com, Associations professionnelles, répertoires
spécialisés (icriq.com, artisans-quebec.com, etc.)
• PAYANTS : Page Jaunes, répertoires spécialisés (restoMTL, weblocal,
bonjourquébec.com etc.)
• Sites de vos collaborateurs (ex : boutique, agents, vendeurs,
clients, etc.)

10. Créer sa propre vitrine virtuelle
• Le deuxième pas : vendre rapidement
• Vendre un produit :
• eBay, Amazon, Shopify, etc.
• Vendre un service :
• Agentsolo.com, freelancer.com, freelance.com, etc.
• Coupons en ligne … mais il faut faire attention!!
• Groupon, Tuango, TeamBuy…
• Un mot sur Paypal

11. Créer sa propre vitrine virtuelle
• Le troisième pas : avoir son propre site / blogue
• Les 4 possibilités
• DIY gratuits
• Tumblr, Wix, WordPress, Blogger, etc.
• DIY payants / CMS $
• Joomla!, SquareSpace, Drupal, etc.
• Sous-contractant, avec CMS $$
• Sous-contractant, sur mesure (HTML-CSS, Flash, etc.) $$$+

12. Créer sa propre vitrine virtuelle
• Do-It-Yourself (DIY) gratuit (Tumblr, Wix, WordPress, etc.)
• AVANTAGES
• Gratuit!
• Donne rapidement des résultats simples
• Bon terrain de jeu pour apprendre à avoir un petit site web
• DÉSAVANTAGES
• Demande beaucoup d’apprentissage, donc de temps
• Possibilités limitées, peut être ardu (voir impossible) d’atteindre un
résultat précis

13. Créer sa propre vitrine virtuelle
• Do-It-Yourself (DIY) payants / Content Management Systems
(CMS) (Joomla!, SquareSpace, Drupal, etc.) $
• AVANTAGES
• Contrôle complet sur l’ensemble des aspects du site
• Avoir des connaissances techniques ouvre bien des possibilités
• DÉSAVANTAGES
• Demande ÉNORMÉMENT d’apprentissage, donc de temps et
d’énergie
• Comme ce sont des outils puissants, il est possible (et même facile)
de faire des erreurs qui vont briser / détruire le site

14. Créer sa propre vitrine virtuelle
• Sous-contractant, avec CMS $$
• AVANTAGES
• Habituellement pas de dépassement de coûts
• Moins de surprises, souvent le sous-contractant présente un
« catalogue » des modules offerts
• DÉSAVANTAGES
• Le sous-contractant n’est qu’un intermédiaire et n’a pas de contrôle
sur les modules du CMS et leurs modifications
• Si les modules sont insuffisant, faire du sur-mesure avec un CMS c’est
s’engager sur un terrain glissant
• La plupart des sites faits avec un CMS finissent par se ressembler

15. Créer sa propre vitrine virtuelle
• Sous-contractant, sur mesure (HTML-CSS, Flash, etc.) $$$+
• AVANTAGES
• Possibilités illimitées
• Le client est souvent mieux encadré, donc passe plus de temps à
développer son contenu et sa stratégie
• Si le travail est de qualité (W3C), il est facile de le prendre comme
base pour faire évoluer le site par la suite
• DÉSAVANTAGES
• Possibilités illimitées!
• Demande une vision très claire des besoins et objectifs

16. Créer sa propre vitrine virtuelle
• Ensuite…
• Faire vivre sa vitrine virtuelle!
• Entretient - Maintient
• Aller plus loin encore…

17. Questions?

18. 2. Les règles de l’art –
Comment faire un
excellent site web qui
génèrera des revenus?

19. Bases techniques
• Les bases techniques d’un site web - comment ça marche?
• Architecture d’une requête web
1. Un utilisateur ouvre son navigateur (browser)
2. Il entre l’adresse (domaine) d’un site web
3. Le browser trouve le serveur associé au domaine
4. Le browser demande une page au serveur
5. Le serveur prépare la page demandée
6. Le serveur envoie le code de la page au browser
7. Le browser interprète le code et affiche la page

20. Bases techniques
• Nom de domaine
• Compagnies: Godaddy.com, domain.com, domainname.ca, etc.
• Favoriser le nom de l’entreprise plutôt que ce qu’elle fait
• Prioriser un nom simple plutôt qu’élaboré (.com vs .ca)
• Pas besoin d’acheter plusieurs versions
• Éviter les ponctuations (-, _, ~, etc.), les accents et les articles (le,
et, à, etc.)
• NOTE : utilisez votre adresse email …@votredomaine.com pour
toutes vos activités commerciales

21. Bases techniques
• Hébergement
• À discuter avec votre programmeur (Linux, Windows)
• Habituellement entre 7$ et 10$ par mois
• Frais récurrent à chaque année, séparément de la programmation
de votre site

22. Bases techniques
• Browsers
• Les gens utilisent différents browsers (Internet Explorer, Firefox,
Chrome, Safari, Opera)
• Problèmes d’affichage entre les browsers
• Problèmes avec les anciennes versions
• Les gens ne font pas leurs mises à jour!!
• Tous les browsers ne supportent pas toutes les technologies (ex.:
HTML5)

23. Bases techniques
• Mobile
• Chaque téléphone et chaque tablette est différent
• La plupart des browsers de téléphones ont des capacités réduites
• Pas de support pour des technologies riches comme Flash et
Silverlight
• 3 solutions possibles :
• 1. Site régulier accessible par browser mobile
• 2. Site fait spécifiquement pour browser mobile
• 3. Application fait sur mesure

24. Les règles de l’art
• Qu’est-ce qu’un site parfait?
• Un site épuré
• Un site balancé où chaque chose est à sa place et est placée de façon
constante sur chaque page
• Un site où une attention est portée au détail
• Un site où les espaces blancs (white spaces) sont utilisés de façon
intelligente et stratégique
• Un site avec un design moderne mais modéré
• Un site qui utilise des schémas de couleurs intuitifs et des contrastes
forts pour une meilleure lisibilité des textes et une perception
visuelle des éléments
• Un site qui est descriptif, qui présente le projet/produit en soutenant
sa crédibilité (ex: photo du produit)
• Un site qui est entretenu, qui est vivant (qui marque le passage du
temps)
• Un site qui n’émet pas de son

25. Les règles de l’art
• Contenu, contenu, contenu
• L’élément LE PLUS IMPORTANT d’un site web
• “Less is more”, percutant, efficace
• Toujours prendre en compte : l’auditoire, le message, le moyen de
communication
• Technique de création de contenu
• Message principal
• Messages secondaires
• Appels à l’action
• La répétition est nécessaire mais de la bonne façon

26. Les règles de l’art
• Design/Layout
• Stratégie: informer ou attirer l’attention?
• Ne jamais oublier : un usager peut arriver n’importe où, n’importe
quand sur le site…. On ne lit pas un site web comme un livre.
• Connecter avec ses usagers: photos/images, choix de couleurs,
ambiances, polices, artwork – jouer sur le subconscient
• Templates, stock photos, polices – utilisation et droits d’auteurs
Quelqu’un devrait être en mesure de deviner le sujet de votre site
en 4 secondes

27. Les règles de l’art
• Search Engine Optimization (SEO) de base
• Contenu écrit, mots-clés, tags HTML : comment ça marche?
• Flash, Silverlight
• Google Analytics
• Accessibilité
• Site en HTML
• Photos, videos, contenu riche (Flash, Silverlight)
• http://www.w3.org/WAI/
• Vous payez pour quoi? – Qu’est-ce qui vous appartient?
• Le code, le design, les images faites sur mesure, les textes originaux,
les entrées de blogue, etc.
• Exigez d’avoir tout cela en votre possession à la fin de votre contrat

28. Questions?

29. Les règles de l’art – mauvais exemples
• Xeros: Reproduire la “réalité” sur un site
http://www.realbusiness.com/#/ready-for-business/select
• Temps de téléchargement trop long
• Site entièrement en Flash
• Aucun outil de recherche à portée de la main
• Très confus, aucun focus, n’atteint aucun but
• N’aide personne, inutile dans le partage d’information (première
raison d’avoir un site!!!)
• Pourrait très bien avoir coûté des millions!

30. Les règles de l’art – mauvais exemples
• Serene Naturist : quand les contrastes n’existent pas
• Aucun contraste de couleur, police ou utilisation d’espace blanc
pour aider à la lecture
• Trop d’images, trop de mouvements, trop de tout…
• Explications sur le site, quand cela devrait être intuitif
• Aucune suite dans les idées, aucun guide pour aider à trouver
l’information recherchée
• Aucune structure, aucune consistence
• Échouent à établir la crédibilité de leur entreprise

31. Les règles de l’art – mauvais exemples
• P&M Computers, Groupe CLE : quand le mouvement nous
donne mal au coeur
http://www.pandminc.com/
http://groupecle.com/#/splash/
• Mauvais nom de domaine (P&M)
• Mauvaise utilisation de Flash
• Temps de téléchargement trop long
• Aucun focus
• Consistence mise à l’épreuve
• Nous font réfléchir trop longtemps…

32. Mot de la fin
• À quoi vous attendre… Ce qu’il faut faire pour être prêt?
• Focus, avoir travaillé une stratégie préalablement
• Temps et énergie
• Être prêt à prendre des décisions
• Patience, être prêt à faire un effort et apprendre, même si c’est
quelqu’un d’autre qui le fait à votre place
• « Vous achetez une voiture, il faut savoir la conduire. »
• SURTOUT, allez y une étape à la fois
• Retour sur l’exercice de réflexion, période de questions

33. Sources
• Mashable.com
• Smashingmagasine.com
• Wikipedia.com
• Kobolaa.com/blog

34. Liens
http://www.facebook.com/ http://www.agentsolo.com/ http://www.godaddy.com/
http://twitter.com/ http://www.freelancer.com/ http://www.domain.com/
http://www.linkedin.com/ http://www.freelance.com/ http://www.domainname.ca/
https://plus.google.com/ http://www.groupon.ca/ http://www.microsoft.com/windows/
http://www.youtube.com/ http://www.tuango.ca/ internet-explorer/
http://www.ning.com/ http://www.teambuy.ca/ http://www.mozilla.org/
http://www.yelp.com/ http://www.paypal.com/ http://www.google.com/chrome/
http://www.icriq.com https://www.tumblr.com/ http://www.apple.com/safari/
http://www.artisans-quebec.com http://www.wix.com/ http://www.opera.com/
http://www.pagesjaunes.ca/ http://www.wordpress.com/ http://www.shutterstock.com/
http://www.restomontreal.ca/ http://www.blogger.com/ http://www.istockphoto.com/
http://www.weblocal.ca/ http://www.joomla.org/ http://www.depositphoto.com/
http://www.bonjourquebec.com/ http://www.squarespace.com/ http://www.google.com/analytics/
http://www.ebay.ca/ http://drupal.org/ http://www.w3.org/WAI/
http://www.amazon.ca/ http://www.w3c.org/
http://www.shopify.com/

35. Atelier
• Plan de création de la vitrine virtuelle d’un participant

36. Merci!
N’hésitez pas à m’écrire pour toutes questions!
marie.roger@overtureproject.com
Overture Project
Agence de développement logiciel et web
http://overtureproject.com