1. InsertAfter – Le tout nouveau blog de Nicolas Froidure (KGen, BBComposer et CanImage) : développement web, administration système, informatique, hacking et programmation en général. @nfroidure
2. HTeuMeuLeu — HTML5, CSS3, et le quotidien du web pour un intégrateur ! @HTeuMeuLeu
3. Nicolas Hoffmann — XHTML/CSS, HTML5, Terragen 2 et Photo. @Nico3333fr
4. Ministère de l’intégration — Carnet de bord d’un intégrateur web. On y cause «responsive» web design, HTML, CSS, Sass & Compass. @kaelig
5. Darklg Blog — Intégration, développement web, SEO, caféine. @Darklg
6. La tête dans le Flux — webdesigner alsacien, intégrateur HTML5 / CSS3, auteur de quelques livres et créateur d’Alsacréations. @goetter
7. Webdesign Friday — Les vendredis Webdesign ! Chaque semaine, un nouvel article par un professionnel du Web. @wdfriday
8. piouPiouM — Bloc-note d’un développeur web. @piouPiouM
9. Ange Chierchia — PHP et MySQL pour le développement Web, HTML, CSS et jQuery pour le design Web. @nighcrawl
10. Phollow — Créateur de pixels & codeur, depuis 1986. @phollow
11. Visibilité-Site — Le référencement par la qualité. @nfroidure
12. LoïcG — Carnet d’un développeur web : PHP, javascript, un peu de CSS et des astuces diverses. @chibani
13. Trois Point Zéro — webdesign, développement et actualité autour du web. @Daibai
14. Johan Bleuzen — Développement Web, techniques émergentes, logiciels liés au Web. @jbleuzen
15. Eclaireur — WebDesign & Entreprenariat 2.0. @flashxman
16. BrainCracking — Veille technologique sur les applications Web. @theystolemynick
17. F-G Ribreau — Développement web avec Javascript, jQuery, CSS3, HTML5. @FGRibreau
18. Nicolas Juen — Articles spécialisés dans la création de plugins et de thèmes WordPress. @Raherian
19. The Loop — Entrez dans la boucle WordPress. @theloopfr
20. Boite à web — Le blog sur la sécurité WordPress et ses extensions. @BoiteAWeb
21. Benoît Raux– Chef de projet développeur web lyonnais. @rauxbenoit
22. Laurent Demontiers — Consultant Web / Design et Ergonomie d’interfaces. @L_Demontiers
23. Pioul — Technologies du Web et Entrepreneuriat. @_pioul
24. Chez Syl — Développement web.
25. Jubianchi — Le blog d’un développeur web utilisant WordPress. @jubianchi
26. Truffo — If you need a Fix … Sylvain. @truffo
27. SeoBlack Inside — Techniques de développement Black Hat SEO. @SeoBlackInside
28. Megaptery — Explorez les profondeurs du web : Javascript, jQuery, CSS3, HTML5, PHP, Mootools. @megaptery
29. #GeekPress — Astuces, tutoriels & guides WordPress.  @geekpressFR
30. Diije – SEO, WordPress & cie. @Diije
31. Pixel et Cetera — CSS3, HTML5, WordPress, JavaScript et  design Web. @pixeletcetera
32. SeoMix — WordPress et référencement naturel. @rochdaniel
33. Les intégristes — Un blog sur l’intégration web par Éric Le Bihan et Pierre Bertet. @lesintegristes
34. Check414 — Actus, tutos & tests de web technologies.
35. Bonjour Gem — Chaque jour, nous vous présentons une «gem» (un blog sur Ruby).

Vous êtes passionné par les langages du web et votre blog — qui reflète cette passion — n’est pas encore dans cette liste ? N’hésitez pas à vous manifester dans les commentaires, en précisant votre pseudo Twitter, le cas échéant :-)

Articles sur le même sujet

• 24 listes pour Webdesigners
• Améliorations cosmétiques et ergonomiques sur ce blog
• 390 ressources Javascript & jQuery
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek
• 100+ comptes Twitter pour webdesigner

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

• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Webdesigner est-il ?
• Une très brève histoire des métiers du web et de la PAO (publication assistée par ordinateur)
• Notes de lecture : « Responsive Web Design »
• L'intégration HTML & CSS «Pixel Perfect» est une prestation en voie de [développement] [disparition] ?

Introduction

En attendant que les pouvoirs publics ne se décident à financer des formations adaptées — et puisque le Pôle-Emploi est souvent hors du coup et hors des coûts –, se sont des générations de Webdesigners qui sont souvent formés à la va comme je te pousse ! A moins qu’un veilleur bien inspiré de la Région Rhône-Alpes ne vienne lire ce billet…

«Les Standards du Web, connais pas, c’est quoi ? Moi, j’ai suivi une formation en Webdesign Dreamweaver. Mais une fois, le formateur nous a fait cliquer sur le mode Source. Ça ne compte pas ?»

Par Astrid Graeber via Wikimedia Commons

Former des grands débutants à la création de site Web From Scratch est un pari difficile. Voici quelques éléments issus de la formation Chargé d’Intervention Multimédia que j’ai mise en place il y a une dizaine d’années pour le compte de la région Rhône-Alpes.

A l’issue de cette formation, les apprenants devaient être capables de mettre au jour les besoins du client, de formaliser les besoins dans un cahier des charges, de créer l’architecture d’un site internet, de concevoir le design à l’aide de Photoshop et d’Illustrator, de réaliser l’intégration d’un PSD dans Dreamweaver et de comprendre les bases de Javascript, PHP & MySQL.

Si je devais remettre cette formation en place aujourd’hui, je remplacerais Dreamweaver par Notepad++, j’insisterais lourdement sur les CSS 2.1 et CSS3 et la sémantique associée aux balises HTML5 et j’ajouterais la réalisation d’un thème WordPress comme examen de fin d’année ;-)

«J’ai bien envie de savoir découper un PSD autrement qu’en exportant toutes les tranches depuis ImageReady, c’est possible ?»

Niabot (Licence GFDL ou CC-BY-3.0), via Wikimedia Commons

Tout au long de la formation, j’insiste sur l’accessibilité, l’ergonomie, les standards du Web, la rédaction Web et le référencement (SEO). J’aborde également les outils de mesure d’audience (Google Analytics, GetClicky, Feedburner) et l’utilisation des réseaux sociaux pour faire la promotion de son site et effectuer une veille technique pro-active.

Ça fait beaucoup de choses, mais distillés par petites touches, ces conseils trouvent leur place et permettent de recadrer la production des apprenants avec des arguments concrets du type : «oui, ton texte est très bien écrit, mais non, en verdana 9px ça passe difficilement et en plus tu risques d’augmenter ton taux de rebond» ou encore : « Ton formulaire de recherche est bien placé mais sans bordure, avec son fond gris clair sur blanc on ne le distingue pas », etc.

Après Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS , ce billet fait partie d’un ensemble d’articles que je compte consacrer à la mise en place d’une formation globale sur l’intégration HTML & CSS dont le nom de code provisoire est :

« CSS Sans Stress & HTML S’en Mêle »

C’est quoi le Web ?

Expliquer comment faire un site Web c’est d’abord dire deux mots sur le Web et l’Internet dans les grandes lignes : histoire, protocoles, notions de client-serveur, débits, navigateurs et enfin la page web elle-même. Un site web n’est qu’une collection de pages reliées entre elles par une intention plus que par une technologie. C’est cette intention qui se traduit par le design dans le sens de «dessein».

A partir de là seulement, on peut évoquer la partie technique : HTML, CSS, Javascript, formats d’images et vidéos puis aller voir sous le capot l’apparence du code source. Pour éviter que l’expression «code source» ne soit source de confusion, j’insiste sur le fait que ni HTML ni CSS ne sont des langages de programmation, contrairement à Javascript côté client ou PHP côté serveur, par exemple.

Une très brève histoire du web

Représentation symbolique du réseau Arpanet (september 1974)

Par Yngvar (Public domain), via Wikimedia Commons

En 1969, un réseau connecte les universités d’Utah et de Californie. A partir de 1972 et jusqu’en 1981, les 213 hôtes qui sont reliés donneront naissance au cœur du réseau des réseaux (l’Internet). C’est à cette époque que les RFC sont mises en place : elles permettront de proposer et de distribuer les protocoles qui régissent et font vivre Internet aujourd’hui encore. Source Wikipédia.

Alors, c’est quoi le Web ? La lecture de l’article La plateforme Web de Karl Dubost (@karlpro sur Twitter) est très instructive. Le web est un espace d’information composé d’éléments caractérisés par des identifiants, appelé URI pour Uniform Resource Identifier. En gros, il s’agit de documents accessibles via un identifiant, par exemple une URL. Ce n’est peut-être pas grand chose, mais c’est déjà beaucoup.

Les premiers documents Web

Le site web du consortium du World Wide Web en 1992 encore accessible sur le site du W3.org

Les premières pages web sont principalement des documents universitaires, ce qui n’est pas étonnant puisque le Web est né du besoin des universités de partager leurs connaissances ou de confronter leurs travaux. Les balises HTML ont été conçues pour mettre en ligne des documents sémantiques et structurés et HTML5 ne déroge pas à ce sacro-saint principe.

Mise en page en tableaux

Les tableaux ont permis aux Webmasters de proposer des pages moins linéaires. On a ainsi vu apparaitre des en-têtes, des colonnes et des pieds de page. L’augmentation progressive des débits de connexion aidant, les images ont pris peu à peu la place qu’elles occupaient déjà dans les documents imprimés.

Inutile de sortir votre palette et vos pinceaux : la mise en page en tableaux ne fera pas de vous un(e) artiste ! (Photo par Rinina25)

photo by Rinina25 sur Wikimedia

Les tableaux c’était bien, mais leurs limites ont rapidement été atteintes : la maintenance est un casse-tête, l’accessibilité est souvent compromise et le ratio «code vs. contenu» n’est pas du bon côté de la force.

Mise en page avec CSS

Dans les années 2001, on a commencé à se dire que les CSS permettraient de produire des sites web plus efficaces en terme de maintenance, notamment en ce qui concerne la partie liées à la décoration des polices de caractères pour éviter d’alourdir les pages avec trop de «font» . Mais c’est à partir de 2005 (à la louche) que leur utilisation a vraiment commencé à s’imposer dans les esprits grâce au nouvelles possibilités de positionnement des blocs.

Les feuilles de styles CSS de l’intégrateur web ne sont pas fatiguées d’être sexy, elles !

By danBLOO (Own work) Public domain, via Wikimedia Commons

Toutefois, à cette époque encore, les CSS ont la réputation d’être un peu rigides ; les sites un peu funky n’y trouvent pas toujours leur compte. On reproche aux CSS de produire des mise en pages trop «carrés» (bien avant border-radius, donc). Pour certains, les CSS permettent tout juste d’arriver à la hauteur des sites Web en tableaux les plus basiques.

La lecture régulière de sites tels que  Cybercodeur, Openweb, CSS Zen Garden ou Alsacréations ont permis de tirer le meilleur du couple HTML & CSS vers le haut pour produire des pages Web respectueuses des standards, des maquettes du client et des délais (et des performances).

C’est quoi le graphisme ?

Les notions de Graphisme et de Design sont un peu les «laissés pour compte» dans les formations en création de site web. Tout au plus a-t-on le temps d’enfoncer le clou de la lisibilité et de donner quelques conseils de base concernant les trois mamelles du gris typographique : polices de caractères, contraste et interlignage.

Ce n’est pourtant pas une mission impossible. Il suffit de rappeler que le graphisme est composé de deux parties distinctes et complémentaires : Direction artistique et Design. La première va définir l’ambiance, le style, ce que le visiteur va ressentir en voyant le site ; tandis que le second est l’application des bonnes pratiques concernant la manière dont sont agencées les composantes de chaque page. Ce n’est jamais que l’expression de l’opposition de principe entre le fond et la forme, l’intention et l’exécution.

Une fois que l’on a bien compris que la direction artistique et le Web Design sont deux choses différentes, on peut se concentrer sur les fondamentaux du graphisme : les principes du design (traduit en français sur pouipouidesign) et les éléments que ces principes doivent organiser.

Graphisme & Webdesign

Voici le minimum syndical dont tout apprenant en Webdesign devrait entendre parler, ne serait-ce que dans les grandes lignes en fonction de la durée de la formation.

Quelques principes de base, un milliard de possibilités

Équilibre (symétrie, asymétrie)

Les notions de base de notre physique quotidienne comme la masse, la gravité ou encore le vide restent actives lorsque nous regardons une composition graphique. Nous attribuons un «poids visuel» aux éléments qui composent une mise en pages. Cet équilibre peut être arrangé de manière symétrique ou asymétrique.

Dans le premier cas, la composition est répartie autour d’un axe vertical ou horizontal. Il en résulte une impression… d’équilibre, de paix, de stabilité. Dans le cas de l’asymétrie, les éléments sont organisés de manière à produire une plus grande tension visuelle par l’utilisation de plusieurs petits éléments pour équilibrer une plus grande forme, par exemple.

Rythme (régulier, mouvant, progressif)

L’intervalle entre la répétition ou l’alternance d’éléments crée le sens du mouvement et définit des motifs ou des textures. Le rythme peut être régulier lorsque les intervalles ou les éléments sont similaires en taille ou en longueur, fluide avec un mouvement plus organique ou plus naturel, ou encore progressif lorsque des étapes sont suggérées.

Proportion (distribution des formes, échelle et relation entre les éléments)

Il s’agit des dimensions ou de la distribution des formes, mais aussi de l’échelle entre un élément et un autre. Un petit objet à côté d’un plus important peut donner l’impression d’être plus éloigné.

Hiérarchique ou prédominance (quelle place pour quel élément)…

…Ou comment établir la perspective d’une composition et décider de l’importance relative des éléments entre eux selon le premier-plan, le plan médian et l’arrière-plan. Il existe la perspective à deux points de fuite et à trois points. Rarement utilisée, cette dernière est utilisée pour augmenter une perspective représentant des immeubles très hauts, des clochers d’église, etc. Via ABC Dessin.

Unité (d’après la Gestalt théorie)

Il s’agit de la composition vue comme un tout, où chaque élément, les liens et les relations qu’ils entretiennent font partie d’une démarche conceptuelle qui pousse l’esprit à établir des liens, à former des catégories ou des groupes porteurs de sens. La nature a horreur du vide, l’esprit humain aussi !

• Fermeture — L’esprit imagine les pièces manquantes dans une composition,
• Continuité — L’œil continue dans une direction donnée,
• Similarité — Relation entre la forme et la fonction,
• Proximité — Relation entre les éléments et comportement induit,
• Alignement — Mise en place des objets dans l’espace pour organiser des ensembles cohérents.

La couleur

J’ajoute un topo sur les couleurs, sans lesquelles la vie serait bien triste. Sans entrer dans le détail de la symbolique des couleurs, je retiens que l’on a toujours besoin d’une couleur dominante et de quelques couleurs secondaires.

1. Couleur dominante (bandeau ou logo) déclinée en 3 couleurs moins saturées et/ou plus claires pour découper la page en blocs fonctionnels.
2. Couleur tonique pour les titres, déclinée en deux couleurs pour les puces, les pictos ou des textes courts,
3. Troisième couleur pour les encarts, déclinée en deux couleurs pour les mises en exergue, les traits de séparation,
4. Couleur typo pour le texte principal,
5. Fond de page.

Le nuancier Pantone, que les imprimeurs appellent aussi « pantonier » et qui ne comprend pas moins de huit cents teintes, donne en fait les proportions de chacune de ces dix teintes de base

Nuancier Pantone

Un travail de qualité ne saurait se contenter de ces cinq étapes pour déterminer une palette de couleurs. Néanmoins, cette to-do list permet de franchir le cap de la feuille blanche. N’hésitez à consulter Choisir sa palette de couleurs où vous trouverez pas moins de 14 outils en ligne pour vous aider dans cette tâche. C’est d’ailleurs l’une des phases les plus passionnantes dans le processus de création ; c’est aussi celle qui sera la plus impactante en terme de première impression.

L’idéal serait d’avoir un très beau visuel sur lequel promener la pipette pour recueillir délicatement quelques gouttes de pixels… Ne rêvons pas trop, car la réalité est souvent plus proche d’un logo conçu en fonction des contraintes de l’imprimé versus les possibilités chatoyantes de l’écran.

Le gris typographique

C’est grosso modo l’impression visuelle faite par un pavé de texte que l’on regarde de loin en plissant les yeux (‘-_-’). En appliquant cette idée du gris typographique à l’ensemble des blocs (et au texte qu’ils contiennent), il est possible de travailler sur le rythme du site et la respiration de la page.

Rythmer la navigation

Nous avons plus haut la notion de rythme appliquée au niveau de la page. Ici, je m’intéresse aux relations qu’entretiennent les différentes pages d’un site en fonction des éléments qu’elles partagent : logo, bandeau et les menus de navigation qui fédèrent par nature les pages d’un site Web. L’enchainement des liens va donner du souffle à la navigation et à l’expérience utilisateur.

Il ne faut pas non plus que le site se transforme en machine à cliquer. Chaque page doit retenir le visiteur en offrant un espace qu’il peut identifier et situer immédiatement par rapport au reste du site. Si ce n’est pas le cas, il faut revoir la copie !

Plan de cours

A l’issue de cette série de billets , je proposerai un plan de cours sur cinq jours pour l’apprentissage de HTML & CSS auprès d’un public de débutants plus ou moins avancés. Cette formation devrait être idéale pour les webdesigners ou les graphistes voulant aller plus loin que le mode «Aperçu» de Dreamweaver ;-).

Exemple pour la première journée :

1. Lundi

   Matin :

   • Présentation rapide de l’objectif de la formation : exemple de page web à assembler le dernier jours #1,
   • Qu’est-ce que le web (les grands jalons historiques),
   • Qu’y trouve-t-on, (sites web, les blog, pages perso, intranet),
   • La relation client-serveur (comment ça marche, les protocoles utilisés).

   Après-midi :

   • Présentation détaillée de l’objectif de la formation : exemple de page web à assembler le dernier jours #2,
   • Présentation des briques composant l’exemple de la page web sur un support papier distribué aux apprenants,
   • Présentation du code source commenté de la page web en isolant bien chaque brique et en indiquant où elle se situe sur le support papier.

C’est tout pour le moment ;)

PS — Ah, j’oubliais : n’hésitez pas à me contacter pour que nous discutions ensemble de votre projet de formation, que vous soyez débutant, ou pas.

Articles sur le même sujet

• Une solution CSS accessible pour remplacer du texte HTML par une image
• Améliorations cosmétiques et ergonomiques sur ce blog
• Petit bilan statistique du CSS Naked Day
• CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…
• Quel est le coeur de métier de l’intégrateur web ?

Le bonheur est dans le Codex ?

Les exemples de codes disponibles dans le Codex répondent généralement à une majorité de besoins et il suffit souvent de les copier-coller pour obtenir un résultat satisfaisant. Pour aller plus loin, il suffira de vous rendre sur les forums de WordPress pour poser vos questions. Les réponses y sont généralement très pointues si vous prenez la peine de bien poser vos questions ;-)

Les liens contenus dans ce billet pointent vers la version anglaise du Codex. Il existe néanmoins une version française, plus ou moins complète et à jour (ce qui explique ma préférence pour la version originale). J’imagine aussi que la majorité des intégrateurs et des développeurs WordPress ont les compétences nécessaires dans la langue de Richard Stallman William Shakespeare pour se débrouiller ;-)

N’hésitez pas à vous rendre sur WordPress-fr, la communauté francophone du CMS WordPress. Ne ratez pas le blog qui présente les dernières actualités autour de WordPress et faites le tour de la planète WordPress avec une sélection des articles publiés par des blogueurs amoureux de WordPress.

Qu’est-ce qu’un thème WordPress ?

Faire un site avec WordPress revient à faire un thème WordPress. On peut faire un thème totalement fonctionnel avec deux fichiers seulement : index.php et style.css.

→ Using Themes explique rapidement ce qu’est un thème WordPress.

style.css

Le moteur de WordPress attend que votre feuille de style comporte deux ou trois lignes précisant quelques informations. Elles permettront de retrouver votre thème dans les options du panneau d’administration de votre site. Les tags permettent par ailleurs de qualifier votre thème dans le moteur de recherche de thème en donnant des renseignements sur la couleur, le nombre de colonnes, etc., ainsi que sur les fonctionnalités intégrées :

• Post Thumbnails (vignettes miniatures)
• Navigation Menus (menus de navigation)
• Widgets
• Post Formats (format de billet)
• Custom Backgrounds (fonds de page personnalisés)
• Custom Headers (Image d’en-tête personnalisée)
• Editor Style (style pour l’édition des billets)
• Automatic Feed Links

Voici le code permettant à votre CSS style.css d’être reconnue :

/*
Theme Name: WTF
Theme URI: http://css.4design.tl/wtf/
Description: WordPress Theme Framework
Author: Bibi
Author URI: http://css.4design.tl/a-propos/
Version: 0.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post
*/

<?php
$theme_data = get_theme_data(ABSPATH . 'wp-content/themes/default/style.css');
echo $theme_data['Title'];
echo $theme_data['Author'];
?>

index.php

Ce fichier contient les appels de fonction du moteur de WordPress et les boucles PHP permettant d’afficher les contenus. Ce seul fichier peut gérer tout les contextes d’affichage (archives, recherche, page d’erreur, etc.).  Dans la terminologie de WordPress, ces appels de fonctions s’appellent des Template tags, autrement dit, des marqueurs de modèles. Rien de très compliqué, il suffit de se laisser guider par le Codex.

Par exemple, pour afficher le nom du site et sa description, on fera appel à la fonction bloginfo() :

<a href="<?php bloginfo('url'); ?>">
    <?php bloginfo('name'); ?>
</a>

Comprendre la hiérarchie des templates

Si le fichier index.php vu plus haut peut afficher tous les contextes d’affichage (accueil, pages, article seul, catégories, tags, etc.), il est possible de créer autant de fichiers que de contexte pour personnaliser vos templates. Ainsi, si une page.php existe, elle sera utilisée à la place de index.php, c’est la même chose pour tag.php, search.php, category.php, etc.

Ce diagramme montre quel modèle de fichier est appelé pour générer une page en fonction de la hiérarchie des différents modèles.

La hiérarchie des templates dans WordPress. Cliquez pour agrandir l'image.

A Chaque fichier PHP correspond une fonction permettant de tester si l’on se trouve dans un contexte d’affichage ou non. Par exemple, en utilisant uniquement le fichier index.php, on peut mettre un marquage HTML différent pour le contexte des catégories avec is_category() ; des pages avec is_page(), dans une page affichant l’article complet avec is_single(), etc.

→ Lire la page consacrée aux tag conditionnels.

The Loop (1)

Le coeur de WordPress est consitué par la boucle (The Loop). Il s’agit d’un ensemble de fonction qui collecte les variables nécessaires à l’affichage des informations comme le titre de l’article, la date de publication, l’auteur, le contenu du billet lui-même et tout un tas d’autres choses dont l’énumération serait bien fastidieuse.

Exemple minimal de boucle :

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- do stuff ... -->
    <?php endwhile; ?>
<?php endif; ?>

(1) Les titres auxquels vous avez échappé jusque là : Danse avec les loops ; She got the loop, Loop, y es tu ? T’en loop pas une… ;-)

Les marqueurs de modèle (Template Tags)

Il s’agit des variables ramenées par la boucle. Leur utilisation est très simple : il suffit par exemple d’appeller <?php the_title(); ?> pour afficher le titre du billet. De nombreux marqueurs comme the_title() doivent être utilisés à l’intérieur de la boucle tandis que d’autres sont plus génériques et peuvent servir à afficher la barre latérale de votre site, comme get_sidebar() si le coeur vous en dit.

→ Lire Template Tags.

WordPress & Webdesign

J’en profite également pour attirer votre attention sur mon petit blog WordPress & Webdesign (WP 4 Design) où vous trouverez des nouvelles de WordPress sur le même principe que Javascript et Webdesign (JS 4 Design) : des articles brefs mais courts.

Voici en avant-première une ébauche de logo pour l’en-tête de WP 4 Design. N’hésitez pas à me dire ce que vous en pensez. OK, c’est un peu plus qu’une ébauche, mais rien de définitif, surtout en ce qui concerne les couleurs.

Ebauche de logo pour WordPress & Webdesign

Comme d’habitude, j’ai commencé par le commencement, c’est-à-dire le contenu avant de réfléchir à son organisation. En attendant d’avoir pris un rythme de croisière pour mettre en place un design digne de ce nom, j’ai installé Toolbox. C’est un thème minimaliste HTML5 créé par Auttomatic croisé avec HTML5 boilerplate.

Articles sur le même sujet

• WordPress de A à Z — A comme Allons-y ! (on s'organise)
• Quel tarif pour un thème WordPress ?
• WordPress de A à Z — E comme Extensions (les plugins)
• Création de site WordPress de A à Z — B comme Basics
• WordPress je thème

A partir de quel moment a-t-on besoin de graphismes ? Pour Will Burtin, les choses sont très claires :

Quand la simple énumération des faits est insuffisante, laborieuse ou peu claire pour le lecteur et qu’une organisation visuelle s’impose, il faut alors faire appel au graphisme. Celui-ci doit avoir les qualités d’une bonne prose. Sa lisibilité doit être parfaite.

A la lumière de cette citation, on peut conclure que travailler sans le contenu est un non-sens. Les graphismes devrait faire leur apparition lorsque toutes les autres possiblités ont été épuisées. L’absence de graphismes n’est pas l’ennemi du design, c’est peut-être même tout le contraire. Il est souvent bon de s’attarder sur la phase de placement des blocs de contenus et les relations qu’ils entretiennent entre eux.

Le design minimalisme est toujours une bonne option

Les plus sceptiques d’entre vous penseront certainement qu’il est difficile de se tromper lorsqu’on ne fait rien, et qu’à vaincre sans péril on triomphe sans gloire. Certes, mais pourquoi votre client ferait-il les frais de votre envie de faire des dessins un peu partout ? Pourquoi ne pas se contenter de textes noirs sur fond blanc sans autre fioriture graphique que le logo du client ? Je plaisante. Il est évident que votre client est unique et que son site Web devrait refléter cette singularité.

Mais comment traduire cette singularité ? A partir de quel moment se dit-on : «Tiens, là, je fais un truc sobre, ça va le faire», ou «Et puis non , je vais mettre le paquet sur le background» ou encore «Allez hop, je vais lui en mettre plein la vue !» ?

Le Webdesign au kg : je vous en mets pour combien ?

La question du bugdet ne devrait pas entrer en ligne de compte quand il s’agit de créativité, mais force est de constater que les considérations financières ont un impact qui n’est pas négligeable sur le résultat final. Un site Web sobre et/ou minimaliste coûte forcément moins cher qu’un site avec de nombreux graphismes, n’est-ce pas ? Par graphismes, je fais référence à tout ce qui n’est pas uniquement réalisé avec des aplats de couleur, du texte ou des filets réalisé à l’aide de HTML et de CSS.

Les effets CSS3 changent un peu la donne en la matière, mais dans la plupart des cas, les concepts d’amélioration progressive ou de dégradation gracieuse ne sont pas toujours pertinents au regard de l’ouverture d’esprit des interlocuteurs ou de votre movation à faire plusieurs sites pour le prix d’un.

Ceci n’est pas une conclusion

Ce billet est une réflexion en cours, une sorte de prélude pour me motiver à écrire un article sur les différentes manières d’aborder la conception graphique, un peu à l’image du livre Exercices de style de Raymond Queneau. Beaucoup de questions donc, et peu de réponse dans ces quelques notes qui me servent à noter les idées pour lesquelles je n’ai pas encore trouvé l’angle d’attaque qui permettrait de mieux structurer mes idées. Soyez indulgent et n’hésitez pas à apporter votre point de vue dans les commentaires pour faire avancer le Schmilblick.

Articles sur le même sujet

• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Webdesigner est-il ?
• 35 blogs de développeurs web
• Quelques notes sur les éléments graphiques du webdesign
• Et si Photoshop permettait de tester des maquettes fluides ?

Deux mots sur l’algorithme de Google

Le classement des pages par Google tient compte de nombreux critères. Grosso modo, plus les liens extérieurs qui pointent vers vos pages thématiques sont nombreux, plus vous aurez des chances d’apparaitre en bonne position sur ces mêmes thématiques. Le PageRank officialise les choses. A côté de ce principe général, Google pondère ses résultats avec, par exemple, le nombre de clics effectués sur une page par rapport au nombre de fois où elle apparait dans les résultats (consultez les outils Google pour Webmasters pour plus d’information).

Les composantes de l’algorithme de classement des pages par Google. Surveillez votre CTR !

Google utilise déjà une forme d’enchère similaire pour les Adwords : plus votre annonce est cliquée et plus elle apparait en haut des résultats avec un  coût par clic (CPC) à la baisse. Si votre annonce intéresse les visiteurs (qu’il s’agisse de la nature du produit ou de la manière dont vous présentez les choses) Google vous récompense pour vos efforts.

Lisez le blog de Patrice Albertus (Search marketer) pour en savoir plus sur les questions liées au marketing pour les moteurs de recherche.

Aperçu instantané

De la même manière, la fonction Aperçus instantanés va inciter les visiteurs à parcourir les différents aperçus proposés, et ce d’autant plus que l’affichage des aperçus est rapide et généreux, ce qui ne doit pas être un hasard quand on connait la hantise de Google concernant les performances d’affichage de sa page de résultats.

Le visiteur pourra donc faire son choix entre… Entre quoi, au juste ? Ah oui, entre :

• Le design qui lui semblera le plus cohérent avec ce qu’il s’attend à trouver,
• La page qui sera la plus lisible ou la plus avenante,
• La page qui proposera le plus de visuels allèchants,
• La page qui aura le logo ou le motto le plus accrocheur,
• La page dont le design sera plus ou moins moderne en fonction des goûts de l’utilisateur,
• Une site d’apparence institutionnel ou un blogzine,
• Un vrai site ou un MFA ^^
• etc.

C’est la petite loupe à côté du titre qui permet d’activer l’aperçu instantané (Instant Preview). Cliquez pour agrandir l’image.

Le Webdesign, ce n’est pas juste pour faire joli !

Avec la possibilité de comparer le design des pages directement dans les SERP’s, les clics des visiteur risquent d’influer fortement sur le positionnement des pages proposées en première intention par Google. Après la prise en compte de la qualité rédactionnelle, le design et la direction artistique pourraient devenir des éléments fondamentaux (comprendre : pas uniquement pour faire joli) qu’il faudra penser dès le départ pour optimiser l’expérience utilisateur avant même que le visiteur ne se soit rendu sur votre site. Encore une avancée qui devrait rapprocher les différents intervenants de la chaine de production Web !

Articles sur le même sujet

• Ecrire pour Google : des mots-clés au clickrank
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• J'ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j'ai bon ?
• 35 blogs de développeurs web

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

• Publier des communiqués de presse
• Nouveau compte Twitter de Dotpress
• Flux RSS de Dotpress
• Dotclear
• WordPress
• Formats des encarts AdSense
• WordPress 3
• Direction artistique et Design
• Nombre d’Or
• Google Webfonts

Articles sur le même sujet

• WordPress je thème
• Créer son site web avec WordPress de A à Z… avec le Codex
• Direction artistique et Design : deux facettes complémentaires du graphisme
• #WDFR — Imprimez votre grille pour dessiner vos croquis
• Mes thèmes WordPress Basics et Beyond Basics sont sur Github

Direction artistique et Design

Dernière tendance en date dans le design interactif ? Glorifier l’arrivée de la Direction artistique. De nombreuses galeries lui sont dévouées. Il existe même un plugin WordPress pour ça. Malheureusement, de nombreux designers ne comprennent pas la différence entre le Design et la Direction artistique. Plus triste encore c’est la même chose pour de nombreux DA.

C’est la Direction artistique qui permet à votre travail de transmettre un message spécifique pour un groupe particulier de personnes. Elle mélange l’Art et le Design pour provoquer une réaction émotionnelle. Elle est présente dans le cinéma, la musique, les sites Web, la presse magazine, etc. Elle est comme la bougie qui transforme un repas ordinaire en soirée romantique. La Direction artistique est l’art de provoquer la bonne émotion, de connecter ce que l’on voit avec ce que l’on ressent.

Par contraste, le Design est simplement l’exécution technique de cette connexion. Est-ce que ces couleurs vont bien ensemble ? Est-ce que la longueur des lignes permet de lire confortablement pendant une longue période ? Est-ce que cette photo est appropriée ? Est-ce que la hiérarchie typographique fonctionne ? Est-ce que la mise en page est équilibrée ?

Si j’annonce à ma femme que je l’aime en faisant la grimace, elle risque de recevoir un message brouillé. En revanche, si je le lui dit avec un sourire charmeur et un bouquet de fleur, la signification sera plus claire. Dans cet exemple, mon amour est la Direction artistique, tandis que mon sourire et le pourpre des roses sont le Design. Les deux travaillent main dans la main pour nous amener au point où le coeur et la raison se rejoignent.

Voici quelques suggestions qui devaient illustrer les approches différentes entre la direction artistique et le design :

Dans la suite de l’article, Dan Mall demande à collègues travaillant dans le domaine de la direction artistique et du design de proposer leur vision des choses, puis il poursuit avec des exemples illustrés et commentés, riches d’enseignements.

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Cet article est un résumé traduit de l’article Art Direction and Design écrit par Dan Mall pour le magazine A List Apart le 2 novembre 2010. Je suis allé à l’essentiel en essayant de préserver au maximum l’intégrité de l’article à défaut de son intégralité. J’ai «fait» anglais en troisième langue : merci d’être indulgent et de m’indiquer les éventuels contre-sens qui se seraient glissés dans cette «craduction».

Articles sur le même sujet

• Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise
• Quelques notes sur les éléments graphiques du webdesign
• CSS Sans Stress — Une formation intégrateur HTML & CSS
• Créer son site web avec WordPress de A à Z… avec le Codex
• Aperçu instantané de Google, Webdesign et référencement naturel

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

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

• Et si Photoshop permettait de tester des maquettes fluides ?
• 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
• display: table et display: table-cell pour faire une mise en page web ?