Développeurs ne nous leurrons pas, n’est pas « designer » qui connaît le HTML. C’est pourquoi, plusieurs y ont réfléchi et ont développé des librairies CSS afin de mettre en place des concepts de présentation qui permettent de structurer la disposition des pages web.
Un des concepts très
populaire, est l’utilisation d’un positionnement par « grille ». Ce type d’affichage existe depuis le début de
l’édition d’impression. Visuellement, la page est séparée par zone.
De là, on contrôle l’affichage de chacune de celles-ci par CSS. C’est très utile lors de l’utilisation de
menu, d’un affichage par colonne,
l’affichage de message etc.
Les gens de Twitters
(Bootstrap), ZURB (Fondation) et
même le gouvernement Canadien (WET-BEOW) se sont penchés sur la question et ont
développé des plateformes CSS pour standardiser la présentation de leur
site. L’avantage n’est pas seulement
d’uniformiser l’affichage mais aussi de s’assurer du maintien de celle-ci selon
la dimension de l’écran de l’utilisateur, que ce soit sur un mobile ou sur un
écran d’ordinateur. Ainsi, on assure la
réactivité du site selon le médium utilisé pour accéder au site.
Dans le cas de Bootstrap l’écran est séparé en douze colonnes. Les colonnes ont une largeur définie par la
résolution du moniteur, variant de 60 pixels ou moins pour une tablette ou 95px
pour un très large écran. Par la suite, il est possible de
« fusionner » des cellules pour avoir, exemple, une ligne qui utilise
4 colonnes, chacune totalisera la largeur de trois cellules et ce, simplement
en manipulant les classes CSS des éléments HTML.
Exemple
Bootstrap :
Le « GridSystem » est un élément majeur supporté par cette librairie mais d’autres éléments ont été normalisé tel que, le texte, l’utilisation des polices de caractères, la présentation des formulaires, les boutons, les images etc. Ces outils sont de distribution libre et peuvent être incorporés à toutes les solutions web, de Java à .Net ou simplement Javascript.
Liens
Web Experience Toolkit (WET) chapeauté par le gouvernement Canadien.
Aucun commentaire:
Publier un commentaire