Créer un site web dynamique ou statique aujourd’hui nécessite le test de son affichage sur plusieurs terminaux et doit s’adapter à la taille des écrans que ce soit depuis un ordinateur de bureau, une tablette, un smartphone ou une télévision connectée ! eh oui c’est l’ère du responsive design.
Le rôle donc d’un bon webmaster consiste à prévoir tous les formats d’écran et proposer une ergonomie correcte d’où le responsive design est devenu un incontournable pour la conception de sites web surtout que google le moteur de recherche a décidé depuis un an et demi déjà de pénaliser les sites non responsive web design, c’est à dire non compatibles avec les mobiles, smartphone ou tablette. Dans ce billet, j’ai essayé de regrouper quelques frameworks CSS libres de droit et gratuits permettant de mettre en oeuvre un design adaptatif pour ceux qui débutent en développement des sites web ou ceux qui tentent de rattraper le train avec plus ou moins de bonheur.
Mon meilleur exemple pour voir le responsive design en action est d’aller visiter des sites complexe de grande fréquentation et qui proposent des jeux comme les sites de jeux en ligne ou de casino et essayer de jouer à titre d’exemple aux machines à sous sur des différents supports (mobiles, smartphone ou tablette) et voir le résultat ! Ce genre de sites donnent plus d’importance à l’expérience utilisateur car c’est leurs chiffres d’affaire qui est en jeux.
Il existe aussi un outil de google pour tester si votre site est responsive ou pas, en un seule clic, quelques minutes de patience et vous avez le résultat devant vous. Il suffit donc pour cela de se rendre sur cette page Test d’optimisation mobile pour en profiter.
Maintenant et que votre site n’est plus responsive, vous n’avez qu’a testé ces frameworks pour en tirer le meilleur pour votre choix :
1- Bootstrap le plus utilisé dans le web : C’est un framework made by les développeurs de Twitter sous une licence open source et regroupe tous les lignes de code HTML/CSS ainsi que des extensions javascript et jquery, son utilisation est très facile et simple pour insérer des formulaires, des boutons, des outils de navigation et autres éléments interactifs toute en contrôlant l’affichage responsive pour vos développements Front-End.
2- Responsive Grid System : Léger et très flexible si on le compare avec les autres frameworks CSS et il est considéré comme un KIT de démarrage rapide. Son système de grid (grille) vous donne le choix d’utiliser le nombre que vous voulez de colonnes dont vous avez besoin et pas strictement 12 colonnes ou 16 colonnes comme les autres frameworks.
3- Skeleton framework : Il s’agit d’un mini framework pour le responsive design et il est parmi les plus demandée sur GitHub avec seulement 400 lignes de code, il embarque juste le nécessaire pour mettre à pied de petits projet avec un système de grid (grille) de 12 colonnes, des boutons, formulaires et quelques styles supplémentaires comme les listes, mise en forme de code source et les tableaux.
4- Foundation framework : Tout comme bootstrap c’est un framework css ultra complet, développé par zurb.com et vous permet aussi la creation des sites web fluide et responsive grace à une syntaxe simple et une grille intuitive et quelques modules Javascript pour bootstraper rapidement un site.
