Outils du site

fr:website_css

Astuces pour les sites web (css et compagnie)

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.

Couleurs

Accessibilité

Outils

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.

Points d'attention divers

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é):

  • La hauteur des lignes doit pouvoir être ajustée à 1.5 fois minimum la taille de la police de caractères.
  • L'espace situé entre deux paragraphes doit pouvoir être ajusté à 2 fois minimum la taille de la police de caractères.
  • L'espacement entre les lettres doit pouvoir être ajusté à 0.12 fois minimum la taille de la police de caractères.
  • L'espacement entre les mots doit pouvoir être ajusté à 0.16 fois minimum la taille de la police de caractères.

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.

Polices

Astuces CSS

Flexbox

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.

Responsive

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 :

  • 1800px
  • 1280px
  • 980px
  • 736px
  • 480px

Si on est un peu plus fainéant… Il faut prendre en compte surtout les 3 cas suivants :

  • L'écran fait plus de 1280px de largeur (cas de beaucoup d'ordinateurs de bureau aujourd'hui)
  • L'écran fait entre 736px et 1280px de largeur (“vieux” écrans, tablettes)
  • L'écran fait en dessous de 736px (smartphones)

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.

Support des navigateurs

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 :

Frameworks

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 :

  • Bulma, pur framework css, bien documenté et découpé, assez sobre de base.
  • Html5up, template pour sites web simples. Attention, les versions de javascript sont parfois obsolètes, mais ces templates sont très instructifs côté css.

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.

1)
À vérifier, en em ma source n'est pas fiable.
2)
Non, je ne pense pas aux vieux Mac. Ni à Windows. Ni même à Android. Et pas à Debian stable non plus.
fr/website_css.txt · Dernière modification: 2019/12/09 15:23 par Alcyone