Cette page recense quelques outils pratiques pour bidouiller les pages web et essayer de faire des trucs trop beaux.

* http://thestocks.im/ : Site listant pleins d'outils, couleurs, images, polices, etc

• http://www.code-couleur.com/ : voir quelle couleur correspond à quel code html et vice versa
• http://www.degraeve.com/color-palette/ : générer une palette à partir d'une image
• http://paletton.com/ : générer une palette
• https://color.adobe.com/ : similaire au précédent, permet de trouver des couleurs qui vont potentiellement aller ensemble
• https://colourco.de/ : outil très sympa pour générer une palette (potentiellement à partir d'une couleur qu'on a déjà).
• https://colordrop.io/ : lot de palettes

• http://www.yoyodesign.org/outils/ncolor/index.fr : sélecteur de couleur pour voir comment une couleur est “perçue” suivant l'handicap visuel

Largeur de texte : L'œil a du mal à lire des lignes de plus de 70-80 caractères (33em¹⁾ ). N'étirez pas le texte sur tout l'écran, il vaut mieux faire des colonnes ou laisser du vide.

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.

• http://flexboxfroggy.com/#fr : pour apprendre de façon ludique
• https://philipwalton.github.io/solved-by-flexbox/
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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'ordinateur de bureau aujourd'hui)
• L'écran fait entre 736 et 1280px de largeur (“vieux” écrans, tablettes)
• L'écran fait en dessous de 736px (smartphones)

Ces valeurs ne sont pas vraiment absolu 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 hamburgers 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é, ce qui oblige à ajouter des déclarations en plus.

Mais alourdir le code parce que les navigateurs ne sont pas mis à 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 complexe²⁾. 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 indique les compatibilité mais pas forcément de quand date 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 liste de sortie.

Historique des versions de :

• Internet Explorer
• Mozilla Firefox
• Chrome
• Opera
• Safari