Démarche de réalisation


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

 

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

 

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

 

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

 

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

 

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

  1. 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é.

 

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

  1. Contrôle  utilisateur

L’internaute doit garder le contrôle des processus (interrompre une recherche, sauter une

introduction…).

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

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

 

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

 

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

 

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

 

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

 

 

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

 

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

Avez-vous trouvé cet article utile ?