Greboca  

Applications Internet

Gréboca.com vous accompagne dès les phases de concéption de votre projet de site Internet.

Qualités et ergonomie des sites Internet

Un site Internet de bonne qualité répond à plusieurs critères :

  • Ergonomie (accessibilité et confort de lecture)
  • Structure et organisation du contenu
  • Ligne de flottaison
  • Vitesse de chargement des pages
  • Favoriser l’indexation du contenu par les moteurs de recherches
  • Faciliter le travail éditorial de l’équipe de rédaction

Une partie dépend du code envoyé au navigateur, une autre dépend des capacités et de la configuration des serveurs. Le choix du moteur générant les pages n’est pas anodin non plus.

Les sites réalisés par Gréboca respectent les critères de qualité au niveau des pages et des serveurs.

L’équipe de Gréboca maîtrise l’ensemble de la chaîne de production des sites internet et a conçu plusieurs outils d’aide à la diffusion des informations sur Internet.

L’ergonomie

L’ergonomie d’un site Internet est la facilité et le confort d’utilisation du site par le plus grand nombre d’Internautes ayant des configurations et des navigateurs différents, ou ayant des capacités physiques particulières.

Les pages du sites doivent avoir un format responsive, c’est à dire que le contenu dans la page va s’adapter aux conditions d’affichages par l’Internaute, qu’il utilise un écran très large, un vidéo-projecteur ou un téléphone, tout en conservant un niveau de confort et d’accessibilité optimal.

Structure et organisation du contenu

**La page d’accueil

C’est la première page vue par les visiteurs lorsqu’ils prennent connaissance du site sur des documents commerciaux ou de communication (carte de visites, courrier).

Ci-après, trois exemples de page d’accueil.

Algerie France Consulting {JPEG}Bionique {PNG}Mondial Business {PNG}


**3 clics

En règle générale, il est préférable que le visiteur n’ait pas à effectuer plus de 3 clics pour arriver sur l’information qu’il cherche. La présence d’un champs de recherche peut guider le visiteur, mais il ne faut pas compter uniquement dessus.

Les équipes de rédactions devront prendre soin à l’organisation de l’arborescence du site.

**Ligne de flottaison

Selon la taille des écrans (ou des fenêtres) et des navigateurs, le contenu qui apparaît à l’Internaute sans qu’il ait besoin de faire défiler la page est situé au dessus de la ligne de flottaison. Le contenu marquant (texte ou image), appelé l’accroche, devrait être situés au dessus de la ligne de flottaison pour être visible dès l’affichage de la page.

Il est donc opportun d’éviter les bannières très hautes, et tout ce qui peut déporter le contenu marquant en dessous de la ligne de flottaison.

**Vitesse de chargement des pages

Plus la page s’affiche rapidement chez l’Internaute, plus son expérience utilisateur est meilleur. Une page ne devrait pas nécessiter plus de 1 à 2 secondes pour s’afficher. Les moteurs de recherches prennent aussi en compte le temps de chargement d’une page.

Le code HTML envoyé au navigateur peut être optimisé sur de nombreux points :

  • En diminuant le nombre d’éléments dans une page
  • En utilisant des DIV pour la mise en page plutôt que des TABLE
  • Par appels à des scripts CSS et javascript légers et partagé par l’ensemble des pages du site, qui seront compressés par le serveur et conservés en cache par le navigateur
  • En limitant le nombre d’appel à des scripts externes comme les boutons des réseaux sociaux, qui ne sont généralement jamais conservés en cache par le navigateur.

Les images utilisées sur le site doivent être adaptées pour Internet, c’est à dire légères. Le moteur des sites Gréboca s’efforcent de toujours optimiser les images pour réduire le temps de chargement, même sur des connexions lentes. Cela contribue aussi à réduire le volume de données téléchargées. Avec l’utilisation des portfolio, les documents en grand format restent accessibles.

**Favoriser l’indexation du contenu par les moteurs de recherches

La structure du code HTML influence beaucoup la manière dont les moteurs de recherches vont lire l’information. Les moteurs ne voient pas la page de la même manière : Par exemple, le javascript est totalement ignoré.

*** La balise <TITLE>

Chaque page est repérée par un titre (balise <TITLE>), qui permet à l’internaute de savoir à quoi correspond la page dans la liste des fenêtres, ses onglets, ses bookmarks... tout comme les outils d’Indexations.

Une titre <TITLE> bien rédigé devrait, dans l’idéal :

  • être informatif ou attrayant pour un lecteur humain
  • refléter le contenu de la page
  • contenir des mots-clé pertinents
  • faire moins de 70 caractères pour éviter qu’il ne soit tronqué.
  • différent pour chaque page
  • votre marque ou le nom du site devrait être ajouté en fin de titre

***Les balises <META>

Ce sont des balises situées dans la partie <head> des pages, avant le corps de la page. Elles ne sont pas affichées, mais apportent des métadonnées aux pages. Elles sont bien évidement lues par les moteurs de recherches et le navigateur.

  • La balise META Description
    <meta name="description" content="Qualité et ergonomie des sites internet" />
    Absolument indispensable, elle influence directement le descriptif qui sera utilisé par les moteurs de recherches pour l’affichage des résultats. En cas d’absence de cette balise, le moteur ira chercher le texte qui lui paraît le plus approprié.
  • La balise META Keyword
    <meta name="keywords" content="référencement, création de site, SEO, Internet" />
    À peu près complètement inutile, elle est implémentée dans les templates des sites de Gréboca mais n’est pas utilisée. Généralement les moteurs de recherches ignorent totalement cette META Keyword.
  • La balise META Viewport
    <meta name="viewport" content="width=device-width" />
    ou bien
    <meta name="viewport" content="width=initial-scale=0.6" />
    ou encore d’autres variantes.
    Très important pour l’affichage sur les smartphones et les tablettes. Détermine le facteur de zoom de l’affichage de la page.
  • Les autres balises META ne seront pas évoquées ici.

**Les informations accompagnant les images ou les liens

  • Les images
    Au niveau des images, les champs alt et title aident le moteur de recherche à faire le lien entre l’image et les mot-clefs correspondant. Le nom de l’image est très important d’autant plus s’il contient des mot-clefs.
  • Les liens
    Le champs title doit contenir des informations qui seront lues par les moteurs de recherches. Le choix des mots du texte du lien est crucial pour le référencement et le confort de l’utilisateur.

**Faciliter le travail éditorial de l’équipe de rédaction

L’ergonomie et la fluidité du back-office sont des éléments déterminant pour l’équipe éditorial.

***Création de contenu

Créer du contenu dans les CMS moderne ne nécessite pas de connaître le HTML.

Ainsi, les rédacteurs peuvent se concentrer sur le contenu sans se soucier de la mise en page, tout en ayant la liberté de composer les éléments iconographiques dans le flux de texte.

Le mode de pré-visualisation permet de voir le rendu de l’article dans son contexte publique.

***Modification et révision du contenu

Toute modification apportée à un article est enregistré, et il est toujours possible de revenir à une version plus ancienne.

Dans l’espace publique du site, chaque partie du contenu est éditable en direct par les rédacteurs autorisés, facilitant la modification d’un article sans aller le chercher dans le back-office.