Le site utilise un design adaptatif. L'affichage se modifie en fonction de votre appareil ou de la résolution de votre écran. En-deça d'une certaine taille d'affichage, ou bien si vous regardez ce site depuis un smartphone, le design se modifie pour devenir plus lisible. D'après mes tests (mais je n'ai pas accès à beaucoup de types de smartphones différents), ce système a l'air de bien fonctionner.
Il est fortement conseillé d'utiliser un navigateur Internet récent. Sur d'anciennes versions, l'affichage ne sera pas correct, des bouts de page seront positionnés aux mauvais endroits, des couleurs disparaîtront et certaines portions du site deviendront carrément illisibles.
Si ce n'est pas déjà le cas, je vous recommande fortement de télécharger la version la plus récente de l'un des navigateurs suivants :
Chrome Explorer Firefox Opera Safari
(cliquez sur le logo du navigateur désiré pour accéder à sa page officielle de téléchargement)
Je ne suis pas développeur web professionnel, et je n'ai ni le temps, ni l'envie, ni les compétences de faire des versions adaptées à des navigateurs trop anciens ou qui ne respectent pas les standards en vigueur.
Retour à la page d'accueil
Que vous soyez sur l'affichage pour petits ou grands écrans, cliquez sur la bannière principale du site (en haut de chaque page) pour revenir à la page d'accueil.
Menu principal
Sur les grands écrans, un menu est présent sur chaque page et permet d'accéder en un clic à n'importe quelle page du site. Survolez simplement le menu avec la souris pour dérouler la catégorie choisie, et cliquez sur la section qui vous intéresse. Ce menu est toujours le même, où que vous vous trouviez dans le site, même si ses couleurs peuvent changer selon la section où vous vous trouvez.
Sur les petits écrans (smartphones, petites tablettes, écrans de faible résolution), j'ai opté pour une page dédiée, accessible depuis n'importe quel endroit du site, en touchant simplement le texte "Plan du site" situé en haut de chaque page, en-dessous de la bannière principale. Cela donne accès au menu complet. Chaque page du site est représentée par un bouton qu'il suffit de toucher pour y accéder. Chaque section du site est représentée par une couleur différente (bleu pour le didacticiel, cyan pour la section simulation, etc.). Pas super esthétique, mais pratique et rapide, les boutons étant suffisamment gros pour être faciles d'accès, même sur un écran de smartphone.
Se situer dans le site
En haut de chaque page, au-dessus de la bannière, se trouve un indicateur de votre localisation dans le site. Par exemple, vous saurez que vous êtes dans la section "Didacticiel", dans la partie "Le mix en pratique", sur la page des "Guitares solo". Et vous pouvez cliquer sur les catégories pour aller sur les pages correspondantes.
Icônes "haut de page" ou "début de paragraphe"
Afin d'éviter les grands roulements de molette de la souris, ou les longs défilements au doigt sur écran tactile, j'ai essayé de mettre des menus là où c'était nécessaire, en début de page, afin d'accéder directement à la section qui vous intéresse dans la page. Les liens sont bien évidemment en couleur (rouge).
D'autre part, vous verrez que diverses icônes séparent les différentes sections de texte au sein d'une page. Les icônes situées au sein des paragraphes permettent de remonter en tête du paragraphe, alors que les icônes de flèches pointant vers le haut et situées entre deux paragraphes vous permettent de remonter tout en haut de la page.
Par exemple, cliquez sur ces guitares pour revenir en tête du paragraphe :
Cliquez sur la flèche pour remonter tout en haut de la page :
Versions française et anglaise
Tout en haut de chaque page se trouve une icône de drapeau anglo-américain qui permet de passer à la traduction anglaise du site. Je suis très en retard à l'heure actuelle sur la traduction des pages, et beaucoup de pages ne sont tout simplement pas disponibles en anglais, mais j'y travaille.
