Cette page recense quelques outils pratiques pour bidouiller les pages web et essayer de faire des trucs trop beaux.
* http://thestocks.im/ : Site listant plein d'outils, couleurs, images, polices, etc
Attention à la surenchère ! Les sites web sobres sont moins pénibles que ceux qui clignotent de partout, avec des vidéos qui se lancent, etc. Pensez au confort de vos visiteuses, pas juste à faire un effet “Whaouu” vite fatiguant après quelques secondes.
Méfiance aussi devant les modes : l'aspect de votre site web doit servir votre propos ET se démarquer de ce qu'on voit “partout” si vous souhaitez être bien identifiée.
Pour contrôler la qualité du code php :
Voir aussi la page détaillée sur le sujet, plus à jour.
Il existe globalement diverses listes d'outils à travers le web plus ou moins à jour : https://frontendmasters.com/books/front-end-handbook/2018/tools/accessibility.html ou https://4design.xyz/outils-en-ligne-pour-verifier-accessibilite-de-votre-site-web ou encore https://github.com/brunopulis/awesome-a11y/blob/master/topics/validators.md par exemple.
Largeur de texte : l'œil a du mal à lire des lignes de plus de 70-80 caractères (33em1) ). N'étirez pas le texte sur tout l'écran, il vaut mieux faire des colonnes ou laisser du vide.
Aérer le texte : Il est couramment admis qu'une hauteur de ligne (line-height) de 1.5 permet d'obtenir une bonne lisibilité du texte.
Si l'utilisatrice applique les réglages suivants, le texte doit rester lisible (pas de contenu tronqué, superposé):
On peut utiliser un bookmarklet (faire un marque page comportant l'adresse suivante) pour tester cela :
javascript:s%20=%20document.createElement(%22style%22)%3Bs.setAttribute(%22type%22%2C%22text%2Fcss%22)%3Bt%3Ddocument.createTextNode(%22*%20%7Bline-height%3A%201.5!important%3B%20letter-spacing%3A.12em!important%3B%20word-spacing%3A%20.16em%20!important%3B%7D%20p%7Bmargin-bottom%3A%202em!important%3B%20%7D%22)%3Bs.appendChild(t)%3Bh%20%3D%20document.getElementsByTagName(%22head%22)%5B0%5D%3Bh.appendChild(s)%3Bvoid(0)%3B
Penser au zoom : l'agrandissement/zoom de la page ou du texte seulement est courant en terme d'accessibilité, bien que les référentiels ne donnent pas toujours de valeur exacte (ils restent subjectifs sur de nombreux points), il y a certains points assez communément admis. Il n'y a pas toujours une seule bonne solution subjectivement, il convient de s'inspirer des bonnes pratiques comme base de suggestion.
Varier le zoom du site (CTRL + molette souris ou boutons “+” et “-”) doit pouvoir se faire en gardant les éléments lisibles malgré l'altération de la page.
La taille du texte doit pouvoir être multipliée par 2 par exemple (zoom à 200%, zoom du texte seulement à configurer dans le navigateur) tout en restant lisible.
Le design de la page peut être amené à être repensé sur ces points s'il ne le permet pas de base.
L'outil de loupe de l'OS peut également être utilisé et conditionne, comme pour les plages brailles, la largeur d'un texte ou d'une alternative textuelle par exemple
Information et couleur : ne pas donner une information uniquement par la couleur, quoi qu'il advienne.
Flexbox est un ensemble de fonctions qui simplifie la gestion des blocks en css ; plutôt que de galérer à cumuler les règles, un appel à Flexbox peut résoudre pas mal de difficultés.
Un site peut être visité depuis divers supports, du smartphone à l'écran de grande taille, et il faut que ce soit agréable à l’œil sur chacun de ces supports. Responsive est le mot d'origine anglaise signifiant “qui s'adapte à la taille de l'écran”. Dans la feuille de style css, le passage à une disposition se fait de la façon suivante :
@media screen and (max-width: 900px) { body, input, select, textarea { font-size: 12pt; } }
On ne va pas détailler ici… Juste un détail, quelle taille d'écran déclarer ? Pour les sites les plus pro, voici les largeurs :
Si on est un peu plus fainéant… Il faut prendre en compte surtout les 3 cas suivants :
Ces valeurs ne sont pas vraiment absolues mais généralement il faut prévoir un site qui s'adapte bien à ces trois cas. Ou faire encore plus “basique” : au dessus de 800px et en dessous (arrivée des menus “hamburger” etc). Attention, car sur les écrans avec une haute résolution (plus de 1800px), ça fait vite beaucoup de vide.
Certaines fonctionnalités CSS et HTML ne sont pas supportées sous tous les navigateurs, ou bien pas de façon standardisée, ce qui oblige à ajouter des déclarations en plus.
Mais alourdir le code parce que les navigateurs ne sont pas à jour n'est pas forcément une bonne idée ; les anciens navigateurs ont des failles et il est important que les utilisateurs soient “motivés” à mettre à jour. Attention, il faut quand même prendre en compte les vieux navigateurs car certains systèmes rendent la mise à jour des navigateurs un peu complexe2). Les gens ne sont pas toujours compétents pour être sur un système ayant automatiquement la dernière version des logiciels. Mais ce n'est pas une raison pour continuer à supporter Internet Explorer 6, remplacé dès 2006.
Les sites d'aide au css indiquent les compatibilités mais pas forcément de quand datent les navigateurs et donc s'il est encore pertinent (ou non) d'être compatible. Pour aider à y voir plus clair, la liste des navigateurs les plus courants et leur date de sortie.
Historique des versions de :
Pour vérifier la compatibilité, le site Can I use est idéal. Il contient aussi les statistiques d'utilisation des divers navigateurs web : https://caniuse.com/usage-table.
Un site comme https://www.browserling.com/ vous permet de tester ce que votre site donne sur d'autres navigateurs, dont les versions obsolètes.
On peut utiliser un Framework, qui permet de pré-configurer des classes, d'associer des attributs d'une façon qui marche, le tout pour un rendu sympa. Les frameworks (css ou autres) sont légion sur le net, ceux qui sont notés ici sont appréciés et utilisés par nos membres :
L'un des défauts des frameworks, c'est qu'ils sont utilisés partout, ce qui fait des sites assez similaires au niveau visuel. Pensez à modifier au moins les couleurs et le favicon.