Si vous suivez ce blog depuis quelques temps, vous aurez remarqué que j’aime changer de thème WordPress assez fréquemment. Non seulement, je m’ennuie en général assez vite d’un nouveau design mais le thème en lui-même n’est pas bien construit. D’un côté, j’aime varier l’aspect purement graphique de mon site et je construis par conséquent le thème derrière. Mais ce dernier est rarement optimisé. Par exemple, le dernier contenait uniquement un fichier index.php (mis à part les fichiers d’inclusion du type header,footer, comments…). Vous aviez donc la même page selon que vous naviguiez sur la page d’accueil, la page d’un post ou la page des archives. Une grossière erreur d’ergonomie.

Les précédents thèmes

• bbxcloud
  Mon tout premier thème. Du bleu, du vert, du blanc, et des nuages. Il me fallait apprendre à créer un thème WordPress et à créer une structure de blog. Elle s’avérait au final très bancale.
  
• bbxland
  Trois colonnes, et un paysage en guise de header. Ajout d’une 3ème couleur (l’orange) et de plusieurs plugins. Et déjà aucune différenciation entre page d’accueil, page de post, page d’archives…
  
• bbxrevision
  Il tient son nom du site où j’avais vu ce type « d’étiquettes » sur le côté. J’ai gardé le système à 3 colonnes en allégeant relativement celle de gauche. Toujours pas de différenciation (home,post,archives…)
  

Le nouveau thème : bbxhudson

Mon objectif était avant tout de réaliser un thème long terme, que je ne modifierais pas dans quelques mois. Il fallait donc qu’il soit déjà très fonctionnel.

Différenciation

Chaque type de page a sa structure personnelle :

• la page d’accueil est en 2 colonnes (avec à droite les infos générales du blog)
• arrivé sur la page d’un seul post, cette colonne de droite obtient les infos du post ainsi que les commentaires, pour gagner en hauteur
• les pages d’archives (en parcourant une catégorie) ont un titre, une description de la catégorie ainsi qu’une liste des posts sous forme de mosaïque
• la page bdbx, pour son contenu particulier, utilisera une mosaïque d’images
• la page de tags est identique à celle des archives, avec pour différence la présence d’un nuage de tags en haut, pour faciliter la navigation
• une page 404 fait son apparition, en espérant que vous n’ayez pas à tomber dessus

Design élastique en css

Le plus grand challenge a été de réaliser ce thème avec un design élastique. Il n’est pas fixe (largeur définie en pixels), ni fluide (largeurqui s’adapte à la taille de la fenêtre). Il est élastique : la largeur des blocs dépend de la taille du texte, car définie en em. Il est rare de voir ce genre de design parce qu’il est plus compliqué à mettre en place que les autres. Parmi les sites qui l’utilisent, il faut citer l’excellent SimpleBits, le très typographique site de Jon Tan ou bien l’incontournable blog de Fred Cavazza.

A quoi ça sert ?

En modifiant la taille du texte (Ctrl+molette vers le haut ou le bas), les blocs s’adaptent à la taille du texte. Ca permet à ceux qui veulent agrandir le texte de le faire tout en gardant une structure correcte. On a l’impression que c’est un véritable zoom, mais il n’en est rien. Cette méthode marche même sous Internet Explorer.

J’aurais pu refaire un design fixe, comme d’habitude. Mais j’ai profité ce nouveau thème pour apprendre à utiliser les em. Je l’ai fait en lisant (et relisant) cet excellent post : The Incredible Em & Elastic Layouts with CSS.

Vertical Rhythm

En supplément de l’utilisation des em pour la typographie et pour la largeur des blocs, je me suis intéressé à adopter une structure verticale, que l’on appelle en anglais vertical motion (ou vertical rhythm).

Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

Que ce soit les titres, les paragraphes, les listes, les citations… tous ces éléments ont une hauteur multiple de 24. Cela se voit surtout sur la page d’un seul post, où il y a 2 colonnes.

Il y a donc pas mal de changements dans ce dernier thème. J’en ai profité pour mettre à jour mon tutoriel de menu 100% css et je compte prochainement rajouter un theme switcher, ainsi qu’un footer (à l’occasion 😉 ).

Des étudiants de Washington ont développé une technologie qui permet d’améliorer considérablement la qualité des vidéos en leur associant des photos de la même scène. L’amélioration de la qualité est extraordinaire.

Il est alors possible d’utiliser des techniques habituellement réservées à la photographie : retouche d’image, exposition, effets « Photoshop »… et surtout faire disparaitre un objet de la scène ! Allez voir ce projet génial : Video Enhancement.

Si vous comptez développer une application pour iPhone et que vous voulez créer des ébauches de l’interface, utilisez donc ce PSD de l’interface de l’iPhone. Quasiment tout y est : boutons, clavier, liste déroulante, barre de progression, liste alphabétique… et bien sûr, l’iPhone lui-même avec plusieurs écrans déjà prédéfinis.

C’est très pratique car on se rend compte au pixel près de l’espace dont l’on dispose. Par exemple, si l’on décide de faire afficher le clavier, quel espace reste-t-il pour l’application ?

Non seulement, ce psd est complet, il est aussi graphiquement très proche de la réalité, et le fait que la plupart des éléments soient en vectoriel est un plus non négligeable. Gardez bien ce lien dans vos favoris car le psd sera régulièrement mis à jour par leurs auteurs.

Au programme cette fois-ci, un super telephone Samsung, un gateau intergalactique, un tres beau Linux, une aventureuse page 404 et le manuel du Red Ring Of Death.

Deballage du Samsung Omnia

Gateau Millenium Falcon

Dans la culture geek, je demande les gourmands artistiques. Il y a eu des gateaux Mario ou Portal, voici le cake Millenium Falcon.

Interpid Ibex : un mockup d’Ubuntu

Une version tres classe d’un bureau Ubuntu, plutot destinee aux Mac users. C’est pour l’instant un simple design, purement graphique.

Le parcours 404

Vous etes perdu ? Ce parcours 404 vous aidera a retrouver votre chemin.

Manuel du Red Ring Of Death X360

Le Red Ring Of Death possede son propre mode d’emploi : que faire lorsque votre X360 vous lache ?

PS : vous l’aurez remarque, il n’y a pas d’accent dans ce post parce que je suis sur un clavier qwerty. J’ai cherche, en vain, un « convertisseur » qwerty/azerty en ligne, qui permettrait de « traduire » l’action de mes touches. Je n’en ai pas trouve parce que c’est en general une question de hardware, mais si vous connaissez une solution software, je suis preneur, par simple curiosite (autre qu’en passant par l’OS car ce dernier ne m’a pas aide du tout).

En parcourant le net, je tombe souvent sur des phrases très intéressantes, qu’elles proviennent d’un site, d’un article, ou d’un commentaire. Mais « blogger » dessus semble peu approprié car une seule phrase ne peut pas fournir un article. Je pense néanmoins qu’il faut le partager et c’est pour ça que j’ai décidé de lancer sous forme de micro-blog le site Words On Design.

Utilisant comme moteur Asaph (le même que pour Alt-Tab), Words On Design sont des extraits de blogs ou de discussions qui concernent le web design. L’essentiel du site réside dans ces phrases, dans leur contenu, et dans leur contexte (accessible en cliquant dessus). C’est pourquoi le flux rss est aussi (voire plus) important que le site en lui-même.

Words On Design (dont le nom provient de « Joel On Software ») intéressera je l’espère tous les web designers parmi vous.

Quel est le point commun entre ces 3 photos ?

Vous l’aurez deviné : c’est du vectoriel !

Vous connaissez peut-être ces 3 graphistes surdoués :

• Takashi Morisaki
• Yukio Miyamoto
• Ann Paidrick

Le premier m’avait été présenté lors de ma formation de web design. J’avais alors bluffé puis dégoûté par Illustrator. Pourquoi utiliser un logiciel que vous ne maîtriserez jamais aussi bien que ces 3 personnes là ? 🙂

Leurs illustrations sont véritablement photoréalistes.

Vous l’aurez peut-être remarqué si vous trainez parfois sur le site, j’avais ajouté un sélecteur de thèmes dans la colonne de droite. Il y avait 2 thèmes, et c’était un truc tout bête en javascript : en cliquant sur l’un des liens, ça changeait la « class » du body, et grâce à l’arborescence en CSS, ça changeait le fond du site. Malheureusement, dès qu’on changeait de page, ça revenait au thème par défaut.

J’ai donc demandé à quelqu’un qui s’y connaissait en JS pour ajouter une fonctionnalité pour sauvegarder le choix dans un cookie. Merci à Sylvain de m’avoir aidé. J’en ai profité pour rajouter un 3e thème, histoire de donner un peu le choix.

Choisir des couleurs pour son site, c’est cool, parce qu’il n’y a pas de limites. Même si l’on est parfois contraint de respecter une certaine homogénéité lorsqu’il s’agit d’un client ayant déjà une charte graphique définie (même partiellement), les couleurs (et surtout leur association) sont un terrain de jeu quasi infini.

Mais le web, même si il est très graphique, reste un support pour le contenu. Et le média le plus répandu reste le texte. Dans ce cas là, le choix des couleurs doit tenir compte de certaines règles en matière de contraste pour éviter de rendre difficile voire impossible à lire votre site web. Le W3C possède une formule pour analyser ce contraste.

Analyser le contraste de son site

AccessColor est un outil gratuit qui analyse les CSS de votre site pour vérifier le contraste entre le texte et le fond. Il évalue alors la différence de luminosité et le contraste (en utilisant le formule du W3C). Mais il ne marche pas pour les images de fond. Mon site, comme vous le voyez, obtient un très mauvais score.

Analyse AccessColor de bbxdesign

Trouver des couleurs suffisamment contrastées

Autant l’outil précédent est utile pour analyser, autant il ne permet pas de décider quelles couleurs utiliser à la place. C’est là que Particletree entre en jeu. En utilisant là encore la formule du W3C, ils ont écrit une fonction en PHP pour définir la couleur d’un élément en fonction de la couleur de fond. Bien sûr, tout ceci est dynamique.

Wufoo Charts

Exposition curieuse et drôle à Eindhoven : It’s always six o’clock par 0100101110101101. Lorsque des objets ordinaires prennent mystérieusement vie…

Cet évènement s’illustre à travers le monde sous différentes formes.

Obama et les unes des journaux

Pas loin de 700 couvertures de journaux dédiées à Obama, le lendemain de sa victoire.

Le New York Times titre en 96pt

C’est la 4e fois (après le 1er pas sur la Lune, la démission de Nixon et le 11 septembre) que le NY Times titre aussi gros typographiquement.

Via Kottke

Château de sable Obama

Même à l’autre bout de monde, l’impact se fait ressentir.

La crise apporte son lot de changements économique, stratégique, mais aussi graphique.

Vous savez sans doute que le bouton de Google « J’ai de la chance » leur coûte $110 millions par an ? Et bien, un autre bouton lui vole la vedette! Je vous présente le bouton qui vaut 300 millions de dollars!

Ca se passe en 2004. Il s’agit d’un redesign très léger dans le processus d’achat d’un site de e-commerce. Les deux acteurs sont Best Buy et Luke Wroblewski (Interface Designer dont le blog est excellent).

Un problème de formulaire

Le problème : beaucoup d’internautes ont du mal à finaliser leurs achast à cause du formulaire qui apparaît en début de processus. Ce formulaire consiste en 5 éléments:

• 2 champs : Email et Mot de passe
• 2 boutons : Se connecter et S’inscrire
• 1 lien : Mot de passe oublié

Tout le monde avait des problèmes :

• les nouveaux arrivants étaient réticents quant à l’idée d’avoir à s’inscrire avant de faire quoique ce soit
• certains nouveaux arrivants ne savaient pas si ils étaient déjà venus auparavant et tentaient de se connecter avec leur adresse mail
• même les habitués avaient du mal à se souvenir de leurs informations

Le formulaire, qui était là pour aider les gens (parce qu’il permettait de garder ses infos si on revenait régulièrement), était au final un obstacle à l’achat.

Une solution toute simple

La solution s’est avérée être particulièrement simple (du moins, dans son application) : le bouton « S’inscrire » a été remplacé par un bouton « Continuer » suivi d’un message.

Vous n’avez pas besoin de créer un compte pour faire des achats sur notre site. Cliquez simplement sur « Continuer » pour accéder au paiement. Pour accélérer vos achats futurs, vous pouvez créer un compte pendant le processus de paiement.

BAM! $300 millions de gagnés.

J’ai remarqué ce matin une refonte des boutons Gmail. Je pensais d’abord à une mise à jour de Chrome qui stylerait différemment les input « button ». Mais en regardant sous Firefox, j’ai constaté le même redesign.

J’apprécie particulièrement les boutons « Move to » et « Labels » qui se débarassent de leur scroll irritant.

Depuis le temps que je veux en faire un… Voici enfin mon portfolio. Il m’aura fallu :

1. Regrouper et trier mes travaux en 3 catégories (web, graphisme, intégration)
2. Créer une interface simple mais sympa
3. L’intégrer sous forme de page et sous-page WordPress (en essayant de garder un maximum dynamique)
4. Trouver un système de galerie léger et sympa : slideViewer
5. Créer des images pour cette galerie (en cours)

Voici le résultat :

L’excellent site du NY Times propose un prototype de présentation différente de l’information.

Petit à petit, KDE semble devenir la distribution l’environnement de bureau à absolument adopter pour Linux. Que ce soit au niveau fonctionnel ou au niveau graphique, comme avec le thème AIR par Pinheiro :

Les jeux vidéo sont une grande source d’inspiration pour beaucoup de graphistes. Le côté culte couplé aux talents de dessinateurs offrent souvent d’incroyables rendus, comme ces wallpapers d’Orioto :

Ces créations, mêmes statiques, me laissent espérer que les développeurs (notamment la Sonic Team…) s’en inspireront fortement. Je doute que les capacités actuelles de hardware soient insuffisantes pour arriver à ce rendu.

Imaginez que cette image de Zelda soit tirée d’un véritable gameplay? Ce serait délicieusement envoûtant…

Source : Lifehacker

En uploadant une image sur le Colors Palette Generator de CSS Drive, vous obtenez un 4 nuanciers différents, ainsi que des fichiers CSS et .aco (pour Photoshop) associés.

Un exemple en utilisant une de mes photos prises récemment à New York:

Pour les Mac users d’entre vous (je sais qu’il y en a au moins un… 🙂 ), un fond d’écran spécialement conçu pour vous.
Bien sûr, vous pouvez l’installer sous Windows mais l’esprit y est moins…

Via SimpleBits

Je viens de découvrir sur 2803 que Axa avait fait une refonte de son site. Ce qui m’a le plus surpris dans le post de 2803, c’est que ce soit un post sponsorisé (traduisez par « post subjectif et honteusement élogieux »). Parce que la nouvelle version du site d’Axa ne manque pas de lacunes.

Un carrousel bien lourd

Malgré le fait que Flash gère le streaming, l’internaute doit attendre d’avoir bien chargé les 7 livres virtuels pour voir s’afficher quelque chose (presque 10 secondes d’attente). Même si l’effet « carrousel » est sympathique à voir, il est très loin d’être pratique. Et si les pages derrière ne suivent pas en terme de design et d’ergonomie, je ne vois pas l’intérêt d’inciter l’internaute à cliquer si ce n’est pour le perdre à la page suivante.

Pourquoi un menu en Flash ?

L’élément qui m’a surpris en premier est le menu de gauche, en Flash. Pourquoi en Flash? Pour le pivoter bizarrement et le rendre presque illisible (lisez-vous « Entrer vos mots clés » qui d’ailleurs devrait être « Entrez vos mots clés »)? Le fait qu’il soit pivoté suggère qu’il n’est pas intéractif, alors qu’il l’est.

Et le champ de recherche prédictif qui fait partie de ce que l’on peut considérer comme « l’état de l’art de ce qui peut se faire en terme d’interfaces riches » (si je reprend les mots du post de 2803) aurait facilement être réalisé en JS, et il en aurait été bien plus lisible.

Disposition bancale des éléments de navigation

Axa est à la fois banque et assurance. On peut accéder à l’un ou à l’autre en cliquant sur l’un des liens placés au-dessus du carrousel. Au lieu de dire « placés » je devrais dire « flottants » parce qu’ils semblent avoir été déposés là malencontreusement. Il faut d’ailleurs attendre que le carrousel ait été chargé en entier pour enfin voir ces liens qui a priori sont primordiaux. Et ne cliquez pas sur « Banque » car vous vous retrouverez sur un autre site (sans que cela soit indiqué…).

Et le reste…

Les pages intérieures du site mériteraient que l’on s’y penche très longuement. Les erreurs d’ergonomie sont multiples : checkboxes utilisées à mauvais escient, mauvaise présentation de l’information, incohérence du contenu…

Ce qui me choque le plus est qu’un bon blog comme 2803 ai décidé de jouer au jeu du post sponsorisé, qui n’est rien d’autre qu’une fenêtre de communication privilégiée, où la charte habituelle du blog s’efface devant les intérêts de l’entreprise commanditaire. Je continuerai bien sûr de lire 2803 qui regorge de très bons articles, mais j’espère vraiment ne plus voir ce genre de post.

PS: ne désactivez surtout pas JS pour aller sur le site d’Axa… Vous verrez ceci :

Il y a souvent par ci, par là, des posts traitants de cartes de visite originales. Card Observer en regroupe sous forme de galerie. Le site est simple et sympa, même si j’aurais apprécié une navigation plus originale et plus pratique entre chaque carte (avec au moins un aperçu).

C’est quoi ?

Si vous trouvez que le web est difficile à lire, que ce soit à cause de la taille, la police, les couleurs, les marges… voici un outil qui peut vous faciliter la vie. Readability est un bookmarklet qui transforme n’importe quelle page web en un texte bien présenté.

Exemple

Exemple avec un article de A List Apart :

Readability enlève tout le contenu annexe, contextuellement (navigation) et visuellement (images), pour ne laisser que l’essentiel de la page : le corps du texte.

Prendre A List Apart n’est peut-être pas particulièrement pertinent car la présentation du site est déjà excellente en soi, mais j’ai pris cet exemple parce que le contenu y est long et intéressant, et c’est la cible de l’outil Readibility.

Stylez et bookmarklettez

Vous pouvez choisir le style de vos pages, en jouant sur la typographie, les couleurs, la taille et les marges. Puis vous drag-droppez le bookmarklet pour l’utiliser dès que vous visitez une page au contenu intéressant mais mal présenté.

Instapaper-like

Ca me rappelle forcément Instapaper, cet outil qui, en un clic, sauvegarde une version texte de la page pour la rendre disponible par la suite, sur le site, et en offline sur l’iPhone. Un must (gratuit qui plus est).

Je viens de tomber sur un site assez fou: iconPot.

Ce site recense des packs d’icônes gratuites et utilisables à des fins commerciales. Une mine d’or pour les web designers freelance!

jQuery gestures est un plugin qui permet de naviguer en dessinant avec la souris.

D’abord, activez le plugin (en cliquant sur le lien ou en maintenant la touche Ctrl enfoncée pendant que vous dessinez).

1. Image suivante

Cliquez, déplacez vous vers la droite, puis relâchez. Hop! Vous êtes sur l’image suivante.

2. Ouvrir la page Flickr

Vers le bas, puis vers la gauche, et la page Flickr s’ouvre.

3. Afficher/masquer l’aide

Bas, haut, droite bas (on dirait un cheat code). Et ça forme un « h ». J’adore.

Je trouve cette utilisation de jQuery particulièrement intéressante. Il faut voir maintenant si on peut le mettre en pratique à d’autres fins.