Votre site en Responsive design grâce à Foundation, Knacss ou Bootstrap
Vous souhaitez coder un site internet qui s’adapte parfaitement à la largeur des écrans de vos internautes ? Il faudrait peut être penser à utiliser un framework CSS responsive design ! Voici une sélection des 4 meilleurs: Foundation, Bootstrap, Gumby et Knacss.
Si vous consultez les statistiques de votre site Internet régulièrement vous avez très certainement remarqué une tendance de plus en plus flagrante et déconcertante. En effet depuis quelques mois sur la page « détails techniques » et notamment dans le détail des OS et « devices » utilisés par vos lecteurs vous avez vu apparaitre de plus en plus systématiquement iOS, Android, Windows Phone (pour ne citer que les plus courants). Et lorsque vous regardez les résolutions, ça devient alors encore plus disparate !
Une tendance déconcertante car si vos lecteurs sont de plus en plus mobiles (ce qui est un bon point) vous ne pouvez connaitre à l’avance le « device » utilisé. Ecran panoramique, écran tablette, écran Smartphone le tout tournant sous Android, iOS … un enfer pour votre site Internet qui doit obligatoirement s’afficher correctement et proposer une expérience utilisateur optimale.
Le responsive design sonne comme une solution miracle à cette problématique. Cette notion de responsive design s’applique à un site qui s’affiche correctement quelque soit la « device » utilisée. Mieux, il permet la modification de l’expérience utilisateur de façon dynamique et exclusivement en front end (en utilisant CSS et JavaScript).
Cependant, pour réussir un site parfaitement responsive il faut beaucoup de temps et souvent faire des concessions.
Avez-vous testé WKS sur votre téléphone ? Le site s’affiche plutôt bien non ? Et si je vous disais que je n’ai pratiquement rien fait pour ! Et oui, ce tour de magie est possible en utilisant un Framework Css spécialement conçu pour le responsive. Voici une sélection de 4 Framework que je trouve efficaces et faciles à utiliser. A vous ensuite de faire votre choix :p
Foundation 4
Ce Framework développé par ZURB permet d’intégrer votre site Internet tout en ayant la possibilité de l’adapter pour le responsive design. Simple, pratique et léger il se démarque de ses concurrents en proposant un panel d’outils plus que complet (Templates pré codées, fonctionnalités js, icones etc.) tout en ayant une sémantique irréprochable. Son poids plume et sa capacité à gérer Sass lui donne également de sérieux avantages. Pour information, c’est le Framework que j’ai décidé d’utiliser pour coder la nouvelle version de WKS.fr !
Plus de détails sur le site officiel : foundation.zurb.com
Bootstrap
Autre Framework responsive mais développé cette fois-ci par Twitter. Bootstrap permet évidemment de coder son site en responsive mais propose également un panel de CSS et d’options javascript plus que complet. De plus, j’apprécie particulièrement le look Twitter que l’on retrouve sur les boutons ou encore les champs de formulaires. Attention tout de même, l’utilisation de Boostrap peut paraitre un peu plus complexe que Foundation, cependant, en lisant correctement la documentation, on s’y retrouve plutôt facilement. C’est ce Framework que j’ai utilisé pour développer mon second site Grafpedia.com !
Plus de détail sur le site officiel : twitter.github.io/bootstrap/
Gumby 2
Un peu moins connu mais tout aussi efficace, la seconde version de Gumby vous permettra de créer un site internet parfaitement responsive. Il propose lui aussi des CSS prédéfinis (d’ailleurs j’aime beaucoup le look des éléments) et des outils javascript. Gumby n’auront aucun souci à gérer votre code Sass ce qui aujourd’hui est un point non négligeable. Je n’ai pour le moment jamais utilisé ce Framework, ainsi, si une personne à un retour à faire sur son utilisation je suis preneur en commentaire sur cet article !
Plus de détail sur le site officiel : gumbyframework.com
Knacss
Voici un framework 100% français pour terminer cette sélection. Knacss vous permet d’optimiser de façon vraiment complète votre site pour le responsive. Les outils proposés sont beaucoup moins complets que les trois exemples ci-dessous, cependant, je tenais à mettre en avant ce Framework français !
En savoir plus sur le site officiel : www.knacss.com
Pour conclure : Aujourd’hui il est indispensable de coder son site internet optimisé pour le responsive ; tout du moins pour un professionnel de l’internet de connaitre cette problématique ainsi que les solutions qui existantes pour mettre en œuvre de tels projets.
L’utilisation d’un Framework CSS est donc pour moi une solution sûre et efficace pour créer rapidement un site internet responsive efficace.
Enfin, si je devais en choisir un seul se serait sans aucun doute Foundation 4 pour sa simplicité et sa flexibilité. Cependant je vous conseille d’étudier la documentation de chaque Framework pour choisir celui qui s’adaptera au mieux aux besoins de votre futur projet.
Merci d’avoir lu cet article, en espérant que vous avez appris quelque chose de nouveau. N’hésitez pas à laisser un commentaire ci-après si vous avez un complément d’information ou une question à propos du responsive ou des Frameworks.
