Le framework CSS (ou cadre d’application) fait partie courante de mon travail. Que ce soit pour développer un site web ou une application, c’est un outil indispensable ! Mais quoi faire lorsqu’on est restreint à développer sans ?
J’ai récemment conçu un quiz interactif destiné aux jeunes dans le cadre d’une campagne de lancement pour un nouveau client. Un des principaux défis du projet : développer une application responsive sans l’utilisation d’un framework CSS !
Les avantages du framework CSS
L’emploi d’un framework CSS apporte plusieurs avantages dans la réalisation d’une application responsive. C’est d’ailleurs ce qui rend son utilisation si populaire.
- Permet de positionner plus facilement les éléments dans une grille
- Permet de résoudre les problèmes de compatibilité entre les navigateurs
- Facilite le développement responsive en gérant toutes les tailles d’appareils (mobile, tablette et desktop)
Une stratégie personnalisée
Mais parfois, nous sommes dans l’impossibilité de l’utiliser. Ça peut être un requis spécifique du client lors d’un nouveau développement, ou encore une raison technique (ex. : de la maintenance sur un site déjà développé sans framework CSS).
Donc, mon questionnement sur la difficulté de positionner les éléments du design de façon responsive m’a amené à demander conseil à notre équipe de développeurs.
Voici la stratégie développée pour résoudre ce problème :
Premièrement, la définition des classes suivantes :
- container: pour contenir les éléments de la page
- row: pour placer les éléments en rangée comme sur une grille
- tile: pour définir un bloc de contenu
1. Utiliser la technique du positionnement CSS float pour les classes row et tile.
La méthode du float est une façon de positionner les éléments en les sortant du flux normal de la page HTML — ils deviennent alors des éléments flottants.
2. Se servir des media queries pour la gestion du responsive sur différents types d’appareils
Un media query est une règle CSS utilisée pour appliquer des styles selon des conditions spécifiques. Par exemple, si sur mobile on ne veut pas que le navigateur affiche un élément en particulier, alors on indique la condition suivante dans le media query pour mobile : si la taille de l’appareil est plus petite que 750px, ne pas afficher l’élément (si la taille est supérieure à 750px, l’élément sera donc affiché).
3. Placer chaque section du quiz dans un container
La taille minimum de ceux-ci a ensuite été définie dans le media query spécifique à chaque type d’appareil afin de contenir les éléments de la page. Les dimensions des tiles ont aussi été définies dans chaque media query.
Une méthode simple pour fabriquer un mini « framework » maison
À travers la réalisation de ce projet, j’ai appris plusieurs choses intéressantes. Premièrement, pour utiliser les media queries, il faut bien déterminer les points de rupture pour mobile, tablette et desktop.
De plus, il faut s’assurer de faire une couverture minutieuse de tous les cas et de faire la gestion des exceptions pour les appareils spécifiques d’un support, par exemple : iPhone 4, iPhone 5, iPhone 6. Les incongruités peuvent varier, mais surveillez surtout :
- Les éléments placés avec la méthode du positionnement relatif ou absolu ; ils auront peut-être besoin de « tweaking » pour chaque type d’appareil.
- Le résultat sur tablette en mode paysage versus en mode portrait
Défi accompli !
En conclusion, la solution implémentée a été une stratégie efficace pour réaliser le défi du projet. À travers l’expertise de notre équipe, nous avons développé un produit personnalisé qui s’adapte aux besoins du client. À chaque problème, il y a toujours une solution. Emmenez-en des défis !
