Laboratoire du futur site web de Deuxfleurs

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.)

Idées graphiques

• 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.

• 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 de <code> comme dessinées à la main ?

Inspirations

• 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] (https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)

  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.