Cette année, j’ai décidé de participer à toutes les conférences qui ne sont pas au cœur de mon activité quotidienne, au sens production. En gros, j’ai voulu laisser tomber tous les buzzwords et me concentrer sur des compétences et connaissances périphériques à activité. Satisfaire ma curiosité.

Je suis donc arrivé à Paris Web sans avoir regardé le programme, en décidant entre chaque pause le titre de la conférence que j’allais inscrire sur mon carnet de notes.

L’ouverture par l’architecture

Ce n’est pas tout à fait vrai : je savais quelle était la première conférence à laquelle j’allais assister. Graine semée il y a 2 ans, dans le retour en métro de Paris Web 2008. J’apprenais que Fabien Basmaison partait 1 année entière en Chine (ou ailleurs en Asie ?).
Absent de Paris Web 2009, il propose « Espace construit et espace virtuel, un retour vers le futur ?«  en guise d’introduction.

Ou comment ne pas parler de Web mais d’architecture, de construction et d’alliage fonctionnel/esthétique.

Il citait d’ailleurs une phrase que j’apprécie beaucoup : l’architecture, c’est savoir changer d’échelle, de point de vue. Je me plais à appliquer ce moto au quotidien mais au fond, n’est-ce pas là une chose essentielle pour toute personne travaillant dans le Web ? Savoir sortir le nez du cambouis, observer ce qui l’entoure, s’en inspirer et replonger/changer d’angle d’attaque.

L’architecture, c’est également réduire les obstacles pour obtenir davantage de fluidité, et augmenter le rendement. C’est la raison d’être des méthodes agiles, comme scrum. Parce que notre défi, c’est réussir un projet sur une base qui est tout sauf industrialisée (voire industrialisable).

L’architecture, c’est travailler sur un patrimoine, ensemble, en utilisant l’existant (cf. Let’s Interface!). On ne peut créer un ouvrage sans tenir compte de l’existant, de l’environnement ou même de l’intérêt même du-dit ouvrage. On ne peut décemment pas concevoir un site Web optimisé pour Internet Explorer 6 et une résolution de 1024×748, ce serait juste omettre/nier l’existence du Web tout entier.

Paris Web est un moment où l’on s’ouvre l’esprit : cette conférence était programmée au bon moment, avec le bon intervenant mais surtout avec le bon contenu. Quelque chose qui n’était pas axée sur le Web. Celui qui replace le Web dans son contexte, celui de l’inspiration.

Conseil livre : de Le Corbusier.

Let’s Interface!

Christian Heilmann me fascine littéralement. Il a le don d’arriver à insuffler ce qu’il recherche : du fun et de l’intelligence.
Si je devais résumer cette conférence en une phrase, ça serait la sienne : le Web est un outil, utilisons-le. On ne construit pas pour le Web, on construit avec le Web.

C’est la transcription parfaite de l’architecture vers le Web. Tenir compte de l’existant, des outils, pour construire les siens et arrêter de réinventer la roue.

Les interfaces devraient être des outils faciles à utiliser, et à comprendre. De l’accessibilité au sens large en somme.
De quoi insister auprès des clients de ne pas perdre de vue l’objectif principal ? L’utilisateur ?

L’accessibilité dans une chaîne de production Web

Quel meilleur moyen de ne pas perdre ses objectifs de vue en effectuant un contrôle qualité, matérialisé par une vérification de l’accessibilité à toutes les étapes du processus, plutôt qu’en livraison finale. C’est le point de vue de Denis Boudreau et de Vincent François.

Pourquoi la fin de chaîne pose problème ? Tout simplement parce qu’il est (souvent) déjà trop tard, que le coût des modifications en est multiplié mais surtout, c’est beaucoup plus simple d’intégrer ça dès le départ.
Si on en revient à l’architecture, c’est comme si on mettait des fenêtres à 2 mètres de hauteur et qu’on se rendait compte à la livraison de la maison que ce n’est pas accessible car trop en hauteur pour les habitants. Vous vous voyez casser le mur et descendre la fenêtre ?

Leur présentation de l’accessibilité dans une chaine de production Web, navigable au clavier et à la souris, est équivoque et découpe ces différentes phases au sein du projet :

• Analyse
• Architecture
• Ergonomie
• Graphisme
• Prototypage
• Rédaction
• Développement
• Contrôle qualité

Le liant entre ces phases étant la gestion de projet, menée de concert entre la maîtrise d’oeuvre et la maîtrise d’ouvrage. Une personne a même très justement souligné qu’il faudrait ajouter une nouvelle dernière étape, la livraison/maintenance. Pour s’assurer notamment qu’à l’usage, lors de la contribution ou des évolutions de l’application, l’accessibilité soit maintenue à niveau.

Innover de 9 à 5

Je m’intéresse à l’innovation, pas seulement à la théorie mais également à sa mise en pratique, depuis que je vois passer sous mon nez des projets intéressants mais qui oublient toujours une chose. Les usagers (tiens, on y revient). Un site est réalisé par une entreprise, pour accomplir un but (besoin marketing, nouveau produit ou autre) mais … la praticité et l’intérêt de l’usager, bien souvent, y sont absent ou trop peu représenté.

J’y reviendrai dans d’autres articles, par le biais de mes lectures et de mes projets.

Toujours est-il, j’ai découvert une autre personne de Phéromone, Olivier Théreaux. Il a présenté de manière méthodique les différents types d’innovations possibles (business, design, incrémentales, radicales). Leur mélange provoque de l’efficacité, une amélioration des processus, de nouveaux produits, une découverte de nouveaux besoins et j’en passe.

Le travail de l’innovation, ce n’est pas seulement l’acquisition de l’idée : c’est l‘art de la faire fructifier, de la mettre concrètement en oeuvre.
En ce sens, il cite Scott Berkun : les gens ne veulent pas innover, ils veulent avoir innové. N’avez-vous jamais entendu de client qui vous demandait une application iPhone sans savoir ce qu’ils voulaient y mettre ? La réponse est dans la citation.

Innover, c’est apprendre à échouer. C’est admettre que des fautes seront commises et que la réussite se mesure également en terme de ressources : elles doivent être à la mesure des ambitions. L’amplitude entre les 2 augmente les risques d’échec.

Olivier soulignait aussi un détail essentiel, qu’on oublie un peu et qui pourtant caractérise tellement notre métier, notre univers : c’est la culture hacker. Hacker au sens bidouilleur. Celui qui parvient à ses fins en se servant d’outils à disposition. LE Web est à notre disposition.

Encore une fois, les personnes les plus fascinantes ne sont pas celles qui apportent de nouvelles choses ou qui sont les « meilleures ». Mais celles qui apportent un regard différent, de par leur(s) culture(s), leur expérience et leur vécu.

Conseil lecture :  de Scott Berkun.

Journey over Destination: creating an effective framework with UX tools

J’ai malheureusement été moins attentif sur la conférence de Stéphanie Troeth (projet client à régler, à croire que chaque année j’y coupe pas ;-(). Néanmoins, à la lecture de ses slides pendant sa présentation, une chose m’avait frappé : tout est clair, limpide et extrêmement synthétique. Sans le son, il y avait de quoi apprendre. C’est d’ailleurs comme ça que je me suis aperçu que la méthode employée lors de mon atelier technique (dont vous pouvez lire l’annonce ; le détail et résumé arrivent) était en fait de l’interactive design.

L’expérience utilisateur repose avant tout sur la conception, du site, de l’outil ou de je ne sais quoi (le concept s’applique à tout, pas seulement au Web). Encore une fois, l’agilité du processus, la fragmentation des tâches et les contraintes (limites de temps, de fonctionnalités etc.) sont un élément essentiel à la qualité du résultat final.

L’exemple le plus parlant est celui du curseur : tirer d’un côté enlève du poids à l’extrême opposé. De même que parmi la trinité temps, argent, fonctionnalité, on ne peut en conserver que 2. Lesquels choisiriez-vous au moment d’acter un choix ? Que diraient vos clients ?

Notre conversation en off m’a confirmé mon intuition : sa présentation représente des mois de réfléxion, au fil de l’eau. Tiens, ce n’est pas justement le concept de l’innovation ?

La typographie comme outil de design

Encore un petit nouveau à Paris Web : David Rault. Encore un globetrotter, à croire que ça va devenir un élément déterminant sur le CV

La typographie, de mémoire, est un sujet qui a été peu abordé à Paris Web, en tous cas pas lors de conférences. Je m’y connaissais assez peu et le moins que je puisse en dire, c’est que je suis resté le regard rivé sur la scène, à noter avec délectation cet enseignement, fort souvent un choix par défaut. On va utiliser quelle typo ? Oh bof, de l’Arial ou du Verdana.

Quelques explications sur la classification typographique, et hop, tout devient plus clair quant aux termes serif, sans-serif, linéales, humanes, garaldes, romaines etc. Je ne paraphraserai pas cette classification.

En revanche, retour à l’architecture, c’est tout le bagage culturel que les polices de caractères véhiculent. Sans oublier leur base historique et sociale. Je n’imaginais pas utiliser sur un ordinateur une police datant du XVI^ème siècle, considérée comme parfaite.

En considérant que le Web, c’est 95% de typographie (ce que l’on lit), ce n’est clairement pas le choix banal que l’on a l’habitude de faire, ou de subir. Je rajoute cette notion aux indispensables à réunir pour réussir un projet, par le biais de la communication écrite.

Conseil lecture : de David Rault.

La macrotypographie de la page Web

On reste dans l’univers de la communication visuelle avec Anne-Sophie Fradier. L’occasion d’ailleurs de me rendre compte que j’avais déjà lu son blog auparavant, et que je le découvre juste maintenant, à l’occasion de la rédaction de cet article Le Web est petit et on se connait plus facilement en avatar en fin de compte.

Macrotypographie vous dites ? Il s’agit de concevoir la typographie au niveau du paragraphe, de la page, par le biais de grilles, de colonnes, leur ratio etc. C’est forcément une personne bien puisque les grilles, elle adore et en mange au petit-déjeuner mais surtout, a eu une réponse extra à ma question (oui j’ai posé beaucoup de questions, je sais ) : les grilles apportent-elles une contrainte qui brident la créativité ?
Réponse : non, bien au contraire, il faut des contraintes pour développer la créativité. Elles agissent comme un guide.

Le rapport permanent du livre au Web était très intéressant. On a tendance à opposer print au Web, moi le premier … et finalement, elle considère que la page Web se rapproche du volumen (les rouleaux de papier, utilisé pour la Torah notamment).
Plus amusant encore, tout ce qui concerne la typographie a déjà été inventé … par les moines. Enluminures, marges, blocs de lecture etc.

Un regard rafraîchissant de plus sur la manière de concevoir et d’architecturer nos contenus, nos sites et nos applications.

Conseil lecture : de Josef Muller-Brockmann.

La crois au rouge français

Conclusion

Alors, pourquoi avoir titré mon article l’âge de la raison ? Parce qu’en plus de partager notre amour du Web, les intervenants de Paris Web, les organisateurs, mais aussi les participants, ont réussi à démontrer qu’on n’était plus que dans la diffusion d’informations à coup de slides.
Non, on était dans la création.

L’âge de la raison parce que finalement, le fond de cette édition était basé sur les réflexions. Qui sommes-nous ? Comment valoriser nos compétences ? Comment dialoguer avec le client ? Comment dire que la qualité ce n’est pas une option (pas la nôtre) ? Comment faire un site Web standard et un site Web mobile en un seul développement ?

L’âge de la raison car les processus de création et les enjeux métier étaient au centre des réflexion. Et qu’on n’a d’ailleurs toujours pas une réponse claire. L’argumentation va s’étoffer avec le temps, je n’en doute pas.

Je remercie chaleureusement les organisateurs d’avoir si bien réussi la programmation. Cette matinée typographie est un vent de fraîcheur qu’il faut continuer à pousser, pour aborder le webdesign d’un angle peu pratiqué jusqu’à présent.
L’expérience de la vélotypie et de la traduction simultanée (et les 2 en même temps) était excellente. Je découvrais l’effervescence d’un organisateur des RMLL se demandant comment mettre en place un tel système.

Je terminerai malgré tout par quelques critiques, car on peut toujours progresser :

• HTML5 c’est sympa, il faut aller vers du concret, au-delà des balises section, header etc. La démo de Paul Rouget cassait la baraque car elle apportait ce qu’il manquait jusque là : la concrétisation au-delà du slide ;
• le mobile a quasiment disparu de la programmation alors que l’an dernier, on sentait que c’était le sujet de toutes les interrogations
• les conférences sur le contenu, leur rédaction me font trop souvent penser à des cours de référencement naturel de bas étage (je suis dur, j’assume)

Encore une fois, rendez-vous de pris pour l’année prochaine, à savoir en 2011 … à moins qu’un Sud Web se glisse entre temps dans le calendrier ?

Remarque : j’oublie plein de choses, plein de personnes (Ryan, toute la famille avec Frank, N1k0 etc.) … dur dur de tout caser en 1 billet ;-(

Ce titre fortement accrocheur à la limite de l’injure annonce la couleur : l’ouvrage est censé vous expliquer que les techniques employées aujourd’hui ne sont que du bricolage et qu’on peut faire la même chose en plus propre et plus simple.

En route pour cette saine lecture … ou pas.

Chapitrage

Everything You Know About CSS Is Wrong! est découpé en 5 chapitres. Cela représente un volume d’une petite centaine de pages. En voici la structure :

1. The Problem with CSS
2. CSS Table Layout
3. CSS Table Solutions
4. Considering Older Browsers
5. The Road Ahead

Si vous commencez à flairer le mauvais plan, vous n’avez pas tout à fait tort.

display: table-cell au lieu de float/clear/margin

Tel serait le credo de l’ouvrage. C’est en teneur ce qui y est distillé, ni plus ni moins.

Quand on y repense, aujourd’hui on utilise vraiment des techniques à la noix pour positionner les flux, pour imiter des colonnes de taille égale. Tout ça pourquoi ? Parce que le navigateur dominant du marché s’appelle Internet Explorer 6/7 et ne permet pas d’utiliser l’attribut CSS display: table-cell.
Son utilité ? Donner à l’élément concerné le comportement d’un tableau : des cellules de hauteur égale et des colonnes notamment.

Les 2 premiers chapitres sont à ce titre très démonstratifs puisque simplement, on apprend à construire un habillage classique à 2 colonnes avec cette technique. Mais, à mon avis, le chapitre 3 est entièrement à jeter.

Le livre commence en nous expliquant qu’on utilise des techniques de barbare pour le rendu. Sauf que celles proposées pour palier aux lacunes de cette mise en page en tableaux ne valent pas beaucoup mieux : pas de solution générique possible, simulation de colspan et rowspan laborieuse … si j’ai été convaincu par la présentation en grille, je l’ai en revanche moins été par ces solutions proposées.

Le chapitre 4 explique avec plein de sous-entendus qu’Internet Explorer 6 et 7 … ben il faut arrêter. En tous cas pour utiliser le display: table-cell. Je pense que même sans cette technique on avait déjà envie de les balancer mais bon. Ça sera un argument de plus pour prôner cette solution.

Le chapitre 5, The Road Ahead, propose une présentation maintes fois vue et revue de l’avenir avec CSS3. Ça fait office de piqûre de rappel concernant le module templates et  grille notamment.

Texte 2 colonnes avec display: table-cell

Pourquoi je ne vous recommande pas son achat ?

Parce qu’au final on se trouve face à gros article doublé d’un titre bon pour écouler des exemplaires. Il aurait pu s’appeler « comment présenter en grille sans tableaux et sans flottants » par exemple.

Sans vouloir relancer le fumeux débat du  Web contre les livres, je pense qu’il y a des articles sur display: table-cell plus courts, moins chers et tout à fait valables (y compris leur article de présentation), notamment sur Alsacréations.
Pour moitié prix, le contenu aurait pu passer. À 30$, j’en attends davantage …

Je recommande avec beaucoup plus de ferveur l’indémodable Transcender CSS d’Andy Clarke.

Un dernier point toutefois : je ne suis pas convaincu qu’un rendu à l’identique au pixel près soit une solution d’avenir. Il ne faut pas espérer avoir un rendu identique à la maquette ni identique sur tous les naivgateurs (notamment au niveau de la colorimétrie). Je crois davantage à un support de fonctionnalités et des solutions alternatives pour les navigateurs ne supportant pas ces dites-fonctionnalités. De même qu’on n’a pas le même rendu de couleurs pour les téléviseurs (y compris HD), il est utopique de vouloir la même chose d’un site.

Depuis quelques mois je ne recommande plus à mes clients de supporter IE6 et ce, malgré ses 20% de parts de marché. Je préfère largement proposer une solution dégradée, toujours fonctionnelle mais moins jolie.
Cette année je refonds le thème de ce blog et je ne compte pas supporter ni IE6 ni IE7. Votre adoption d’autres navigateurs aide mais il faut montrer l’exemple.