Cpcos Business Consulting
- Cpcos Business Consulting Visiter le site
- GitHub Accéder au code
- Technologies BOOTSTRAP/SASS
Description et contexte :
Cpcos Business Consulting est un site fictif de conseil aux entreprises.
Toujours dans la perspective de relever de nouveaux défis, je vais m’attaquer à un design asymétrique. Ce type de design a la réputation d’être contraignant pour l’intégration et le responsive par la complexité des relations entre les éléments mais le résultat visuel est très intéressant et attire l’attention des utilisateurs.
D’autres part, j’ai codé ce site pour mettre en pratique mes compétences en Bootstrap / SASS
Objectif :
Découper et intégrer une maquette, de plusieurs pages, réalisée sous Photoshop, répondre aux exigences d’UX / UI / référencement et le niveau d’accessibilité amélioré (AA). Le site doit être optimisé et le code doit être évolutif et réutilisable.
Travaux réalisés :
- Découper la maquette
- Customiser les variables et cartes Sass de Bootstrap
- Intégrer les éléments HTML et les classes CSS de Bootstrap
- Intégrer des animations avec CSS pour une expérience utilisateur réussie
- Intégrer les validations de formulaires côté client avec JAVASCRIPT native
- Installer les dépendances Postcss, Postcss-CLI, autoprefixer pour la compatibilité des navigateurs
- Implémenter les éléments en respectant les règles d’accessibilité WCAG
- Purger le CSS inutilisé avec PURGE CSS
- Minifier les fichiers CSS
- Réécrire les URL (URL Rewriting)
- Tester et optimiser le site web dans le cadre d’une démarche d’optimisation continue de performances (optimisation sémantique, temps de chargement, balise meta, poids des images, maillages internes, lazy loading, caches …)
Résultats :
Malgré l’utilisation de Bootstrap le temps de chargement du site est rapide (Time to interactive : 0.7s) avec une navigation fluide et intuitive. J’ai respecté les normes de référencement technique (SEO on-page) et les standards d’accessibilité du WCAG. Le site est responsif, compatible avec les différents navigateurs modernes et validé par le service de validation de balisage du W3C Nu Html Checker .
Résultat de test Lighthouse :
Concernant l’accessibilité le site ne répond pas aux critères de succès 1.4.3 de WCAG (contraste minimum) afin de respecter la couleur orange de la maquette. J’ai également effectué des tests avec le lecteur d’écran NVDA et le validateur d’accessibilité AChecker Web Accessibility Checker (niveau AA) pour m’assurer qu’il y’a pas de problèmes majeurs. Le résultat des tests a été concluant.
L’utilisation du préprocesseur SASS m’a permis de customiser Bootstrap et d’utiliser que les fichiers dont j’ai besoin, d’avoir un code évolutif et réutilisable.
La réalisation de ce site web m’a permis d’être autonome et de renforcer mes compétences en Bootstrap sans CDN. Elle m’a permis de développer la capacité à chercher les informations dont j’ai besoin, de communiquer avec d’autres développeurs (Discord) et de trouver des solutions aux difficultés rencontrées et d’être persévérant quelles que soient les taches à effectuer.