1.5 KiB
1.5 KiB
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
- Des bouts de branches et de canopée qui défilent lors du scroll, contenant des éléments de texte ou autre contenu.
- Un header avec des onglets sur PC et un « menu-sandwich » sur le côté sur téléphone.
- Exploiter l'illustration au maximum. En la laissant fixée en fond de page tandis que les éléments graphiques défilent ?
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é.
-
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.