CSS Grid ou comment avoir un site qui ne ressemble à aucun autre

CSS Grid ou comment avoir un site qui ne ressemble à aucun autre

CSS Grid ou comment avoir un site qui ne ressemble à aucun autre
Publié le 27 mai 2020 par acrv
Dans la catégorie : Explications

Lasse de construire des sites internet qui finissent tous plus ou moins par se ressembler, nous nous sommes sérieusement intéressés à une nouvelle méthode pour élaborer leur design : le CSS Grid.


Grossièrement, il s’agit de construire une grille, puis, sur le principe d’un touché-coulé, de dicter aux éléments leur position sur cette grille.
Cette méthode de placement nous permet de créer facilement de nombreuses mises en page qui n’étaient, jusque-là, pas ou difficilement possibles.
Les éléments peuvent par exemple se chevaucher ou être placer comme des éléments en position absolue sans grandes difficultés.

Et sur mobile ça donne quoi ?

Et sur mobile ça donne quoi ?


Là où le grid gagne ses lettres de noblesse, c’est dans la construction du responsive webdesign car, si cela vous avait échappé, nous naviguons principalement sur le web via nos smartphones.
Fini, les blocks simplement positionnés les uns en dessous des autres ! Fini, les histoires de marges négatives ! Fini, les positions absolues ! Maintenant, il est possible, même en responsive, d’avoir des chevauchements et de rythmer les pages sans trop de difficulté. Plus besoin de jouer avec des histoires de marges négatives ou des positions absolues, qui nécessitent parfois d’être conditionnées en fonction du device sur le quel l’utilisateur va consulter le site.
Très récemment utilisé pour le site « Les Boutiques du Patrimoine », notre client a directement validé le webdesign de la vue desktop. Pourtant, sans nous en faire part, celui-ci s’est tout de même interrogé sur l’aspect qu’aurait le site une fois sur mobile.
A la livraison du site, ses doutes quant au design mobile se sont envolés. Le rythme de la vue desktop était le même sur mobile, les blocks se suivaient tout en se chevauchant et le design de son site gardait son aspect originel quel que soit le device. Merci CSS Grid

Et si j’utilise Internet Explorer ?


Un autre aspect intéressant du CSS Grid, et pas des moindres, est qu’il est aujourd’hui compatible avec tous les navigateurs, y compris Internet Explorer à partir de la version 10. N’oublions pas les utilisateurs d’Internet Explorer car, croyez-le ou non, il y en a encore !
Nous ne saurions que vous recommander d’utiliser Firefox pour un rendu optimum de votre site, notamment pour les couleurs, mais libre à chacun d’utiliser le navigateur de son choix 😉

Et si j’utilise Internet Explorer ?

Et le Flex alors ?


Le Grid ne faisant pas tout, nous continuons de développer en le couplant avec la fidèle et éprouvée méthode du Flex.
Les deux vont de pair pour un résultat impeccable.
Alors ? Vous prendrez bien un petit peu de Grid pour votre prochaine refonte ?

Nos derniers articles

Bye-bye 2022 ! Bonjour 2023 ❤️
2 minutes de lecture
Bye-bye 2022 ! Bonjour 2023 ❤️

Nous souhaitons à nos chers clients une très belle année 2023, remplie de réussite, de santé et de bonheur. Que cette nouvelle année soit l’occasion de réaliser tous vos projets et de vous épanouir pleinement. Nous espérons avoir l’opportunité de continuer à vous accompagner dans vos projets et de vous offrir nos services de qualité. Meilleurs vœux pour cette nouvelle année !

SEO : l’importance des ancres de lien
10 minutes de lecture
SEO : l’importance des ancres de lien

Les composants les plus importants d’un lien sont la qualité du lien lui-même et le texte d’ancrage qui l’entoure. En plus d’offrir une meilleure expérience à vos visiteurs, cet élément aide les moteurs de recherche à analyser et comprendre l’URL insérée.

Comment savoir si l’expérience utilisateur d’un site est mauvaise ?
8 minutes de lecture
Comment savoir si l’expérience utilisateur d’un site est mauvaise ?

Votre site connaît une perte de vitesse et vous souhaitez trouver la source de ce phénomène ? Demandez-vous ce qu’en pensent vos visiteurs, l’expérience utilisateur (l’UX) est peut-être en cause. En effet, si l’UX est mauvaise, cela peut expliquer le changement de certaines métriques, telles que la baisse de vos conversions et l’augmentation de votre taux de rebond.