css 4 design » Grid

Quelques liens sur les Media Queries en CSS3

Bruno Bichet — Sun, 09 Oct 2011 21:38:47 +0000

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage !

CSS3 Media Queries

Media Queries : W3C Candidate Recommendation – La recommandation du W3C sur les Media Queries
mediaqueri.es – Collection de site utilisant Media Queries
Hardboiled CSS3 Media Queries – La boite à outils de Stuff and Nonsense avec de nombreux exemples de Media Queries prêts à l’emploi
Progressive Enhancement with CSS Media Queries – Stratégies pour utiliser les Media Queries dans une optique d’amélioration progressive
Les Media Queries CSS — Le but [des Media Queries] est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.
CSS3 : les Media Queries – Les Media-Queries, permettent de cibler différents cas et ainsi d’adapter la restitution de sa page html à différentes caractéristiques des terminaux.
Responsive Web Design: What It Is and How To Use It — Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
Playing with CSS3 Media Queries — Un exemple simple de mise en oeuvre pour voir les Media Queries en action
Media queries — Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.
CSS3 Media Queries JS — Javascript library which make CSS3 Media Queries work in all browsers (via JS 4 Design)
Responsive Design with CSS3 Media Queries – Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher.

Grilles adaptatives

Skeleton – A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
columnal – A responsive CSS grid system helping desktop and mobile browsers play nicely together.
Responsive Grid Systems — A Conceptual Framework for Extending Upon the Functionality of 960.gs

Articles sur le même sujet

Framework CSS — mettez vos grilles au pas !

Bruno Bichet — Wed, 17 Jun 2009 13:28:53 +0000

Je suis encore tout esbaudis par la découverte de 45+ frameworks CSS que tout webdesigner devrait connaitre qui liste une palanquée de bibliothèques CSS et d’outils pour générer des grilles de mise en page sans douleur. Je ne reviendrais pas sur les avantages ou les inconvénients des frameworks CSS ni sur le choix du meilleur d’entre eux. Vous trouverez des éléments de réponse dans : Frameworks CSS + Reset CSS : design from scratch paru initialement en anglais sur Smashing Magazine ; dans Développement efficace avec les frameworks CSS et Blueprint ; ou encore dans Blueprint, un framework pour webdesigner. Oui, beaucoup de Blueprint car c’est le seul que j’ai vraiment utilisé jusqu’à présent.

Ah bon, y a des gens qui travaillent sans grille ?

Grosso modo, tout le monde reconnait que oui, les frameworks c’est de la balle mais que non, ça n’est pas toujours possible car les éléments du design, du .psd, de la charte graphique, etc. n’entrent pas forcément dans une grille horizontale.

Travailler avec une grille de mise en pages est très courant dans le print : j’ai pris l’habitude de travailler en fonction d’un format de papier, de marges, de colonnes et de gouttières ainsi qu’avec l’option Aligner sur la grille du logiciel QuarkXPress.

Pour beaucoup de webdesigners en revanche, les grilles semblent vécues comme une contrainte au lieu de servir de guide. Comme le dit si bien André Gide, l’art nait de contraintes, vit de luttes et meurt de liberté. Ce qu’on pourrait traduire librement par : sans contrainte, l’art n’est rien ou encore par trop de liberté, nuit.

Votre grille, vous la prenez en entrée ou au dessert ?

Faut-il pour autant commencer la conception du design avec une grille devant les yeux ? Je ne le pense pas. Les premières recherches graphiques et les premiers placements de blocs devraient s’effectuer librement, à l’instint. C’est lorsque le résultat ressemble à quelque chose, qu’il est temps de déterminer le « pas » de la grille.

Pour des raisons de simplification et d’arrondi, la plupart des frameworks CSS proposent des grilles se limitant à des largeurs de 960 ou 950 pixels en 12, 16 ou 24 colonnes. Dans ces conditions, il est probable que le plus petit élément de ces grilles ne conviendront pas à vos besoins.

Pour définir une grille qui sorte des sentiers battus, il faut rassembler le maximum d’information sur votre contenu et le temps que vous êtes prêt à passer pour le préparer. Par exemple, si vous voulez afficher rapidement des vidéos Youtube dans votre sidebar, assurez-vous que sa largeur soit au moins égale à la largeur par défaut des vidéos, soit 425 pixels ! C’est pareil pour tout les éléments qui possèdent une taille fixée à l’avance, comme les Gravatars, les présentations Slideshare, les publicités, etc.

Pas besoin de framework pour travailler avec une grille

Et oui, il n’est pas nécessaire d’utiliser un framework CSS pour profiter des avantages qu’il procure. Dès que vous aurez déterminé le nombre de colonnes et la largeur de la gouttière en fonction de la largeur totale de votre design, vous aurez fait la moitié du chemin. L’autre moitié est composée du choix des balises HTML pour le contenu et le placement des blocs principaux (content, sidebars, header, footer, etc.).

Factoriser les déclarations CSS avec des classes plus ou moins sémantiques dans le code HTML ou multiplier les float:left et autres margin-right n’est pas le plus important et en ce qui concerne la partie purement layout. Il y a rarement des pixels à gagner avec l’une ou l’autre des solutions car les octets économisés par la factorisation sont souvent dépensés par les span-x et autres append-x ou prepend-x inutilisés : toutes les combinaisons d’une grille ne sont pas de la partie, et heureusement !

Ne vous faites pas griller…

Les frameworks, c’est de la balle, mais il est important de s’éloigner des formats proposés pour suivre sa propre voie car si les solutions proposées par Blueprint ou 960.gs et consorts peuvent généralement prétendre au statut de standard, le risque est justement de standardiser sa production graphique pour la faire entrer dans le moule ! Gardez à l’esprit qu’une différence — même minime — dans les proportions d’un design peuvent changer radicalement la perception qu’on peut en avoir.

Ne vous laissez pas faire, mettez-moi ces grilles au pas ;)

blueprint — Fournit des fondations solides pour vos projets grâce à une grille facile à utiliser, une typographie fine, des goodies utiles et même une feuille de style pour l’impression.
960.gs — Ce système de grille est conçu pour fluidifier votre chaine de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12 et 16 colonnes pouvant être utilisés séparément ou ensemble.
tripoli — Redéfinit une feuille de style par défaut pour les balises HTML de manière à assurer un rendu identique sur les navigateurs présents sur le marché. Excellente alternative aux full Framework si vous faites vous-même votre grille de mise en page.
yaml — « Yet Another Multicolumn Layout » est un framework (x)html/css pour la création de maquettes flexibles.
bluetrip — le meilleur de Blueprint et de Tripoli avec un zeste de Hartija pour la feuille de style à l’impression, la simplicité de 960 Grid System.
typogridphy — Basé sur 960 Grid System, ce framework permet de créer des grilles flexibles d’une grande beauté typographique.
yui grids — Offre un jeu prédéfinit de largeur de page comprenant 6 templates avec la possibilité de subdiviser les blocs. Au total c’est plus de 1000 combinaisons de maquette pour seulement 4kb.
elasticss — Basé sur des techniques de colonnage traditionnel en 4 colonnes, ce framework permet de multiples combinaisons et subdivisions, et se distingue des autres par sa capacité à produire des design fixes, liquides ou élastiques très facilement.
sencss — Un frameword « zen » qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs avec une grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux.
the golden grid — Ce système de grille est le fruit d’une recherche constante de la grille parfaite, et rien de tel que le nombre d’Or pour se rapprocher des dieux !
css-boilerplate — Par l’un des créateurs de Blueprint qui a décidé de se remettre à l’ouvrage pour aboutir à un framework qui ne vous obligera plus à choisir entre sémantique et efficacité : c’est vous qui décidez d’utiliser { float: left; width: 240px; margin-right: 110px; } ou class= »column span-2 append-1″ !
BIC — Cf. BIC, un framework orienté couleur et typographie.
bungee — Bungee utilise une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Au niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s’affiche donc parfaitement sur un écran de faible résolution.
sparkl — Combine un marquage HTML CHIC (Code HTML Intrinsèquement Classe — POSH en anglais) et du javascript non-intrusif pour créer des sites web à l’épreuve des balles et conformes aux Standards. Ce framework CSS très modulaire vous permettra de vous concentrer sur vos besoins.
hartija — CSS Print Framework.
The 1Kb CSS Grid — Une grille minimaliste qui tient en une quinzaine de déclarations CSS. Idéale pour les débutant qui veulent comprendre le principe général des frameworks et pour les intégrateurs aguerris qui verront là un moyen économique de donner un rythme horizontal à leur mise en page. Choix du nombre de colonnes, de la gouttière et de la largeur totale avant le téléchargement. Suggéré par Darklg)
1 line CSS Grid Framework — Vous avez bien lu, il s’agit d’un framework qui tient en une seule déclaration : .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Etonnant, non ?
malo — Du même auteur que le précédent et le suivant dont il est le petit frère, malo se distingue par sa légerté au service d’une grille en pourcentage
emastic — Très complète, cette bibliothèque CSS s’utilise aussi bien avec des em qu’avec des % et s’accommode de largeur fixes ou fluides pour un poids de 4Kb pour la version compressée. Nombreuses démonstrations disponibles pour voir ce qu’il est possible de faire.
logicss — basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités de redimensionnements de texte et un rythme vertical. Trois systèmes de grilles très souples, personnalisables à l’aide d’une boite à outils. Designs élastique en utilisant des EMs, liquide via les pourcentages ou fixe avec les pixels.
MyCSS Grid System — sytème de grille en 960px avec une utilisation du nombre d’or pour obtenir des proportions harmonieuses. Assez verbeux dans le nombre de classes pour placer des éléments.

wymstyle

Articles sur le même sujet

13 outils en ligne pour organiser et compresser vos CSS

Bruno Bichet — Fri, 12 Jun 2009 09:20:11 +0000

Tout est dans le titre :

cleancss — La version française propose 4 niveaux de compression et permet de personnaliser les paramètres avec un gabarit de formatage pour votre feuille de style (exemple de compression maximale).
Styleneat — Trie (ou pas) les sélecteurs ou les déclarations par ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la feuille de style ou de l’uploader depuis votre poste de travail. (via roget.biz).
dustmeselectors — Cette extension pour Firefox traque les sélecteurs CSS inutilisés dans la page web affichée à l’écran.
Em Calculator — Pratique pour obtenir des valeurs en `em` pour les éléments de votre document HTML à partir d’une taille exprimée en `px`.
Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique.
pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les `%`, les `px` ou les `em`. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets.
drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné.
CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !
CSS Compressor.
CSS Compressor Advanced (cssdrive).
List-u-Like CSS Generator.
Cascading Style Sheets Optimization.
Labo CSS.