Formation : "Concevoir et promouvoir son site Internet"

#prezsynerg Hashtag twitter : La Junior-Entreprise du Web

Notre Junior
Synerg ’heTiC en chiffres
2004 : Création de la JE
2006 : Label meilleur espoir
156 : Études réalisées en 6 ans
110k€ : CA signé atteint en 2011
Parmi les 30 meilleures JE en 2010 et 2011 !
La Junior-Entreprise d ’ Hétic , Multimédia / Management / Informatique

Nos références Jeeves et vous http://jeevesetvous.com/ Générali Formation Outil interne Film Danone Communication interne

Nos références Portail des Métiers de l ’Internet www.metiers.internet.gouv.fr Beauty Executive www.beautyexecutive.com Croix-rouge française haiti.croix-rouge.fr/

Le marché du multimédia
2 milliards d’internautes dans le monde en janvier 2011
47 millions d’internautes en France en décembre 2010
15,5 millions de mobinautes en France
43,4 millions d’utilisateurs de mobile en France
1,5 millions d’entreprises sont présentes en 2010
Internet est un médium de communication et un canal de vente incontournable !

Concevoir et promouvoir son site Internet Julien Gouvernet Resp. Qualité Adrien Pepin Resp. Communication Audrey Wermeister Trésorière

Sommaire Promouvoir son site Internet Concevoir et réaliser son site Internet Do it your self Adopter une démarche structurée et cohérente Adopter une démarche réfléchie Concevoir : la phase de réflexion Réaliser : la phase concrète Recetter : la phase finale Etendre son offre, pensez mobilité Actionner les leviers Etudier les résultats et s’adapter Cas pratique

Concevoir et réaliser

Adopter une démarche réfléchie

Objectifs , cibles, concurrence Définir sa stratégie de conception et son équipe type
Pourquoi ?
Se faire connaître ?
Pour faire comme tout le monde ?
Générer / augmenter le chiffre d ’affaires ?
Constituer une base de données qualifiée ?
Déclencher un premier contact / une demande de devis ?
Comprendre et anticiper les attentes du client

Objectifs, cibles, concurrence Définir sa stratégie de conception et son équipe type
Pour qui ?
Particuliers ou professionnels ?
Quel est leur sexe et leur tranche d’âge ?
Sont-ils à l ’aise sur internet ?
Quelles sont leurs habitudes de consommation ?
Création de «personas»
Pensez à l’utilisateur final

La concurrence
Quels sont mes concurrents directs / indirects ?
Quels sont mes concurrents fonctionnels ?
Quels sont leurs points forts ?
Quelles sont leurs faiblesses / leurs erreurs ?
Comment faire mieux ou se différencier ?
Se positionner face à ses concurrents

La stratégie
Atteindre les objectifs fixés en amont
Immerger l’utilisateur et faciliter la navigation
Faire les choix techniques en fonction du type de site :
Un site événementiel ?
Un site à fort contenu éditorial ou E-commerce ?
Pour un site internet utile, utilisable et utilisé

Objectifs, cibles, concurrence Définir sa stratégie de communication et son équipe type
L’équipe type
Un chef de projet
Un graphiste
Un ergonome
Un référenceur
Un community manager
La conception de votre équipe influe sur la réussite du projet
Un intégrateur
Un intégrateur spécialisé
Un développeur spécialisé
Un web marketeur

Concevoir : la phase de réflexion

Hiérarchisation de l’information

Arborescence , contenus
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
L’utilisateur doit trouver rapidement l’information

Arborescence , contenus

Arborescence, contenus
Les contenus
Quelles sont les natures de contenus qui serviront au mieux la stratégie ?
Textes / Photos (HD) / Vidéos (HD) / Sons
Comment les valoriser pour les moteurs de recherche ?
Les contenus constituent le coeur du site

Conception ergonomique

Conception ergonomique : généralités
Un site ergonomique ?
Objectif 1 : Efficacité
Objectif 2 : Efficience
Objectifs 3 : Satisfaction des utilisateurs
Penser l ’utilisation du site pour ses utilisateurs finaux

Conception ergonomique Wireframes Zoning Cinématiques ( storyboard)

Conception ergonomique Zoning

Conception ergonomique Wireframe

Conception ergonomique Cinématiques

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

Le «Grid System»
Impossible de concevoir une interface sans grille de référence
Sert d’armature à la page et structure le contenu
Garantit la cohérence entre les différents gabarits de page
Il guide la lecture et confère une sensation d ’harmonie
L’outils incontournable

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

Spécifications fonctionnelles

Spécifications fonctionnelles
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 suivi de production optimal

Conception graphique

À qui plaire ?
Aux utilisateurs finaux
Convaincre votre client de la pertinence de vos choix
Limiter le nombre de propositions différentes
Elles ne feront jamais l’unanimité
Votre client aura le dernier mot Conception graphique

L ’esprit créatif
Un webdesigner n ’est pas un artiste
Un benchmark graphique est obligatoire
La création dépend de la cible du futur site
Faciliter la lisibilité avec de bons contrastes de couleurs
Le graphisme se juge sur des critères objectifs Conception graphique

Le choix des typos
Maximum 3 typos différentes sur un même support
Jouer avec les tailles et les graisses (sans abus)
Avec ou sans empattement ? Majuscules ou minuscules ?
Les typos dites «web safe» : Arial, Times, Georgia, Trebuchet, Verdana...
Un site internet n ’a pas la lisibilité d’un magazine papier Conception graphique

Référencement

Référencement naturel, référencement payant

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
Définir des mots-clés ou expressions-clés ordonnés par importance
Les liens entrants sont primordiaux
Trouver un équilibre entre optimisation et langage courant

SEA ?
Search Engine Advertising
Création et diffusion d’annonces publicitaires
Objectifs : notoriété, création de valeur, trafic événementiel
Interdit pour les Junior-Entreprises

Réaliser : la phase concrète

Du fonctionnel au technique
Etude de faisabilité
Mise en place technique de l’ensemble des fonctionnalités
Choix de la plate-forme technique : performance / fonctionnalité
Penser maintenance et évolutions
Concrétisation des besoins Réaliser : la phase concrète

CMS ou Framework ?
Avec un CMS, la phase de développement consiste principalement à installer et à configurer les différents modules
Avec 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 Réaliser : la phase concrète

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à ! Réaliser : la phase concrète

Réaliser : la phase concrète Wordpress Drupal

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 Réaliser : la phase concrète

Recetter : la phase finale

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 respect 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 Recetter : la phase finale

Trac Recetter : la phase finale

Etendre son offre, pensez mobilité

Quelques chiffres
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
Taux de pénétration de l’Internet mobile en France en 2014 : 41%
300% de croissance prévue sur 2 ans sur le marché des applications

Déterminez votre stratégie
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 oui, mais pas n’importe comment

Applications VS Site mobile
Les applications sont reines
Des dispositifs riches en média (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

Applications VS Site mobile
Site mobile
Idéal pour générer un contact rapide
Une démocratisation des technologies (HTML 5 / JavaScript)
U n 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

Conception : outils et best-practices
L’ergonomie utilisateur avant tout
Lisibité, simplicité d’accès et interface 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
La version mobile n’est pas une miniature du site Internet

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 et complexes demandent une expertise Développement : Applications VS Site mobile

Développement : Applications VS Site mobile
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 sur les différents terminaux

Les differents supports par l’ exemple

Promouvoir un site Internet

Adopter une démarche structurée et cohérente

Vous devez élaborer une stratégie de communication
Celle-ci répond à des besoins spécifiques et identifiés
Qui est ma cible ?
Où se trouve-t-elle ?
Quels sont les objectifs ?
Quels leviers vont être actionnés ?
Que font mes concurrents ?
Agir de manière organisée, réfléchie et efficace

Différents leviers peuvent servir votre stratégie
Il est nécessaire d’intégrer les leviers classiques : média, RP, événementiel
Sur Internet, de nombreux leviers existent :
Blog
Newsletter
Medias sociaux
…
Ils doivent rester à l’esprit dès la conception
Délivrer le message au bon moment, à la bonne personne

Quelques conseils pour batir une stratégie efficace
Faites vivre une véritable expérience à l’internaute
Faites le premier pas vers votre cible
Il n’est plus question de « crier le plus fort possible » mais plutôt de « faire parler de soi » le plus (et le mieux) possible
Un « consommateur » transformé en « ambassadeur » est une arme de communication redoutable
Le champs des possible ouvert à vous est immense

Adopter une démarche structurée et cohérente Problématique Besoins Actions Optimisations Objectifs Mesure/Analyse

Votre présence sur les médias sociaux
Quelque soit le réseau, la démarche est similaire
Vous devez oublier le marketing traditionnel, souvent unidirectionnel
Les réseaux sociaux exigent une démarche « conversationnelle »
Soyez humains, transparents et ouverts
Etre à l’écoute
Engager les discussions et intéragissez avec les autres
Animer votre communauté de manière régulière
Oubliez vos cours de marketing traditionnel, pensez « conversation »

Votre présence sur les médias sociaux
Comment réagir en cas de problème ?
Ne pas s ’énerver et devenir agressif
Ne pas se cacher ou se taire
Écouter et suivre les discussions
Admettre les faits, remettre en contexte, agir en conséquence
Garder un visage et un langage humain, pas de «blabla» juridique
Mobiliser ses influents internes/externes
Un bad buzz bien géré peut devenir bénéfique

Cas d’école
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

Actionner les leviers

Facebook

Facebook
Les avantages
+ de 600 millions d ’utilisateurs dans le monde / 20M en France
Les utilisateurs passent un peu moins de 6h par mois sur Facebook !
Des «fans» inscrits volontairement à une page
Centralisation des discussions autour d ’une marque, qu’elles soient bonnes ou mauvaises
Communiquer facilement et à moindre coût
Rien ne sert d’être sur Facebook juste pour faire comme les concurrents

Facebook
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é, landing page...)
Ne pas bloquer les contributions des utilisateurs
Animer la page régulièrement (mais pas plus de 2 messages par jour)
Interpeler et intéragir avec les fans
Définir une URL facilement accessible (ex : facebook.com/synerghetic.je)
Entretenir une relation à dimension humaine

Facebook
Démarquez-vous avec des opérations originales !
Gifts Coca Cola “Ma nuit de rêve” par Ikea Retrouvez de nombreuses campagnes Facebook sur Facebook Studio

Twitter

Twitter
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 t’chat 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

Twitter Communiquer en temps réel
Les avantages
Une progression exponentielle (460 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
Un potentiel de viralisation très important
Améliorer son référencement naturel (tweets indexés quasi-instantanément dans les moteurs de recherche)

Twitter Sur Twitter, l’échange prime sur la promotion individuelle
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 influents du domaine et ceux qui parlent de vous
Alterner contenus pros et discussions plus informelles
Publier par vagues discontinues (5 tweets par jour maximum)

Twitter
Quelques utilisations originales de Twitter
Le CV Twitter “L’aventure dont je suis le héros” sur Twitter

Plateformes photos et vidéos

Diffusez vos contenus multimédias
Utiliser les plateformes comme Flickr pour les photos
Utiliser YouTube, Dailymotion ou Vimeo pour les vidéos
Bénéficier d’une nouvelle source de trafic
Augmenter sa visibilité et améliorer son référencement
Toucher une autre typologie de votre cible
Une photo ou une vidéo est souvent plus parlante qu’un pavé de texte

Les bonnes pratiques
Personnaliser vos comptes autant que possible
Organiser et trier vos contenus
Attribuer des titres explicites et clairs
Ajouter des tags
Le visuel permet de développer une certaine proximité avec votre cible

Blog
Du contenu de qualité, régulièrement
Se positionner en tant qu’ expert sur son domaine
Création d’une communauté de lecteurs réguliers
Diffusion des billets via différentes plateformes (RSS, Facebook, Twitter …)
Permet d’améliorer significativement son référencement naturel
Le blog est la vitrine dynamique d’une structure

Blog
Définir un planning de publication
Tenir un rythme de publication
Être rigoureux sur la mise en page et l’orthographe
Relayer ne suffit pas
Apporter son point de vue/analyse sur des sujets d’actualité
Partager votre expertise, c’est la valoriser auprès de tous

Newsletter

Newsletter 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 (taux d’ouverture, liens les plus cliqués, etc)
Un moyen supplémentaire d ’augmenter le trafic vers son site internet

Newsletter
Faliciter l’inscription à la newsletter (récompense lors de l’inscription, etc)
Automatiser son envoi pour un gain de productivité
Personnaliser autant que faire se peut
Elaborer une mise en page visuellement agréable
Être pragmatique dans le sujet de mail des newsletters
Une newsletter ne peut être entièrement remplacée par les médias sociaux

Géolocalisation

Géolocalisation Suivre les dernières tendances et les expérimenter
Les avantages
Utiliser des systèmes qui sont dans l’ère du temps (Foursquare, Facebook Places, etc)
Se référencer sur de nouvelles plateformes
Exploiter un nouveau levier pour faire connaitre sa structure

Géolocalisation
Remplissez correctement toutes les informations de vos profils
Agrémenter vos profils (photos sur Foursquare par exemple)
Proposer des offres spéciales, notamment avec Foursquare
Un nouveau moyen de promouvoir sa structure

Géolocalisation
Êtes-vous simplement présent sur Google Maps ?

Mesurer et analyser

Mesurer et analyser
Mesurer et analyser vos actions de communication
Fixer des KPI (Key Performance Indicator) pour chaque levier
Faites un suivi périodique
Analyser et interpréter ces données
Pour quelle finalité ?
Suivre son évolution
Optimiser ses actions de communication !
Mesurer pour se donner la possibilité de faire toujours mieux

Pour récapituler
Ce qu’il faut que vous gardiez à l’esprit
Elaborez une stratégie centrée autour de votre cible
L’ensemble de vos actions doivent être cohérentes vis-à-vis de votre stratégie
Faites vivre une expérience unique aux internautes
Soyez créatif et original
Chaque support possède ses propres spécificités, votre stratégie aussi
Mesurer et analyser ses actions pour les optimiser

Ressources 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 Tweetdeck et Seesmic

Ressources Facebook Inside Facebook.com Mashable (Facebook Guidebook) Involver (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)

Lectures conseillées Ergonomie Web Amélie Boucher http://www.ergolab.net The Smashing Book Smashing Magazine http://www.smashingmagazine.com Internet Marketing 2011 Julia Jouffro, Martin Tissier & Guillaume Ber

Sources
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

Merci de votre attention Des questions ?

Do it yourself !
Regardons votre communication de plus près !
Des personnes sont à votre disposition
Auditer, analyser et vous conseiller
Assez parlé de nous, parlons un peu de vous !

On reste en contact ? twitter.com/synerghetic facebook.com/synerghetic.je blog.synerghetic.net/ [email_address]

http://blog.synerghetic.net	94
http://www.slideshare.net	1
http://feeds.feedburner.com	1

Formation : "Concevoir et promouvoir son site Internet"

by Synerg'heTiC

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 96

Statistics

Formation : "Concevoir et promouvoir son site Internet" Presentation Transcript