Trucs de webmaster

#SmashingConf : les photos

Gargouilles | Oxford | Panoramiques | Instagram

Des Gargouilles

Des photos d’Oxford… sur Flickr

Des Panoramiques

Des photos d’Oxford… sur Instagram

[alpine-phototile-for-instagram id=780 user= »zemoko » src= »user_tag » tag= »smashingconf » imgl= »instagram » style= »gallery » row= »7″ grwidth= »800″ grheight= »600″ size= »Th » num= »26″ highlight= »1″ align= »center » max= »100″]

#SmashingConf : Jour 2

#SmashingConf : Jour 2

(Le jour 1, c’était hier 😉)

Les conférences

An so the Mystery begins

Le mystery speaker de cette année, c’était Chris Heilmann et sa conférence s’intitulait Welcome to planet Fintlewoodlewis
Une conférence pleine de bon sens.

Petite sélection de citations :

  • As soon as you think you should control the user, please leave the Web.
  • We need to create for people who are not us.
  • Unblock the pipes. Websites became so obese.
  • We shouldn’t force users to use a new browser. They come to us, we should make it work for them. We should not force our users to nothing!
  • Fix the broken things before we build shiny new broken things

Enhancing Responsiveness with Flexbox par Zoe M. Gillenwater

Le message est, peu ou prou, le même que l’an dernier mais, comme Zoé m’avait convaincu l’an dernier, c’était à la fois rassurant et amusant d’assister à cette conférence. Le pourcentage de navigateurs supportants Flexbox a encore augmenté mais le principe reste le même : Flexbox as a progressive enhancement. Si vous n’avez pas encore passé le cap Flexbox, foncez !

Debugging HTTP par Lorna Mitchell

Je dois avouer que c’était une conférence un poil trop technique pour moi et que j’en ai profité pour aller acheté des cookies au marché couvert !

Making a silky smooth web par Paul Lewis

Obsédé par la performance ? Cette conférence était faire pour vous. Une bonne conférence pour mieux comprendre, et pour étende, la notion de performance web. Très concrète, pleine d’exemples… chouette !

Crafting for #WorldDomination par Polle de Maagt

Pour être honnête, je ne sais trop que penser de cette conférence… C’est un peu comme quand Google nous dit Don’t be evil, on a envie de le croire… mais on y croit pas. Les exemples montrés par Polle de Maggt sont sans doute de très beaux projets marketing de KLM mais ça me laisse un sentiment de malaise… C’est sympa cette idée de cadeau surprise qui vous arrive de nul part à l’aéroport et ces jolies hôtesses qui viennent vous l’ouvrir avec ce grand sourire… mais, quand on y réfléchit, c’est autant une traque des clients qu’une recherche de cadeau parfait. Bof, bof.
J’ai beaucoup plus apprécié la partie concernant la gestion de l’équipe User research for designers & ingeneers par Rachel Ilan Simpson

Une conférence passionnante sur tous les types de tests utilisateurs qu’on peut faire pour faire toujours mieux, plus adapté à nos utilisateurs. L’idée est de rentrer dans un cercle vertueux pour tester, prototyper, interviewer, évaluer… et recommencer. Ce qui se résume magnifiquement par Fail early. Fail often..
Mention spéciale à cette fabuleuse vidéo youtube The Scrollwheel dans laquelle touter personne ayant, au moins une fois, participé ou assisté à des tests utilisateurs se reconnaitra.
Ah et, euh, pourquoi diable a t’on tous téléchargé Pop ? C’était juste pour faire une (mauvaise) blague aux gens qui essaient tant bien que mal de maintenir le Wi-Fi ?

The UX of offline-first par Jake Archibald

Une conférence qui regroupe les 2 thèmes privilégiés de l’année : Progresive enhancement et Services Workers.
Elle n’est pas nouvelle mais j’aime toujours autant cette image d’un escalator pour expliquer le concept de Progresive enhancement. Quant aux Services Workers, je dois avouer que je ne sais pas encore bien quoi en faire mais que les conférences de cette année m’ont sérieusement chatouillé et qju’il va vraiment falloir que je creuse le sujet. Surtout que j’adore cette idée/citation : Is ServiceWorker ready? It will be — if you start using it.

La Photo walk

Nous avons fait, au pas de course parce qu’il était déjà un poil tard et que la lumière déclinait vite, une petit tour dans Oxford en suivant Cat Clark, puis nous sommes tous allé dans un pub pas bien droit pour boire des bières et manger des burgers.
(un billet suivra très vite avec mes photos !)

Bilan

Je repars d’Oxford reboosté, avec l’envie d’essayer plein de trucs et des idées plein la tête… Je retrouve aussi foi dans le web : revenir aux basiques, à du sémantique, du responsive par nature, des échanges enrichissants, des discussions stimulantes, ne pas re-inventer la roue, revenir à du simple, penser à tous, être accessible… (mais un peu paumé aussi quant les mozillians historiques sont recrutés par Microsoft et qu’on ne sais plus que penser de Google…)

Peut-être encore plus que l’an dernier, c’était un événement vraiment cosmopolite et ça fait un bien fou. J’ai discuté avec des anglais, pris des photos avec une néerlandaise, refais le monde avec des californiens et un tchèque, disserté bières avec un belge et un luxembourgeois, bu des cafés avec une norvégienne, mangé des hamburgers avec une allemande, un portugais vivant aux Pays-Bas, un grec et une espagnoles vivants en allemagne, fait un atelier avec un lithuanien… C’était vraiment incroyable.
Je reviendrais ! Rendez-vous l’année prochaine ?

#SmashingConf : Jour 1

#SmashingConf : Jour 1

Et voilà, nous sommes déjà au matin de la seconde journée de conférences de la SmashingConf Oxford 2015 ! Avant de la commencer, petit retour sur la journée d’hier :

La ville

Oxford me plait toujours autant. Moins de chance cette année avec le temps mais ça reste toujours aussi magique de s’y promener. Juste petit comme il faut pour pouvoir tout faire à pieds ou à vélo, juste grand comme il faut pour être super animé. Une énergie incroyable de dégage de ce lieu, c’est vraiment incroyable.

Les gens

Les échanges sont toujours aussi enrichissants ici avec des gens qui viennent de tous les horizons : j’ai croisé quelques autres français, un luxembourgeois, un belge (mais je soupçonne qu’il y en a d’autres), une norvégienne, une petite tribu de californiens, une néerlandaise… et pas mal d’anglais ! Une bonne partie sont développeurs mais ça reste vivable 😉

Les conférences

La journée a commencée, comme il se doit, avec un show de lasers de Seb Lee-Delisle, et des ballons

A Good Writer Is a Good Thinker par Christopher Murphy

Une bien chouette conférence pour commencer, juste ce qu’il faut d’abstraction et de généralités, quelques lectures conseillés, quelques règles de vie et/ou de travail à tester. Une conférence vraiment inspirante.

Getting Personal: The Why and How of Designing for People par Meagan Fisher

Une conférence rafraichissante avec des chats dedans. Le design et l’empathie, #toussa.

Don’t Give Them What They Want, Give Them What They Need par Richard Rutter

Une chouette conférence sur la refonte du site de Chelsea & Kelsington. J’en ai tiré, en vrac, la confirmation que l’HTML c’est mieux que des PDFs mais que des PDFs balisés c’est mieux que rien, qu’on n’est pas condamné à avoir un seul gabarit de site, que plusieurs moteurs de recherches, et plusieurs champs de recherches, c’est une idée à creuser, quelques considérations aussi sur la navigation et le fil d’ariane. Tout cela va bien me servir, je le sens.

Responsive Images are here! par Yoav Weiss

Une bon état des lieux… qui me laisse toujours un peu avec le même sentiment : tout cela est tellement compliqué ! Pour bien faire, il faut encore coder tellement, et produire tellement de versions que j’ai du mal à voir comment on peut intégrer cela dans un contexte un tant soit peu industriel. Bonne conférence, hein, je ne dis pas… mais il faut que je songe à ce que je vais en faire… On a des sites à faire vivre et des projets de refonte dans les tuyaux 😉

Rethinking Publishing par Peter Bil’ak

Je ne savais trop quoi penser cette conférence… mais finalement elle était assez intéressant et m’a donné envie de découvrir le magazine de Peter (ce qui était sans doute le but et faisait de cette conférence une sorte de publimercial assez étonnante ici).

Visualisation that takes us beyond the numbers par Natalie Yadrentseva

Cette conférence aurait pu être très intéressant, et elle faisait parti de celles que j’attendais avec impatience mais c’était en fait une suite de petits exemples, pas toujours très explicites, et personne ne semble avoir vraiment compris où elle voulait en venir… Dommage !

Beyond the browser par Tom Giannattasio

Il FAUT que je trouve une idée d’appli à développer avec nw.js que nous a présenté Tom, ça a l’air vraiment trop cool 🙂 <-- Quand on sort d'une conférence avec ça en tête, c'est que c'est gagné, non ?

Is Blink The New IE6? par Bruce Lawson

Une conf’ incroyablement inspirante et un conférencier tout aussi incroyable. ça a commencé par un historique qui donnait un petit peu le vertige sur les années Netscape 4/IE6/Netscape 6 (en tout cas à un dinosaure du web, ça donnait le vertige) pour finir à un état des lieu assez objective sur la situation actuelle des développeurs de navigateurs, et sur cette conclusion logique « The only people who could make a browser monopoly are us, developers. ». L’esprit de cette conférence était clairement #ShareTheLove, ça m’a fait penser à Paris Web !

Ce sont des réactions à chaud, mais je prendrais le temps en revenant de faire un retour plus poussé… et sans doute un petit Storify de mes tweets et de ceux que j’ai retweetés.

Sinon, merci vraiment à Smashing Magazine qui m’a offert 2 de leurs livres (je ne sais pas comment ils organisent leur tirage au sort ;))

Et, comme l’année dernière, mention spéciale à Elisabeth Irgens et à l’esprit de synthèse dont elle fait preuve pour produire, pour chaque conférence, des sketshbooks absolument incroyables.

La Smashing Party

Encore pas mal d’échanges enrichissants, en buvant pas mal de bière… C’était vraiment chouette.

Bon allez, il faut que je me dépêche de me préparer, c’est pas tout ça mais j’ai une seconde journée de confs qui commencent dans une heure moi !

Paris Web 2014 : mon compte-rendu

Paris Web 2014 : mon compte-rendu

Paris Web a été, est et restera l’événement annuel à ne pas manquer.

Certes, sur certains sujets on peut parfois avoir l’impression de tourner un peu en ronds, certes l’équilibre entre technique, méthodo, UI/UX, « life hacking » et, globalement, tout ce que je classerais « ouverture de chakras » n’est pas aisé et peut ne pas convenir à tout le monde tout les ans, certes… mais la magie continue d’opérer.

Je dirais même que c’est encore un peu plus magique quand on choisit certaines conférences « par défaut » et que ces conférences, dont le sujet ou le pitch ne vous disaient rien, vous emportent et vous transportent.

Cette année, j’ai peut-être appris moins de choses que les années précédentes mais j’en repars reboosté, l’esprit bien aéré et mieux dans mon job. C’est génial, non ?

Quelques réflexions, en vrac :

  • L’organisation de Paris Web me parait encore meilleure d’année en année (et je n’aurais pas cru cela possible). Le Beffroi est vraiment adapté (bon, OK, je le dit : ça valait le coup de passer le périph’ ;P), le tempo de ces 2 jours était vraiment bon. Je repars aussi toujours émerveillé par les traductions à la volée, vélotypie et langue des signes.
  • Les orateurs de Smashing Magazine sont toujours aussi bons. J’espère vraiment pouvoir retourner à Oxford l’an prochain !
  • Il faut croire que la formation Accessiweb, suivie de bon nombre de séminaires et de quelques années de pratique ont bien fonctionné car j’apprends de moins en moins de chose dans les conférence portant sur l’accessibilité… mais je prends toujours autant de plaisir à y assister, à voir que c’est de moins en moins une question (du moins à Paris Web, je ne suis pas un bisounours non plus…). #ShareTheLove et a11y sont dans un bateau… le bateau va plus vite et plus loin
  • J’ai encore un peu de mal parfois à me positionner parmi les paris-webeurs : la plupart portant des titres précis (enfon on a vu qu’ils n’étaient pas si précis que cela en fait mais je comprends)… quand je suis « webmaster ». Ils sont souvent en agence, en tout cas prestataires, quand je serais plutôt de l’autre coté de la barrière… (un jour, il faudra que je l’écrive ce que je vis, moi, le client.. En attendant, on a déjà un serment qui nous rapproche sous l’appellation « Travailleurs du web », c’est un bon début 🙂

Serment du Beffroi de Montrouge

Je fais le serment de remplir mes fonctions avec conscience, indépendance, et humanité.

Je m’engage à suivre les standards du web, de la qualité et de l’accessibilité pour que le web reste universel, neutre, libre et ouvert.

Je m’engage à respecter et protéger le secret dû aux données personnelles et à la vie privée dont j’aurai connaissance dans l’exécution de mon travail.

Je suis un travailleur du web, j’en suis fier,
et j’assumerai mon rôle avec dignité.

Notes aux futurs orateurs : Star Wars et Retour vers le futur sont des valeurs sures pour vos slides, d’autant plus si vous les utilisez en lego…

Ah, et puis, toutes les présentations sont déjà en ligne ! C’est dingue, non ?

Quelques autres CR, en vrac :

On se retrouve l’année prochaine ? Sans fautes, hein ?
J’essaierais de mieux m’organiser et d’échanger avec tous ceux que j’ai loupé cette année…

Paris Web : Jour 2

Paris Web : Jour 2

2ème journée un chouille plus courte que la première pour cause d’agenda mal géré (place prises voici quelques mois déjà pour aller voir l’exoconférence au Rond-Point à 18h30) et de mauvaise organisation (j’étais persuadé que c’était des e-billets et en fait, non, donc passage obligé par la FNAC…).
Bref…

Quelques très bonnes conférences bons orateurs encore pour 2ème journée… mais mes choix de conférences ont sans doute été moins heureux que pour le jeudi… C’est la loi de Paris Web, vous me direz 😉

  • J’ai vraiment beaucoup apprécié la conférence d’Hubert Sablonnière sur le « web multi-écrans » : un super orateur, un sujet traité sous tous les angles, un bon équilibre méthodes/humour/technique/prospective/etc
  • Stéphane Deschamps est toujours aussi drôle et à son aise en orateur et, l’air de rien, il a particulièrement bien traité un sujet qui, à priori, ne m’intéressait pas tant que cela. Bravo !
  • Même chose pour Jean-Pierre Simmonnet qui a su électriser la salle sur une étrange histoire de serment qui pouvait laisser dubitatif sur le papier et était, elle-aussi, particulièrement pertinente ET drôle sur place.

Comme pour le jeudi, petit Storify rapide :

Paris Web : Jour 1

Paris Web : Jour 1

Petit résumé, à chaud chaud et rapidement :

  • J’ai beaucoup aimé le matin, c’était #ShareTheLove même si, parfois, on ne savait pas trop où on allait (mais est-ce grave ?) ou si j’ai pas tout compris au speech de #porteneuve (je crois que je ne serais jamais développeur, tant pis).
  • J’ai adoré l’après-midi. Notamment les 2 speakers de Smashing Mag, Marko Dugonjić et Vitaly Friedman. J’espère vraiment qu’en mars prochain, je pourrais retourner à Oxford 😀
  • La dernière conf’, celle de Billy Gregory, était aussi super inspirante. Décidément, Paris Web, quand ça parle d’accessibilité, c’est #ShareTheLove… et ça fait du bien. On se sent moins seul, on doute moins… on repart bien reboosté 🙂

Vivement demain !

En attendant, voici déjà un Storify rapide de cette 1ère journée à Paris Web.

Ceci n’est pas une date

Ceci n’est pas une date

Un petit billet technique sur une problématique qui a tendance à m’agacer, quand elle est mal pensée (bonjour le PMU), les champs « date de naissance » des formulaires.

En gros, il existe 4 manières pour demander à quelqu’un sa date de naissance :

Je me propose d’essayer d’évaluer ces 4 manières de faire, dans un contexte à la fois desktop et mobile, sur des sites ou dans des apps.

Si vous êtes pressé, vous pouvez directement consulter ma conclusion !

 

Un champs de texte libre

C’est la méthode la plus simple et la plus basique :

<label for="DateDeNaissance">Date de  naissance</label>
<input type="text" id="DateDeNaissance">

Pour être le plus complet, on peut ajouter une aide éventuelle pour expliciter le format de date attendu :

<label for="DateDeNaissance">Date de  naissance</label>
<input type="text" id="DateDeNaissance" aria-describedby="DateDeNaissance_Aide">
<span class="aide" id="DateDeNaissance_Aide">JJ/MM/AAAA</span>

On peut aussi profiter des nouvelles propriétés HTML5 pour contrôler le format :

<label for="DateDeNaissance">Date de  naissance</label>
<input type="text" id="DateDeNaissance" aria-describedby="DateDeNaissance_Aide" pattern="\d{1,2}/\d{1,2}/\d{4}">
<span id="DateDeNaissance_Aide">JJ/MM/AAAA</span>

Résultat :

Maquette de formulaire utilisant un champs de texte libre
Ceci n’est pas une date, c’est un champs de texte libre
Voir la page

Exemple d’implémentation :

Formulaire d'authentification JOA
JOA
(pas de lien, le site est moche et bourré de popups *àlacon*)
Pas de soucis particuliers avec cette méthode, très classique, facile à rendre accessible mais aussi à utiliser, sur desktop comme sur mobile. Seul bémol : sur mobile, il faut opérer à de multiples changements de type de clavier pour saisir nombres et séparateurs.

 

Un champs de type date

<label for="DateDeNaissance">Date de  naissance</label>
<input type="date" name="DateDeNaissance">

Rien de particulier à rajouter pour être accessible, ça marche « Out of the box ». C’est d’ailleurs l’exemple choisi par moult blogs pour illustrer le nouveau type de champs date (notamment Alsacreation).

Résultat :

Maquettede formulaire utilisant un champs de type date
Ceci n’est pas une date, c’est un champs de type date
Voir la page

Exemple d’implémentation :

Inscription | pmu.fr
PMU
Formulaire d’inscription
C’est clairement, à mon sens, une solution peu ergonomique car, quand j’essaie de m’authentifier sur un site web, c’est bien plus compliqué de choisir ma date de naissance dans un sélecteur de date que de la saisir dans un champs texte, notamment sur téléphone et sur tablette.

 

3 champs de texte libres

Pas forcément la plus simple à manipuler pour être accessible ET ergonomique (3 champs = 3 labels) mais on peut s’en sortir :

  • avec quelques textes cachés mais restitués aux aides techniques
  • avec un peu d’ARIA pour expliciter les relations entre champs
<span id="DateDeNaissance">Date de  naissance</span>
<label for="JourDeNaissance" id="JourDeNaissance_label" class="text-hide">Jour</label>
<input type="number" id="JourDeNaissance" aria-labeledby="DateDeNaissance JourDeNaissance_label" placeholder="JJ">
<label for="MoisDeNaissance" id="MoisDeNaissance_label" class="text-hide">Mois</label>
<input type="number" id="MoisDeNaissance" aria-labeledby="DateDeNaissance MoisDeNaissance_label" placeholder="MM">
<label for="AnneeDeNaissance" id="AnneeDeNaissance_label" class="text-hide">Année</label>
<input type="number" id="AnneeDeNaissance" aria-labeledby="DateDeNaissance AnneeDeNaissance_label" placeholder="AAAA">

Résultat :

Maquette de formulaire utilisant 3 champs de texte libres
Ceci n’est pas une date, ce sont 3 champs de texte libres
Voir la page

Exemples d’implémentation :

Identification | pmu.fr
PMU
Formulaire d’inscription
Connexion - App LOTO
FDJ
Connexion à l’app
Pas de soucis particuliers avec cette méthode, un peu plus complexe cependant à mettre en œuvre que la méthode du champs de texte unique. Un avantage cependant lors d’une saisie avec un téléphone puisque on passera facilement d’un champs à l’autre sans se poser la question du séparateur à utiliser.

 

3 listes déroulantes

La mise en œuvre est assez similaire à celle de la solution précédente :

<span id="DateDeNaissance">Date de naissance</span>
<div class="Selects">
<label class="text-hide" id="JourDeNaissance_label" for="JourDeNaissance">Jour</label>
<select id="JourDeNaissance"><option>1</option>...<option>31</option></select>
<label class="text-hide" id="MoisDeNaissance_label" for="MoisDeNaissance">Mois</label>
<select id="MoisDeNaissance"><option>1</option>...<option>12</option></select>
<label class="text-hide" id="AnneeDeNaissance_label" for="AnneeDeNaissance">Année</label>
<select id="AnneeDeNaissance"><option>1940</option>...<option>1994</option></select>
</div>

Résultat :

Maquette de formulaire utilisant 3 listes déroulantes
Ceci n’est pas une date, ce sont 3 listes déroulantes
Voir la page

Exemples d’implémentation :

Authentification | fdj.fr
FDJ
Formulaire d’authentification
Connexion - App PMU
PMU
Connexion à l’app
C’est une solution que ne parait pas plus adaptée que la solution du champs date. Pire, elle n’est adaptée ni à la saisie au clavier, ni à la saisie sur téléphone ou sur tablette.
Mise à jour du 3 août 2014 : le PMU vient de mettre à jour son app, notamment pour modifier ces champs de saisie de la date de naissance ! Je ne devais pas être le seul à pester 😉 Maintenant, ce sont 3 champs de texte libres qui s’enchaînent et c’est bien mieux. Merci le PMU !

 

En conclusion : Restons simple

  • Champs texte unique : simple à mettre en œuvre, accessible, ergonomique
  • Champs date : simple à mettre en œuvre, accessible, peu ergonomique avec un clavier, pas ergonomique du tout avec un téléphone ou une tablette
  • 3 champs textes : un peu plus complexe à mettre en œuvre et à rendre accessible, ergonomique sur ordinateur et sur mobile
  • 3 listes déroulantes : également plus complexe à mettre en œuvre et à rendre accessible, pas ergonomique, quelque que soit le contexte
  • Les méthodes les plus ergonomiques, un champs texte unique et 3 champs textes, sont aussi les méthodes les plus simple à mettre en œuvre et à rendre accessible… alors pourquoi faire compliqué ? Globalement, je privilégierai la solution des 3 champs textes, visiblement la plus universelle.

    Si quelqu’un du PMU passe par ici… sachez que je vous maudit tous les dimanches de vos choix ergonomiques hasardeux !

    Pour finir, un petit lien vers un site du gouvernement britannique qui s’est posé la même question (et qui réponds sensiblement de la même manière) : Asking for a date of birth

Smashing Conference (Oxford ’14)

Un petit résumé de la Smashing Conf qui a eu lieu la semaine dernière à Oxford et à laquelle j’ai eu le bonheur d’assister.

Ce que j’en retiens : il serait peut être temps

  • de se pencher plus sérieusement sur Flexbox (la pres de @zomigi est juste impressionnante de clarté)
  • d’envisager svg pour les illustrations (vs les icons fonts qui n’ont pas encore dit leur dernier mot)
  • de penser « responsive« , « maintenable« , « performance« …

Le plus dur reste encore et toujours :

  • de voir ce que propose maintenant les outils de marché… ça donne envie.
  • de se projeter et d’utiliser ces techniques… alors que notre impératif reste une bonne restitution sous IE8 🙁

Place au Storify :

  • 1
  • 2