Conception de site web

Framework CSS — Sémantique, maquette dynamique et autres notes

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. Voilà en gros l’avantage principal et l’inconvénient majeur qu’on peut dégager si on met de côté le faux problème du poids de ces frameworks. Après avoir donné mon point de vue sur cette question de «sémantique» j’expliquerais comment l’ajout de classes liées à la présentation dans le HTML peut s’avérer très pratique à l’heure du web «sur-mesure». →

HTML & CSS

39 frameworks CSS — Mettez une grille dans votre design

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. Ceci dit, j’aime bien tester les frameworks CSS qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation. Le potentiel didactique de ces projets est très intéressant. Ne vous en privez pas. →

Plugin jQuery

Mise en page automatique avec jQuery Masonry

jQuery Masonry réorganise les blocs de votre page page d’après une grille (de manière verticale et horizontale) pour réduire au maximum les espaces vides entre les éléments qui apparaissent lorsqu’on applique la propriété float sur des blocs de hauteurs différentes. →

Design & Graphisme

Grid — Gardez le contrôle sur votre design web

Les grilles de mise en page font partie de la boite à outils du web designer qu’il s’agisse pour lui de s’y soumettre ou de s’en écarter. Pour faciliter notre travail, Allan Jardine propose Grid, un bookmarklet qui prendra place dans la barre d’outils de votre navigateur préféré (ou pas car pour l’instant Google Chrome n’est pas totalement pris en charge). Plutôt qu’un long discours, voici une capture d’écran de Grid avec les valeurs de la grille que j’ai élaborée pour css 4 design. →

CMS WordPress

Afficher / masquer votre grille de base avec jQuery

Si vous travaillez avec une grille pour harmoniser la disposition des blocs sur la page, vous passez certainement du temps à afficher puis masquer cette grille pour vérifier que tout est en ordre. Pour cela on peut ajouter une classe CSS dans le code HTML ou mettre entre commentaires une ligne concernant le `background` de la page dans la feuille de style… Les deux solutions sont assez fastidieuses. C’est pourquoi, je vous propose une petite astuce toute simple qui s’applique à tout type d’intégration avec toutefois un bonus pour WordPress que vous adapterez sans peine à votre CMS préféré. →

Conception de site web

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié. →

HTML & CSS

table vs div : dis papa, racontes-moi encore les tableaux…

La mise en page des sites web avec les tableaux n’a pas que des inconvénients : ça permet d’obtenir une structure à l’épreuve des balles très rapidement. La mise en page en div (5 légumes par jour, on vous dit…) n’a pas que des défauts : grâce aux CSS, il sera possible de moduler l’agencement des différentes parties de votre design. Bien sûr, tout n’est pas toujours aussi simple : les éléments constitutifs d’un tableau ne sont pas allergiques aux CSS, tandis qu’une structure en div mal conçue au départ ne sera pas vraiment modulable, même avec des CSS. →

HTML & CSS

Frameworks CSS + Reset CSS : design from scratch

Je n’ai pas résisté à l’envie de vous proposer ma traduction de l’article CSS Frameworks + CSS Reset: Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d’un Reset CSS, pour s’affranchir des différences de rendu entre les navigateurs. L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d’éventuels retours sur la traduction, ce billet est en version bêta. →

Design & Graphisme

5 règles simples pour améliorer l’affichage de vos textes

Après avoir passé en revue les thèmes WordPress dans le cadre du SDC, j’ai voulu lister les erreurs les plus communes sous la forme d’un billet sur les *11 erreurs à faire pour être recalés à un concours de webdesign…* Mais, il se trouve que parfois le hasard fait bien les choses : juste avant de fermer mon agrégateur pour un repos bien mérité, je suis tombé sur un titre racoleur. Et là, impossible de résister à la lecture et à l’envie de traduire en direct live cette profession de foi, Alpha et Omega pour tout **webdesigner qui se respecte (et qui respecte ses lecteurs !). Ce billet aurait pu s’intituler : *Lisibilité, ce qui va sans dire, va mieux en le disant*. Mais c’était sans compter le côté obscur de la force qui m’a soufflé un titre bien plus efficace 😉 →