Le framework utilise également jQuery avec Orbit pour la mise en place d’un slider pour présenter n’importe quel contenu (texte, image, vidéo) même sur mobile ainsi que pour Reveal qui propose une gestion des fenêtres modales.

→ Foundation est disponible sur github.

Articles sur le même sujet

• 31 outils en ligne simples et efficaces pour les travailleurs du web
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• 390 ressources Javascript & jQuery
• Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
• 7 outils en ligne pour l'intégration HTML & CSS

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

Polyfills

• css3-mediaqueries-js
• Respond — A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more), by Scott Jehl.
• mediatizr — Responsive-oriented CSS3 media queries polyfill, by Aurélien Delogu.
• matchMedia — A standardized way to check media query matching in script, by Scott Jehl, Paul Irish, Nicholas Zakas.
• jQuery Media Helpers — Some media query and cross-browser responsive design helpers, abstracted from jQuery Mobile, by Scott Jehl.

Articles sur le même sujet

• HTML5 et CSS pour l'intégrateur web
• Editeur de dégradés CSS3 à la mode de Photoshop
• Notes de lecture — Livre CSS avancées, vers HTML5 et CSS3
• Le petit journal du Web — Janvier 2011 (Typographie, CSS, Photoshop et développement web)
• Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

Dans ma liste de plus de 30 frameworks CSS, seul inuit.css s’affranchit de ces classes .first, .last, .alpha ou .omega. Mais c’est au prix d’un décalage global du container (.grids, en l’occurrence) de la valeur de la gouttière. Je suis assez admiratif de cette technique et je m’en veux de ne pas l’avoir trouvée au lieu de faire l’intéressant avec mon mashup de Blueprint CSS, The Simpler Grid, 960.gs ^^

Sélecteur de frère adjacent

Dans mes mises en page web, j’utilise souvent un nombre de colonne différent selon le contexte : contenu principal accompagné de deux ou trois colonnes en page d’accueil; contenu principal plus une colonne lorsque j’affiche le contenu d’un article seul. C’est là qu’intervient le sélecteur de frère adjacent, symbolisé par le signe «+».

La spécification des CSS 2 nous apprend que :

Les sélecteurs d’enfants adjacents suivent une syntaxe de cette forme : E1 + E2, où E2 est le sujet du sélecteur. Celui-ci est vérifié quand E1 et E2 ont le même parent dans l’arbre du document et quand E1 y précède immédiatement E2.

J’avais l’habitude de me servir de ce sélecteur pour supprimer l’alinéa du premier paragraphe qui n’a littéralement aucune raison d’être ici, puisque par définition, il n’y a rien à mettre «à la ligne» :

p + p {
    text-indent: 1em;
}

.sidebars + .sidebars = grille ?

Je me suis dit qu’il pourrait être intéressant d’utiliser cette propriété dans le cas où le nombre de colonnes varie selon le contexte, sans être obligé de définir ce contexte de manière trop précise. L’exemple qui suit, que j’aurais pu mettre en place pour des sites de casinos en ligne (je sais que vous êtes joueurs), illustre à merveille ce concept :-)

#sidebar { margin-left: 20px; }
#sidebar .sidebars + .sidebars {
    margin-left: 20px;
}

⁽¹⁾ j’utilise une marge gauche pour créer des gouttières afin de pouvoir annuler la marge du premier élément — au cas où j’aurais appliqué un float: left et un margin-left: 20px à toutes mes colonnes — avec le pseudo-sélecteur :first-child (CSS 1) pris en charge plus largement que :last-child qui nous arrive tout juste avec CSS 3.

Dans le cas d’une troisième .sidebars, il suffirait donc d’utiliser une déclaration du type :

#sidebar .sidebars + .sidebars + .sidebars {
    margin-left: 20px;
}

On s’en «grille» une ?

Voici un exemple d’une rangée de 12 colonnes bâtie sur ce principe avec une version en ligne de cette  grille CSS (notez l’utilisation des rôles WAI-ARIA en action) :

#page {
    width: 940px;
    margin: 0 auto;
    text-align: center;
}
[role="banner"],
[role="contentinfo"] {
    clear: both;
    background: #333;
    color: #eee;
}
[role="main"] > div {
    width: 60px;
    float: left;
    background: #eee;
    margin: 1.539em 0;
}
[role="main"] > div + div {
    margin-left: 20px;
}

Un système encore expérimental

Cette utilisation du sélecteur d’enfant adjacent est encore expérimentale et devrait faire l’objet de tests plus approfondi pour voir où peut mener cette technique qui ne nécessite à priori aucune intrusion intempestive dans le code HTML si votre page est bien structurée (je suis sûr que c’est le cas chez tout le monde, non ?). Je compte sur vous pour tester ce concept qui en a sous la botte ou le talon aiguille afin d’en tirer la substantifique moelle. Merci d’avance :)

Articles sur le même sujet

• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Frameworks CSS — Blueprint vs 960 Grid System
• Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Foundation — Framework HTML, CSS & jQuery

J’importe le fichier 940.css dans H5BP lors de la mise en place du zoning des pages web. Lorsque cette étape est validée, je fais le ménage dans le code HTML en supprimant les classes inhérentes au système de grille pour mettre les déclarations appropriées dans la feuille de style. En effet, il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. CSS avancées — Vers HTML5 et CSS3, page 72. ⁽¹⁾.

C’est ainsi que  :

<div id="logo" class="first span-6">

<div id="logo">
#logo {
    position: relative;
    float: left;
    width: 220px;
    clear: left;
}

Système de grille sur mesure

Suite au comparatif 960.gs vs. Blueprint, j’ai décidé de fusionner les deux frameworks en faisait le minimum de modifications pour obtenir :

1. Le système de marge unique à droite proposé par Blueprint pour créer les gouttières entre les colonnes. L’ajout de la class `.last` est déjà un tue-l’amour de l’intégration, alors ne parlons pas des classes `.alpha` et `.omega` de 960 Grid System.
2. Le placement des colonnes dans la page indépendamment de leur position dans le code proposé par 960 Grid System avec des classes `.push` et `.pull` plus concises grâce à la déclaration `position: relative;` sur chaque colonne.
3. En chemin, j’ai été également tenté par The Simpler CSS Grid qui reprend le meilleur de 960 Grid System et de Blueprint CSS tout en diminuant légèrement le nombre de déclarations pour parvenir au même résultat.

Mis en place par Nick La de Webdesigner Wall (@nickla), The Grid Simpler revisite les frameworks CSS Blueprint et 960.gs

The Grid Simpler : une grille simple et souple

Contrairement à Blueprint, The Simpler Grid place la gouttière à gauche des colonnes. La classe .last est remplacée par .first, ce qui oblige par ailleurs à modifier les classes .border et .colborder dans la feuille de style pour créer des bordures à gauche des colonnes et non plus à droite. Ceci peut éventuellement être un problème (ou un avantage) selon votre maquette et la hauteur respective des zones situées de part et d’autre de la bordure. Selon le cas, la bordure peut suivre la hauteur de votre sidebar ou de votre zone de contenu.

Dans le code HTML, il faut aussi supprimer les classes .last et ajouter les classes .first en conséquence, sans oublier de modifier l’emplacement des classes .border et .colborder.

J’ai encore un peu de mal à me représenter cette gouttière à gauche des colonnes plutôt qu’à droite, certainement en raison des habitudes liées au sens de lecture mais je m’accroche ;)

The Blue «940» Grid Simpler

Après quelques tentatives aussi burlesques qu’inutiles pour proposer ma propre nomenclature pour le nom des différentes classes, j’ai conservé les intitulés de Blueprint qui permettent de profiter des générateurs de grilles disponibles sur le marché, comme l’excellente application Air Boks pour modifier plus rapidement le pas de la grille (il suffira de copier-coller les déclaration contenant des largeurs).

En ce qui concerne la grille elle-même, elle est composée de 24 colonnes de 20 pixels chacune séparées par une gouttière de 20 pixels en adaptant légèrement la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or. Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixel en utilisant : font-size: 13px; line-height: 1.539.

Elément de base pour afficher une grille en background

Tout cela nous donne une largeur de 940 pixels. Il s’agit de la largeur utile disponible dans 960 Grid System une fois que l’on a retranché les marges de 10 pixels à droite et à gauche. Pour retrouver ces marges — pour mettre une image en background, un dégradé CSS3 ou un simple aplat de couleur, par exemple –, il suffit d’indiquer une largeur de 960 pixels sur la balise body qui servira ainsi de container, and the cat’s in the bag!

Astuce : l’excellent http://griddle.it permet de créer l’image de votre grille personnalisée à la volée en ajoutant la largeur, le nombre de colonnes et la largeur de la gouttière à la fin de l’url comme http://griddle.it/940-24-20?vertical=20 ou http://griddle.it/940-12-20?vertical=20 par exemple.

Pour tester The Blue «940» Grid Simpler, je me suis basé sur les exemples de pages et de grilles disponibles dans les démonstrations de Blueprint CSS en adaptant le code source en conséquence.

• → The Blue «940» Grid Simpler.
• → La démonstration de la grille de Blueprint à comparer avec l’originale.
• → La démonstration de l’échantillon de page à comparer avec l’originale.
• → Les avantages apportés par The Simpler Grid.
• → Frameworks CSS — Blueprint vs 960 Grid System pour plus d’information concernant les éléments ajoutés ou retranchés dans The Blue «940» Grid Simpler par rapport aux frameworks utilisés.
• → Tous les articles concernant les grilles de mise en page web et les frameworks CSS sur ce blog.

Clearfix ?

Si vous n’utilisez pas HTML5 Boilerplate et si vous avez besoin d’un clearfix (la classe .first peut ne pas suffire), ajoutez-donc quelques lignes à la fin de votre feuille de style principale et la classe clearfix sur les boites contenant des éléments span pour rétablir le flux :

.clearfix:before,
.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Articles sur le même sujet

• Frameworks CSS — Blueprint vs 960 Grid System
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap)
• Nouvelle méthode de remplacement de texte par une image
• Quelques liens sur les Media Queries en CSS3

Toutefois, on ne peut pas ne pas constater que les sites Web partagent dans leur grande majorité les éléments suivants :

1. En-tête de page (header),
2. Une ou plusieurs barres latérales (aside),
3. Zone de contenu (article) à droite, à gauche ou au milieu,
4. Pied de page (footer) généralement situé en bas de page.

La plupart des tutoriels que l’on trouve sur le web reprennent un découpage par thématique : après les bases concernant l’insertion de la balise style, on attaque généralement par la mise en forme du texte, les listes, les images, les bordures, le modèle de boite, le positionnement, etc. C’est le découpage proposé par les spécifications du W3C et la majorité des tutoriels CSS qui permet de retrouver rapidement une propriété. Il s’agit avant tout de servir de référence… mais a-t-on jamais appris à rédiger des phrases avec un dictionnaire ?

J’évoque souvent le potentiel didactique des frameworks CSS :

• Le Reset CSS (reset.css) permet de faire le point sur les balises HTML les plus utilisées,
• Le fichier typographie (typography.css) redéfinit le comportement des balises et permet d’acquérir un solide vocabulaire CSS,
• Le système de grille (grid.css) propose les éléments fondamentaux du positionnement en quelques déclarations,
• La prise en compte des derniers de la classe (ie6, ie7 et bientôt IE8) permet d’aborder la notion de compatibilité cross-browser.

→ Lectures complémentaires conseillées :

• Faites votre choix parmi plus de 30 frameworks CSS,
• Lire Frameworks CSS + Reset CSS : design from scratch.

A côté des frameworks on trouve un grand nombre de proposition de feuilles de style prenant en compte une grande partie des balises HTML sans pour autant inciter à l’utilisation d’un reset CSS ou d’un système de grille de mise en pages. Ces feuilles de style de base ont souvent été longuement pensées par leur auteur et les choix effectués nous éclairent sur les subtilités des CSS.

→ Parmi les «kits de démarrage» existants, je trouve souvent mon bonheur dans :

• base.css de Thierry Koblentz (cf. Implementing a starter CSS file rather than using a reset styles sheet),
• no-reset de Florent Verschelde (cf. A Simple Base Stylesheet),
• style.css de HTML5 Boilerplate.

L’idéal étant bien sûr de prendre ça et là ce dont on a besoin pour se constituer son propre fichier CSS tout terrain !

Articles sur le même sujet

• BIC, framework CSS orienté couleur et typographie
• Frameworks CSS + Reset CSS : design from scratch
• SMACSS — Architecture évolutive et modulaire pour CSS
• Foundation — Framework HTML, CSS & jQuery
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2

J’ai tendance à considérer ce brief comme un problème — au sens mathématique du terme. Chaque composante du brief est une partie de l’équation à résoudre pour passer au niveau supérieur en attendant d’avoir affaire au boss de fin de niveau ;-) Entre le brief et les propositions graphiques, le concept représente l’équation que les éléments du design devront résoudre. Il faudra ensuite concrêtiser ce concept par des pistes graphiques ou ou des Mood Boards (proposition d’univers graphique) que le client devra s’approprier et valider.

Les graphismes bousculent le planning

Les aspects visuels qui devraient éclore tout à la fin d’un long processus de réflexion bousculent souvent le planning et finissent par occuper le devant de la scène plus souvent qu’à leur tour. Il faut dire que la partie visuelle d’un projet est un des rares aspects d’un site web où le client pense avoir quelques compétences (qui n’a pas de couleurs préférées ?). Par ailleurs, cette partie graphique concrêtise le projet et le rend tangible : dans son for intérieur, le client paie pour le design. Malgré tout, il est important de ne pas s’enfermer dès le début dans une proposition graphique trop marquée. A cet égard, la mise en place de Mood Board ou «panneaux d’humeur» permettra au client de se concentrer sur le fond, sur ce qu’il veut communiquer, plutôt que de s’attarder sur les détails.

Creating a Mood Board

Une seule proposition graphique

On parle souvent de trois propositions : la première qui permettrait au graphiste de se faire plaisir, la deuxième censée correspondre aux besoins du client et la troisième servant de repoussoir au deux autres. Un graphiste peut-il concevoir plusieurs propositions graphiques sur un même sujet ? C’est possible, bien sûr, mais pas souhaitable. Il vaut mieux mettre le paquet sur une seule proposition et affuter ses arguments pour la défendre plutôt que se disperser. Prenons le temps de mieux cerner les besoins du client. Il arrive souvent que ses attentes (un site Web en Flash qui bouge) entrent en conflit avec ses besoins (optimiser la présence du site dans les moteurs de recherche, par exemple). Ce qui ne doit pas vous empêcher d’explorer plusieurs pistes graphiques : il n’y a rarement qu’un seul chemin permettant de résoudre une équation.

Pas de Wireframes

Avant, pendant ou après la phase des recherches créatives, les Wireframes permettent de mettre en lumière l’ergonomie, l’expérience utilisateur et la granularisation de l’information. On peut aussi à cette étape commencer à s’interroger sur la mise en place d’une taxonomie adaptée. Il existe de nombreux outils en ligne (ou hors-ligne) pour faciliter la création de Wire-Frames, même si un crayon et une feuille de papier suffisent largement. Faire des Wireframes peut s’avérer indispensable dans certains projets où les étapes de validation sont longues et/ou impliquent de nombreuses personnes et/ou services différents, mais en général, on peut aisément s’en passer.

The Right Way to Wireframe

Designez dans le navigateur !

A la place, je privilégie le travail dans le navigateur. Pourquoi perdre du temps à dessiner (encore !) une pseudo-maquette quand on peut faire avancer le projet en commençant par le marquage HTML ? Hérésie ? Bridage de créativité ? Que nenni : quand je vois le niveau de détail de certains Mockups, je me dit qu’il reste finalement peu de place pour l’équipe créative. Autant mettre en page le fil de fer directement dans navigateur.

(Innsidia Project - Photo by Hanne Linander)

Cette méthode offre l’avantage de ne pas apprendre un nouveau logiciel pour vos Wireframes. A la place, vous pourrez vous aider de l’un des nombreux frameworks CSS existants. Ils offrent toute la souplesse nécessaires pour ajouter, supprimer, modifier les blocs, qu’il s’agisse de leur taille ou de leur emplacement. Cerise sur le gâteau, lorsque le Mood Board et le Wireframes sont validés, il reste juste un peu de travail d’intégration à faire, et voilà !

Je 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 frameworks CSS et aux grilles de mise en pages.

Linkographie

• Mood Board — Le Mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign.
• Le concept board webdesign — Que ce soit dans le cadre d’une avant vente ou au cours d’un projet, la présentation d’une maquette aux représentants de la marque ou de l’entreprise qui a commandé un site s’avère toujours délicate.
• Un graphiste peut-il concevoir plusieurs propositions graphiques d’un même sujet ? — Travailler sur un sujet c’est surtout faire des choix, retenus eux aussi parce qu’on les estime meilleurs que les autres car plus adaptés au contexte du sujet. Un choix construit sur une analyse fine du sujet et de son contexte forge des certitudes.
• Frameworks CSS + Mockup = Mockup CSS – 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 procurent des avantages à l’équipe de développement et au client qui pourra manipuler la maquette à l’échelle 1:1.
• La Taxonomie pour éviter le cagibi de l’oubli — Le terme taxonomie (taxonomy en anglais) désigne une méthode de classification des informations dans une architecture évolutive. Le terme est couramment employé dans le cadre des systèmes de gestion de contenu (CMS).
• Wireframes : 4 styles pour 4 types d’outils — Les wireframes sont un sujet sans fin dans la profession. Vous pouvez leur donner différents noms (storyboard, maquette fonctionnelle, zoning…), LA grande question de savoir quel est l’outil le plus approprié revient régulièrement
• Tools Une dizaine d’outils en ligne pour réaliser des Wireframes.
• Paper Prototyping — As interfaces become ever more complex and development schedules seem to get shorter and shorter, you may find it useful to give up your user-interface modeling software for awhile in favor of something simpler. All you need is paper, pens, scissors, and your imagination.
• 5 Reasons to Design with Mood Boards — If you’re a designer, the most dreaded thing a client can say is, “my wife really loves purple; so why can’t we make it purple?”
• Getting Moody — Mood boards, being a lot like they sound, are typically used to help establish a style, theme, expression, environment, atmosphere, or feeling. They often consist of found objects from magazine tear outs or digital imagery to fabric or color swatches, but really can be anything that inspires (like a favorite saying, or phrase, for example).
• Website Mood Boards a Successful Precursor to Visual Prototyping — One final note on our mood boards. This exercise gave us some incredible insight into the different designer’s styles and thought processes. As mentioned, each designer offered a brief explanation of their choices and by doing so, really enhanced our understanding of the designers skills and vision and ultimately the client’s understanding of the emotions and mood they were trying to create.
• Why Mood Boards Matter — Words fail miserably when trying to translate design concepts. What one person calls “edgy” another might see as chaotic.
• Moodboard Webdesign — I have to redesign 8 HTML pages and also showing 3 levels of content structures. So I have to analysis and study the current website to make a new proposal for the new website.
• www.moodshare.co — Selling ideas just got easier (version bêta sur pré-inscription)
• 40 Brilliant Examples of Sketched UI Wireframes and Mock-ups
• Moodboards – das Design vor dem Design

Articles sur le même sujet

• Frameworks CSS + Mockup = Mockup CSS
• Quelques notes — Programme de formation HTML & CSS
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Quelques notes sur la balise h1 avec HTML5

1. 390 ressources Javascript & jQuery – Cette liste reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows.
2. 100+ Polyfills et Fallbacks pour HTML5 – Guide tout-en-un des solutions de repli pour HTML5. Liste garantie entièrement non-alphabétique et sans grumeau pour utiliser les dernières technnologies à la mode, même dans Internet Explorer !
3. Le petit journal permanent de CSS3 — 100+ ressources pour commencer à comprendre et utiliser CSS3 dès aujourd’hui sans douleur grâce à des générateurs en ligne pour créer vos coins arrondis, vos ombres portées, vos dégradés, etc. Vous trouverez des expérimentations pour utiliser tout le potentiel de CSS3 sans utiliser Javascript.
4. Le petit journal permanent de HTML5 — Des sites web consacrés à HTML5, des tutoriels, des trucs et des astuces, sans oublier les liens vers les ressources officielles !
5. Le petit journal permanent de la TypOgrApHiE — plus de 60 ressources commentées et actualisés dans le domaine de la typographie : liens généralistes en français et en anglais, outils et techniques pour le Web, conseils tutoriels et astuces, trouver des polices de caractères, bibliographie.
6. 15 « Photoshop-like » en ligne testés et commentés — Liste d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix pour l’édition de vos images en ligne.
7. 14 outils en ligne pour créer des palettes de couleur — Choisir une bonne palette de couleur est une décision importante qui impacte la réussite d’un site internet. Jetez un oeil sur ces outils en ligne pour faire des ensembles de couleurs harmonieux.
8. 30+ frameworks CSS — Mettez une grille dans votre design — Votre framework CSS préféré se trouve peut-être parmi cette sélection de ressources commentées de frameworks CSS et de générateurs de grilles de mise en page fixes ou fluides.
9. 30+ éditeurs HTML — Sélection de plus de 30 éditeurs HTML plus ou moins WYSIWYG.
10. 139 Ressources Javascript et jQuery — Liste de liens pour le développeur web front-end issue de la veille documentée que j’effectue sur Javascript & Webdesign.
11. 5 CMS rapides et légers pour votre blog et votre site vitrine — CMS : à côté des poids lourds du secteur comme WordPress, SPIP, Joomla!, Drupal ou Typo3, des solutions légères n’attendent que vous !
12. 7 outils en ligne pour l’intégration HTML & CSS — Réduisez le temps passé à l’intégration Web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc.
13. 21 fonctions Javascript pour l’intégrateur web — Parce qu’il est parfois nécessaire de se passer des frameworks Javascript, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser !
14. Liens utiles pour l’intégrateur HTML / CSS et le développeur web — Concevoir des emails, dénicher des feuilles de style pour vos tableaux, ajouter des menus déroulants intelligents  ou encore faire le point sur les templates tags WordPress.
15. 11 ressources pour mieux bloguer en français — Ressources sur la grammaire, la conjugaison et l’orthographe.
16. 13 outils pour l’intégrateur web — Des liens utiles en toutes circonstances !
17. 10 bons liens WordPress — Trucs et d’astuces pour améliorer votre blog ou votre site web avec WordPress.
18. 10 liens pour faire plaisir à votre intégrateur web — Générateur de miniatures pour WordPress, valider votre site, gérer votre base de données, des plugins jQuery.
19. 23+ ressources pour webdesigner — Nouveaux blogs à découvrir, techniques utiles pour l’intégrateur HTML et CSS, astuces WordPress, outils de mesure d’audience.
20. 100+ comptes Twitter pour webdesigner — Comptes Twitter anglo-saxon : Webdesign, WordPress, Standards du Web, Javascript & jQuery, Photoshop & Illustrator, HTML & CSS, PHP, architecture de l’information.
21. 200+ garçons à suivre sur Twitter — Développeurs Web, intégrateurs HTML & CSS, spécialistes jQuery, poètes sur WordPress, graphistes, blogueurs amateurs ou professionnels.
22. Top 100+ des filles à suivre sur Twitter — Webdesigneuses, graphistes, spécialistes en SEO ou e-marketing, rédactrices freelance ou pour des grands journaux, blogueuses amatrices, étudiantes en communication.
23. 1000 ressources pour le développement web et WordPress — Voici la grosse grosse liste qui en a encore sous la botte : gardez le maximum de ressources à portée de souris sur jQuery, WordPress, le Webdesign, etc.
24. 15 outils en ligne simples et efficaces pour les travailleurs du web — Des outils en ligne pour partager des bouts de code, prendre des notes, créer des penses-bêtes, sauvegarder vos bookmarks, partager des textes, valider votre prose (CSS, HTML, XML, RDF), placer du faux-texte et des fausses images (placeholders) dans vos pages web.

Vous en voulez encore ? Voici la liste des listes qui rassemble des liens vers des pages qui consistent en une liste ou qui comportent une liste.

Articles sur le même sujet

• 35 blogs de développeurs web
• 100+ comptes Twitter pour webdesigner
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Préparer InDesign

Ouvrez Préférences (Ctrl + K) > Unités et incréments et modifiez les unités horizontales et verticales de la règle pour passer des millimètres (mm) aux points (pt) (à la résolution de 72 ppp, un point équivaut à un pixel). Reste à déterminer la largeur du plan de travail : dans les exemples qui suivent, j’ai choisi un design d’une largeur de 942 pixels pour 16 colonnes avec une gouttière de 18 pixels, mais n’hésitez pas à utiliser les valeurs de votre framework CSS.

Créer les colonnes

Avec InDesign, quelques réglages suffisent pour mettre rapidement en place une grille magnétique.

Boite de dialogue Nouveau document InDesign.

Selon votre framework CSS, choisissez le nombre de colonnes et la largeur de la gouttières qui les séparent. Pour finir, mettez les marges à zéro.

Notez qu’il est possible de créer un document à la taille du Viewport (ex. 1024). Pour obtenir un document hors marges de 942 pixels, utilisez la formule suivante : largeur du Viewport moins celle du framework et divisez le résultat par deux pour obtenir la valeur des marges gauche et droite. Exemple : (1 024 – 942) / 2 = 41.

N’oubliez pas de cliquer sur Enregistrement prédéfini… pour enregistrer votre plan de travail.

Modifier la la ligne de base

Pour affiner la grille il est peut s’avérer utile de matérialiser la ligne de base en fonction de l’interlignage que vous avez choisi pour le corps du texte. J’ai opté pour un corps de 13 pixels avec un coefficient multiplicateur de 1,6 (pour tutoyer le nombre d’Or) ce qui donne un interlignage de 21 pixels (en arrondissant à l’entier supérieur).

Pour cela, je vais dans les préférences du logiciel Ctrl + K > Grilles et je règle le pas sur 21 pt. J’en profite également pour augmenter la valeur pour améliorer le magnétisme des repères pour faciliter le placement des blocs.

Il est toujours utile de visualiser la ligne de base de votre document.

Modifiez la grille de la ligne de base dans Préférences > Grilles

Gabarits de page avec InDesign

Si InDesign facilite la mise en place d’un système de mise en page en colonnes pour placer vos différents modules, il permet aussi de créer des gabarits réutilisables et c’est assez cool.

Profitez des modèles de pages modifiables d’InDesign !

La fenêtre Pages d'InDesign pour créer et appliquer un gabarit à une page.

A partir d’un zoning comprenant le header, le menu principal et le footer qui se répètent sur toute les pages comme autant de fichiers inclus, il est possible de créer plusieurs variantes d’une page selon les différents modèles de votre projet Web.

(In)Design Web ?

Après quelques tests rapides, je trouve qu’InDesign est une aide précieuse pour mettre au net les croquis et commencer le zoning d’un site. Pourquoi ne pas s’en servir pour faire une maquette plus fouillée en assemblant des éléments en provenance de Photoshop ou d’Illustrator avant d’intégrer le tout dans le navigateur ?

Bref, InDesign semble l’outil idéal pour se rappeler que dans Webdesign il y a aussi «design» avec tout ce que cela comporte de travail sur les blancs tournants, les volumes et la typographie.

Liens complémentaires

• Résolution, pixels, points, dpi : un casse-tête insoluble ?
• Création de gabarits dans InDesign
• Apprendre InDesign : psill.net et milic.com

Articles sur le même sujet

• Calculer une grille de mise en page « typo » avec le nombre d'Or
• Framework CSS — Sémantique, maquette dynamique et autres notes
• 940.css version fluide — Grille de mise en page en pourcentage
• 940.css version fixe — Fusion de 960 Grid System, Blueprint CSS et The Simpler Grid
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »

On a toujours besoin d’un standard pour travailler

Quand on y réfléchit, on trouve un format de base dans tous les logiciels et personne ne se pose la question de savoir si le format par défaut proposé par Word ou OpenOffice représente un frein à notre créativité littéraire.

Les formats des feuilles de papier pour les documents destinés à l’impression sont très variés, mais dans la majorité des cas vous choisissez le format « A4 » car c’est celui qui est pris en charge par votre imprimante et tout un éco-système qui va des chemises cartonnées aux cartables en passant par les boites de rangement. D’ailleurs, le format international issu de la norme ISO 216 qui nous a donné le format A4 est utilisé dans tous les pays du monde, sauf aux Etats-Unis et au Canada (source : Wikipédia).

Une seule largeur pour les gouverner tous ?

Vous pensez peut-être que sur le Web la diversité des configurations matérielles interdit justement l’imposition d’un format unique ? En théorie, c’est le cas, mais la pratique et l’observation nous apprennent que 99% des sites Web sont conçus pour entrer dans une largeur de 1024 pixels, ce qui nous donnes des largeurs moyennes utiles proches des 960 pixels que l’on trouve dans de nombreux frameworks CSS.

Choisissez votre framework CSS !

Dans une certaine mesure, les formats proposés par les frameworks CSS remplissent le rôle d’une configuration par défaut pour produire des sites Web comme on produit du texte avec OpenOffice… et ce n’est pas mal : les thèses estudiantines méritent autant que les ouvrages d’art le droit d’exister ! Il en va de même pour les sites web : certains sont «utilitaires» et d’autres à vocation artistique. Pour vous guider dans le labyrinthe des solutions disponibles, voici plus de 30 frameworks CSS commentés qui vous permettront de choisir les réglages par défaut les plus proches de vos besoins. Si vous n’arrivez pas à trouver chaussure à votre pied, l’application Air Boks vous permettra de déterminer le pas de votre grille et bien d’autres choses encore.

Articles sur le même sujet

• Quelques liens sur les Media Queries en CSS3
• Frameworks CSS — Fusion entre « Blueprint », « 960 Grid System » et « The Simpler Grid »
• Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
• #WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday
• Frameworks CSS — Blueprint vs 960 Grid System

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

• Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?
• Conception dans le navigateur avec HTML5 & CSS3 (amélioration progressive)
• A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio
• Free Printable Sketching, Wireframing and Note-Taking PDF Templates
• http://wireframes.linowski.ca/
• Create diagrams online Real Time Collaboration
• 20 Free Web UI Element Kits and Stencils
• Zoning, wireframe, maquettage, prototype : les meilleures pratiques
• Mockups to go
• Foxguide

Articles sur le même sujet

• Webdesign — L'essence précède l'existence (Wireframe, Mockup et Mood Board)
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Quelques notes sur les fonctions de l'intégrateur web et de l'intégratrice web
• Framework CSS — Sémantique, maquette dynamique et autres notes
• Frameworks CSS + Reset CSS : design from scratch