Laboratoire du futur site web de Deuxfleurs

Les tests graphiques sont dans /lab, une page HTML par idée à développer. N'hésitez pas à ajouter la vôtre !

Objectifs techniques

Responsive mobile-first design.
Media queries CSS : Des images envoyées adaptées à la taille des viewports.
Pas besoin de Javascript : Le CSS3 ça déchire, on peut faire des infobulles, des animations, de la parallax. (Navigateurs compatibles depuis 7 ans ou plus.)

Branches et canopée : Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
- ronce/feuille brush.abr contient la brosse Photoshop utilisée par Ronce pour les feuilles d'arbre au premier plan. On pourrait l'utiliser pour faire des bordures de fond.
Parallax : Exploiter l'illustration au maximum, en la laissant fixée en fond de page tandis que les éléments graphiques défilent (parallax).
S'il faut un menu : barre d'onglets sur PC, menu « sandwich » qui révèle une colonne d'onglets sur smartphone.
Couleurs : Ronce a proposé quelques couleurs dans /lab/gimp/branches-et-canopee.

un violet du fond en rab, soit pour le fameux monde d'en bas, soit pour un peu de douceur moins saturée.
Elements <code>:
- Police Fira Code (ou autre police stylée avec des ligatures) ?
  
  Il semblerait qu'Element utilise du Fira Sans... Hm.
- Bordures « dessinées à la main » ?

MDN - Création de tooltips et remarques sur l'accessibilité du contenu

On peut faire tout ce qu'il faut avec CSS3 !

Néanmoins, rendre un site accessible sans outils a l'air compliqué.
CSS Border Effects : Notamment 'Cool Clippings', 'Hand Drawn' (et 'Attention Getter' for fun)
border-image sur css-tricks notamment « More Demos ».
W3C Semantic HTML

Utiliser des bannières qui donnent du sens au contenu.
Semantic CSS

Le fait de ne pas donner d'éléments de graphisme dans notre markup HTML, mais seulement dans le CSS. Par exemple, mettre une classe "text-center" à un <p> est considéré une mauvaise pratique.