Vitrine virtuelleCEFQ, 19 janvier 2012

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

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…

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.

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

Vitrine virtuelle• Activité de réflexion

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

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

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

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

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.) $$$+

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

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

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

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

Créer sa propre vitrine virtuelle

• Ensuite…• Faire vivre sa vitrine virtuelle!

• Entretient - Maintient• Aller plus loin encore…

Questions?

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

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

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

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

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)

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

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

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

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

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

Questions?

Les règles de l’art – mauvais exemples

• Xeros: Reproduire la “réalité” sur un sitehttp://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!

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

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…

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

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

Liens

http://www.facebook.com/http://twitter.com/http://www.linkedin.com/https://plus.google.com/http://www.youtube.com/http://www.ning.com/http://www.yelp.com/http://www.icriq.comhttp://www.artisans-quebec.comhttp://www.pagesjaunes.ca/http://www.restomontreal.ca/http://www.weblocal.ca/http://www.bonjourquebec.com/http://www.ebay.ca/http://www.amazon.ca/http://www.shopify.com/

http://www.agentsolo.com/http://www.freelancer.com/http://www.freelance.com/http://www.groupon.ca/http://www.tuango.ca/http://www.teambuy.ca/http://www.paypal.com/https://www.tumblr.com/http://www.wix.com/http://www.wordpress.com/http://www.blogger.com/http://www.joomla.org/http://www.squarespace.com/http://drupal.org/http://www.w3c.org/

http://www.godaddy.com/http://www.domain.com/http://www.domainname.ca/http://www.microsoft.com/windows/internet-explorer/http://www.mozilla.org/http://www.google.com/chrome/http://www.apple.com/safari/http://www.opera.com/http://www.shutterstock.com/http://www.istockphoto.com/http://www.depositphoto.com/http://www.google.com/analytics/http://www.w3.org/WAI/

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

Merci!N’hésitez pas à m’écrire pour toutes questions!marie.roger@overtureproject.com

Overture ProjectAgence de développement logiciel et webhttp://overtureproject.com