Frameworks CSS + Mockup = Mockup CSS

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Frameworks CSS + Mockup = Mockup CSS

Les développeurs n’aiment pas les frameworks CSS et les graphistes n’aiment pas l’idée de travailler avec une grille de mise en page. Mais ça ne m’empêche pas de leur trouver un intérêt (aux FW, aux dévs et aux créas). Je suis certainement une espèce mutante, le chainon manquant entre les matheux (le code n’est poétique que dans WordPress ^^) et les graphistes ! Pour autant, je ne pense pas que les frameworks CSS doivent être utilisés partout ou que le design dans le navigateur remplacera votre graphiste ou votre logiciel de création préféré. Il s’agit d’une méthode de travail qui s’ajoute aux précédentes ; elle ne prétend pas s’y substituer. L’article Framework CSS — Sémantique, maquette dynamique et autres notes vous permettra de défricher le terrain sur leur utilisation et leurs avantages.

Framework CSS ?

Les frameworks CSS sont généralement composés d’un ou plusieurs fichiers prenant en charge les différents aspects de la réalisation d’une page (grille, typographie, formulaires, tableaux, etc.) dans le but de faciliter le placement des blocs sur la page et d’harmoniser les styles typographiques selon une grille horizontale.

The Simpler Grid — 12 colonnes «A la une» de 60px avec une gouttière de 20px pour une largeur totale de 940px. Choisissez votre Framework CSS parmi les 30 solutions disponibles.

Les Frameworks CSS proposent un environnement de travail réutilisable et compatible avec la majorité des navigateurs.

Mockup ? (non, ça ne se fume pas)

Un Mockup est une maquette grandeur nature qui permet d’avoir une idée sur la manière dont les fonctionnalités prévues par le cahier des charges (cf. le périmètre des fonctionnalités) vont se concrêtiser. Selon les projets, il peut s’agir d’un croquis réalisé à main levé pendant le rendez-vous avec le client ou d’une version plus élaborée une fois que vous êtes de retour à l’atelier.

Voici un échantillon tiré des 40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups qui devraient vous plaire et vous inspirer.

D'autres croquis sur http://www.flickr.com/photos/43641156@N02

Un logiciel comme Balsamiq Mockups propose plusieurs dizaines de contrôles et plus d’une centaine d’icônes pour représenter les éléments que l’on trouve habituellement sur une page web (menus déroulants, onglets de navigation, blocs de texte, listes, formulaires, login, etc.).  Je les trouve plutôt ennuyeux à utiliser et je préfère poser mes idées dans un bloc-note. Toutefois, ils peuvent être utile si les maquettes doivent circuler dans le flux de production et être modifiées par différents intervenants.

Pour faire un zoning ou une maquette plus précise, j’utilise généralement Illustrator, mais il semble que Fireworks ait plus d’un tour dans son sac. Rapid prototyping in Fireworks CS3 est un tutoriel en français qui explique comment utiliser les fonctionnalités de prototypage rapide apparues dans la version CS3 de la Suite Adobe. Lire également les article de SuperFiction sur les Wireframes.

Framework CSS et prototypage rapide

Partant de l’idée que l’intérêt premier des frameworks est de proposer une méthode pour placer rapidement des blocs sur la page, pourquoi ne pas les utiliser pour le zoning et la maquette fil de fer (Wireframe) ? Les différents objets censés représenter les éléments d’une page web seraient visibles sous leur forme native : les menus déroulants pourraient se dérouler et les diaporamas, diaporamer ! En attendant que les contenus définitifs vous parviennent, il existe du faux texte prêt à l’emploi à base de Lorem Ipsum enveloppé dans différents marquages HTML. Lire les billets traitant des Frameworks CSS sur css4design.

Conclusion

En permettant de modifier rapidement et simplement la largeur et l’emplacement des différents blocs, les frameworks CSS et le design dans le navigateur (au moins en ce qui concerne la maquette) procurent des avantages à l’équipe de développement, mais aussi au client qui pourra manipuler la maquette à l’échelle 1:1 ET en direct-live : il n’est plus obligé de regarder son futur site avec les yeux, mais il peut le toucher avec la souris ! En s’appropriant ainsi sa maquette, il devrait être plus enclin à fournir les contenus pour voir ce qu’ils donneront in situ.

Liens complémentaires

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



14 commentaires pour “Frameworks CSS + Mockup = Mockup CSS”

  1. [...] This post was mentioned on Twitter by css 4 design, br1o les bons tuyaux and Fabien Thomas, Clément Roy. Clément Roy said: RT @css4design Frameworks CSS + #Mockup = Mockup CSS: Les développeurs n’aiment pas les frameworks CSS … http://goo.gl/fb/JGV94 [...]

  2. Hugo dit :

    Très bon article ! Mais attention le lien interne vers ton autre article « Framework CSS — Sémantique, maquette dynamique et autres notes » est erroné.

  3. Bruno Bichet dit :

    Hugo — Merci, je viens de corriger :)

  4. ClementRoy dit :

    Salut Bruno!

    Voilà un bon article qui met en avant toute la puissance des frameworks CSS, mais qui montre aussi qu’on peut aller bien plus loin!

    Car finalement à l’heure actuelle avec les frameworks CSS (dîtes si je me trompe) on ne peut guère aller plus loin qu’un mockup à base de rectangles gris plus ou moins foncés. Une simple architecture de l’information donc, et très peux d’interactivité.

    Mais si l’outil ne convient pas, changeons d’outil! Quitte à le créer soi-même.

    J’ai il y a quelques temps maintenant (bien un an de cela) commencé à bâtir un véritable framework pour construire des prototype de site à la volée. Le tout en php avec un certains nombre de fonctions php (ex : buildMenuDropDown( $nbCat, $nbItems, …) ) plus ou moins portatives il faut bien l’avouer (c’est ici que l’on se rend compte de la portabilité et de la robustesse de son code! Et donc de sa réutilisabilité).

    Enfin bref avec 5 ou 6 appels de fonctions php j’avais bâti ma page, navigable, interactive, avec un code plus que générique, beaucoup de style inline et loin d’être accessible, mais à cette étape du projet là n’est pas le but nous en conviendrons.

    Il y a cependant un point noir ici. Car qui dit framework dit choix limités, ou du moins terrain balisé. Et de par ce fait on devient certainement moins original, moins innovant. Mais petit à petit ne sommes-nous pas, après maintenant plusieurs années de tests, d’essais et d’expériences, en train d’arriver sur une architecture de l’information stable, fiable et surtout efficace? Car justement normée… A l’image des livres tout simplement.

    Pour parler de mon expérience personnelle, les grilles font à présent entièrement partie du processus de création. Les mockups dessinés à la main sont basés sur une grille. Mais peut-être un jour je passerai à l’outil décris ci-dessus…

  5. Mael dit :

    Depuis quand les graphistes n’aiment-ils pas les grilles de mise en page ? Ce sont eux qui les ont inventées, bien avant internet ! Regardez du coté de Joseph Müller-Brockmann pour vous faire une idée.

    Pour répondre à clementroy et à l’idée qu’on ne peut utiliser cet outil que pour des carrés et des rectangles, il faut bien se dire que ce sont les frameworks qui imposent ce modèle. Une grille de mise en page n’est pas cantonnée à des blocs, ça peut être ce qu’on veut, des ronds, des patates… C’est une distribution constante des éléments graphiques sur les pages qui fait la grille. La notion est assez vaste, certains graphistes utilisent une grille pour concevoir une affiche, ce qui peut être paradoxal puisque c’est un support qui se limite à une seule instance.

    Voilà, assez pour faire mon intéressant :)

  6. stephane dit :

    Encore une fois tout ça mène à une joyeux mélange des métiers, et je ne suis vraiment pas sûr (c’est mon avis) que les agences doivent aller vers ça.

    Alors oui, effectivement, le freelance développeur / intégrateur ira surement très vite pour faire un zoning en css, mais malgré tout il faut produire du code, et a mon sens la phase de spécifications fonctionnelle ne doit pas mener à la production de code.

    Tu parles de l’avantage d’avoir des zonings taille réelle, dans le navigateur, et surtout interactifs. Oui, je suis carrément pour ! Mais il existe des outils très bien pour ca (je pense notamment à Axure).

    Ce type d’outil permet a un chef de projet / concepteur web n’ayant pas de compétences techniques de produire un prototype Html ultra complet et navigable, avec seulement du drag & drop et du clic, en se concentrant sur le fonctionnel et non sur le calage de ces éléments.

    Pourquoi alors devoir plonger les mains dans le HTML / CSS à cette étape du projet ?

  7. gabyu dit :

    Arf, je suis d’accord avec Mael et son commentaire plus haut. Ce sont les graphistes — et en particulier les typographes — qui ont imaginé la rationalisation de la page en utilisant des grilles.

    Alors oui il ya encore beaucoup de graphistes qui n’aiment pas suivre les grilles de mises en pages car ils estiment qu’elles nuisent fortement a leur capacité de créer.

  8. [...] geste écolo). Je réserve l’impression en taille réelle pour les maquettes grandeur nature (Mockup) sur lesquelles je peux utiliser des post-it pour placer et déplacer mes éléments à [...]

  9. [...] Framework CSS + Mockup = CSS Mockup : via @br1o [...]

  10. StéphaneL dit :

    à mon sens ce n’est pas la maquette qui doit précéder le contenu, mais le contenu générer la maquette. Toute idée créative est vide de sens si les contenus sont minorés. Réflexion indépendant vs agence. C’est pourquoi il est plus facile pour le client de travailler d’abord avec des concepteurs-rédacteurs le cœur de son message et ensuite passé à l’élaboration visuelle. j’aime beaucoup le lorem, mais les clients ont tout de même du mal à se projeter et identifier leurs créa finale.

  11. [...] vous laisse avec l’article Frameworks CSS + Mockup = Mockup CSS pour approfondir la création des Mockup ou Wireframes directement dans le navigateur grâce aux [...]

  12. [...] vous laisse avec l’article Frameworks CSS + Mockup = Mockup CSS pour approfondir la création des Mockup ou Wireframes directement dans le navigateur grâce aux [...]

  13. Alex dit :

    Vraiment très intéressant !

    Encore merci,

  14. Rolex Explorer II replica Outlook This watch comes flag with a Rolex Caliber 3185 machine, so you can number on your watch working when you need it the most.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site