Méthodologie de conception et réalisation d'un site

La création d'une charte graphique

Efficacité et utilisabilité

La charte graphique du site Internet définit le design et les styles employés dans l'ensemble des pages intérieures, tant en termes de signes graphiques (typographie, symboles, habillages d'éléments comme les tableaux, logotypes, etc...) que d'ergonomie.

Elle constitue l'identité visuelle d'une organisation, d'un projet, d'une entreprise sur le Web et va, en conservant une cohérence graphique et une utilisabilité optimales, former l'image que le public se fera du site.

La circulation dans le site grâce à des principes de navigation entre les pages doit tenir compte du contenu, hiérarchisé, disposé selon une arborescence cohérente de rubriques et de pages présentant ce que l'éditeur du site souhaite mettre en avant auprès de ses visiteurs.

La navigation est à ce titre un des éléments majeurs de toute charte graphique de site Web, elle participe fortement de l'image mentale que se fait l'internaute du site pour se représenter le contenu, le propos, les ressources et finalement l'intérêt qu'il vient chercher.

L'ergonomie

Les buts de l'ergonomie appliquée à un site Web sont l'efficacité et l'utilisabilité.

Efficacité

Employer des moyens appropriés et des solutions adaptées à la bonne utilisation du site. Le bon sens et les bonnes pratiques dans la création de sites Internet sont nécessaires à toute conception d'application Web professionnelle.

Utilisabilité

Il s'agit de créer un site qui corresponde aux capacités et aux habitudes de l'internaute, qui est considéré comme l'utilisateur d'une application, le site Internet. Il doit mettre à l'aise, en confiance, aussi s'attache t-on principalement au confort d'utilisation, en évitant la fatigue physique (exemple : la lecture à l'écran) et nerveuse (exemple : une mauvaise organisation de l'information).

Face à la diversité des internautes, l'ergonomie doit répondre à une série de critères.

Quelles sont les attentes de l'internaute ? En effet ils ne recherchent pas tous les mêmes informations et ont des goûts différents pour ce qui est du graphisme.

Quelles sont ses habitudes ? Sur Internet, pour le type de site que vous vous proposez de concevoir, divers comportements considérés comme acquis avec le temps par la pratique de la navigation sur le Web doivent être intégrés au site faute de perdre ou d'agacer vos visiteurs.

Quel est son âge ? Selon les cibles principales auxquelles le site est destiné il faudra prendre en compte la capacité d'adaptation et la rapidité de la navigation des visiteurs. En un mot, se mettre à sa cadence.

Quel type d'équipement informatique a t-il ? C'est probablement l'une des difficultés majeures. La façon dont le site s'affiche à l'écran peut varier d'un ordinateur à l'autre, selon qu'il s'agisse d'un PC ou d'un Mac par exemple, ancien ou récent, sous différentes versions de système d'exploitation, avec des tailles d'écran et des résolution d'affichage diverses.

Quel est son niveau de connaissances ? En informatique, les visiteurs d'un site ont des connaissances variables et le plus souvent sont bien plus novices que ne le croient les publics travaillant régulièrement avec Internet ou les professionnels des technologies de l'information et de la communication. C'est pourquoi il faut prévoir que l'ergonomie du site soit conçue pour prendre en compte un utilisateur peu expérimenté.

Le critères d'ergonomie d'un site web

La simplicité

Un site Web conçu dans un but de simplicité, au design épuré et agréable renverra une image de crédibilité et de professionnalisme. Il est conseillé de ne pas trop charger les pages en évitant les animation inutiles et tous les éléments qui risquent de distraire l'attention des objectifs du site ou de fatiguer l'internaute.

Un site lisible

Il faut savoir que la lecture à l'écran est plus fatigante et plus lente que sur papier, de l'ordre de 25% de temps supplémentaire. Le texte doit être aéré.

A la clarté s'ajoute la structuration de l'information. Les contenus textuels doivent être découpés en paragraphes et hiérarchisés grâce à plusieurs niveaux de titres afin de rendre la lecture plus facile et par la même occasion le propos plus organisé, mettant en avant les éléments les plus importants, rendant au final le sens beaucoup plus limpide.

Un site utilisable

La navigation est primordiale. La « règle des 3 clics » a toujours cours la plupart du temps, qui conseille de répartir l'information en sorte qu'elle ne soit jamais à plus de 3 clics de souris.

Aussi le visiteur doit-il pouvoir parfaitement se repérer dans le site. A chaque instant les éléments de navigation doivent lui permettre de se situer sur la « carte mentale du site » afin de s'orienter et de circuler sans difficultés.

De même, l'identité visuelle du site doit être présente dans chaque page et au même emplacement. Cette permanence des éléments (comme le logo, un bandeau supérieur, la navigation) définis par la charte graphique aboutit à un site Web aux codes uniformes et à l'utilisation harmonieuse. Lorsque la quantité des pages le justifie, un plan du site constitue à ce titre une très bonne solution pour orienter un visiteur perdu ou un internaute plus pressé cherchant une page précise.

L'internaute doit pouvoir naviguer sur le site en toute liberté. Le retour à la page d'accueil et l'accès aux principales rubriques se fera en un clic. Selon la structure du site et dans la mesure du possible,on pourra circuler dans les pages par des chemins verticaux – les rubriques – et transversaux – les thèmes connexes. Enfin, sont à prohiber les passages obligatoires par des introductions ou animations Flash, qui ont le don d'énerver une majorité de visiteurs.

L'adresse URL du site de la page en cours doit être visible en permanence, permettant ainsi au visiteur de se repérer et de l'ajouter à ses favoris pour y revenir directement par exemple. Il est évident qu'une URL bien construite et suffisamment explicite est préférable, elle confirme à l'utilisateur qu'il est sur la bonne page, elle donne des signets explicites et des résultats dans les moteurs de recherche plus parlants qu'une URL incompréhensible.

Fournir une information tangible à l'internaute

Si vous recherchez des « visiteurs qualifiés » alors les informations que vous présentez sur votre site doivent être elles aussi qualifiées. Il est important pour le visiteur de savoir si l'information qu'il lit est à jour, qui en est l'auteur, en un mot si le contenu est valable au moment où il le consulte.

Enfin, on ne met jamais en ligne des pages « en construction » comme sur certains sites personnels lorsqu'on édite un site professionnel. Faire venir un visiteur sur son site pour le décevoir est la pire des choses en communication Web.

La structure du site doit être homogène. Les éléments constituant la navigation du site situés au même emplacement sur toutes les pages et dans la mesure du possible en suivant une présentation et un aspect uniforme dans l'ensemble du site.

Un site Web rapide

Le temps de chargement des pages est important. A ce titre le développement des pages HTML, l'optimisation des éléments graphiques et la qualité de l'hébergement sont à prendre en compte. En effet, au-delà de quelques secondes de patience, la plupart des internautes s'impatienteront.

Même si cela dépend aussi de la qualité de la connexion à Internet de votre visiteur, un site gagnera toujours à ne pas alourdir inutilement ses pages. Même avec l'explosion de l'Internet Haut-débit, pensez à ce critère si vos visiteurs ne sont pas aussi bien équipés que vous ou dans des pays dont l'infrastructure n'est pas aussi développée.

Lors de toute réalisation de site Internet de qualité professionnelle, l'infographiste optimise la taille des images dans le format le pus adapté. On évitera par exemple de mettre en ligne des images non redimensionnées, dont la réduction forcée en HTML donne à la fois un chargement anormalement lent pour un rendu de mauvaise qualité.

Un site Web interactif

Depuis l'invention du World Wide Web en 1989 par Tim Berners-Lee, les liens hypertextes forment l'essence même de ce nouveau média actif. L'interactivité c'est l'ensemble des interactions rendues possibles entre l'utilisateur et le site Web. Les liens présents dans chaque page permettent au visiteur de circuler dans le site via de multiples parcours, il est recommandé d'en disposer suffisamment sans tomber pour autant dans une surabondance qui risquerait de rendre la lecture et le cheminement difficile.

Une information découpée et structurée va permettre à l'internaute de mieux appréhender et assimiler ce que vous souhaitez lui communiquer. On aura recours à différents niveaux de titres, l'emploi de texte d'accroche – aussi appelé chapo – ou de listes à puce pour les énumérations.

Permettre les échanges et être contacté par votre site

Pour favoriser les échanges avec les visiteurs et par exemple recueillir leurs remarques et impressions sur le site afin de pouvoir le faire évoluer en tenant compte de ses améliorations suggérées gracieusement, il faut que le visiteur puisse trouver facilement le moyen de contacter l'éditeur ou le responsable du site, soit par email, soit via un formulaire de contact en ligne. En plus des buts commerciaux évidents lorsqu'il s'agit d'avoir pour objectif l'apport de contacts grâce à Internet, souvent le manque de moyens de joindre le responsable du site est mal perçu et risque de provoquer de la méfiance.

Faire un site Web adaptable (Responsive design)

L'adaptabilité consiste à permettre à l'utilisateur de personnaliser l'affichage du site Web dans sont navigateur Web. Les options de redimensionnement des polices de caractères disponibles sur les navigateurs ne doivent pas être empêchées. Le contenu textuel du site doit dans la mesure du possible utiliser des polices Web standardisées et leur taille ne pas être réglée de manière absolue mais relative, donnant ainsi la possibilité aux personnes qui le souhaitent de grossir le texte par exemple.

L'accessibilité sur Internet consiste à créer des documents qui puissent être consultés de manière universelle, par l'ensemble des utilisateurs, y compris donc les malvoyants ou les non voyants. Pour cela des règles dites d'accessibilité existent, elles sont simples et les respecter est le gage d'ouvrir votre site Internet au plus grand nombre, sans considérations de configuration matérielle, de choix de logiciels obligatoires, sans le fermer au handicap.

Compatibilité, « interopérabilité » : les standards du Web

En respectant les standards issus des recommandations du W3C lors du développement d'un site Internet, nous avons la garantie d'obtenir un bon niveau d'interopérabilité, autrement dit de compatibilité du site avec les différents navigateurs Internet existant sur le marché (Internet Explorer, Mozilla Firefox, Opera, Safari, Konqueror, ... pour ne citer que ceux-là ). Il en va ni plus ni moins de la capacité du site Internet à être consultable par la plus grande variété d'internautes.

Nous ne pouvons pas parler des standards dans aborder la question des formats. Ils doivent toujours être le plus transparents possible, autrement dit consultables en mode texte seul. Le format HTML doit donc être préféré au format Flash. Dans le même esprit, les images et les animation ne doivent pas remplacer, se substituer au texte, ce qui reviendrait à occulter l'information pour les non-voyants par exemple, mais aussi les robots des moteurs de recherche qui parcourent le Web et indexent le contenu textuel des sites Internet. Sans les interdire bien évidemment, les illustrations sont à employer pour ce qu'elle sont, c'est-à -dire un complément au texte.

L'emploi de visuels doit aussi comporter une légende, un texte alternatif (l'attribut alt en HTML) qui permette aux déficients visuels et aux moteurs de recherche de connaître le sens de l'image. De même, le choix des couleurs doit être fait de telle manière que les utilisateurs distinguant mal les couleurs puissent accéder à un texte lisible (daltoniens par exemple). On doit pouvoir accéder à l'information même sans les feuilles de style (CSS).

Enfin, le contraste entre le texte et l'arrière-plan doit être suffisant et la taille du texte pas trop petite pour faciliter la lecture et ne pas risquer de fatiguer la vue des lecteurs, voire de s'avérer illisible.

Site administrable et pages dynamiques

On dit d'un site site Web qu'il est dynamique lorsque son contenu et notamment ses pages sont générées dynamiquement par le serveur Web, en créant la page HTML à la demande. Par opposition à un site Web dynamique, un site Web statique est constitué de pages HTML qui ont été réalisées une fois pour toutes puis mises en ligne.

Le contenu

Le contenu d'un site dynamique est obtenu en utilisant un langage de programmation, autrement appelé langage de scripts serveur, combiné à une base données contenant les informations et à des gabarits de page, des modèles, en HTML et feuilles de style CSS.

Pour ce qui est des logiciels libres, PHP est le langage de scripts le plus utilisé avec le serveur de bases de données MySQL. Un autre langage, le Perl reste néanmoins utilisé, de manière moins répendue. A côté de ces solutions très populaires existent aussi des solutions propriétaires, comme celle deMicrosoft, avec ASP et maintenant .NET couplé avec le serveur de bases de données MS-SQLServer ou encore Oracle, la base de donnée de l'éditeur du même nom.

Il existe d'autres solutions éditées par Macromedia (maintenant Adobe, qui l'a racheté) tel que ColdFusion, mais ce sont surtout les technologies PHP, .NET et Java – un autre langage de programmation – qui représentent aujourd'hui la plupart des applications Web.

Les pages dynamiques

Un site Web basé sur un système de pages dynamiques
La mise en place de pages dynamiques comporte de nombreux avantages. La présentation du site peut être modifiée durant la vie du site et les données reprises plus facilement, les pages générées adaptant les informations à la nouvelle charte graphique. C'est l'avantage de la base de donnée dans ce système : le contenu, qui y est stocké ou qui provient éventuellement de fichiers XML, peut alors être affiché sur commande.

Un autre atout lié à l'utilisation d'un langage de programmation pour sites dynamique réside dans la possibilité qu'il donne au webmaster d'automatiser une partie des tâches. On pourra mettre en oeuvre une application Web au sien du site, comme par exemple un album photo, un catalogue produits, un blog ou un forum de discussions...

En définitive, l'évolution des pages statiques qui comprenaient dans un seul document le contenu, la présentation et logique informatique a conduit les techniques de développement de sites Internet à découper tous les aspects de la constitution d'une page Web comme ceci :

  • L'information textuelle (en bases de données) et multimédias (fichiers images, vidéo, etc...)
  • La logique (langages de programmation)
  • La structure de l'information dans la page (HTML)
  • La présentation graphique (feuilles de style CSS)
  • Les avantages de ce nouveau mode de développement des sites sont gigantesques et permettent une grande évolution.

Cela dit, les sites Web statiques existent toujours et perdurent encore auprès du public amateur de par leur plus grande simplicité technique. Les particuliers par exemple, sans connaissances techniques suffisantes, peuvent créer des pages HTML à l'aide de logiciels plus conviviaux, qui certes le plus souvent ne permettront pas d'aboutir à un résultat professionnel mais néanmoins permettront à tout un chacun de publier librement un petit site Internet.

Système de gestion de contenu

Les gestionnaires de contenus et de documents en ligne

Un nouveau paradigme aux sites dynamiques s'est développé et démocratisé ces dernières années, le système de gestion de contenus, en anglais « Content Management Systems » ou CMS.

Historiquement, les CMS forment une famille d'applications de création et de maintenance de sites Web grâce aux capacités de mise à jour dynamique et d'applications plus complexes aux fonctionnalités suivantes :

  • La possibilité de travailler à plusieurs sur un même document,
  • La disponibilité d'une chaîne de publication (en anglais, un workflow) permettant de mettre en ligne les documents,
  • La séparation des tâches de gestion de la mise en forme et du contenu, les opérations de gestion de la forme et du contenu,
  • La capacité de structuration du contenu via différentes formes usités sur le Web, comme les forums, les FAQ (Questions/Réponses), les blogs, etc...
  • Voire la gestion des différentes version d'un document pour les systèmes les plus complexes.

Bref rappel historique de l'émergence des CMS

1996 est l'année où apparaissent les langages de script comme JavaScript et PHP. Le terme de « content management » (gestion de contenu) datant de 1995, ça n'est véritablement qu'en 1999 que sont conçues les premières solutions. Le contenu est séparé du contenant, on parle de gabarit ou de templates pour la mise en forme du texte, des images et autres documents multimédias. La mise en ligne d'information s'émancipe du modèle graphique.

Cette évolution technique a ouvert l'utilisation de solutions de gestion de contenu à un grand nombre d'applications au sein ou à l'extérieur de l'entreprise : gestion de site Internet, gestion documentaire, groupes de travail collaboratif (groupware), etc... Rapidement, les projets Open Source ont vu le jour face aux logiciels et applications propriétaires, concurrençant et démocratisant l'accès aux CMS.

Nous nous trouvons à l'heure actuelle dans un mouvement d'intégration généralisé des applications de gestion de contenu dans les systèmes d'information des entreprises et organisations en phase d'adoption des nouvelles technologies de l’information et de la communication (NTIC).

 

Prestation sur devis

Nos références clients