A World in Progress

Etat des lieux

2007-09-02T23:57:00+02:00

Cela fait bientôt un mois que le blog a ouvert, et il temps de faire un petit bilan des avancées du site, de ce qu'il reste à faire, et de l'avenir du blog. Le site sur lequel vous êtes actuellement n'est pas encore arrivé à maturité selon moi.
De nombreuses améliorations vont rythmer vos journées sur le site.

Au fil des jours, les billets s'accumulent, et le site commence à prendre son essor, mais je ne vais pas vous cacher que je cherche toujours le rythme (mais je ne m'inquiète pas trop de ce côté, cela viendra avec le temps).

Nom du site

Le premier changement sera le nom du site, "A World in Progress" est certes un beau clin d'oeil au monde artistique, mais reste un nom relativement long, pas assez unique, et qui peut être difficile à prononcer. Je suis toujours dans mes recherches pour trouver le nom qui pourrait caractériser mes billets, pour le moment, je trouve "Eingenious" (qui peut se décliner sous plusieurs formes avec plusieurs sens : E-Ingenious, avec le côté technologique mis en valeur, Ein genious, qui donne l'idée de billets uniques et captivants), mais quelques idées me font hésiter, le mode autour du "ous" (del.icio.us, ou script.aculo.us) me gêne, puisque le blog n'est pas censé être un espace temporaire, mais bien un domaine qui durera le plus longtemps (je l'espère), mais aussi un nom peut-être difficile à prononcer.
Si vous avez des idées, n'hésitez pas à donner votre opinion sur ce sujet.

Hébergement et NDD

Bien, parlons de l'hébergement et du nom de domaine.
Le site est actuellement hébergé sur les serveurs Free, c'est loin d'être un serveur de qualité, et ne fait pas partie des tout meilleurs dans le domaine du gratuit. Vous savez autant que moi que l'adresse d'un site est essentiel, et doit être modifiée le moins possible. Et c'est à ce moment qu'interviennent les noms de domaine, ils vous permettent de garder un même moyen d'accéder au site quelque soit l'hébergement choisi. Cependant, Free ne prend pas en compte ces noms de domaine très utiles.
Pour l'avenir du blog/site, rester sur un hébergement free n'est pas vraiment une solution. De plus, les hébergements professionnels demandent un montant forfaitaire au même titre que les noms de domaine. Ni moi, ni mes parents ne possédant de cartes bleues, le chèque, et le mandat poste étant assez délicat à gérer, je dois me résoudre à utiliser les méthodes paypal, c'est-à-dire avec la donation. Je ne vais pas me voiler la face, je sais bien que les premiers jours(mois) vont être difficiles dans ce domaine, et il faudra être patient. La rentrée d'argent étant assez irrégulière, il me faudra une démarche pour éviter de dépenser vos donations bêtement. Pour le moment, j'ai pensé à un hébergement gratuit chez Tuxfamily (qui est certainement à l'opposé de ce que l'on trouve chez Free en terme de qualité, et gère les noms de domaine), avec un nom de domaine tout droit acheté sur Cliraname, ce qui me coutera 7€ par année, un prix assez raisonnable, je trouve.

Donations et icônes

Je ne suis pas du genre à demander des donations pour peu de choses. C'est pourquoi j'espère que le blog vous étonnera, et vous captivera de sorte à que vous ayez l'idée de me faire quelques apports financiers. Dans cet objectif, une collection énorme d'icônes sous une licence CC sera construite afin de donner de permettre à vos projets (sites internet, programmes, ou tout autre travail) d'être illustré. Ces icônes seront dans de nombreuses tailles, seront déclinés sous plusieurs couleurs, bref, une vrai collection complète (cela prendra le temps qu'il faudra, mais je vous avertirai de chaque évolution bien entendu).
Pour payer l'hébergement, il existe également la publicité. J'y ai longtemps réfléchi, mais dans l'état actuel, ce sera difficile à insérer, le design courant n'était pas étudié pour accueillir des publicités, ce serait une erreur d'en inclure à la volée.

Nouveau design

Nous venons tout naturellement au design, si vous avez regardé le dernier numéro des chroniques, vous savez que l'habillage actuel du site ne me plait pas. Je réfléchis donc à le changer, mais vous avez vu la liste des choses que je prévois de faire, elle est assez longue, le design viendra tout après, bien j'aimerais le concevoir dès aujourd'hui.
D'après les idées qui mijotent dans ma cervelle, le design sera vraiment différent, plus captivant à l'oeil, plus vivant.

Pour finir, ma priorité reste l'hébergement et le nom de domaine, pour le référencement, et l'avenir du site, il faudrait éviter de changer d'adresse...
Mais pour parvenir à cela, il faut que je travaille les icônes, car ce serait le moyen principal d'ouvrir les donations.

J'espère que j'ai levé le voile sur tout ce qui vous attend à propos du blog, si vous avez des moyens d'améliorer quelque domaine que ce soit, ou des idées, n'hésitez pas à répondre dans les commentaires.

Merci à vous.

Qu'est-ce qu'un blog ?

2007-09-01T11:44:00+02:00

A cette période de sorties de dictionnaires, tentons de définir ce mot blog, qui fait aujourd'hui partie de notre quotidien.

Définition selon Wikipedia

Selon notre bon ami Wikipédia, le blogue est une contraction entre les mots web et log, qui tend à être un site web sur lequel repose des billets classés par ordre anti-chronologique (du plus récent au plus ancien). L'article ajoute que chacun des billets s'apparente à une note, ou un article d'un journal intime, et peut contenir au delà d'un contenu textuel, des images, des liens, ou des objets multimédias.

Le blog regroupe bien plus qu'un simple domaine, il peut concerner des articles d'un journal intime, les croquis d'un dessinateur, ou des recettes de cuisine pour un amateur des fourneaux. Dans tous ces exemples, il y a un rapport direct entre les billets, et l'auteur, le blogueur. Le blog est peut-être égocentrique, mais une particularité de ces contenus, est certainement la présence de commentaires qui peuvent être ajoutés par les visiteurs qui lisent le blog.

Un autre avantage du blog est la facilité qu'ont les auteurs de diffuser du contenu, la plupart du temps, tout se fait au niveau de scripts, d'outils qui sont installés sur les serveurs web. Créer un nouveau billet devient un jeu d'enfant, en trois clics, vous accédez à la page d'écriture dans laquelle vous trouvez des boutons qui permettre de mettre en forme votre texte, d'ajouter des emphases, des images, ou des liens.

Qu'est-ce qu'un blog en pratique ?

Cependant, le blog est devenu une mode aujourd'hui. Tout le monde veut avoir son propre blogue, créer ses contenus, et peut-être devenir un de ces blogs influents dont le nom est connu par tous les internautes. Malheureusement, je constate que certains de ces sites web ne correspondent plus à la définition que j'ai évoqué au début de cette article.

Le blog est-il en train d'évoluer, ou est-ce des personnes qui profitent de cet engouement pour sortir leur propre site ? Peut-être même que la définition d'un blog est fausse ?

Je vais vous montrer quelques blogs, assez connus, reflétant mes interrogations sur le sujet.

Jean Marc Morandini est un journaliste qui travaille tous les matins sur Europe1. Il anime une émission qui parle essentiellement de la télévision, mais aussi le journal de la mi-journée. Il a depuis quelques mois mis en valeur son site internet qu'il considère comme un blog. Mais est-ce réellement un blog ? Les articles présents sur ce site concernent rarement les auteurs qui les ont écris, et pourtant le site web arbore fièrement le nom de blog présent sur le titre même de la page. De plus, une grande partie des articles provient de dépêches AFP ou Reuters.
Selon moi, cela ressemblerait plus à un site d'informations sur la télévision qu'un vrai blog. Les seules éléments qui peuvent s'apparenter à un blog sont le positionnement des articles, et la possibilité d'inscrire des commentaires.

Dans le même cas, on peut également citer Engadget, qui se révèle être le blog américain le plus lu au monde.

Un autre exemple pourrait être le Journal du Geek que beaucoup de personnes connaissent surement ici. Ce site ressemble plus à un Akihabara News qu'à un vrai blog. En effet, le site même se décrit comme un webzine comme on le voit sur cette page. Et pourtant, beaucoup de personnes considèrent ce site comme un blog, est-ce alors un abus de langage ?

Dans tous les cas, il reste de difficile de définir le mot blog, on ne peut pas l'apparenter à un format spécifique, les commentaires et des articles rangés sous forme de billets sont présents sur de nombreux sites, notamment ces fameux sites d'informations.

Qu'en pensez-vous ?

Chroniques d'un design (5) : Epilogue

2007-08-31T23:50:00+02:00

Was ? What ? Les chroniques d'un design ne vous rappellent rien ? C'est un en fait une série de billets consacrés à l'organisation et à la conception d'un design. Pour rattraper les épisodes ratés, voici le lien, garantis sans DRM et totalement gratuit!

Le design est terminé, finalisé, en ligne, et fonctionne pour le meilleur du monde. Mais dans notre volonté d'évoluer, et de nous améliorer, il nous manque quelque chose à faire de très important, l'autocritique. C'est bien beau de faire des designs, mais l'univers est fait pour que ce ne soit pas le premier, ni les derniers, il serait bête de ne pas rechercher les problèmes, et les critiques que le design pourrait avoir.

Ce billet sera consacré aux critiques du design actuel, bien entendu, il n'y a aucune limite, je serais de nature assez dur, et tout me poussera à une seule et unique conclusion.

Trop d'éléments graphiques inutiles

Le design actuel contient beaucoup d'éléments graphiques, beaucoup trop. A chaque titre de chaque partie, on utilise des biseaux, qui utilise des divisions supplémentaires, au final, la lisibilité du site est réduite. L'oeil du visiteur étant face à beaucoup de formes, tellement de formes qu'il s'y perds. On retrouve par là, un des points faibles de ce design, si le visiteur a du mal à s'accommoder au style du site, il ne cherchera pas à s'adapter. C'est bien dommage, et c'est un enseignement que je tenterais de limiter pour les prochaines versions du site.

Tous ces éléments graphiques influencent sur le poids de la page, en fin de compte, le design pèse aujourd'hui 250 Ko, c'est un poids assez conséquent. A mon goût, un peu trop élevé, cela correspond à plus d'une minute de téléchargement pour une personne se connectant sur Internet grâce à un modem 56K.

L'accessibilité...

L'interface du site est d'apparence extensible, d'apparence seulement. Lorsque l'on essaie de redimensionner la fenêtre pour une taille plus restreinte, tout se trouble : les titres se superposent, le design devient illisible. De plus, la taille de la police n'est pas vraiment très adaptée à la fenêtre du navigateur. Et, ne parlons pas des appareils mobiles, qui ne peuvent considérer voir en ce site un design lisible.

Le contraste des éléments n'est pas assez important sur certains éléments, et il est difficile de distinguer les liens internes, des liens externes, et des liens déjà visités.

La comptabilité avec Internet Explorer (Oh, cher ami !) est assez médiocre, visitez le site par vous même si vous en avez l'occasion, vous comprendrez mes propos. Dans le cas contraire, vous pourrez vous dire que vous avez de la chance. C'est assez inquiétant comme problème, car nous sommes forcés de constatés que les utilisateurs utilisant Internet Explorer sont nombreux, tellement nombreux que ce serait assez idiot de ne pas les prendre en considération.

Une charte graphique à recommencer

Bien que les éléments graphiques sont nombreux, il y a peu d'images. Et il est alors difficile de cerner l'ambiance qui entoure le contenu, il faudrait alors réfléchir à nouveau sur l'ambiance du design, et opter pour une charte graphique simple, mais performante et si possible, unique.

La disposition du contenu (en deux parties) est une particularité du design, néanmoins, les premiers résultats peuvent être améliorés. En effet, pour la page d'accueil par exemple, le premier article est développé en entier, alors que pour les autres billets, on retrouve un simple extrait de quelques mots. Les conséquences sont assez gênantes, le premier billet occupe trop d'espace, les autres articles ne sont plus mis en valeur, et le visiteur n'est pas poussé à regarder les autres billets (puisqu'il doit descendre plus bas dans la page pour lire la suite du contenu). Enfin, cette disposition est relativement difficile à adopter pour d'autres pages particulières (par exemple, les archives).

Dans les petits détails, notons le favicon qui arbore l'image d'une planète de couleur marron en orbite. Cette animation sans fin peut troubler également le visiteur qui peut confondre l'image avec le chargement de la page. Cela n'aide pas le poids qu'occupe le design.

Enfin, le nom du site en lui-même

Le nom du site (A World in Progress) se trouve être selon moi un mauvais choix, il est bien trop long, n'est pas si unique, et ne se retient pas si facilement que l'on peut le croire. Il peut-être même difficile à prononcer. Enfin, il n'y a pas de réel logo associé au titre du site.

En quelques mots, il me reste beaucoup de choses à faire pour arriver au design qui me plait, et qui me poussera à écrire. Le nom du site est certainement la chose la plus inquiétante, et j'espère profiter de la naissance toute proche du site pour le changer sans choquer certains esprits. Le design lui-même est à repenser, et tous ces billets concernant la construction de l'interface m'ont permis de remettre en valeur les problèmes et les difficultés que pourraient rencontrer le visiteur.

Autant être clair pour la fin des chroniques, le design actuel est loin d'être l'épilogue d'une aventure, mais reflète bien le prologue d'un nouveau design, qui concentrera en lui, un nouveau nom, accompagné de son logo assorti, avec une toute nouvelle charte graphique.

Bref, un nouveau départ.

Blogday 2007 : Tout le monde en parle, même moi!

2007-08-31T19:52:00+02:00

Le Blogday, c'est aujourd'hui. Vous en avez peut-être entendu parlé dans la radio, ou à travers la télévision, pour ma part, je trouve cela vraiment impressionnant de voir comment cette édition a eu autant de succès auprès des médias traditionnels.

Le principe, je le vous le rappelle, c'est de présenter 5 blogs, pas forcément connus, ni reconnus, que l'on apprécie, et que l'on lit souvent. Pour ma part, le choix a été dur, j'ai bien entendu choisi des blogs qui sont peu connus et qui méritent d'avoir un audimat plus grand, ainsi vous ne verrez pas de sites tels que Slashdot (par exemple).

Le premier est un blog tout nouveau consacré à un sujet pas forcément très facile d'accès, la typographie. On utilise des polices tous les jours, pour écrire (sur Internet, ou sur papier), on les lit, tous ces caractères font partis de notre quotidien et pourtant peu de personnes connaissent ce que veulent dire "serif", ou "ligature". Ce blog anglais vous présentera également tout ce qui touche la typographie de près ou de loin.

Dans la catégorie des sites qui méritent une simple lecture, et qui concernent le design et le développement web, je vais citer de volée iface thought ou The Montoya Herald.

Je tenterais pour les deux derniers blogs qui restent de choisir des blogs français (enfin, je cache pas le fait que le web français est moins important que le web anglophone).

Et voici un blog sur les nouvelles technologies que je lis pas très souvent (je l'admets), mais que je trouve intéressant par moment. Dans le même genre de site qui sont dans la frontière entre blog et site d'informations, voici le blogueur masqué.

N'hésitez pas à visiter d'autres blogs qui participent à l'opérationBlogDay2007pour découvrir de nouveaux contenus.

Pendant la relecture de mes bookmarks pour trouver une liste assez convenable, je suis forcé de constaté que le domaine de mes marques pages est assez limité, les blogs se ressemblent peut-être de part leur contenu, j'essaierai de faire un effort tout particulier pour l'année prochaine. (Surtout que mes lectures ne se limitent pas seulement au design et au web, mais vont bien au delà).

Des actions de blogueurs pour blogueurs...

2007-08-29T19:51:00+02:00

Non loin de s'auto congratuler comme le font les acteurs pendant le festival de cannes, le monde du blog bouge de manière assez active ces jours-ci avec quelques évènements qui pourront éveiller votre curiosité de bloggeur, ou de simple internaute.

Blogday

Tout le monde connait la fête nationale, ou la fête de la Terre, cette fois-ci, il existe un Blog day, la journée des blogs. Rien de bien transcendant pour cette édition 2007, mais cet évènement est toujours axée sur les liens qui unissent les internautes entre eux. Le monde du blog est de plus en plus important, et prend une place réelle dans les médias traditionnels. Tout le monde s'y met, y compris les journalistes de la première heure, ou ceux qu'on attend le moins, avec plus ou moins de succès. Parmi cette foule de personnes qui veulent transmettre des écrits, certains sortent du lot, ces personnes sont souvent nommés des "bloggeurs influents". Par cette expression que beaucoup d'internautes emploient sans en comprendre vraiment la raison ni franchement le sens, on peut voir des blogs qui rencontrent un réel succès, par le nombre de visiteurs, mais aussi par le nombre de réactions, et de nouveaux billets en relation à celui du blog "influent".
Mais qui dit blogs influents, rappelle aussi blogs non influents. Ces petits blogs de pauvres internautes, qui ne rencontrent que peu de visiteurs, mais qui peuvent être intéressants voire (souvent) plus intéressants que les blogs plus populaires. C'est dans l'objectif de faire connaître ces petits blogs que cet action a été conçue.
Le 31 Août, dans deux jours, c'est la date pendant laquelle tous les bloggeurs qui participent à cette action devront recommander 5 blogs qu'ils jugent utiles à lire, en ayant averti leurs auteurs antérieurement.

Bref, tout cela ressemble à une bonne action, pour ma part, je vais tenter d'y participer, en espérant de trouver des blogs qui satisferont tous les visiteurs du blog. Si vous avez quelques suggestions, n'hésitez pas à poster quelques idées dans les commentaires.

Certains profitent de cet évènement, pour appeler un boycott aux services de Yahoo (Mail, Search...) et MSN (Hotmail, Live Search...), pour des raisons assez légitimes. Inutile de vous dire que je tenterais de faire un effort en ce sens, bref vous ne me verrez pas connecté sur le redouté service de messagerie instantanée ce jour-là. C'est en fait un vrai coup de gueule face à la répression (une censure) contre des bloggeurs chinois "dissidents" un peu trop libres selon le gouvernement chinois.

Blog Action Day

Profitons de ce billet consacré aux blogs pour parler d'un autre problème qui nous concerne tous, aussi bien bloggeurs qu'internautes, que citoyen : l'environnement. Certes, on nous raconte jour et nuit depuis quelques années que le réchauffement climatique va être le problème le plus grave que l'humanité va connaitre, alors que ce problème était existant depuis quelques siècles déjà...
Ce ne seront ni les politiques, ni les médias qui prennent la parole dans ce débat, mais bels et bien des bloggeurs, bref des personnes sémantiquement un peu représentatif de la population, qui vont parler ensemble, d'un même sujet, pendant une journée, s'interrogeant sur les issues de ce problème important. Tout se déroulera le 15 Octobre (nous avons d'ici là un peu de délai). N'hésitez donc pas à participer, et à agir pour le bien de nous tous.

Bonne journée à vous.

Finally...

2007-08-27T17:54:00+02:00

Ces derniers jours, les nouvelles sur le blog n'ont pas vraiment été nombreuses, je peux vous comprendre. Mais pour me faire racheter, je dois dire que j'avais une raison assez légitime, la rentrée s'approchant jour après jour (presque une semaine), je me devais de choisir une date pour le code, car après ce délai, ce sera beaucoup plus difficile de passer ce test sans rater une journée de travail.

Bref, bien que je n'étais pas totalement prêt, j'ai choisi une date qui pouvait être la bonne, aujourd'hui. Dans les tests multiples, je frôlais à chaque fois à la barre des 5 fautes, mais il fallait bien tenter ce maudit code qui a occupé mes après-midi un jour ou un autre.

Le rendez-vous était fixé vers 12h15 devant l'enceinte de l'auto-école. Je m'y suis rendu un peu en avance, nous étions 7 personnes à faire la même aventure. Pour nous rendre au lieu d'examen, à Melun, nous avons pris deux voitures pour un trajet d'environ quarante minutes. Quelques minutes d'attentes, et on entrait dans ce lieu qui déterminer l'emploi du temps des mois à venir.

Il était 13h10, l'attente était longue, très longue, on devait patienter péniblement dans les escaliers. Et c'était mon tour, ma carte d'identité, un rapide coup d'oeil sur le dossier, et la télécommande était à ma portée. Ma taille assez relative me permit de me placer dans les premiers rangs.

Vers 14h, le réel test débuta après quelques consignes et le fonctionnement de la télécommande (bouton rouge pour corriger, les quatre boutons gris pour sélectionner les réponses, et le bouton vert pour valider). Les premières questions étaient assez faciles, au fur et à mesure que les QCM défilaient, le stress augmentait malgré tout. Quelques questions "pièges" étaient posés, mais par leur nombre, elles étaient loin de troubler l'espoir de réussir l'examen.

A la quarantième question, le silence était à son comble, des regards fusaient dans la salle pour apercevoir que tout le monde redoutait la mauvaise mention. Un par un, chacun déposa sa télécommande, et le résultat était clair. Le nombre de fautes était quant à lui révélé seulement si l'on avait fait 0 faute, ou si l'on avait raté l'examen, pour ma part, je n'en ai pas vu la moindre expression, si ce n'est FAV 1 (pour favorable).

Mon premier sentiment était surtout un profond soulagement, ce code qui m'a troublé heures de mes vacances, il est enfin terminé. Les derniers jours avant cette heure ont été difficiles, je m'entrainais devant un logiciel de tests (Code de la Route de Micro-Application), dont les questions étaient bien plus intrigantes que dans le grand bain. J'en profite pour recommander ce software puisqu'il vous prépare vraiment à des questions qui nécessitent une vrai part de réflexion.

Aujourd'hui, je peux enfin regarder vers mes projets futurs sans arrière pensée, le soulagement apporté par ce résultat est très appréciable. Si vous allez vivre la même expérience que moi dans les jours ou les années qui viennent, je vous souhaite le même succès.

Chroniques d'un design (5) : Développement = galères ?

2007-08-26T20:00:00+02:00

Nous y sommes, la fin du bout est proche. Dans ma tête, le plus dur est certainement fait, mais le plus énervant reste à faire. Le design est prêt, nous avons un fichier regroupant tous les calques permettant de constituer le design que l'on va découper. La structure du design était déjà prise en considération précédemment, donc le codage sera beaucoup plus simple à faire que si l'on avait attendu le dernier moment pour faire des choix assez capitaux.

Le codage des sites webs s'effectue avec le langage HTML ou xHTML pour le contenu, et en utilisant des pincées de CSS pour la forme. Ces deux "langages" sont assez simples à acquérir, de nombreux sites variés et performants peuvent vous apprendre leurs bases. Néanmoins, notamment en CSS, de nombreuses techniques existent pour faciliter votre codage, celles-ci sont plus spécifiques à certaines conditions, et vous les retiendrez avec un peu d'habitude.

HTML...

Le codage du contenu est assez simple la plupart du temps, vous avez en tête les différents blocs à afficher, et vous savez pertinemment s'il faut utiliser une "id", ou une "class". Pour vous aider à faire cette étape, pour ma part, j'utilise souvent un croquis, sur lequel je positionne les blocs à afficher, leur imbrication. C'est un conseil qui peut souvent être utile lorsque vous codez de temps à autre, un rapide coup d'oeil sur la feuille et vous comprenez immédiatement le fonctionnement de la page. Ce croquis utilise de nombreuses couleurs, le rouge pour le nom de divisions, le vert pour les dimensions des divisions, et le noir/crayon pour certaines propriétés qui seraient utiles à retenir, ou l'emplacement du fond imagé.
A ce moment, n'hésitez pas à accorder à une réelle importance à la sémantique (c'est-à-dire au sens que vous accordez aux balises utilisés), et la propreté de votre code. Vous pouvez ensuite valider votre site par les validateurs W3C, ce qui est toujours utile, bien que être valide ne veut pas dire être sémantique.

Et CSS...

Visualiser votre site web, votre design est loin d'être en place, le contenu est bien présent mais il manque la forme. Les feuilles de styles en cascade sont très simples à utiliser, mais leur interprétation, qui diffère selon les navigateurs, gène terriblement les "apprentis" développeurs que nous sommes. En effet, les navigateurs assez anciens comme IE 6 ne prennent pas en compte de la même manière les propriétés que le fait Firefox, ou Opera. C'est assez inquiétant, heureusement, il existe divers méthodes pour contourner ces failles, mais il faut avouer que la durée du debuggage est souvent très relative à la complexité du design. Pour ma part, c'est le point à insister lors du développement, c'est malgré tout le minimum syndical que notre site soit lisible dans de bonnes conditions dans la plupart des navigateurs utilisés. Quelques conseils pour arriver à vos fins:

Si vous commencez une nouvelle page, vous pouvez utiliser des reset styles, pour éviter que des élements prennent en compte des propriétés qui n'étaient pas présentes sur la feuille de style. Encore une fois, le maitre mot est organisation, revenez au bon vieux papier crayon, tout est en votre disposition pour faire une bonne adaptation si vous êtes clairs dans votre tête.
Les hacks CSS sont un excellent moyen pour combler les différences d'interprétations des navigateurs, n'hésitez pas à les utiliser.
Des tableaux uniquement pour des informations tabulaires, et surtout pas pour coder votre page. Plusieurs avantages majeurs privilégient cette méthode, la sémantique est respectée et le poids de la page vous dit merci.
Enfin, informez-vous! Vous êtes peut-être en train de chercher une méthode pour faire des cadres en arrondis par exemple, recherchez sur internet ces techniques, elles sont nombreuses, et vous permettront d'économiser du temps, mais aussi de ne pas coder des designs trop longs à charger.

Tout un art

Le design est maintenant découpé, et adapté à votre contenu, vous avez pratiquement fini. Il vous reste à optimiser la page au maximum (tous les utilisateurs ne possèdent pas une superbe connexion), et à travailler encore plus votre contenu.

Et n'oubliez pas, le contenu est roi!

Dans le prochain et dernier épisode, vous verrez enfin, la séance d'autocritique, car après le travail, il faut savoir se remettre en cause pour mieux travailler.

Chroniques d'un design (4) : Du concret

2007-08-22T17:44:00+02:00

Bon, faisons un point à mi-parcours des chroniques : l'idée est faite et est exploitée, les croquis concernant l'allure générale, ainsi que le contenu de chaque page est également esquissé. Passons à l'acte, nous allons commencer à travailler sérieusement si je puis dire. Ce billet va se révéler très personnel, et vous aurez tous votre propre démarche, mais je trouve qu'il peut être intéressant de se comparer les manières de faire le design pour s'améliorer. Néanmoins, je mettrais l'accent en particularité sur quelques points qu'ils seraient utile d'insister.

Des logiciels ?

Je travaille sur Illustrator, et non pas sur Photoshop. Illustrator est un outil de dessin vectoriel, les possibilités sont différentes, mais toujours aussi infinies. Dans la même catégorie, vous pourrez trouver des logiciels libres comme Inkscape. J'ai choisi ce type de dessin, tout simplement car je suis particulièrement à l'aise avec la plume, de plus, ce domaine est aujourd'hui peu mis en valeur face au ténor Photoshop. Il faut savoir que toutes les figures faites sur ce type de logiciel peuvent être redimensionnées à souhait sans perdre de qualité, c'est peut-être un avantage, mais pas si important que cela.

J'ai également la particularité de créer de très nombreux calques, pour le blog par exemple, le fichier .ai (l'équivalent du .svg) contient près de 70 calques. Quelque soit le logiciel utilisé, cette solution peut être très utile et peut éviter de nombreux problèmes, mais elle peut alourdir considérablement le fichier. Pour ma part, je préfère travailler sur un fichier unique, sur lequel je trace directement toutes les formes de mon site web.

Ma démarche

Je commence par le fond, c'est un simple dégradé, sur lequel je positionne différents rectangles un peu plus foncée, de sorte à créer une ambiance amicale, tel un papier peint dans une chambre.
Le corps est également assez simple, on peut alors distinguer trois parties distincte : la partie principale dans lequel on verra le contenu, la partie secondaire, et le footer. Des dégradés sont également positionnés de sorte de donner un sentiment de progression.
J'ai l'habitude de commencer par le header, qui se trouve être assez sombre, pour focaliser l'attention sur le nom du blog (qui reste clair). Vous pouvez également remarquer à la bordure du bas, qu'il existe un motif apparenté à la construction, ce qui permet de donner l'idée d'une possible évolution, mais aussi pour indiquer que rien n'est encore terminé.
Je m'occupe ensuite du menu, et de la description des grandes parties. Vous pourrez remarquez que le menu est incrusté dans une texture de bois, elle même dans une forme assez étrange. Ceci s'explique par la volonté d'attirer le regard vers ces angles orignaux peu présents dans ce monde de rectangle. On retrouve encore ce motif de construction pour la même raison.
Ensuite, passons au contenu principal. Du très classique, vous remarquerez la présence de biseaux graphiques (peut-être même trop) qui tend à soutenir l'idée générale de l'évolution. Les vis fixées sur le titre renforce cette idée de construction encore une fois.
Passons au menu qui se trouve dans la partie secondaire. Tout repose sur la même charte graphique, les biseaux, les vis, le bois, tout cela dans un socle mis en valeur par l'ombre portée. J'ai voulu par cela mettre en valeur l'aspect "carnet de navigation" en le mettant en retrait, tout en insistant sur son côté "touche à tout". Il n'est pas coupé du contenu, puisqu'il garde une couleur assez claire, mais reste en contact avec la partie secondaire, du fait de sa position.
Enfin, retrouvons à présent la partie secondaire. Elle est assez simple, elle contiendra soit des extraits de billets, soit les commentaires des visiteurs. Par contraste, elle est de couleur assez foncée comme pour créer une limite avec le contenu principal.
Quand au footer, il reste assez simple, et garde simplement le style graphique utilisé tout au long de la page.

Le résultat, vous l'avez devant vos yeux, mais avant tout cela, l'allure était vraiment différente. Voici le premier croquis du design, vous remarquerez que les grandes parties étaient là, mais la lisibilité n'était pas au rendez vous...

Un conseil, avant de passer directement au codage, n'hésitez pas à recevoir des critiques, aussi nombreuses qu'elles soient, elles peuvent vous aider à rendre un design agréable, et vous éviter à passer des heures inutiles sur le codage si la forme même était à revoir. Préférer les personnes assez pointilleuses dans le cas de critiques, car ces dernières sont souvent sont celles qui peuvent vous permettre à rendre votre design agréable à l'oeil, même pour les plus difficiles.

Quelques conseils bien utiles

Je vous donne quelques conseils pour parvenir à finir le design, car même si c'est, pour ma part, le moment l'un de tous meilleurs moments lors de la conception d'un design, c'est aussi l'un des plus durs, car c'est jamais simple de commencer un design qui nous occupera de nombreuses nuits.

Prenez votre temps, n'hésitez pas à faire des pauses.
Un design ne se fait la plupart du temps pas en quelques minutes, il faut compter des heures, partant de l'idée pour parvenir à la finalisation du projet. Le meilleur moyen c'est de prendre son temps, alterner les périodes de design par des jeux vidéos, ou de la lecture, voire du travail scolaire. De plus, quand vous n'arrivez pas à trouver l'idée qui vous manque, ne vous acharnez pas dessus, passez, faites une pause, et revenez-y, quelques fois vous allez même trouver la solution en faisant autre chose.
Notez tous sur papier, soyez organisés
Le design demande beaucoup de notes écrites, personnellement, j'aime bien me prendre un petit paquet de brouillons (pensons à l'écologie pendant que nous sommes des designers amateurs) sur lequel je note toutes mes idées, et tout ce qui pourrait être utile pour le site. Bref, être organisé, c'est voir le début du tunnel plus rapidement.
Les règles les plus basiques sont les plus difficiles
Quelques règles simples doivent être respectés sur un design, et c'est certainement ces contraintes là qui sont les plus importantes. Le visiteur est roi, et tout doit être fait pour pour que le contenu (qui est roi également) lui soit accessible le plus facilement possible. Par cela, il faut penser à la lisibilité, et à l'ergonomie.
C'est souvent la fin qui prend du temps...
La plupart du temps, la conception du design prend beaucoup de temps, lorsque vous voyez le bout du tunnel, c'est toujours plus difficile, car vous avez en tête les finalisations à faire, et le codage à commencer. A ce moment, il faut prendre votre courage à deux mains, voire même faire une pause de quelques jours pour se remettre plus tard dans le bain.

Ces quelques conseils peuvent vous paraitre assez simples à mettre en oeuvre, mais par expérience, c'est toujours utile de le préciser.

Oui, nous sommes presque arrivés, le design est là, et il ne manque plus que le développement. Mais le développement, ça pourrait dire IE 6, et alors débuggage intensif ? Le tunnel me parait bien long...

Quand le web se concerte pour acheter un club de football...

2007-08-21T10:47:00+02:00

Vous ne rêvez pas, le titre peut paraitre assez loufoque, et pourtant tout cela est vrai. Grâce à Internet, les ligues anglaises vont connaitre un nouveau concurrent, qui aura une organisation toute différente, des priorités différentes, mais toujours des transferts et des matchs.

Peut-être que le rapport avec Internet vous surprend, mais en réalité, c'était bien le seul moyen que ce projet se réalise. Will Brooks a eu l'idée en Février 2005 de réunir des milliers de personnes afin d'acquérir un club anglais qui pourrait passer en Premier League, le principal ennui pour acquérir un club, c'est l'argent. Pour regrouper toute cette masse de monnaie, il a décidé de créer un site sur lequel 53 000 personnes pouvaient s'inscrire pour s'investir dans le football. (53 000 étant la limite pour pouvoir entrer dans le marché.) Pour s'inscrire, rien de plus simple, un montant de £35 est demandé pour chaque personne chaque année voulant prendre une part dans le club. De plus, afin de respecter l'équité entre chaque membre, le montant ne peut être supérieur, ni inférieur à cette somme.

Tout est chamboulé..

Ce qui est assez étonnant de la part du projet, c'est avant tout l'esprit qu'aura le club. Ce ne sera pas une seule et unique personne qui possèdera tout le club et qui investira personnellement dans les transferts (on peut notamment penser à Chelsea), mais ce sera 53 000 personnes qui se concerteront pour décider des bons choix à faire. Concernant des possibles bénéfices, ce ne sont pas les membres qui profiteront directement des résultats, mais le club qui ré-investira pour se donner un avenir plus prometteur.

Un grand changement dans ce monde de football est l'absence d'entraineur. Ce ne sera jamais une seule et unique personne qui décidera de la formation, ou des idées de transferts, c'est toute cette communauté qui devra voter selon leurs opinions. Pas d'entraineur, mais un directeur (Head Coach), il sera le capitaine du navire, il pourra conseiller les membres à choisir tel ou telle formation, tel ou telle sélection, mais le vrai pouvoir n'est pas de son côté, mais bien du côté des membres. C'est également avec ce remaniement, que le directeur pourra se concentrer sur le coaching, et l'ambiance du groupe.

Les transferts dans tout sport sont très importants et rythment souvent nos étés et hivers. Ici, cela part du même principe, tout le monde peut donner l'idée d'un transfert utile (au même titre que le Head Coach ou les scouts), mais en fin de compte, ce sera la communauté qui décidera d'accepter ou non l'offre. Bien sur, le montant du transfert sera également discutée par les membres du club, alors que le directeur général sera toujours présent pour négocier les différentes offres.

Dans le fonctionnement des matchs, tout est encore chamboulé. Le head coach devra émettre des rapports aux membres sur le match de la veille, l'entrainement, l'adversaire à venir, mais aussi les pensées et les conditions de chaque joueur, au même titre que les tactiques et stratégies possibles. A partir de ces données, les membres feront leur formation et leur tactique. Ainsi, l'équipe la plus apprécié sera soumis au Head Coach pour l'inciter à prendre ces choix. Cela changera beaucoup dans l'esprit des joueurs, on n'est plus choisi par une seule personne (souvent un groupe restreint), mais par une masse de 53 000 membres, ce sera, je pense, une extrême motivation de jouer tout en étant vraiment soutenu.

Et le rêve va peut-être commencer...

Aujourd'hui, il y a plus de 53 000 inscrits, tout peut alors réellement débuter. L'achat d'un club est le premier objectif, comme vous vous en doutez, c'est le club le plus demandé par les membres qui sera choisi parmi une liste de clubs anglais ayant la possibilité d'atteindre la Premier League (ça pourrait le faire avouez-le) qui serait favorable à cette approche du football.

Cette aventure est tout simplement hors du commun, dommage que les médias traditionnels n'en ont pas vraiment fait l'écho pour le moment (mais si cela se réalise, cela va se faire sans doute). Le prix d'inscription étant relativement accessible, c'est un grand coup pour les grandes fortunes qui investissent dans le football pas pour la passion qu'elle génère mais pour le profit. C'est une belle preuve de démocratie, et personnellement, j'attends impatiemment pour que tout se concrétise, et si les résultats sont au rendez-vous, il faudra avouer que nous sommes bientôt dans une période où le monde du sport va être révolutionné.

Au fait, voici le site web.

Chroniques d'un design (3) : Organisez!

2007-08-18T23:10:00+02:00

Après l'idée, et les croquis, ne pensez-vous pas qu'il est temps de passer aux logiciels de dessin ou de conception pour commencer concrètement le design ? En fait, je vais vous répondre que non, qu'après des croquis, il reste encore des croquis. Je vais me faire comprendre, vous avez devant vous l'allure générale du site, vous savez comment va s'organiser le contenu autour du site. Mais dans mon cas, le site est loin d'être statique, et les contenus qui y seront intégrés seront divers, et ne nécessiteront pas la même organisation. Bref, il est temps (enfin, certains me diront) d'étudier l'organisation spécifique de chaque page du site.

Dotclear, un script de blog

Bon, je ne vais pas vous le cacher, et je pense que vous le savez déjà, j'utilise un CMS, c'est-à-dire un script que l'on transfère sur son espace FTP, qui nous permet de gérer des contenus. En l'occurrence, c'est l'outil de création de blog Dotclear, que vous connaissez peut-être, que j'utilise dans sa version 2b7.

Et de nombreux types de contenu

Ce blog a de nombreuses fonctionnalités, et possèdent de multiples pages spécifiques. Parmi celles-ci, on peut citer la page d'accueil, les archives, la revue de tous les tags, la page de contact (grâce à une extension), ou encore la vue d'une catégorie. Toutes ces pages ne peuvent s'organiser de la même manière, tout d'abord avec un contenu qui diffère, mais aussi avec notre imagination qui nous pousse à modifier les habitudes dans ce domaine (sans pour autant rompre l'ergonomie du site, qui est totalement primordial et ne peut être laisser au hasard).

Parlons de la page d'accueil, c'est la page principale, la page traditionnelle sur laquelle la plupart des visiteurs vont arriver en venant sur ce site. Bref, elle doit attirante, et doit "forcer" les visiteurs à s'intéresser au contenu du site. Cette homepage est alors mis dans le contexte d'un blog par l'affichage d'un billet complet. Puis, de petites divisions sont rangées à la suite, dans la partie secondaire, dans lesquelles on retrouve un court extraits des autres nouvelles.

Le design peut paraitre assez étrange avec son organisation bipartie, et je dois l'avouer, que c'est assez difficile de l'appliquer dans d'autres pages, je pense notamment au nuage de tags. Bref, de ce point de vue, c'est surement quelque chose à améliorer, voire à revoir.

Pour chacune des pages présentes sur le site, on fait un simple croquis qui agence tous les contenus. Une fois faite, nous pouvons alors commencer concrètement le design...

PS : Encore une fois, mea culpa pour le manque réel de croquis pour cette partie. Je vous l'explique encore une fois, je ne les retrouve plus, alors que je pensais les avoir garder quelque part. Néanmoins, j'espère que vous comprendrez les buts de ce billet.
Cet article peut paraitre un peu court à votre gout, mais je m'explique en admettant qu'il est un peu personnel, et qui dépend de l'outil dont vous utilisez, et de la manière dont vous pouvez interpréter le contenu, c'est pour cela que je ne m'attarde pas trop sur ce sujet.

CSSR 2k7 : C'est parti!

2007-08-15T12:58:00+02:00

Vous venez peut-être du site d'Alsacréations, si c'est le cas, vous savez d'ors et déjà que les inscriptions sont finies, et que l'heure est au vote.

J'ai effectivement participé au concours, j'ai même écris un billet à ce sujet. La page des votes est accessible à cette adresse, et on peut voir que le concours a été témoin d'un fort succès, parmi les 83 pré-inscrits, on retrouve 72 sites nominés, une belle statistique en quelle que sorte.

Il y a une multitude de choix, on retrouve du très grand cru parmi les professionnels du design. Bref, le niveau est assez élevé, et je souhaite bonne chance à toute et à tous, en espérant que ce soit le meilleur qui gagne. Les votes fonctionnent par des notes attribuées à chaque design, vous pouvez alors donner des remarques spécifiquement à chaque interface selon un barème de 0 à 10.

La bataille va être rude, et j'espère que j'aurais une petite chance dans ce concours de mastodontes. Quoi qu'il en soit, votez librement, objectivement, et si vous aimez le design, ~~(mettez une note en conséquence)~~ et je vous remercierai .

Je tiens seulement à signaler que mon coté pointilleux m'indique que le design peut être largement critiquée (tout est en train d'être rédigée sur un billet à vrai dire), mais si vous avez des critiques à formuler, n'hésitez pas. Je vous lirais à bras ouverts.

Good luck!

Un avenir pour le web mobile ?

2007-08-15T11:58:00+02:00

Tout le monde a déjà essayé de prendre un PDA, ou son téléphone portable, de se connecter via la 3G ou le Wi-Fi à Internet. Le constat est vraiment inquiétant, les pages webs pour mobile sont déjà peu nombreuses, et les constructeurs d'appareils mobiles sont loin de pousser les développeurs à s'intéresser au monde mobile.

Il est aujourd'hui impossible de regarder convenablement un site web qui n'a pas été conçu pour le mobile avec ce type d'appareil. Même avec Opera Mini qui est très performant, voir un site web devient un vrai calvaire, puisque l'écran n'est vraiment pas adapté à voir des sites dont la résolution minimale est quatre à cinq fois supérieure à une définition dite "habituelle". Nous sommes déjà face à un problème : alors que les moniteurs ont des dimensions règlementées, les appareils mobiles ont des écrans de dimensions assez "originales".

Nous pouvions déjà inclure des feuilles de style par la méthode du media=handheld, mais les PDA (qui représentent un grosse partie des appareils mobiles permettant de se connecter à internet) et certains modèles de téléphones ne supportent pas cette méthode. L'Iphone d'Apple est loin de nous aider à régler le problème puisqu'il ne supporte pas ce media type, et nous oblige ainsi à utiliser une feuille de style spécifique pour l'Iphone (Imaginez seulement si on devait faire des feuilles de style pour chaque téléphone portable existant...) :
<link media="only screen and (max-device-width: 480px)" href="http://shaoren.free.fr/index.php?post/2007/08/15/iPhone.css" type="text/css" rel="stylesheet" />

Plusieurs autres raisons peuvent me faire douter pour l'avenir du web mobile

Les tailles d'écrans différent selon le modèle, on peut alors passer d'un écran de 4 pouces, alors qu'un smartphone a un écran de 2.5 pouces. Les sites web doivent alors s'adapter à toutes les tailles d'écran. Les claviers sont limités, il est difficile d'écrire confortablement comme un clavier d'ordinateur avec son portable, de plus, il n'y a pas de souris, et la navigation peut être hasardeuse. Les utilisateurs des appareils mobiles n'utilisent pas internet dans les même conditions, la plupart du temps, ces derniers sont dans le métro, ou des moyens de transports, voire dans des endroits assez bruyants, il faut donc prendre en considération l'ergonomie du site. Les navigateurs internet sur les mobiles sont bien plus limités que sur nos ordinateurs, la mémoire disponible est souvent bien inférieure...

Bref...

Internet sur téléphone portable ne ressemblera certainement pas à celui de notre bon vieux ordinateur. L'absence de pointeur sur les téléphones portables, la taille souvent limitée ne nous arrangent pas. Les effets graphiques deviennent difficilement applicables, sommes-nous alors contraints à faire des sites web sans feuille de style ? Est-ce la seule solution, ou comment faire des sites web lisibles sur des appareils mobile sans pour autant passer des heures pour chaque modèle spécifique ? Et finalement, quel usage peut avoir le web mobile, si la plupart des sites pouvaient être accessibles ?

Première heure de conduite, premiers ennuis

2007-08-14T23:33:00+02:00

Aujourd'hui, à Paris, le vent est assez venteux. Hier, le temps était ensoleillé et calme, bref un temps idéal pour commencer la conduite. J'ai depuis quelque mois 16 ans, âge minimum pour commencé la conduite accompagnée. Cette méthode est assez bénéfique, avoir le permis dès l'âge de 18 ans est beaucoup plus à notre portée, seul contrainte, le prix, qui est sensiblement plus élevée, mais en revanche, l'assurance est moins chère, bref, chacun s'y retrouve.

Les heures de code s'enchainent jour après jour, si bien que j'arrive à faire moins de 5 fautes ces derniers jours. Cependant, j'attends encore un peu pour faire le test, puisque la rentrée approche, et j'aimerais le réussir du premier coup, sinon j'aurais du mal à trouver une place dans mon emploi du temps avec le lycée et tout le reste. J'ai néanmoins la possibilité de commencer la conduite avant de faire le code. J'ai réussi à avoir un planning, mais l'effectif de moniteurs est particulièrement maigre en cette période de vacances, et c'est pourquoi les heures de conduite dure jusqu'à Novembre.

Première heure...

Particulièrement impatient de rentrer dans le grand bain, j'arrive en avance au rendez-vous (c'était hier vers 9h). Je patiente une dizaine de minutes, avant d'apercevoir une monitrice qui arrive en retard, qui prétexte diverses raisons, que j'ai un peu de mal à admettre, mais passons. On rentre dans la petite 206 modifiée à l'effigie de l'auto-école une dizaine de minutes plus tard. Honnêtement, j'avais quelque pré sentiments, je m'attendais à avoir un moniteur (comme cela avait été prévu), et cette monitrice est loin de correspondre à mes attentes de grand débutant.

Je m'installe au bord de la voiture. Quelques questions, le dossier commence à être rempli, et on démarre. Pas de grandes explications, j'ai l'impression qu'elle n'est pas habitué à enseigner à des personnes de mon âge et elle me donne peu de détails sur la démarche à suivre. Je tente de démarrer avec les connaissances que j'ai acquises avec mon bouquin de code, premier essai, je cale. Deuxième essai, c'est le bon, même si c'est loin d'être parfait. Elle m'annonce qu'on va se diriger vers la zone industrielle pour que je m'exerce au démarrage, tout en indiquant que je vais m'occuper du volant.
Je tiens comme je peux ce maudit volant, et tente de comprendre son fonctionnement, mais apparemment, la monitrice ne comprend pas mon manque de pratique en la matière, et commence avec des remarques assez gênantes. Bref, je suis mal à l'aise, et je sens que je vais passer une mauvaise heure.

On arrive enfin dans cette zone industrielle vide de tout camion, de toute personne. La voiture s'arrête, j'essaie de démarrer, sans gros problème, quand à l'arrêt, aucune explication, et je cale magnifiquement. Je demande quelques précisions, mais encore là, la réponse est aussi floue et peu convaincante, et quelques virages plus tard, on rentre à l'auto-école.

C'était faste, et très peu instructif. Pour ma part, ça a plus été un calvaire qu'autre chose. Puisque c'était la première séance, un test a été effectué sur mes capacités, bref, tout a été baclé, et les résultats sont peu glorieux. J'ai de suite demandé de changer de moniteur, car je préfère éviter 20 heures de misère avec une monitrice inadaptée (je le dis haut et fort), mais on m'a indiquée que la personne en question était une remplaçante. Suis-je malchanceux ? Espérons que ce soit vraiment le cas, et que ce samedi (la deuxième heure), ce sera bien différent, dans une tout autre ambiance.

En attendant, j'ai de mauvaises sensations...

Chroniques d'un design (2) : Premiers traits

2007-08-14T21:45:00+02:00

Si vous venez de rejoindre ce billet sans en comprendre le but ni l'intérêt, je vous renvoie au premier billet. Sinon pour résumer ce qui s'est passé dans l'épisode précédent, nous avions recherché le but et l'enjeu du site sur lequel le design sera fait. Ces questions préliminaires nous permettront de mieux cibler les demandes, et agir en conséquence.

Maintenant, nous avons des petits éléments du design, sans pour autant connaitre la forme globale de l'interface. Je vais passer au croquis, mais vous remarquerez comme moi que débuter une ébauche, comme cela sur le vif, c'est assez compliqué. Un croquis nécessite de nombreux choix qui permettront d'affiner la structure du design. Ces choix, ils sont importants, et nous devons jamais perdre en vue l'objectif du site.

Que de questions, que de questions...

Quelques questions peuvent suffire pour tirer des conclusions qui nous permettront de dessiner un peu :

Quel est le contenu du site ?
C'est une question très simple que nous avons là. Et je suis sur que vous savez autant que moi le but de cette question: un design pour un site marchand n'aura pas les mêmes priorités, ni les mêmes contraintes qu'un site portant sur l'actualité en temps réel, ou un simple blog. Dans mon cas, c'est un blog qui aura en premier lieu du contenu purement écrit, mais contiendra par moment (même souvent) du contenu imagé. Cependant, cela reste un blog, et de ce fait les billets ne seront pas aussi nombreux qu'un site consacré à l'actualité.

Allons-nous opter pour un design fixe (qui ne change pas si l'on modifie la résolution de la fenêtre), fluide (c'est-à-dire un design qui s'adapte à la taille de la fenêtre) ou ce que je pourrais appeler un design mixte (c'est en réalité plusieurs designs fixes qui s'enclenchent selon la taille de la fenêtre, du fixe qui s'adapte) ?
Pour ma part, j'ai opté pour un design fluide. Le fait que le design peut garder sa forme quelque soit la résolution est notamment un avantage assez attirant, mais l'aspect graphique se trouve être légèrement limité... (Je suis assez discret sur ce point, puisque ce choix a induit de nombreuses complications, cependant, je les développerai pas sur ce billet.)

Que doit voir en premier lieu le visiteur quand il arrive sur le site ?
Cette question est moins évidente, mais pose bien la question de la page d'accueil. Une majeure partie du temps, les visiteurs arrivent sur le site par cette page, elle est alors très importante, car elle doit réussir à convaincre l'utilisateur de rester sur le site, et de continuer sa visite. Ce serait dommage de limiter le design à une seule page. Dans mon cas, j'ai voulu mettre l'accent sur le contenu. Dès que le visiteur arrive, il a en face de lui, une description simple du site (en gros, c'est un blog), le regard devrait se porter sur le billet exposé en page d'accueil. Pour y parvenir, quelques couleurs (du rouge en l'occurrence) pour attirer l'attention vers la date (ce qui donne l'idée d'une mise à jour récente, et ainsi d'un site entretenue récemment), mais aussi vers les tags (ces mots clés sont très utilisés dans les plate-formes de blog, et juste cette section pourra confirmer la présence de différents billets).

Le contenu principal est encore mis en valeur par la position particulière du menu, celui-ci étant mis dans la partie dite "secondaire", en faisant ceci, j'ai tenté de signaler que je privilégierais des billets complets et un tant soit peu recherchés, que des simples brèves.

Quelque chose que je fais personnellement, est d'observer rapidement les galeries de sites web (vous en trouverez un peu partout sur internet avec une bonne recherche avec les mots clés "css showcase"), afin de s'imprégner des modes de présentation, et ainsi de tenter d'innover dans ce domaine. Mais je tiens aussi à donner une attention toute particulière à l'ergonomie des sites (de nombreux sites donne un aperçu très utile des bases), pour ne laisser l'utilisateur perdu dans cette foule d'informations, ce serait dérangeant, et on aurait là des visiteurs qui partiront du site quelques secondes après avoir chargé la page.

Une fois les outils en main, c'est beaucoup plus simple pour bricoler!

Maintenant, le design s'assemble dans notre petite tête, on peut passer au croquis et tenter des choses aussi loufoques que possible.
J'aurais voulu vous montrer les dessins que j'ai fais pour ce design, mais apparemment, je les ai déjà jetés, c'est assez étonnant puisque je pensais les avoir scannés, mais après de nombreuses recherches, je n'en vois pas la trace. Néanmoins, j'aurais l'occasion de vous montrer des croquis que j'ai fais pour d'autres designs dans des billets spécifiques.

Les premiers croquis sont là, et après quelques heures de travail, on arrive avec quelque chose qui répond plus ou moins à nos attentes, et nos contraintes. Dans mon cas précis, j'avais opté pour un design extensible, qui dit fluide, demande des parties extensibles. Bref, utilisons le temps du dessin pour déterminer les parties qui devraient être extensibles, et celles qui devront rester fixes.

Pour finir, vous vous posez peut-être la question du menu principal situé juste en dessous de la "bannière" (je n'apprécie pas vraiment ce mot), et bien pour vous expliquer, c'est simplement pour donner clairement l'idée que le site ne se limite pas à un simple blog composé de billets. Ne pas la mettre dans le menu du blog peut alors éviter de nombreuses confusions.

La structure est faite, et on peut maintenant appliquer les idées à ne pas manquer que l'on a répertorié dans notre premier billet. Les biseaux, les couleurs, le bois, avec quelques annotations, on imagine déjà notre design sur internet. Et pourtant, on est loin d'avoir terminé...

PS : Un gros Mea Culpa pour le manque de croquis pour cette partie peut être délicate à comprendre. Vous pensez peut-être que j'aurais pu faire des croquis après coup, mais ce serait un peu vous mentir, car le dessin a été bien avant que le design a été terminée, et les observations que je peux avoir aujourd'hui sur mon design risquerait de fausser les croquis.

Du côté du monde du design...

2007-08-12T21:21:00+02:00

Les vacances sont certes bien avancées, mais le monde du design est toujours en perpétuel évolution. Ce serait difficile de vous détaillez toutes les innovations , c'est pourquoi je vais tenter de vous résumer en gros ce qui s'est passé dans ce domaine ces derniers jours.

Des articles et billets à lire

IE 6 énerve toujours les designeurs, certains ont déjà trouvé des méthodes pour faire planter cette version. Peut-être est-ce un sursaut des webdeveloppeurs qui perdent toujours plus de temps dans le développement pour le debuggage du site exclusivement pour IE6. Nick La propose même aux designers d'éviter cette démarche spécifique pour IE afin de pousser les utilisateurs de passer à une version plus à jour de leur navigateur (IE 7), voire même de changer de navigateur web.
Pour ma part, c'est toujours assez tentant de négliger une étape dans le développement web, mais assez difficile de laisser au bord de la route une partie non négligeable des visiteurs. Je suis logiquement pressé de voir comment cette action va se concrétiser.

Apple fait également parler de lui dans le monde du webdesign, mais pas forcément dans le bon sens. En effet, le constructeur à la pomme a lancé toute une série de logiciels, notamment .Mac qui permet à chacun de diffuser sur le net des photos ou tout autre objet multimédia. Si vous avez essayez de visiter une de ces pages, vous avez surement remarqué le poids de la page. Juste la page d'accueil fait 1.4 MB...

Blueprint, ça vous dit quelque chose ? Peut-être pas, mais si je vous dis framework CSS, ça peut tout de suite vous faire sourire. C'est loin d'être une blague, et pourtant ce projet a l'air bien prometteur. Regardez seulement le code source de cette page, et vous comprendrez tout de suite. Apparemment, cet outil se trouve être très utile pour les personnes ne maitrisant pas totalement les CSS, et qui veulent faire de design en tableau (Comprenez par là, que les différents espaces peuvent être positionnés sur une grille, si vous comprenez toujours pas, je vous propose de voir la démo qui sera surement plus parlante) . Créer un site web aussi simplement, sans toucher au CSS, tout en codant, sincèrement, je suis assez froid, mais bon, ça pourrait avoir un bel avenir.

Dans le même genre, mais qui m'intéresse beaucoup plus, Moonfall. Encore une fois, le titre n'est pas vraiment très explicite, mais derrière ce mot se cache un programme assez curieux. En fait, Moonfall est un "petit" script qui permet d'insérer des variables dans vos feuilles de style, ces nombres dynamiques sont alors dépendants d'autres paramètres, tel que la largeur de la page. D'autre part, les possibilités fournies par le script semblent à première vue assez maigres, puisqu'il existe des alternatives mais avec l'utilisation du javascript.
Bref, pour conclure, de bons atouts (script .cgi notamment), mais j'attends d'en avoir plus. Peut-être faudrait-il que j'apprenne le Lua...

Elliotte Rusty Harold nous explique les nouveaux éléments présents dans HTML 5. Peut-être que l'on voit là les nouvelles balises qui seront présents la nouvelle version du xHTML. En large, on voit un bel effort notamment concernant la sémantique...

Les aides dynamiques dans les formulaires web sont de plus en plus répandus. Voici un bel article qui résume ce qui se fait sur Internet. Un must-read pour nous tous.

Quelques bonnes idées, et un rappel des bases en matière de design.

Et des sites à voir...

Quelques sites ont également ouverts ces jours-ci, et certains d'entre eux méritent une grande attention.

Nick La a ouvert son blog consacré sur le design : Web Designer Wall, cela va devenir une référence dans les mois à avenir à coup sur.

L'ergonomie doit toujours être un aspect à étudier longuement lors de l'aspect d'un site, un blog français dans ce domaine vient d'ouvrir. A bookmarker d'urgence.

Voilà un bref retour sur l'actualité du design qui est loin d'être statique en ce moment.
En espérant que ce genre d'article vous plaise...