Quand on a besoin d’aide pour un problème d’HTML/CSS ou de Web design, on demande en général de l’aide sur des forums spécialisés. Des sites de questions/réponses spécialisés ont fait leur apparition sur la Toile, on retrouve notamment Stack Overflow (pour les questions de programmation) et ses dérivés (Server Fault est dédié à l’administration des serveurs, Super User est destiné aux utilisateurs des systèmes informatiques).

Lire la suite »

Pour faire la promotion de son blog ou de son nouveau design, il y a rien de mieux que les galeries CSS. Ce sont des annuaires de sites/blogs jolis et valides XHTML/CSS, c’est un peu la bible du webdesigner pour trouver de l’inspiration car les webdesigns sont nombreux et peuvent être triés par thématique, par couleur…

Lire la suite »

(cet article a été écrit par Camille Bouiller, voir son précédent billet pour plus d’informations)

Il existe de nombreuses techniques, plus ou moins fiables, permettant d’optimiser votre site Web (et donc de réduire la bande passante). Mais je vais vous présenter une technique qui marche : le but est de compresser vos fichiers CSS.

Le principe est de réduire au maximum la taille de votre fichier CSS (en enlevant tous les sauts à la ligne, commentaires, etc.). Ce processus est notamment utilisé par les librairies Javascript qui font des milliers et des milliers de lignes de code. Certains sites importants l’utilisent mais ils sont encore rares.

Lire la suite »

« Nous avons scientifiquement déterminé le temps maximum dont vous devriez avoir besoin monter une page en CSS : 47 minutes. Quand votre temps est écoulé, nous vous donnons même le code dont vous avez besoin pour faire un tableau. Ca vous prendra 3 minutes. »

Give up and use tables, le chronomètre qui va vous faire détester les feuilles de style (si ce n’est déjà le cas), à prendre bien sûr avec tout l’humour requis.

Tiens, je m’aperçois que ça fait un petit moment que Presse-citron n’a pas parlé d’outils dédiés au webdesign.

Back to the roots, voici CSS Toolbox, une boîte à outils complète pour l’édition de vos feuilles de style, qui offre toutes les fonctions nécessaires pour travailler efficacement sur ces dernières, à savoir :

• création et édition simple
• formatage et optimisation du code
• validateur et correcteur de CSS
• compresseur de code
• intégration avec le validateur du W3C (l’organisme qui édicte les règles du développement web)

CSS Toolbox est un logiciel gratuit disponible uniquement pour Windows qui me donnerait presque envie de tâter à nouveau de la CSS dis-donc.

(source : Lifehacker)

Un petit coup de flemme au retour des vacances, un site à boucler pour un client impatient ? Allez, y a pas de mal à prendre des modules tout prêts de temps en temps, et économiser quelques heures de travail, non ?

Voici une poignée de jolis menus CSS prêts à l’emploi et gratuits qui ne demandent qu’à faire votre bonheur : servez-vous, c’est cadeau.
Comme ça vous pourrez profiter plus longtemps du barbecue.

Je sais, rien ne vaut un travail fait main avec un bon vieil éditeur de texte et de la CSS montée amoureusement ligne après ligne, classe après classe par un vrai webdesigner aussi compétent que patient.
Mais bon il y a des fois ou, hein, pas besoin de vous faire un dessin (dans Photoshop).
Donc pour ces fois, il existe quand même quelques services web très pratiques qui vous feront gagner du temps et donc normalement de l’argent (c’est important l’argent de temps en temps) en vous mâchant un tout petit peu le travail, ne serait-ce que pour préparer un gabarit ou alléger votre belle feuille de style.
NB : j’ai déjà évoqué certains de ces services, mais je ne les ai en revanche pas tous testés.

Vous voulez générer un template en CSS sans (presque rien faire)

• CSS Creator : Css Creator est un générateur de mise en page qui produit un design fixe ou fluide jusqu’à trois colonnes avec en-tête et pied de page.
• QrONE CSS Designer : QrONE est un générateur et éditeur de CSS en ligne.
• CSS Mate : Idem.

Vous avez fait le job mais vous voulez optimiser votre feuille de style

• CSSTidy : CSS Tidy est un parseur et optimiseur open source de CSS.
• CleanCSS : CleanCSS est un puissant optimiseur et "allégeur" de CSS en ligne.
• CSS Optimizer : Idem ou presque.
• CSS Analyzer : vous permet de vérifier la validité de votre code CSS au regard des standards du W3C.

Vous voulez utiliser des gabarits prêts à l’emploi ou vous débutez et vous voulez voir sous le capot comment c’est fait

• Layout Gala : propose 40 gabarits de toutes sortes (fixes, fluides, nombre de colonnes variable, etc…)

Mes favoris (ou en tout cas ceux que j’utilise de temps en temps) : CleanCSS et Layout Gala.
Et oui je suis paresseux que voulez-vous, mais surtout je fais de moins en moins de webdesign…

Vous avez fignolé des heures durant cette belle maquette de page web pixel par pixel et l’idée de devoir maintenant presque tout reprendre à zéro pour convertir tout ce bazar en fichier HTML avec la feuille de style qui va bien vous file de l’urticaire ?

Qu’à cela ne tienne, voici PSD2CSS Online, un service en ligne qui fait le boulot pour vous : c’est gratuit et sans inscription, il vous suffit de télécharger votre fichier Photoshop (jusqu’à 8 Mo) sur le site et quelques secondes plus tard vous récupérez une archive ZIP dans laquelle se trouve un fichier index.html accompagné de sa feuille de style au standard XHTML.
N’ayant pas Photoshop sur mon portable, je n’ai pas pu tester et j’ai donc essayé avec un autre format graphique, ce qui n’a pas donné grand chose.
Je ne comprends pas trop quelle est la méthode employée par ce script pour déterminer les découpes et les blocs mais je suppose qu’il est fondé sur l’identification des calques dans Photoshop, et qu’il reconstitue la page à partir de ces éléments, ce qui me paraît pour le moins empirique car un empilement vertical de calques n’a pas forcément de correspondance avec un alignement de blocs.
Rappelons également que Photoshop est doté d’origine d’une fonction permettant d’exporter ses graphismes au format HTML+CSS, à condition d’avoir préalablement défini des découpes, même si le code fourni n’est pas un modèle de propreté.

Vous ne supportez plus le minimalisme généralisé (mais efficace) de l’interface des applications Google, et notamment celui de Gmail ?
Qu’à celà ne tienne, des extensions Firefox sont là pour vous permettre d’appliquer une charte graphique différente à vos sites préférés.
C’est le cas de Gmail Redesigned pour Stylish, qui vous permet entre autres de rhabiller Gmail en lui donnant un look complètement différent, que certains jugeront plus agréable à l’oeil et plus actuel.

Pour installer l’extension, téléchargez d’abord Stylish puis Gmail Redesigned, activez l’extension dans Outils > Modules complémentaires, fermez et redémarrez Firefox.
Ce qui pose d’ailleurs la question de la volatilité du webdesign, quand on sait que la moindre petite extension gratuite peut permettre de changer intégralement l’aspect d’un site en un clic…

(via Blogoscoped)

Ces gourous du CSS c’est rien que des branleurs qui font des trucs impossibles juste pour humilier le webmaster moyen : sélectionnez l’intégralité du texte ci-dessous, ou seulement une partie en faisant glisser votre souris de haut en bas (par exemple)…

Attention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, u
n Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-cit
ron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache
 derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce
 texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttent
ion, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Pres
se-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se
 cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derri
ère ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texte
Attention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, u
n Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-cit
ron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache
 derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce
 texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttent
ion, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Pres
se-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se
 cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derri
ère ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texte
Attention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, u
n Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-cit
ron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache
 derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce
 texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttent
ion, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Pres
se-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se
 cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derri
ère ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texte
Attention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, u
n Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-cit
ron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache
 derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce
 texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttent
ion, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Pres
se-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se
 cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derri
ère ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texte
Attention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, u
n Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-cit
ron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache
 derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce
 texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttent
ion, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Pres
se-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se
 cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derri
ère ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texte
Attention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, u
n Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-cit
ron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache
 derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce
 texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttent
ion, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Pres
se-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se
 cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derri
ère ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texte
Attention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, u
n Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-cit
ron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache
 derrière ce texteAttention, un Presse-citron se cache derrière ce texteAttention, un Presse-citron se cache derrière ce

Etonnant non ? Si vous voulez faire ça avec votre image, c’est par ici.
(via Lifehacker)