Les bases pour avoir une bonne structure sur son site internet

La structure d'un site internet se base sur son cahier de charges. Avant d'écrire le code, vous devez créer un plan du site en abordant chaque possibilité. Cette tâche est fastidieuse, mais elle est indispensable. Le HTML 4 possède déjà quelques structures basiques afin d'organiser son site, mais le HTML 5 étend considérablement cette possibilité. Dans le HTML 4, nous n'avions que deux éléments d'un point de vue sémantique, à savoir, le balise HEAD et BODY. La première contenait nos codes JavaScript, nos références à des fichiers CSS ou d'autres éléments tels qu'un code pour le suivi des statistiques. Ensuite, nous mettions tout le contenu dans la balise BODY en utilisant des tableaux ou des balises DIV. Cette pratique risque de disparaître avec l'arrivée du HTML 5, car celui-ci possède des balises dédiées telles que le FOOTER pour le pied de page, le HEADER, l'ARTICLE, etc. De ce fait, l'organisation sera beaucoup plus facile pour le webmestre et le moteur de recherche.

La structure typique d'un site internet


Pour créer votre site internet, vous pouvez utiliser une structure qui se base sur trois éléments. L'en-tête, le contenu principal et les menus. La disposition de ces éléments n'a pas d'importance du moment que vous respectez cette structure. L'en-tête contiendra vos titres et vos descriptions du site sans oublier des liens pour s'abonner au flux RSS ou à vos réseaux sociaux. Les menus permettent d'accéder aux différentes pages de votre site et enfin le contenu principal affiche individuellement la page web. On peut améliorer cette structure en ajoutant un 4e élément qui est le menu contextuel. Par exemple à la fin de chaque article, vous pouvez ajouter un menu qui affiche des articles similaires. En utilisant cette structure à 4 points, vous bénéficierez d'un site fonctionnel et efficace. Certains webmestres font l'erreur d'afficher uniquement les menus principaux et de « cacher » les sous-catégories à l'intérieur du site. Sachez qu'on doit donner le maximum de confort à l'utilisateur et c'est toujours une bonne pratique d'afficher à la fois les catégories principales et secondaires.

Une bonne structure d'un site doit être évolutive, cela signifie qu'on doit pouvoir ajouter des éléments tiers sans perturber le design ou la hiérarchie principale. Au début de votre site, vous pouvez avoir 4 rubriques avec 4 sous-catégories pour chacune. Si vous voulez ajouter une rubrique ou une sous-catégorie, il n'y aura pas de problème, mais comment faire si vous envisagez d'ajouter un forum, un Wiki ou un blog à votre site pour augmenter l'interactivité ? On peut utiliser le 4e élément composé du menu secondaire. D'une part, cela permet de dire au visiteur qu'on a ajouté une partie externe par rapport au site et d'autre part, vous bénéficiez d'une souplesse pour étendre le site selon vos besoins.

Codage et maintenance d'un site internet


Si on utilise notre structure de site web, notre code pourrait ressembler au suivant :

 

 




Si vous maîtrisez le CSS, vous pourrez mettre en forme ces 4 éléments. Le fait d'utiliser un ID tel que " navigation " peut prêter à confusion, mais cela permet d'identifier les catégories principales. Évidemment, vous pouvez utiliser les noms que vous voulez, mais il faut aussi tenir de la maintenance. Ces exemples de noms sont facilement identifiables et ainsi, un autre webmestre pourra modifier votre site si c'est nécessaire. Que votre site possède des milliers ou quelques articles, on doit toujours utiliser une structure simple pour faciliter le développement et la maintenance. Un moyen facile de créer une structure de site est d'utiliser le Mind Mapping qui est simplement le fait de créer des organigrammes de son site. Des logiciels gratuits sont disponibles afin qu'on puisse utiliser cette technique pour visualiser son site. Et ainsi, on aura une idée globale de la structure nécessaire pour son site web. Si c'est possible, on doit concevoir la structure avec plusieurs personnes afin de bénéficier du Brainstorming. C'est notamment le cas pour les grands projets qui impliquent la participation du design, du développeur et du manager.