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

Flexbox est un framework 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.