Conception de site web

Les frameworks CSS sont le nouveau format A4

Les logiciels de création graphique proposent un menu Fichier avec une entrée Nouveau pour créer un nouveau document en réglant des paramètres comme la taille, la couleur de fond, le nombre de couleur, la résolution, etc. J’ai déjà abordé la question des paramètres par défaut pour le Webdesign dans l’article Quelques notes sur les grilles de mise en page et je me demande aujourd’hui dans quelle mesure les frameworks CSS peuvent être considérés comme l’expression des réglages de base pour commencer la création d’un site Web ? →

Conception de site web

Frameworks CSS + Mockup = Mockup CSS

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

Design & Graphisme

#WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday

La dernière rencontre Twitter de la communauté du Webdesign francophone (WDFriday et #wdfr) était consacrée aux frameworks CSS. J’ai été surpris de voir à quel point ils semblent peu employés au regard des critiques dont il font l’objet. L’argument le plus valable que j’ai relevé est qu’un bon intégrateur Web n’a pas besoin de framework CSS. Ce n’est pas faux et c’est d’ailleurs valable pour tous les frameworks ! Un bon développeur front-end n’a pas besoin de jQuery ou de  Mootools et un bon développeur Web n’a pas besoin de Symfony ou de Ruby On Rails, nous sommes bien d’accord. →

HTML & CSS

Manifeste pour la création des éléments LOGO et MOTTO dans HTML5

Ce manifeste pour la création des balises `logo` et `motto` dans une prochaine révision des spécifications HTML5 — puisque rien n’est fixé pour l’instant, nous dit-on —  est né du constat que le nom du site et sa tagline se retrouvent sur la quasi-totalité des sites web sans qu’aucun marquage HTML spécifique ne leur soit dédié. Je regrette que les concepteurs des standards du web n’aient pas fait d’entorse à leur régime 100% structurel. Il semble pourtant assez facile de créer les balises `logo` et `motto`, ce qui  aurait  le mérite d’être assez rigolo, en plus d’être utile. →

HTML & CSS

Dégradés CSS3 WYSIWYG avec Ultimate CSS Gradient Generator

Ultimate CSS Gradient Generator est un éditeur de dégradés mis au point par Alex Sirota (ColorZilla) qui permet de générer les déclarations pour vos dégradés CSS3 via des sélecteurs de couleurs et des curseurs très proches de l’Outil Dégradé de Photoshop. Quelques réglages préétablis sont disponibles mais la création d’un dégradé personnalisé est très intuitive. La fenêtre de prévisualisation permet de modifier l’orientation verticale ou horizontale du dégradé, et le code CSS est mis à jour automatiquement à chaque modification avec une petite pensée pour Internet Explorer. →

HTML & CSS

Comment j’utilise les listes de définitions HTML

Les listes de définition `dl` permettent de créer une relation entre un terme et sa définition. L’utilisation la plus évidente de cet élément est le «glossaire» avec, par exemple, le terme à définir dans la balise `dt` et sa définition dans la balise `dd`. Les spécifications sont relativement claires à ce sujet et proposent même d’élargir son utilisation au dialogue entre les protagonistes d’une pièce de théâtre, aux instructions à suivre, à une FAQ avec question(s)/réponse(s), etc. On le devine, mais ça ira mieux en le disant : il est possible d’associer un ou plusieurs `dt` à un ou plusieurs `dd` dans un `dl`. →

HTML & CSS

PXtoEM : Conversion Pixel — EM

PXtoEM est un outil simple et pratique créé par Brian Cray qui permet de connaitre les correspondances entre les tailles de polices de caractère exprimées en pixels avec les autres unités que l’on rencontre sur le web comme les EM’s, les pourcentages ou les points. Cette dernière unité, plus particulièrement utilisé dans les documents destinés à l’impression, trouvera à s’exprimer dans votre feuille de style destinée à l’impression. →

HTML & CSS

Conventions de nommage pour les CSS — identifiants et classes — de votre site web

Le nommage des identifiants et des classes est une question à laquelle l’intégrateur web est confronté chaque fois qu’il démarre un projet. Dans l’idéal il faut trouver des intitulés d’identifiants et de classes reflétant la signification des contenus qu’ils enveloppent. A cet égard, #publicite-principale est plus judicieux que #publicite-en-haut-a-droite dans la mesure où l’emplacement de la publicité — fut-elle principale — peut être placée à différentes endroits stratégiques. Pour nous aider à y voir plus clair, Andy Clarke (revisitant Eric Meyer) a eu la  bonne idée de partager ses réflexions sur le sujet (dès 2004) sous la forme d’une proposition de convention de nommage pour les identifiants et les classes susceptibles de faire partie de la majorité des projets web. →

HTML & CSS

30+ éditeurs HTML plus ou moins WYSIWYG

Qu’il s’agisse de créer une page web ou de permettre aux utilisateurs de mettre en forme leurs articles ou leurs commentaires, on a toujours besoin d’un éditeur HTML à consommer sur place ou à emporter. Voici une sélection de plus de 30 éditeurs HTML (tirée en grande partie de ma liste des 1000 ressources pour webdesigner) qui devrait occuper les longues soirées d’automne qui s’annoncent. →