css 4 design » Maquette

Notes de lecture : « Responsive Web Design »

Bruno Bichet — Tue, 01 Nov 2011 19:21:07 +0000

Un jour férié pluvieux est toujours une excellente occasion pour passer la journée allongé sur le canapé à lire un bon livre. Après Stratégie de contenu web, c’est au tour du livre Responsive Web Design de passer sur le grill. Ce livre écrit par Ethan Marcotte est un petit bijou de concision, d’humour et d’intelligence qui montre comment mettre en place un site web «Responsive» en commençant par le commencement : obtenir une maquette fluide. Après avoir donné les techniques pour partir d’une maquette Photoshop (par exemple) afin de transmuter les valeurs fixes exprimées généralement en pixels en pourcentage, Ethan Marcotte aborde la question des médias en donnant des astuces pour rendre adaptables les images, les vidéos, les «object» ou les eléments «embed».

Les Medias Queries n’arrivent qu’au chapitre 4, une fois les fondamentaux mis en place. Rien à dire sur cette partie, si ce n’est qu’elle est concise et que les exemples sont clairs. Le meilleur est pour la fin avec la description d’un Workflow pour faire des sites web «responsive» dans une optique d’amélioration progressive, avec comme mot d’ordre : pensez mobile !

En effet, dans cette dernière partie, l’auteur explique comment mettre en place une stratégie pour utiliser les Medias Queries au plus près des besoins des utilisateurs. Il en profite pour exposer une méthode de travail qui me plait tout particulièrement : le design dans le navigateur. Bien sûr, il ne s’agit pas de remplacer Photoshop, mais de lui demander ce qu’il sait faire de mieux : produire une maquette fixe qu’il faudra adapter selon les contraintes d’affichages des différents agents utilisateurs disponibles sur le marché. Je ne peux m’empêcher de ressortir pour l’occasion cette phrase issue de l’article Et si Photoshop permettait de tester des maquettes fluides ? qui résonne bien ici :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Le sommaire

Principes du responsive design
- Attachez vos ceintures
- Responsive architecture
- La voie à suivre
La grille flexible
- Composition flexible
- Créer une grille flexible
- Marges et espacement flexibles
Les images flexibles
- Retour aux (codes) sources
- Images fluides
- Mosaïque d’arrière-plan flexible
- Apprenez à aimer overflow
- Négociez votre contenu
- Images et grilles flexibles, tenez-vous bien
Les media queries
- Cicatrisation douloureuse
- Le problème en question
- Traînasser vers plus de réactivité
- Un robot plus « responsive »
- Les media queries en action
- Au sujet de la compatibilité
- Pourquoi la flexibilité ?
Passer au responsive, design
- Une question de contexte
- Mobile first
- Vers un responsive workflow
- Être « responsive » et responsable
- L’amélioration progressive revisitée
- Va et sois « responsive »

Acheter le livre

Responsive web design

Auteur(s) : Ethan Marcotte
Editeur : Eyrolles
Nombre de pages : 160 pages
Date de parution : 15/09/2011

Articles sur le même sujet

L’intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Bruno Bichet — Tue, 26 Apr 2011 11:53:45 +0000

Les claviers ont crépité la semaine dernière autour du rendu des maquettes Photoshop au pixel près. En relisant les billets et les commentaires, j’ai finis par me demander de quoi on parlait exactement. Lorsque l’intégrateur web reçoit un PSD (qui a déjà été validé, donc) à découper, il se se pose généralement pas la question : il prend une longue inspiration, se remémore quelques épisodes de Dexter et commence à découper sa maquette bien proprement.

Si vous aussi, vous vous demandez comment Dexter s’y prendrait pour découper vos .psd avec brio ;-)

Découper avec «dextérité»

Selon sa méthode de travail, l’intégrateur s’occupe du marquage HTML après avoir tout bien tranché. Il teste ensuite le rendu final dans tous les navigateurs disponibles. Il peut aussi découper, intégrer et tester le rendu dans plusieurs navigateurs au fur et à mesure. Dans les deux cas, on ajuste le code HTML (le moins possible, s’il a été pensé de manière sémantique) et les CSS pour que le site s’affiche de manière identique partout ou presque, en faisant au mieux avec les innombrables bugs et incohérences qui font le charme (ou pas) de l’univers impitoyable des navigateurs.

A cette étape, si l’intégrateur a eu le temps nécessaire pour travailler sereinement, le site devrait s’afficher parfaitement dans les navigateurs les plus courants, y compris dans IE6 ! Oui, parfaitement.

Il s’agit-là de la méthode «standard» pour faire un site web à partir d’une maquette réalisée dans un logiciel de traitement d’image, et ce depuis déjà de nombreuses années. Généralement, ces sites possède une largeur fixe et s’affichent entièrement sur des écrans ayant une résolution de 1 024 par 768 pixels. Ils regroupent sans doute plus de 80% de l’ensemble des sites web. Ils sont généralement prévus pour s’afficher de manière identique sur les navigateurs présents sur le marché.

Bref, le «pixel perfect» comme je le comprends existe depuis longtemps déjà. Savoir si c’est une bonne chose ou non est un autre débat.

Sur le fil du rasoir

Selon la «nature graphique» de cette maquette, l’intégrateur peut être tenté d’utiliser certains effets CSS3 pour rendre les arrondis, les ombres portées, les dégradés, etc. A partir de là, on n’est bien conscient qu’il s’agit d’utiliser des technologies émergentes qui sont encore à l’état de brouillon. Les éditeurs de navigateur travaillent déjà dur pour implémenter ces technologies ; on ne peut pas leur demander en plus d’assurer un rendu identique à celui du voisin (du moins pour l’instant) !

Au niveau des spécifications, il est normal de penser qu’un bord arrondi ne devrait pas être différent d’un navigateur à l’autre. C’est pareil pour une ombre portée ou un dégradé. Mais à supposer que chaque navigateur parvienne à implémenter correctement ces effets CSS3, je continue de penser qu’une légère différence d’affichage n’est pas préjudiciable : un visiteur consulte rarement le même site simultanément dans deux navigateurs différents, si ?

Conclusion…

… Y en a pas ;-) Ou plutôt : dites-moi si dans les travaux que vous réalisez, vous trouvez que les maquettes à découper «au poil de c.. près» sont en augmentation par rapport aux maquettes où l’on peut faire tout ou partie du design directement dans le navigateur, ou pas ?

Articles sur le même sujet

Et si Photoshop permettait de tester des maquettes fluides ?

Bruno Bichet — Thu, 21 Apr 2011 12:23:54 +0000

Si c’était possible techniquement, est-ce qu’on s’amuserait à faire des rendus différents pour le plaisir ? Réponse : NON. Cette interrogation de @mariejulien suite à la publication de l’article Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur ? et cette réponse lapidaire se poursuivent par la réflexion suivante : la norme est donc bien d’avoir un contenu identique, et le reste n’est qu’argument fallacieux à une impossibilité technique. Question à laquelle j’ai répondu en bottant un peu en touche en disant que le monde de l’imprimé et du web ne répondaient pas aux même lois de la physique.

Un question d’entonnoir

On peut voir la conception pour l’imprimé comme un entonnoir avec la grande ouverture vers le haut : qu’importe les techniques utilisées pourvu qu’elles passent sous les fourches caudines des systèmes d’impression qui aboutissent — si tout ce passe bien — à un rendu unique. En effet, qu’importe la manière dont vous faites vos ombres portées : seul le résultat imprimé compte !

Pour le web, l’entonnoir est dans l’autre sens. Il existe un nombre de techniques relativement limitées pour que ça fonctionne, en revanche — si tout ce passse bien — le nombre de périphériques de sortie est inconnu et chacun est susceptible d’avoir son propre système de fonctionnement. D’autant plus que les spécifications des groupes de travail du W3C ne sont pas toutes univoques. Pour enfoncer le clou, il faut savoir que les agents utilisateurs n’ont aucune obligation d’implémenter toutes les fonctionnalités prévues ! Cette modularité et cette liberté face aux standards est justement ce qui permet au web d’être ce qu’il est aujourd’hui… Sur le web, le résultat seul ne compte pas ; la manière d’y arriver est tout aussi importante !

Je reformulerais donc la question initiale de Julien de la manière suivante :

Si c’était possible techniquement, est-ce qu’on s’amuserait à ne faire que des maquettes à largeurs fixes si Photoshop permettait de créer et tester des rendus fluides ? Réponse : pas forcément.

Gutenberg n’est pas mort (ou pas)

Et encore, c’est en gardant un flux de production plusieurs fois centenaire qui date des années Gutenberg. Dans bien des cas, il n’est pas totalement farfelu de faire l’impasse sur le lancement de Photoshop : après un rapide crayonné — et si la créativité se limite à quelques dégradés, des bords arrondis, des ombres portées, etc. — il est tout à fait légitime de travailler directement dans le navigateur ET CE N’EST PAS MAL ;)

Faire le design dans le navigateur ne signifie pas pour autant absence de graphisme ou d’illustration. Si le croquis fait référence à des éléments dessinés, je lance plutôt Illustrator pour faire mes éléments de design à la demande. Il m’arrive aussi souvent de faire des maquettes entières dans Illustrator sans idée de découpe. Je prélève chaque élément dont j’ai besoin pour l’intégrer dans mon fichier HTML et CSS, sans jamais (ou presque) passer par les outils de découpe proprement dit.

Il est parfois nécessaire d’effectuer des copier-collés dans Photoshop depuis Illustrator pour certains éléments. L’avantage, c’est de conserver tous les éléments au format vectoriel, ce qui permet de moduler la taille des éléments directement dans Photoshop en les collant lors de la création d’un nouveau document.

A la relecture, je sens bien que cette méthode en semble pas en être une, mais elle fonctionne pour moi, c’est le principal ;-)

← Pssst : l’origine de cet article sur Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur?

Articles sur le même sujet

display: table et display: table-cell pour faire une mise en page web ?

Bruno Bichet — Fri, 15 Apr 2011 17:18:57 +0000

Après la lecture du livre CSS avancées — Vers CSS3 et HTML5, je me suis amusé avec les propriétés de rendu en tableau avec CSS (à partir de la page 122 pour ceux qui ont l’ouvrage sous les yeux). Pour m’entrainer à utiliser ces nouvelles propriétés comprises par tous les navigateurs modernes et à partir de IE8 pour Internet Explorer, je me suis fixé comme objectif de réaliser une mise en page du type de ce que l’on fait généralement à base de float: left et de margin-right pour obtenir des colonnes séparées par des gouttières. Bref, du classique de chez classique.

Sauf qu’il semble à première vue que la propriété border-spacing (associée à border-collapse: separate) fait uniquement ce qu’elle est censée faire : un espace autour des blocs auxquels on a appliqué display: table-cell, soit en haut et en bas soit à droite et à gauche de tous les blocs selon qu’on applique une ou plusieurs valeurs, comme border-spacing: 0 20px ou border-spacing: 20px 0.

Mise en page avec border-spacing

#main {
    display: table;
    border-collapse: separate;
    border-spacing: 20px 0;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}

Ce qui n’arrange pas mes affaires, car je voudrais uniquement une marge à la droite du premier bloc en display: table-cell pour repousser le second de la largeur d’une gouttière de 20px, par exemple.

Maquette avec border

Bref, après quelques tâtonnements, je suis en partie parvenu à un résultat partiellement satisfaisant en utilisant une bordure et en lui donnant la même couleur que le fond et la largeur de la gouttière que je voulais :

#main {
    display: table;
    border: 1px solid grey;
    width: 100%;
}
#primary {
    display: table-cell;
    background: red;
    border: 20px solid white;
    border-width: 0 20px 0 0;
}
#secondary {
    display: table-cell;
    width: 30%;
    background: green;
}

En bref

Je n’exclu pas le fait d’être passé à côté d’une propriété, mais il semble que la mise en page à base de display: table et display: table-cell ne soit pas aussi évidente qu’on aurait pu le croire de prime abord, même en faisant son deuil des versions antérieures à IE8. Dans les faits, border-spacing ne semble pas s’appliquer uniquement aux bordures adjacentes.

Articles sur le même sujet

Lorem Pixum — Images de placement gratuites en Creative Commons

Bruno Bichet — Fri, 08 Apr 2011 05:50:49 +0000

Lors de la mise en place d’un site web, il est parfois utile d’utiliser du faux-texte en attendant les contenus définitifs. Pour signaler l’emplacement des images, j’utilise souvent des aplats gris. Plus rarement, je vais chercher des images proches de la thématique des contenus que je mets en page, lorsque la part des visuel est importante. Grâce à Lorem Pixum, la tâche parfois fastidieuse du recadrage des visuels trouvés est déjà un lointain souvenir.

Lorem Pixum : des images gratuites pour donner vie à vos pré-maquettes.

Des images de placement en Creative Common à volonté. Cliquez pour agrandir l'image.

Ce site permet d’afficher des images aléatoires via une simple URL du type http://lorempixum.com/400/200/ (pour un format de 400 x 200) ou des images selon les thématiques suivantes :

Il est possible d’avoir des images en couleurs ou en niveaux de gris en utilisant une URL du type http://lorempixum.com/g/400/200. Pour obtenir plusieurs images dans la même thématique, ajoutez-donc un chiffre de 1 à 10.

Via les Actualité de l’Internet et les outils du Web (merci Thierry !)

A emporter !

Articles sur le même sujet

Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web

Bruno Bichet — Tue, 05 Apr 2011 11:54:49 +0000

Parmi les nombreux intervenants dans la chaine de production des métiers de l’internet, l’intégrateur web est sans doute celui qui se cherche le plus. C’est le «vilain petit canard» de l’Open Space. Souvent coincé entre les graphistes et les développeurs web, il peut se sentir à l’étroit. Placé au bout de la chaine, de nombreuses erreurs de conception faites en amont lui tombent dessus, à commencer par les délais. Le retro-planning donne souvent l’impression d’avoir zappé le temps nécessaire à «l’intégration». Pourtant, l’intégrateur HTML & CSS est une ressource précieuse que toute entreprise sérieuse devrait valoriser. C’est le garant de la qualité globale du site mis en ligne, du respect de la charte graphique à l’expérience utilisateur en terme de performance d’affichage des pages.

L’intégrateur web en milieu naturel

Selon les entreprises, en dehors de sa responsabilité évidente relative au bon affichage du site sur l’ensemble des navigateurs, il gère les «oublis» en matière de référencement et d’optimisation «SEO» pour les moteurs de recherche (pléonasme !) en remplissant les balises alt ou certains attributs title. Il peut même aller jusqu’à améliorer la densité des mots-clés présents dans les titres des articles. C’est dire son implication dans la réussite de l’entreprise.

Par ailleurs, sa passion du web et son goût pour l’accessibilité lui permettent de rendre votre site web accessible au plus grand nombre. Avec un peu d’expérience, votre intégrateur web pourra facilement devenir un chef de projet web capable de faire travailler ensemble graphistes et développeurs web.

Enfin, et c’est le plus important, l’intégrateur web, en fonction des composés HTML & CSS qu’il emploi et des bonnes pratiques qu’il observe lors de l’intégration des différents fichier Javascript, a une responsabilité importante en ce qui concerne la maintenance du site dont il intègre les pages. D’après mon expérience, la plupart de l’argent mal dépensé par les entreprises sur le web est lié à une mauvaise conception des pages et à une architecture de site défaillante. N’attendez plus et mettez donc un intégrateur web qualifié dans votre moteur !

Mais qui est donc l’intégrateur web ?

Les définitions concernant l’intégration web insistent souvent sur la découpe et l’intégration de la maquette réalisée par le graphiste. On parle souvent de «montage» de page web, terme qui nous vient du fin fond du monde de l’imprimé et de la PAO…

Définition globale du métier d’intégrateur web

L’intégrateur web produit généralement des pages web à partir d’indications visuelles ou sonores : maquette détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il crée le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composants la page et peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript. Source : Définir le métier intégrateur web.

L’intégrateur est avant tout un spécialiste des langages HTML et CSS. Produire des pages web consiste à taper du code dans un éditeur texte, à en tester le rendu dans les navigateurs web présents sur le marché et à s’arranger pour que la page web affichée corresponde au brief ou à la maquette.

Dans cette définition, je n’ai pas voulu enfermer l’intégrateur dans le rôle du méchant découpeur de .psd qui monte des pages à la chaine. D’une part, il peut très bien produire une page web (voire même tout un site) directement dans le navigateur d’après un simple croquis, comme j’ai pu le démontrer dans l’article Conception dans le navigateur avec HTML5 & CSS3, et d’autre part, lorsqu’elle existe, cette phase d’exécution pure n’est que la partie émergée de l’iceberg des compétences de «l’inté».

Les profils de l’intégrateur web

Selon le secteur d’activité, la taille de l’entreprise, et la définition de poste, le curseur initialement situé au centre des compétences premières de l’intégrateur web («découpe» de fichiers Photoshop et «montage» des pages) se déplace sur une ligne qui va de l’intégrateur-graphiste à l’intégrateur-développeur :

A gauche du curseur, nous avons le web designer capable de concevoir une charte graphique, de la mettre en œuvre à l’échelle d’un site web, de réaliser le montage HTML & CSS des pages. Ce web designer possède avant tout une forte culture graphique.
Un peu plus vers la droite, le web designer peut également intervenir sur les développements côté client avec Javascript ou côté serveur avec PHP. Variante : le Web designer utilise un CMS comme WordPress pour l’assister dans cette tâche. Celui-ci possède plutôt une culture technique. C’est souvent un ancien webmaster qui a l’habitude de Photoshop.
Au centre, nous trouvons notre intégrateur dont le rôle consiste à découper une maquette fournie (généralement) au format Photoshop et de la transmuter en page web à l’aide de HTML & CSS.
Un peu plus loin vers la droite, nous avons le webmaster chargé initialement de l’intégration des contenus et qui fait naturellement l’intégration HTML & CSS des pages web qu’il ajoute au site. Il intervient également souvent sur la partie PHP.
A droite du curseur, nous avons un développeur PHP dont le sens esthétique ou le goût pour la lisibilité lui permettra d’habiller ses développements PHP avec HTML & CSS3. Généralement adepte de The Gimp, il pourra reprendre le logo du client et placer des éléments graphiques dans sa composition.

→ Lire Je suis « enveloppeur web » moi monsieur et Intégrateur web + graphiste = intégraphiste !

En bref

Les compétences de base de l’intégrateur sont multiples, et ce d’autant plus que ce dernier peut porter plusieurs casquettes allant du graphiste au développeur web. Toute fiche «métier» devrait tenir compte de la spécificité de ce métier qui peut en cacher plusieurs autres ! A ce sujet, je recherche des témoignages d’intégrateurs web sous forme d’un ou deux paragraphes : brève description du travail effectué et place dans le flux de production de l’entreprise, et tout autre élément que vous jugerez nécessaire. Vous pouvez me faire parvenir votre témoignage dans les commentaires ou à l’adresse infographiste[at]gmail[dot]com Merci d’avance o/

Articles sur le même sujet

Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise

Bruno Bichet — Fri, 05 Nov 2010 18:58:54 +0000

Je viens de lancer mon nouveau site spécialisé dans la publication de communiqués de presse pour les entreprises et les particuliers. Encore un site pour publier des communiqués de presse ? Oui, mais à la mode de Bruno les bons tuyaux, c’est-à-dire avec un plus-produit aussi simple qu’innovant : réécrire les communiqués de presse pour publier des articles originaux. Autrement dit, je mets en ligne sur Dotpress.fr des contenus non dupliqués (ce qui est plutôt rare car le CP est généralement envoyé à l’identique aux journalistes). L’objectif est d’être bien référencé par les moteurs de recherche pour donner le maximum de Link Juice aux liens qui pointent vers les contenus «corporate» que l’on me confie.

Dotpress, what else?

A côté du site Dotpress.fr, j’ai lancé @dotpress pour assurer le relais des publications sur Twitter et partager mes réflexions et mes découvertes sur ce monde à explorer… N’hésitez pas à vous abonner à ce nouveau compte Twitter ainsi qu’au flux RSS de Dotpress pour ne rien rater :-)

Certains se souviennent peut-être qu’à l’origine de l’achat du nom de domaine dopress.fr, j’avais le projet de créer un thème magazine disponible à la fois sur Dotclear et sur WordPress, genre un thème pour les rassembler tous. Depuis, de l’eau a coulé sous le tapis de souris et le projet est passé à la trappe pour renaitre aujourd’hui sous une forme totalement différente.

WordPress, what else?

Sans surprise, j’ai conservé WordPress comme CMS. J’ai laissé le thème Twenty Ten en attendant de finaliser la maquette. Je préfère avoir une idée plus précise de la diversité des contenus pour me décider sur certains éléments-clés, comme le nombre, la taille et l’emplacement des visuels ou l’importance des textes. Sans parler de la largeur des différents formats des encarts AdSense ! Par ailleurs, j’aurais ainsi le temps d’étudier de plus près de quel bois se chauffe WordPress 3 pour analyser ce qui se trouve sous le capot !

Direction artistique et design

La Direction artistique avait pour mission de coller à l’idée de travail manuel en s’inspirant de l’ambiance des ateliers d’imprimerie à l’époque de Gutenberg, où les caractères étaient posés un à un pour composer des mots, puis des phases, puis des choses à lire. L’encre n’est pas totalement sèche, quelques gouttes parsèment le plan de travail pour évoquer la notion de Work in Progress.

Pour le design, je suis resté fidèle à ma grille de 942 pixels de large, déjà utilisée sur ce blog et dont le nombre de colonnes non divisible par 3 oblige à une asymétrie rafraichissante. L’interlignage de 21 pixels représente la moitié de la largeur d’une colonne, ce qui permet — au cas où cela serait nécessaire — d’harmoniser le nombre de lignes avec la hauteur des images, en plus d’aérer le texte.

Rendez-vous sur Direction artistique et Design pour plus d’information sur la différence entre intention et exécution quand on parle de graphisme.

Aperçu de la maquette avec affichage de la grille pour déterminer la taille et l’emplacement des blocs.

Première ébauche sur Illustrator. Cliquez pour agrandir l'image.

Aperçu de la même maquette sans la grille en espérant qu’elle se fasse un peu oublier ;)

Même chose sans la grille de mise en page. Cliquez pour agrandir l'image.

Typographie

En fonction de la police de caractère retenue (probablement Georgia), le texte sera composé en 13/21 ou 14/21, soit un rapport de 1,618 d’une part ou 1,5 d’autre part, respectant dans les deux cas un ratio proche du nombre d’Or (absolu dans le premier cas et typographique pour le second). Quant à la grille elle peut encore évoluer vers une solution un peu plus modulaire à laquelle je réfléchis.

Pour les titres, j’utiliserai IM Fell DW Pica SC et IM Fell DW Pica pour les hors-textes. Ces fontes devraient se «fondre» idéalement dans le décors.

Logotype

Pour le logo, j’ai fais simple en mettant l’accent sur le terme «press» qui possède la même couleur que le paragraphe d’introduction, sur lequel il est aligné. Le terme «dot» est quant à lui de la même couleur que le titre des articles sur lesquel il est aligné pour guider le regard vers le plus important.

Pour le reste, j’ai joué sur la notion de «point presse» suggéré à trois reprises de manière plus ou moins cryptique à mesure qu’on regarde vers la droite.

En attendant…

Bref, comme d’habitude, je m’en remets à votre jugement, parfois bienveillant, souvent lapidaire, toujours intéressant, sans lequel mes blogs ne seraient pas ce qu’ils sont :-)

N’hésitez pas à proposer vos communiqués de presse sur http://dotpress.fr

Retrouvez les liens cités dans l’article

Articles sur le même sujet

#WDFR — Imprimez votre grille pour dessiner vos croquis

Bruno Bichet — Fri, 22 Oct 2010 16:47:10 +0000

Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise une grille dans Illustrator bien au chaud dans un calque « grille » verrouillé, je me suis dit qu’il serait intéressant de l’imprimer en plusieurs exemplaires pour m’en servir de support. Pour les croquis, je me contente d’imprimer cette grille à 50% de sa taille réelle pour ne pas gâcher inutilement l’encre et le papier (petit 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 à volonté.

942.css : ma grille de mise en page

J’utilise souvent la grille de mise en page créée à l’occasion du redesign de ce blog : 16 colonnes de 42 pixels, gouttières de 18 pixels, largeur totale de 942 pixels. L’interlignage de 21 pixels représente 1,6 fois la taille du caractère de base (13 pixels) arrondi à l’unité supérieure. Le nombre d’Or est basé sur des rapports de 1,618 et bien que l’on considère souvent que 1,5 est le nombre d’Or typographique, j’ai gardé le ratio 1,6 car l’interlignage de 21 pixels représente exactement la moitié de mon module de base de 42px de côté. Hasard, je ne pense pas ^__^

Pour vous inspirer pendant les longues soirées d’hiver pourquoi ne pas lire 500 grilles et feuilles de style pour l’imprimé et le Web de Graham Davis ou imprimer l’un des 10 modèles pour Wireframe ?

Adapter votre grille pour l’impression

Après la phase du croquis, il peut être utile de marquer les regroupements de colonnes pour faciliter la création des maquettes (page d’accueil, pages «intérieures», etc.). On peut tout aussi bien imprimer des blocs de couleurs différentes à la tailles des colonnes pour les placer sur la grille. En ce qui concerne les couleurs, lors de l’impression, j’utilise des couleurs plus légères pour dessiner par dessus.

Avec Illustrator, la création d’un gabarit de mise en page pour faire des croquis ou des maquettes est très simple : Objet >Transformation > Déplacement (ou Maj + Ctrl + M).

Cliquez sur l'image pour voir la grille en taille réelle (1024x1024)

Le « fold » ou la partie émergée de l’iceberg

En plus des colonnes et de l’interlignage, j’ai ajouté quelques éléments à cette grille de base : l’indication de la hauteur du viewport vu de mon Netbook de 10.2 pouces et de mon écran 19 pouces. Pour les visualiser, j’ai placé des repères de chaque côté de la grille, à 420 pixels et à 714 pixels.

Cette matérialisation du fold est utile pour voir les éléments qui seront visibles sans nécessiter de scroll, même s’il faut garder à l’esprit qu’il y a de la vie en dessous de 600px ! La zone des 300px à partir du haut de la page est la plus regardée. Les éléments les plus importants devraient se situer au-dessus du fold mais sans sacrifier le bas de la page qui doit rester attrayant. Il est utile de placer des éléments à cheval sur deux zones pour inciter l’utilisateur à descendre jusqu’au pied de page.

En bref

J’espère que vous n’aurez pas perdu votre temps à la lecture de cette astuce simple mais terriblement efficace qui évite de passer trop de temps à faire des ajustements techniques dans les logiciels de création graphique. J’ai par exemple des difficultés à ne pas aligner parfaitement mes éléments sur Illustrator, alors qu’un placement approximatif serait suffisant dans la phase de recherche.

N’hésitez pas à partager les trucs que vous utilisez au quotidien pour vous faciliter la vie de webdesigner !

Articles sur le même sujet

Frameworks CSS + Mockup = Mockup CSS

Bruno Bichet — Wed, 20 Oct 2010 13:45:30 +0000

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

Une très brève histoire des métiers du web et de la PAO (publication assistée par ordinateur)

Bruno Bichet — Thu, 26 Aug 2010 14:10:17 +0000

Lorsque j’ai publié mon dernier billet sur le design dans le navigateur avec HTML5 et CSS3, je m’attendais à des commentaires sur mon interprétation du rôle et de l’utilisation des nouvelles balises HTML5 pour structurer les contenus telles que header, hgroup, section, aside, nav, article ou footer. A la place, j’ai vu apparaitre une discussion plutôt orientée « graphistes vs. intégrateurs » web au sens large, qui m’a donné envie de faire un retour en arrière sur mon expérience des métiers de la chaine graphique et des métiers du web.

Attention : un peu d’humour et de second degré se sont glissé dans ce billet, merci pour votre compréhension ;)

Mon parcours professionnel m’a amené à côtoyer et à exercer plusieurs métiers de la chaine graphique : exé PAO, infographiste, scannériste-retoucheur, chef de studio, flasheur et j’en oublie certainement. Côté web, j’ai commencé à « faire » des sites web à une époque où le métier de webmaster était plutôt bien vu. Je suis devenu intégrateur web, puis webdesigner en attendant de faire mon chef de projet là où l’on voudra bien de moi ;)

En 1990, lorsque j’ai commencé à me former en PAO, la plupart des professionnels ont vu d’un mauvais oeil l’arrivée de l’informatique dans leurs métiers.

Jusqu’en 1993, j’ai eu l’occasion de travailler avec des Directeurs artistiques qui dessinaient leur maquettes, collaient les photos et titraient avec des lettrasets. Le travail de l’exé PAO consistait à rendre cette maquette fonctionnelle à l’aide des logiciels Quark XPress, Photoshop ou Illustrator. Il fallait également assurer la préparation pour l’impression : formats d’images, colorimétrie, débords, défonce, etc. Toutes ces choses un peu techniques que le DA ignorait le plus souvent et que l’on regroupait sous le vocable « pré-pressse ».

Quelques années plus tard (1997), la majorité des DA travaillaient directement dans Photoshop ou Illustrator mais les questions techniques autour du pré-presse n’étaient toujours pas digérées.

A partir des années 2000 les exés sont devenus (ou ont été remplacés par) des infographistes. Il fallait non seulement savoir faire l’exé et assurer la partie pré-presse, mais être également capable d’intervenir sur la partie création en adaptant la charte graphique mise en place dans les grandes lignes par le DA.

De nombreux infographistes ont peu à peu goûté à la créa et ont été à même — non pas de proposer des pistes graphiques, qui restait globalement le coeur de métier des DA — mais de travailler directement dans XPress ou InDesign pour « faire » une affiche, mettre en page un magazine ou proposer un logo. Le rôle du DA (quand il y en avait un) était plutôt axé relation-client (boire un coup avec les donneurs d’ordre) et benchmarking (lecture de la presse spécialisée devant la machine à café) ^__^v

Cette brève histoire de la PAO montre bien qu’il y a eu factorisation des métiers de la chaine graphique. Bien sûr le simple exé existe toujours, mais pour être embauché il doit en savoir bien plus qu’aux débuts héroïques.

Il se passe la même histoire avec les métiers du web. Au début, le métier de webmaster consistait grosso modo à intégrer les contenus envoyés par les clients (les back-office coûtaient cher et les CMS n’existaient pas encore), à ajouter de nouvelles pages, à maintenir et optimiser le site pour continuer à satisfaire les visiteurs toujours plus nombreux.

Une partie des webmasters se sont spécialisés dans les langages HTML, CSS et Javascript et son devenus des intégrateurs web ou des développeurs front-end. Ceux qui avaient une sensibilité artistique sont devenus des webdesigners.

Parallèlement à cela, une grande partie des graphistes traditionnels ont de plus en plus travaillé pour le web en fournissant des fichiers .psd à découper. Certains ont finit par ne faire que du webdesign et sont de fait devenus des… webdesigners sans toutefois posséder la culture technique des anciens webmasters. Comme les DA évoqués plus haut qui ignoraient tout ou presque des contraintes pré-presse.

Vous me voyez venir : la factorisation qui a eu lieu dans les métiers de la chaine graphique n’a aucune raison d’être épargnée aux métiers du web. Elle est même plus féroce dans la mesure où l’intégrateur HTML et CSS doit de plus en plus devenir un développeur web front-end en ajoutant Javascript à son arc. Voire même maitriser un langage côté serveur comme PHP ou faire de l’administration serveur en jonglant avec plusieurs kernels à la fois ! Parti de webmaster, le travailleur du web tend à redevenir un homme ou une femme à tout faire.

Quant aux webdesigners « graphistes », une partie d’entre eux semble regretter le temps où le format A4 était roi et n’obligeait pas le lecteur à faire défiler la page ;) Tiens, ça me rappelle Deux mots sur le graphisme, le design et l’ergonomie des sites web que j’ai écris il n’y a pas si longtemps.