Derrière le graphisme, le code !
Orchidées ou caméléons ? humm 🤔
Mais pourquoi cette question ???! Lors de ma formation de développement web auprès de l'école O'Clock, nous avons exploré le monde des caméléons le temps d'un atelier sur les grilles et les positions. J'ai eu envie de ré-écrire cette page statique, mais plutôt avec mon affection pour les orchidées !
J'ai ensuite ajouté des pages secondaires, pour utiliser d'autres balises html et pousser plus loin cet exercice.
Je me suis "attaquée" au responsive pour que mes grilles s'adaptent aux petits écrans. Vaste sujet et le résultat initial ne me convenait pas !
J'ai donc repensé la feuille de style css en "mobile first" : plus de 60% de la navigation sur internet se fait sur mobile, cette approche tend à devenir le standard du web. Même si elle n'est pas évidente lorsque l'on code sur un ordinateur, elle doit maintenant devenir un réflexe pour les développeurs.
Optimisation html et accessibilité
La simplicité est bien souvent la meilleure solution lorsqu'il s'agit d'optimisation.
- J'utilise les balises sémantiques qui correspondent à chaque type de contenu :
- Le site devient facile à analyser par les robots des moteurs de recherches qui viennent le scanner.
- Les lecteurs d'écrans retranscrivent facilement le contenu aux visiteurs malvoyants.
- Les temps de chargement sont optimisés sans code superflux.
- Les images sont chargées à la bonne dimension :
- Pas de surconsommation énergétique sur le serveur.
- Le chargement n'est pas ralenti.
- Pas de stockage trop volumineux sur votre navigateur.
- Les pages sont pensées pour l'accessibilité :
- Les légendes sont renseignées.
- Les balises ARIA sont utilisées si nécessaire.
Points techniques
Ces quelques pages ont été rédigées manuellement et en limitant fortement les classes CSS : un reset associé à une gestion minimalisme des feuilles de style.
Le responsive est obtenu avec l'usage de flexbox, grid et quelques lignes de média queries.
Retrouvez ce tableau-repère sur mes différents projets de développement web : il vous aide à visualiser d'un seul coup d'oeil, mes choix technologiques !
| Langages | |
|---|---|
| ✅ | HTML |
| ✅ | CSS |
| ❌ | PHP |
| ❌ | JavaScript |
| ❌ | MySQL DB |
| Frameworks | |
| ❌ | Bootstrap / Tailwind |
| ❌ | Laravel |
| ❌ | Svelte |
| CMS | |
| ❌ | Directus |
| ❌ | WordPress |
Résultats
index.html
Fichier style css - style global
Fichier style css - style du menu de navigation
Fichier style css - style de la page d'accueil
Fichier style css - media-queries
