Démarche de réalisation
Principes fondamentaux
Modernisation de la navigation ;
Richesse du contenu métier ;
SEO (optimisation du positionnement dans les moteurs de recherche) ;
Responsive design ;
Compatibilité avec les outils de marketing automation ;
Gestion dynamique des rubriques via un système d’administration en ligne qui permettra à un ou plusieurs administrateurs de mettre à jour très facilement l’intégralité des informations saisies.
Optimisation de la navigation et du contenu pour le REFERENCEMENT afin de
faciliter l’indexation dans les moteurs (sommaire, glossaire ...)
3) Vos cibles
B2B
B2C
4) Résultats attendus
Le but est de mettre en place un site internet haut de gamme, séduisant, interactif et dynamique.
Vos attentes en termes de qualité et de fonctionnalités aboutissent à un cahier des charges ambitieux :
Navigation moderne et intuitive.
Site évolutif, tant au niveau graphique que technique, sans remise en cause lourde.
Respect des normes W3C.
Site rapide au niveau de chargement de ses pages.
Site en Responsive Design : site adaptable pour tous types d'ordinateurs, tablettes
tactiles, et smartphones.
Amélioration de visibilité.
- Votre projet : Equipe et conduite de projet
Organigramme de projet
1) Présentation de l’équipe
L’équipe qui sera en charge de la réalisation de votre projet web sera composée d’un (1) développeur, une (1) graphiste, un (1) responsable qualité et un (1) chef de projet supervisés par votre interlocuteur commercial.
Interlocuteur commercial :
Votre interlocuteur commercial est en charge du bon suivi relationnel client. Interlocuteur privilégié il se charge de vous transmettre les éléments au fur et à mesure de l’avancement de votre projet. Il est en charge aussi de s’assurer de votre satisfaction.
Chef de projet : Nom prénom
Le chef de projet est votre interlocuteur privilégié chez nous. Son rôle est d'organiser le bon déroulement et de savoir inciter et motiver l'équipe à adopter les comportements pour mener à bien les tâches liées au développement du projet (conception, développement, débogage, test…).
Développeur : Nom prénom
Le développeur a un certain nombre de missions qui lui sont confiées au cours du projet :
- La programmation : le codage.
- un travail d’équipe : collaboration entre plusieurs développeurs sous la responsabilité
d'un chef de projet, qui traitent chacun une partie du programme.
- la conception : définir les spécifications techniques (structure des données,
communication entre les modules...) à partir d’un cahier des charges.
- les tests, qui servent à détecter les anomalies et les erreurs (bugs).
- la maintenance : correction des erreurs après la livraison.
III. Rôles et responsabilités : vous, AGENCE VANISEO
et partenaires
Votre rôle dans le projet
Gestion et rédaction des contenus. Gestion des droits.
Fourniture au format numérique des contenus (FR) (images, textes, vidéos…).
Mise en œuvre d’une communication interne et externe autour du site internet.
Mise à jour du site et de ses contenus.
Cohérence et interactivité avec les autres supports de communication.
AGENCE, conseil et direction technique
Penser : ingénierie, conseil, organisation
Ergonomie web.
Maîtrise d’œuvre : gestion des plannings, des validations, des partenaires…
Gestion et organisation de la maintenance et des mises à jour du site.
Définir une stratégie sur le web : contenus, services et fonctionnalités, marketing et référencement.
Conseil et accompagnement au changement.
Produire : intégration graphique et multimédia, développement informatique, e- marketing
Intégration maquettes graphiques. (interface, bouton, navigation…)
Intégration des contenus textes et images, mises en page des contenus fournis et rédigés.
Programmation informatique : bases de données, outils simples de mise à jour, moteur de recherche par mots clés, gestion d’une liste de diffusion…
Optimisation SEO du site sur internet.
Déployer durablement : formation, mise à jour, maintenance,
Formation des utilisateurs à la mise à jour du site et à son utilisation.
Suivi, maintenance et évolution du site.
- Arborescence du site
Une étape essentielle dans la conduite du projet
Nous élaborons l'architecture de votre site qui permettra de définir la structure du contenu. Ce travail essentiel vise à organiser le site pour :
Facilité et fluidifié de la navigation par la prise en compte des habitudes de navigation de l'utilisateur final.
Hiérarchiser les contenus.
Notre objectif permanent : rendre service à l’utilisateur final, c’est- à-dire à l’internaute.
Les théories ergonomiques, graphiques et technologiques sont confrontées à la réalité. Nous les adaptons aux besoins exprimés et aux comportements observés. La seule sanction positive, c’est la satisfaction de l’utilisateur final en lien avec votre stratégie.
Remarque préalable importante : l’arborescence est une proposition préalable, nous sommes donc conscients de certaines modifications indispensables.
- V. Planning de réalisation
Le planning sera formalisé au moment de la réunion de cadrage
Tout au long du projet nous assurons deux missions supplémentaires, celle de pilotage et conduite du
projet et celle d’assurance qualité
Cadrage :
Finalisation éventuelle de l’offre.
Validation du planning de production et de formation
Signature du bon de commande et de paiement de l’acompte
Conception : Accompagnement arborescence, ergonomie, découpage : AGENCE + client
1 réunion avec le client
Validation de l’arborescence
Conseil et accompagnement sur le cahier des charges ergonomique.
Allers / retours maquettes graphiques
Validation de la maquette, B.A.T écrit
Conception des contenus (FR) textes et images : Client
Rédaction, traduction, correction, conception des contenus textes et images par le client.
Production : Intégration technique, programmation : AGENCE
Découpage XHTML5 / CSS3 du site
Mise en place des outils : moteur, listes, détails et cartes.
Intégration des contenus français
1 réunion point projet intermédiaire
Recettage : AGENCE + Client
Relecture, correction et validation.
Tests finaux
B.A.T par le client avant publication
Lancement de la version Betâ
La Livraison finale de site
Mise en ligne du site internet.
- Prestation ergonomie et graphique
- Notre méthode de travail
Nous souhaitons pouvoir interagir avec vos équipes pour la création graphique et la conception ergonomique, ce que nous apprécions et savons faire.
En effet, notre méthode de travail se base sur les principes :
- Une approche pluridisciplinaire : Croiser le fond et la forme
- Réflexion amont : Comprendre votre idéal ergonomique
- L’innovation permanente : Combiner l’attractivité et la performance
- Des conditions réalistes : Intégrer les utilisateurs à chaque étape
- Itération et agilité : Converger progressivement vers la solution ergonomique
2) Principes ergonomiques respectés, « usabilité »
Le succès d’un site n’est pas lié uniquement à sa technicité mais aussi à son adaptation aux besoins et aux compétences des internautes ciblés, en d’autres termes à son utilisabilité. L’ergonomie devient aussi un facteur de fidélisation, l’internaute revenant plus facilement sur un site dont il sait qu’il en maîtrisera l’utilisation.
- Compatibilité
Le site doit s’intégrer dans l’activité réelle de l’utilisateur c’est-à-dire : utiliser son langage,
respecter le contexte réel d’utilisation, respecter sa logique d’utilisation.
- Guidage
Il s’agit de tous les moyens mis en place pour faciliter l’utilisation du site et son apprentissage
par l’internaute. On distinguera 4 types de guidage :
Incitation à faire des actions spécifiques,
Groupement des informations de même type et distinction des informations différentes,
Retour utilisateur visant à signaler ce que fait l’application suite à une action de l’internaute,
Lisibilité.
- Homogénéité
L’objectif est de respecter une logique d’utilisation constante, tant au niveau des commandes
à effectuer que de la présentation. On parle aussi de stabilité. d. Flexibilité
Tous les utilisateurs n’ayant pas la même façon de naviguer, il faut dans la mesure du possible proposer différentes manières d’arriver à la même information ou d’effectuer la même tâche.
- Contrôle utilisateur
L’internaute doit garder le contrôle des processus (interrompre une recherche, sauter une
introduction…).
- f. Traitements des erreurs
Eviter les erreurs peut être en partie pris en charge par un bon guidage. L’internaute doit
aussi avoir la possibilité de corriger facilement une commande erronée.
- Charge mentale (concision)
On cherche ici à réduire le nombre d’informations que l’utilisateur doit prendre en compte
pour effectuer une action, éviter les textes longs et indigestes….
3) Notre ap proch e po ur la cr éation de la page d’ accue il
Dès la page d’accueil, l’internaute doit savoir :
Qui lui parle ?
Quelles informations trouvera-t-il sur ce site ?
C’est seulement lorsque ces 2 objectifs sont remplis qu’il va pouvoir se laisser séduire. Ce préalable peut sembler trivial mais semble encore souvent oublié. Comment séduire l’internaute dans ce contexte, lui donner envie de naviguer sur le site et d’y revenir.Une règle immuable en marketing, communication et commercial est qu’on n’achète que ce
qu’on connaît….
Nous veillons également à ce que cette page ne soit pas trop longue afin que le maximum
d’information soit visible sur une hauteur d’écran.
Ici encore, on voit trop souvent des sites où la volonté de remplir tous les objectifs
(informations, marketing, commercial…) en donnant beaucoup d’informations (actualités,….) est contre-productive : lorsqu’on veut répondre à trop d’objectifs, on finit par avoir une stratégie moyenne sur chacun.
Enfin, les informations doivent être faciles à trouver. L’œil doit se poser.
4) Cohérence et stratégie de communication
Nous travaillons toujours en cohérence avec vos autres supports de communication existants.
5) Une méthodologie où vous gardez le contrôle de votre image
Trois allers-retours maquette graphique sont prévus entre vous et AGENCE
Avant la phase de production et d'intégration la maquette doit être validée par vos soins avec la mention « Bon à tirer ». Toute modification ultérieure peut entraîner des surcoûts devisés au préalable.
VII. Accessibilité
Le site sera en responsive design : affichages compatibles aux smartphones et tablettes. Ils sont parfaitement optimisés pour des tablettes de type iPad dont la taille d’écran est suffisante.
Le site internet sera fonctionnel à 100% avec tous les navigateurs (Chrome, Firefox, Internet
Explorer, Safari, Système Android, etc…) et compatible avec PC et Mac.
1) Structurer les pages html pour les rendre « Google friendly »
Tous les contenus sont intégrés de façon « sémantique », c’est à dire en respectant le sens du langage HTML. Ceci permet aux moteurs de mieux comprendre et de mieux indexer vos pages :
- <H1> : titre de page, redondant avec le « title » de la page
- <H2> : titre de partie de page
- <H3> : sous titre de la partie de page…
- <P> : paragraphe
- Menus de navigations structurés en liste à puces (<ul><li>…) et repoussés en fin de HTML
- Respect d’une charte internationale pour les noms des styles : microformats, RDF.
Consultez par exemple : http://www.google.com/webmasters/tools/richsnippets
2) Url des pages et plan du site cohérents
Nous veillons à fournir des outils qui permettent la mise à jour automatique de fichiers
importants pour les moteurs : robots.txt, sitemap.xml…
Nos sites sont conçus avec des url explicites (adresses de vos pages web), contenant les
mots clés importants et respectent le codage linguistique international. En lisant simplement
l’adresse de vos pages, les moteurs ou les internautes en devinent leurs contenus. Ceci est
un levier important pour un bon référencement.
VIII. Intégration des contenus
1) Contenu du site (images et textes)
- Images libres de droits
Les photos ou visuels des banques d'images sont des visuels libres de droits, ou de droits
gérés.
« Libres de droits » ne veux pas dire « gratuit », il convient donc de payer les visuels utilisés
sur votre site Internet aux banques d'images. Nous vous conseillons d'ouvrir un compte chez
fotolia.fr (le prix d'une photo est de 1 à 3 € la photo pour une utilisation web basse définition)
ou chez getty.fr (entre 10 et 50 € la photo pour une utilisation web,basse définition).
AGENCE utilisera des photos dites « maquettes » gratuites pour la réalisation
des maquettes graphiques à réaliser, puis il vous appartiendra de les acheter par la suite en
ouvrant un compte auprès de la banque d'images de votre choix.
Si vous possédez des photos personnelles ou des photos libres de droits que vous avez déjà
acheté, merci de nous les faire parvenir afin de créer les maquettes graphiques avec vos
propres photographies.
- b. Diapositives (Ektas)
Le client s'engage à nous fournir des fichiers numériques de bonne qualité (JPG, PSD, PDF,
PNG, EPS...), Les diapositives ou ektas, imposent de faire faire des images scannérisées en
haute définition à l'extérieure.
Ces travaux feront l'objet d'un devis supplémentaire à l'unité. Nous consulter.
- Contenu du site
AGENCE s'engage à intégrer le contenu du site Internet (FR). Le client s'engage
à fournir le contenu à intégrer en 1 seule fois et 1 seul document au format numérique (pdf,
doc ou odt) afin de faciliter l'intégration par « copier/coller » numérique.
Le document devra contenir le titre des pages du site et le contenu associé (texte et images
uniquement). En cas d'intégration de données tabulaires (tableau de type « Excel » par
exemple), cela fera l'objet d'un devis complémentaire. Si le document ne contient aucune
image, nous pouvons sélectionner et intégrer des images provenant de banque d'images libre
de droits.
AGENCE ne rédigera aucun texte.
Nous consulter pour la rédaction de vos contenus.
2) Statistiques de fréquentation du site
Nous implémentons un système de statistiques détaillées de fréquentation de votre site proposé par la société Google sous le nom de « Google Analytics ».
Ce service web actuellement gratuit vous permet de consulter entre autre :
Le nombre de visites (par jour, par semaine, par mois...)
D’où viennent vos internautes (par quels sites, quels mots clés saisis dans les
moteurs de recherche...)
Où sont vos internautes (quels pays, quels départements, quelles villes...)
3) Hébergement de site
Le client dispose un espace suffisant pour héberger son site.
Un autre devis sera proposé au client pour l’infogérance.
4) Possibilités d'évolutions
Le site internet sera évolutif et doit permettre techniquement la possibilité d'ajouter de nouvelles fonctionnalités ou d'en améliorer certaines déjà existantes.
- version spécifique : Site en responsive design
Le site sera en responsive design : affichages compatibles aux smartphones et tablettes. Ils sont parfaitement optimisés pour des tablettes de type iPad dont la taille d’écran est suffisante.
- X. Moyens et matériels pour le développement
L’entreprise possède tout le matériel et les logiciels nécessaires à la réalisation de projets complets.
Un solide socle open source pour le développement web +
informatique
1) Langages informatiques utilisés
PHP5
MySQL 5
Javascript + Ajax orienté objet, (Prototype + Jquery)
XHTML5 (Iso + utf8)
Feuilles de styles CSS 3
2) Technologies utilisés
Responsive Design
CMS Prestashop
3) Principaux logiciels utilisés
PHP : PHPEdit + éclipse
XML : Oxygen
Dreamweaver CS6 : XHTML + Css
4) Parc des machines en production
10 PC de moins de 2 ans. 3 Macintosh pour tests.
3 serveurs de production et de tests internes.
Réseau interne 1Gbits.
5) Les logiciels web : le pack adobe CS6
Création web, conception graphique et périphériques mobiles
Dreamweaver CS6 (web + XHTML + Css)
Photoshop CS4 Extended (image, création)
Acrobat 9 Pro (génération et manipulation avancée de PDF)
Adobe Device Central CS6 (test pour smartphones)
- Compatibilités, plateforme de test, tests utilisateurs Compatibilité multi plateformes pour les sites web
Pour garantir le bon fonctionnement du site, nous effectuons de nombreux tests utilisateurs. Nous testons les sites web sur PC et Mac avec différentes configurations. Nous assurons ainsi une compatibilité pour lecture de bonne qualité pour les navigateurs suivants :
PC : IE7 et supérieur, Firefox 2 et supérieur, Google Chrome, Safari 4. Mac : Safari 3 et supérieur, Firefox 2 et supérieur.
1) Tailles d’écran ciblées pour lecture sur écran d’ordinateur Pour les applications Internet et cd-rom destinées au grand public, nous prévoyons une compatibilité pour des tailles d’écrans en 1024x768 pixels et parfois en 800x600 pixels si nécessaire.
2) Adaptation des sites aux smartphones & tablettes
Nous développons des versions spéciales (responsive design) de vos contenus adaptées à
l’usage en mobilité.
3) Plugins additionnels.
Nous veillons à ne pas utiliser de plugins additionnels qui bloqueraient l’utilisation du site par l’internaute. Les plug-ins standards proposés sont déjà installés sur plus de 95% du parc machine.
4) Mise en place d’une plateforme de production test
Les versions bêta du site sont mises à dispositions sur des domaines tests du type : http://
test.votredomaine