CSS & Webdesign » 3615 MyLife

Webdesign Magazine — un Hors-Série n°5 spécial HTML5, CSS3 et jQuery

Bruno Bichet — Fri, 21 May 2010 05:59:51 +0000

Une petite note personnelle pour annoncer la parution du hors-série n°5 du magazine Webdesign (webdesignmag.fr) dans lequel j’ai écris un tutoriel sur la création d’une page web réalisée avec HTML5 et CSS3 sans image, avec une dégradation gracieuse dans les navigateurs ne prenant pas en charge les coins arrondis, les ombres portées ou les dégradés.

En prime, les fichiers HTML et CSS sont disponibles sur le CD du magazine et l’ensemble est disponible pour la modique somme de 12,90€ dans les bons kiosques à journaux ! Cerise sur le gâteau, vous y trouverez une belle interview de Raphaël Goetter à propos d’Alsacréations.

Réussir son site avec HTML5, jQuery et CSS3. 18 tutoriels : vidéo et HTML5, coins arrondis, ombres portées, lightbox, légendes animés et des interviews de professionnels du web ainsi que des dizaines de liens.

100% tutoriels exclusifs sur HTML5, CSS3 et jQuery

Design dans le navigateur et amélioration progressive avec HTML5 et CSS3 : un exemple fonctionnel pour mettre en oeuvre les nouvelles balises en commençant par le balisage du contenu, l’ébauche de la page, le choix des couleurs, la structure générale de la page.

Retrouvez-moi à la page 128 du magazine !

Une interview de Raphaël Goetter pour découvrir le site d’Alsacréations qui propose à côté de son activité d’agence Web, un site communautaire très riche.

Une bien belle interview à propos d'Alsacréations.

Lire WebdesignMag hors série spécial HTML5, CSS3 et jQuery

Articles sur le même sujet

«Link Luv» pour les 12 premiers référents sur 6 218 sources

Bruno Bichet — Mon, 12 Apr 2010 18:04:38 +0000

Selon Google Analytics ce blog a reçu 153 851 visites (sur un total de 733 136) en provenance de 6 218 sources depuis le 26 juillet 2006. Mille Mercis aux 12 premiers référents hors agrégateurs et moteurs de recherche qui ont contribué au succès de css 4 design :

webdesign.2803.com — 3 786 visites
forum.alsacreations.com — 3 700 visites
fran6art.com — 2 951 visites
css.mammouthland.net — 2 939 visites
css.developpez.com — 1 802 visites
peutetreunereponse.net — 1 781 visites
ajblog.fr — 1 569 visites
wordpress-fr.net — 1 477 visites
excargot.net — 1 248 visites
bvwg.actulab.net — 1 133 visites
pnxdesign.com — 1 104 visites
smashingmagazine.com — 1 002 visites

Articles sur le même sujet

Ma vie et mes avis numériques sur la blogosphère «people», le «web beuh zéro» avec parfois beaucoup de recul

Bruno Bichet — Mon, 01 Mar 2010 03:27:13 +0000

Comme Francis Chouquet de fran6art qui a pu acheter le nom de domaine franc.is, j’aurais bien aimé avoir bru.no pour centraliser ma vie et mes avis numériques. Malgré tout, j’ai décidé de rassembler une partie des billets sur AVEC BRIO ! mon nouveau blog un peu plus «perso» que les autres. Vous y trouverez les archives de Notorious Blog et de Zeugme. J’avais lancé le premier fin 2006 dans le cadre de la vente de prestations autour du blogging et qui s’est peu à peu transformé en observatoire de la blogosphère. J’ai créé le second fin 2008 pour garder une trace de textes à tendance littéraire écrits à l’origine sur et pour le «papier». Au final, ces deux blogs ne représentent que deux des nombreuses facettes de mes centres d’intérêts : il me parait aujourd’hui plus avisé d’ajouter des nouvelles catégories plutôt que créer un nouveau blog chaque mois ;)

Mes blog professionnels

En ce qui concerne mes trois blogs «professionnels», ils ont une ligne éditoriale claire :

Tout ce qui concerne la conception de site web, la réalisation de design web et la gestion d’un site web (référencement, mesure d’audience, marketing, etc.) sur css4design où je réserve mes articles les plus fouillés ;
Les trouvailles Javascript pour le webdesign sur js4design
Les ressources pour créer des thèmes WordPress sur wp4design où je commence à trouver un rythme de croisière.

Pourquoi un nouveau blog ?

J’éprouve le besoin d’avoir un espace où ma subjectivité pourrait s’exprimer plus facilement que sur les sujets plutôt techniques que je traite d’habitude. D’où le choix du nom de domaine qui n’est autre que le pseudo que j’avais choisi fin 2005 pour le lancement de mon tout premier blog sur WordPress : mon prénom (bruno) en remplaçant les lettres «un» par le chiffre correspondant).

J’en ai profité pour modifier mon compte Twitter qui passe de @integrateur_css à @br1o pour plus de cohérence : il se trouve que je suis inscris sous ce pseudonyme sur de nombreux services comme Delicious, Friendfeed, LastFM, Mister Wong, Copaing, etc. depuis plusieurs années pour la plupart.

Et Notorious Blog dans tout ça ?

L’avenir de Notorious Blog est incertain. Pour l’instant j’ai fait une redirection permanente vers br1o.fr pour transférer le peu de Google Juice qui reste. Je vais réfléchir à un nouveau projet de Consulting pour la mise en place de blogs professionnels et voir si Notorious Blog est le nom de domaine le plus adapté.

Articles sur le même sujet

Du vert et du fuschia pour mon ancien thème Dotclear !

Bruno Bichet — Sat, 30 Jan 2010 19:56:59 +0000

En surveillant mon e-réputation, c’est au détour d’une interview parue sur Pixenjoy que je suis (re)tombé sur une capture d’écran d’octobre 2007 d’une ancienne charte graphique. Ça fait un peu mal aux yeux mais je me souviens avoir eu de nombreuses opinions favorables à l’époque (si, si, c’est vrai) ;)

A l’époque, je m’étais bien lâché sur le vert et le fuschia (comment ça, trop ?)

Version 2007 de css4design, propulsé alors par Dotclear. Cliquez pour agrandir l'image.

Articles sur le même sujet

NoSushaï — Un thème WordPress pour js4design

Bruno Bichet — Wed, 27 Jan 2010 13:12:35 +0000

Le lancement d’un nouveau blog est un moment délicat dans la vie d’un blogueur. Le risque est grand de ne pas tenir la distance car la régularité s’accommode mal d’un faible nombre de Visiteurs Uniques ou de Page Vues. De ce point de vue, js 4 design démarre doucement mais semble trouver son public. Une chose en amenant une autre, j’ai décidé de lui donner un coup de pouce supplémentaire en l’habillant d’un thème à l’occasion du 77ème jour de sa mise en ligne.

J’avais envie depuis longtemps de rendre hommage à la culture asiatique en générale et japonaise en particulier, à cause (ou grâce) à un art culinaire qui m’enchante depuis le premier Canard à l’Orange que j’ai mangé à l’occasion de mon 14ème anniversaire. Depuis, j’ai enchainé les Sushis et les Sashimis…

C’est dans une tentative de diète que j’ai eu l’idée d’intituler ce nouveau thème NoSushaï pour essayer d’arrêter !

Un thème WordPress très léger

En parlant de diète, ce thème est particulièrement léger puisqu’il est composé uniquement des fichiers index.php, comments.php et functions.php. Pour la mise en page, je me suis laissé tenté par Boks, le générateur de grilles CSS qui s’est occupé de générer un fichier screen.css regroupant les fichiers compressés du framework CSS Blueprint.

NoSushaï en image

js 4 design : les meilleures ressources Javascript pour développeurs web front-end (avec parfois un soupçon de PHP)

NoSushaï, un thème WordPress pour le blog du développeur web fron-end. Cliquez pour agrandir l'image.

J’espère que chemin faisant, je n’ai pas trop dénaturé la culture graphique asiatique.

Après quelques corrections

Il reste toujours un peu de travail sur un thème après sa mise en ligne et quelques modifications s’imposent ;)

Le thème NoSushaï après quelques modifications. Cliquez pour agrandir l'image.

Parmi les modifications apportées à NoSushaï il y a l’ajout d’une zone de widget pour l’encart publicitaire, le format de la date de publication des billets à côté des titres afin d’éviter les alignements disgracieux quand le mois est trop long, et pour finir, la couleur des titres dans la barre latérale qui était auparavant de la même couleur que les liens est passée en bleue turquoise pour éviter les confusions. Par ailleurs, je trouve que cette couleur s’harmonise mieux avec le rose.

Pas de Javascript ?

Ca peut sembler curieux pour un blog sur Javascript et jQuery, mais pour l’instant ce thème ne comporte aucun appel à Javascript en dehors du script Adsense et du script pour afficher les polices de caractère avec Typekit : l’objectif de js4design est de proposer des ressources, pas forcément d’en consommer !

Articles sur le même sujet

Métiers du web — Je suis « enveloppeur web » moi monsieur ;)

Bruno Bichet — Fri, 25 Dec 2009 22:50:00 +0000

Nous disposons de nombreux vocables pour désigner les métiers de l’internet qui tournent autour de la création de sites web : intégrateur web, intégrateur HTML & CSS, développeur web, webdesigner, designer web, etc. Pour affiner la définition de mon profil de poste, j’ai décidé de créer le métier d’enveloppeur web en piochant dans les différentes familles disponibles sur Le portail des métiers de l’internet correspondants aux domaines que je pratique régulièrement ou que j’ai eu l’occasion d’explorer. D’une manière générale, je trouve que les intitulés de poste sont réducteurs, mais en piochant dans plusieurs disciplines, il est possible de s’approcher de la réalité du terrain.

Dans la famille web design et graphisme je demande la carte webdesigner

Le web designer intervient dès le début du projet, il élabore la maquette et produit les différents éléments graphiques du site. A la fois artiste et informaticien, il conçoit l’identité visuelle et la charte graphique des sites sur lesquels il travaille, tout en tenant compte des spécificités techniques du web. À partir de la demande du client, il fait une traduction artistique globale, en lien avec le contenu du site. Créatif et novateur, les priorités du webdesigner sont : le respect du cahier des charges du client et la séduction des futurs utilisateurs des pages web.

Dans la famille Programmation et développement

Je demande la carte Intégrateur (parfois appelé souvent à tord développeur front-office ou développeur front-end) :

L’intégrateur est chargé de mettre en page les choix graphiques et éditoriaux décidés par le chef de projet. Son rôle consiste à monter les pages d’un site web en y assemblant tous les éléments des maquettes graphiques dans le respect des normes et des standards. Pour mettre en page le site web, l’intégrateur s’appuie sur le langage informatique HTML (Hyper Text Mark up Language).

Plus la carte architecte web :

L’architecte Web est un expert technique qui considère ses projets non pas comme un aboutissement mais comme une étape du cycle de vie du Système d’Information de ses clients

Ainsi que la carte développeur (pour la partie Analyse des besoins, Tests et validation des fonctionnalités développées et Formation du client) :

Le développeur web est un informaticien capable d’analyser les besoins des clients afin de concevoir des sites sur mesure ou bien d’adapter des solutions techniques existantes.

Dans la famille Gestion de projet (MOE)

Je demande la carte Chef de projet informatique (Project Manager) :

Il est le garant du respect du cahier des charges soumis par la Maîtrise d’ouvrage en terme de coût, de délais, de qualité et de performance, mais sera également force de proposition tout au long du projet pour d’éventuels ajustements en lien avec les contraintes techniques.

Dans la famille Gestion de projet (MOA)

Je demande la carte Architecte d’information :

Il travaille sur l’organisation des contenus, les cinématiques (enchaînement des pages entre elles) et sur l’interface visuelle. Il garantit la cohérence architectonique du site et optimise la navigation, en se focalisant sur la notion d’utilisabilité et l’expérience de l’utilisateur. Il a une forte sensibilité éditoriale et de bonnes notions d’ergonomie. Il est fortement impliqué dans la maîtrise d’usage.

Ainsi que Chef de projet web :

Le chef de projet web fonctionnel (MOA) gère l’ensemble du projet de création ou de refonte de site pour des clients internes ou externes.

Mais aussi Concepteur web :

Le concepteur Web est avant tout un créatif qui possède une capacité particulière à convertir les idées du client en mots, qui lors de la phase de recommandations se traduisent en réalisations concrètes. Son travail vise à imaginer des solutions et des interfaces les mieux adaptées aux besoins spécifiques du client, qui visent à faciliter le travail des utilisateurs, tout en offrant un meilleur rendement.

Sans oublier la carte E-Consultant Interne :

L’e-consultant interne exerce une fonction de conseil et d’accompagnement, il propose des solutions à ses clients internes sur la manière d’optimiser l’utilisation des nouvelles technologies dans l’entreprise (internet, intranet, extranet, logiciels, équipements informatiques). Le but est de les aider à réaliser leurs objectifs et à résoudre leurs problèmes de fonctionnement

Et voilà ! Maintenant, votre site web, je vous l’emballe ou c’est pour consommer tout de suite ?

Articles sur le même sujet

Nouvelle proposition de logo pour le HTML-FP

Bruno Bichet — Wed, 09 Dec 2009 07:37:29 +0000

J’ai présenté en novembre dernier deux versions d’un logo qui n’ont pas fait l’unanimité. Pour me rattraper, j’ai remis cent fois l’ouvrage sur le métier (oui, j’en rajoute un peu) pour sortir une troisième version et prendre en compte les remarques et les suggestions. J’ai travaillé vite (une petite heure) pour un résultat qui devrait être plus lisible tout en restant ludique et coloré. Cette proposition existe en deux parfums : une version brute d’Illustrator (vectorielle, lisse, etc.) et une version plus organique travaillée dans Photoshop à coup de filtres Textures et Grains.

Logo réalisé dans Illustrator CS3 à l'aide de la police de caractère ITC Avant Garde Gothic Bold pour son tracé géométrique. La graisse du caractère a été augmenté avec l'effet Tracé -> Décalage

Le même logo copié-collé dans Photoshop CS3 et trituré avec le filtre Texture -> Grain -> Type vertical qui permet une foultitude d'effets de vieillissements

Suite aux commentaires de Guillaume S. et krysttof, j'ai réduit le nombre de couleurs de la baseline pour améliorer la lisibilité d'ensemble.

Cette nouvelle version fait suite aux suggestions de MrThieu. Le texte est plus sobre et fait ressortir l'acronyme HTML, ce qui n'est pas plus mal.

J'ai réduit la graisse du texte et revu les approches de groupe.

Conclusion

Je me suis bien amusé à refaire ce logo de différentes manières. Pour ceux à qui cela aurait échappé, je tiens à préciser rapidement l’idée générale qui a guidé mes choix en matière de couleurs et de mouvements.

J’ai considéré le framework comme un jeu de construction de type Lego. Ce qui explique les couleurs vives et l’allure des lettres HTML qui semblent sortir comme un diable de sa boite, comme des marionnettes au bouts des doigts ou encore comme des jouets dépassant du coffre.

Enfin, ça reste certainement très subjectif et je suis sans doute le seul à voir tout ça ;)

Articles sur le même sujet

« css 4 design » — Nouvelle charte graphique et redesign du logo

Bruno Bichet — Fri, 04 Dec 2009 02:38:21 +0000

La nouvelle version de css 4 design que j’avais évoqué dans Screenshot de mon prochain design est en ligne. Il reste des ajustements à faire et quelques pétouilles que je corrige au fur et à mesure. Comme vous pouvez le constater la mise en page est sobre avec une palette de couleurs blanche et grise rehaussée de teintes chaudes. Ce thème se situe à mi-chemin entre le format blog et le style magazine dont j’ai beaucoup parlé à une époque. J’ai gardé la succession des billets et la traditionnelle sidebar qui fait tous le charme d’un blog, avec au-dessus, le début d’un article qui se distingue par une illustration généreuse accompagnée de sa légende.

Grille de mise en page

La grille de mise en page est divisée en 16 colonnes de 42 pixels séparées par une gouttière de 18 pixels pour une largeur de 942 pixels

Ces proportions ont un rapport avec le fait que 42 — comme chacun sait – est la réponse à toutes les questions ;) Je voulais surtout sortir des sentiers battus, c’est-à-dire des designs en 960 ou 950 pixels que l’on trouve généralement dans les frameworks CSS. S’il suffisait de tomber sur des dizaines entières pour avoir des proportions harmonieuses, ça se saurait ! En matière de web design, quelques pixels de plus ou de moins peuvent faire la différence.

Grille horizontale ou verticale ?

Établir une grille verticale n’est pas difficile en soi : il suffit de s’assurer que les valeurs de line-height, de padding et de margin top et bottom, etc. soient des multiples de l’interlignage de base. Dans mon cas, la taille par défaut est de 14px pour le corps du texte et 1.5em pour l’interlignage, soit 21px de hauteur de ligne. Facile, d’autant plus que la plupart des frameworks CSS possède une section typography qui fait presque tout le le travail…

Le problème, c’est que si je trouve que l’alignement des blocs sur une grille horizontale est harmonieux, je suis rarement satisfait par la verticale. Non pas que globalement l’harmonie n’y est pas, mais lorsqu’on se met à lire une page web au lieu de la regarder, il y a souvent des espaces à revoir. Par ailleurs, je n’ai pas envie de m’assurer que la hauteur de mes images est elle aussi un multiple de ma grille verticale…

16 colonnes à la une ?

Ce n’est pas tout d’avoir 16 colonnes à disposition, encore faut-il organiser le contenu dans le respect de l’ergonomie et de la lisibilité globale et résister à la tentation d’utiliser toutes les combinaisons permises par la grille. Tout comme il ne faut pas multiplier le nombre de polices de caractère, il ne faut pas trop disperser l’attention du lecteur.

La page d’accueil

Une grille, c’est bien à condition qu’on ne voit pas qu’elle ! Pour cela, j’ai divisé le header en 4 blocs de largeurs inégales tout en faisant en sorte que le point d’équilibre se situe au mileu de la page.

Des blocs inégaux, mais équilibrés

A la une

Ensuite, un article mis en avant occupe toute la largeur disponible tout en étant lui-même découpé en deux blocs de 8 colonnes chacun. Un pour le résumé de l’article et un pour le visuel qui l’accompagne.

Les champs personnalisés (custom fields) en ont encore sous le pied

Cliquez sur l'image pour l'agrandir

Ce dernier est ajouté via les champs personnalisés. Ils ont mauvaise presse depuis quelques temps mais sont d’une efficacité redoutable lorsqu’il s’agit d’ajouter plusieurs éléments en rapport avec l’article comme c’est le cas ici avec le visuel et sa légende, avec la possibilité d’avoir des éléments par défaut. Le tout est de ne pas en abuser.

Les miniatures

En revanche, l’affichage de la miniature qui flotte au début des résumés des articles est confié à l’excellent get_post_images() proposé par Mehdi Kabab. Ce script est composé d’un jeu de fonctions à mettre dans functions.php. A noter que timthumb est prêt à être utilisé pour redimensionner les images afin d’alléger la page. A ce propos, je regarderais plus tard ce que WordPress 2.9 à dans le ventre en matière de miniatures.

Les billets et la sidebar

Sur la page d’accueil, les billets et la navigation alternative sont à égalité

Cliquez pour agrandir l'image.

J’ai ensuite centré les éléments sur deux blocs principaux occupant 8 colonnes chacun en page d’accueil : un bloc pour l’affichage du résumé des articles et un autre pour la barre latérale qui se divise encore en deux à la fin pour accueillir des contenus de faible largeur, comme les listes de lien, par exemple.

Le footer

Pour le pied de page, je suis parti sur un découpage en 4 colonnes occupant toute la largeur pour rompre avec la monotonie (parfois nécessaire pour une lecture tranquille) et relancer l’attention. C’est peut-être subjectif mais je trouve qu’un découpage en 4 colonnes pour le footer donne un ancrage à la page dans son ensemble. D’autres informations suivent sur la largeur de la page ou la moitié, comme le colophon par exemple.

Un footer en 4 colonnes pour asseoir la page avec un retour de flamme pour inciter à poursuivre la lecture. vers le haut.

La page des articles

Lorsqu’on se trouve dans la page affichant l’article seul, l’article mis en avant disparait ; les proportions changent pour améliorer la lisibilité du billet : 11 colonnes pour le texte et 5 colonnes pour la barre latérale.

Intégration de la grille

Pour rebondir encore un peu sur les questions récurrentes concernant l’utilité d’un framework CSS lors de la phase d’intégration HTML & CSS, je rappelle qu’il est tout à fait possible de travailler avec une grille pour le placement des différents blocs sans pour autant utiliser un framework, comme je le suggère dans Framework CSS sémantique ? Comment je vois les choses.

C’est d’ailleurs ce que j’ai fait ici. Au lieu d’utiliser Blueprint et son fichier grid.css pour caler les blocs sur la grille de base, j’ai opté pour Boilerplate créé par l’un des concepteurs de Blueprint qui propose — mieux qu’un framework — un redesign CSS global ! A charge pour l’intégrateur web d’ajouter les règles CSS de son choix pour que la page web suive la maquette !

Et HTML5, il pue du bec ?

Lorsque j’ai commencé à travailler sur Illustrator, j’avais en tête de réaliser l’intégration en utilisant au maximum les nouvelles balises proposées par HTML5. Comme vous pouvez le voir, à l’exception du Doctype et d’une balise time qui doit trainer quelque part, je suis resté au bon vieux XHML 1.0 ou XHML5 si vous préférez. Les raisons sont à la fois triviales et complexes :

Triviales — malgré ce que j’ai lu — et écris sur ce blog également — sur le fonctionnement du script html5shiv pour qu’Internet Explorer reconnaisse les nouvelles balises, le résultat est parfois aléatoire. Dans mon cas, les problèmes de mise en page rencontrés sur IE8 disparaissaient en basculant sur le mode compatibilité avec IE7… Un comble, qui a suffit pour que j’envoie balader toutes les balises sémantiques.
Complexes — en parlant de sémantique, je me suis bien pris la tête avec ses histoires de header, footer, nav et aside. Sur le papier, c’est assez simple. En revanche, je me suis heurté à des problèmes d’interprétation in real life.

En effet, les balises header et footer ne concernent pas uniquement l’en-tête et le pied du document HTML. Ainsi, au sein d’un article, on peut regrouper le titre et le nom de l’auteur dans une balise header et réserver une balise footer pour les meta-informations comme la date de publication, les tags ou les catégories.

Pour compliquer encore un peu les choses, si l’envie vous prend de mettre une date juste en dessous du titre de l’article, vous pourrez également utiliser un balise footer quand bien même elle serait placée juste en dessous du header de l’article et au-dessus du texte du billet. Et oui, puisque on vous dit que c’est sémantique et que ça n’a rien à voir avec la position ou l’apparence des éléments !

Pour faire court, au bout d’un moment, pour ne pas différer encore la mise en ligne du nouveau thème et prendre le temps de la réflexion pour apprendre les bonnes manières pour baliser correctement un document en HTML5, j’ai repris quelques cuillères à soupe de div !

Peu d’éléments graphiques

Un logo en flamme ?

C’est un logo en flamme, on étudie notre stratégie internet.

So 1997, non ? Pour ceux qui s’en souviennent, il s’agit d’un clin d’oeil concernant une publicité pour les solutions internet d’IBM (voir le pitch). La flamme est un des rares éléments graphiques présent dans le design. L’idée est de laisser le champ libre pour le contenu qui contiendra du texte, des images et des mises en exergues de texte, ce qui sera largement suffisant pour détourner l’attention des plus distraits ;)

Une autre flamme couchée sur le côté répond à la première dans le footer en direction des éléments de copyright et dans un mouvement circulaire pour diriger l’oeil du lecteur vers la partie Miscéllanées.

Les articles sont le nerf de la guerre

Laisser parler le contenu et laissez-lui une chance de se transformer en message

La raison de cette relative pauvreté dans les visuels de la maquette, c’est que je compte travailler graphiquement certains articles pour accentuer le style magazine du blog. Il s’agit de soigner le traitement éditorial et visuel des textes plutôt que multiplier les accroches, les visuels imposants, voire les fils d’information en continu en page d’accueil ! En matière de mise en page, comme dans beaucoup d’autres, il faut laisser parler le contenu pour lui laisser une chance de se transformer en message.

Améliorer les performances globales

Même si les performances web sortent du cadre de cet article, il est intéressant de noter que depuis quelques temps Google met la pression sur tous les fronts concernant les questions liées à la rapidité d’affichage des sites web. De l’amélioration des protocoles réseaux existants, à la mise en place d’outils d’évaluation du temps de chargement des pages, Google devrait intégrer ces données dans son algorithme pour favoriser les pages répondant plus rapidement aux attentes des utilisateurs. Le chemin du designer web est tracé et l’intégrateur doit suivre le mouvement (ou le contraire).

Une des clés pour améliorer les performances se trouve dans la charte graphique

A cet égard, une visite récente sur Google Webmaster Tools m’indiquait un temps moyen de chargement de 4.2 secondes par page avec le thème WordPress Hybrid. (thème minimaliste sans aucune image que j’avais laissé tel quel en attendant). La surprise est venue aujourd’hui, avec un temps moyen de chargement divisé par deux depuis l’installation du thème actuel ! Sans compter la marge de progression : si j’ai commencé à réunir les fichiers CSS dans style.css et il reste la même chose à faire avec les fichiers Javascript.

Application de la grille pour les images des articles

Cette fois, j’ai essayé d’utiliser les outils proposés par WordPress pour l’affichage des légendes des images. Voici tout d’abord un exemple d’une image accompagnée d’une légende à laquelle j’ai ajouté un hors-texte sous la forme d’une balise d’en-tête de niveau 6 (h6) qui flotte à droite de l’ensemble composé par l’image et sa légende (ou tout simplement du texte comme je l’ai utilisé plus haut). Il est aussi possible de faire flotter ce hors-texte à côté d’une image qui ne serait pas accompagné d’une légende.

Parmi les contraintes qui s’imposent lors d’un redesign (6 ou 7 de mémoire sur ce blog en plus de 3 ans), l’historique de la base d’articles existants et les différentes tailles d’images qui les composent n’est pas à négliger. Pas question que les anciens articles voient leur mise en page partir en sucette ! Ce qui est certainement le cas pour certains d’entre eux ; des interventions manuelles seront nécessaires pendant un certain temps… No pain, no gain!

C’est tout pour le moment

Il reste encore beaucoup à dire sur la mise en place du thème. Comme je viens d’installer la beta 2 de WordPress 2.9, je vais laisser passer un peu de temps pour découvrir les nouvelles fonctionnalités avant de les introduire dans le thème.

Je reviendrais vers vous pour une deuxième partie de cet article qui est déjà bien assez long (je m’étais promis de faire court) où j’aborderais les aspects plus techniques comme les boucles WordPress que j’ai utilisées, etc.

N’hésitez pas à intervenir dans les commentaires pour me signaler les éventuels dysfonctionnements qui auraient échappés à ma vigilance ou simplement me dire tout le mal que vous pensez de ma nouvelle charte graphique ;)

Stay tuned and mind the gap!

Articles sur le même sujet

Proposition de logo pour le HTML Framework Project

Bruno Bichet — Wed, 18 Nov 2009 11:14:02 +0000

Suite à un appel à proposition lors du lancement de HTML Framework Project, j’avais proposé en août 2008 deux versions pour le logo de ce projet évoqué à plusieurs reprises sur ce blog.

L’idée principale qui apparait dans les deux propositions est le rappel de l’aspect modulaire en mettant en évidence la notion de construction par bloc.

Articles sur le même sujet

css4design sur developpez.com (extension du domaine des CSS)

Bruno Bichet — Sat, 10 Jan 2009 15:19:06 +0000

Si vous recherchez des informations sur les langages de programmation en général et le développement web en particulier, vous connaissez sûrement le site developpez.com qui propose des ressources aux développeurs web (mais pas seulement). Depuis quelques temps, je dispose de mon propre espace accessible à l’adresse http://css4design.developpez.com qui regroupe quelques articles publiés initialement sur ce blog.

Cette collaboration avec developpez.com remonte à plusieurs mois. Il s’agissait au départ d’accepter la publication de certains de mes articles qui pouvaient intéresser les lecteurs de la rubrique CSS de developpez qui n’ont pas forcément le réflexe de consulter les blogs (manque d’ouverture ? Manque de confiance dans les informations publiées dans un format qui semble moins consistant ou pérenne ? Différence de culture ? Etc.).

Cette collaboration ponctuelle s’est transformée après que Josselin (responsable de la rubrique CSS) m’a proposé d’avoir ma propre url et de gérer mon espace comme bon me semblerait sur développez. Et voilà !

Parmi les éléments qui m’ont décidés — outre le gonflage de mon égo — c’est que chaque article publié sur developpez est accompagné d’une version au format PDF et d’une archive de la version HTML au format ZIP.

L’autre raison, c’est que developpez.com fait partie des sites qui m’ont beaucoup apportés dans la compréhension des langages du web depuis des années et que je trouve normal de contribuer à mon tour à l’effort de guerre pour que les feuilles de style CSS soient mieux comprises et mieux utilisées.

A noter qu’il est possible de commenter les articles que je publie sur developpez sur le forum developpez.net en plus du blog lui-même. La raison est simple : si je maitrise certains sujets, il m’arrive d’aborder des thèmes sur lesquels je suis un peu moins à l’aise ! Par ailleurs, je n’ai pas toujours une disponibilité suffisante pour répondre aux commentaires qui attendent des réponses nécessitant des recherches poussées ;)