Gastero Prod

[Blog] Performance Web, ma conférence à Web UX

Nicolas Hoizey — Thu, 08 Dec 2011 18:46:57 +0100

Pour ceux qui n’étaient pas présents à Web UX en mai 2011, et avec pas mal de retard¹, voici mes slides, ainsi que la vidéo captée par l’équipe organisatrice.

Voici donc mes slides « Web UX - Performance Web » sur Speaker Deck :

Vous trouverez aussi mes slides « Web UX - Performance Web » sur SlideShare.

Et voici la vidéo de ma conférence, captée et montée par KProdz, qui permet notamment d’apprécier à leur plus juste valeur les quelques GIF animées :

Notes de bas de page

[1] Oui, je sais, ce site est mort, je ne sais pas encore ce que je vais en faire...

Aucun commentaire pour l'instant. A vous de commencer !

« Performance Web, ma conférence à Web UX » a été publié par Nicolas Hoizey le 8 décembre 2011 sur Gastero Prod.

Sauf mention explicite, ce contenu est la propriété de Nicolas Hoizey, et est sous licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique, version 2.0 adaptée à la France.

[Blog] Ils ont (aussi) de grandes poches à la RATP

Nicolas Hoizey — Tue, 14 Jun 2011 19:15:11 +0100

Il y a quelques mois, je vous avais montré qu’ils ont de grandes poches à la FNAC. Aujourd’hui, c’est au tour de la RATP de nous montrer qu’ils ont aussi de grandes poches.

L’application RATP Pure pour iPad a en effet la description suivante¹ :

Retrouvez toutes les informations voyageur de la RATP directement sur votre iPad.
Profitez de Ma RATP dans la poche pour optimiser vos déplacements en Ile de France en toute simplicité : [...]


Présentation de l’iApp « RATP Pure »

Au passage, je ne sais pas ce qu’ils ont fumé pour appeler leur application « Pure »...

Notes de bas de page

[1] L’emphase est de moi

Déjà 2 commentaires. Ajoutez le vôtre !

« Ils ont (aussi) de grandes poches à la RATP » a été publié par Nicolas Hoizey le 14 juin 2011 sur Gastero Prod.

[Blog] Retrouvons nous à Web UX et Sud Web les 26 et 27 mai

Nicolas Hoizey — Thu, 28 Apr 2011 15:12:47 +0100

Vous le savez sans doute si vous me lisez régulièrement, sur ce blog ou via mes tweets, je suis dingue de Web, et toujours intéressé par ses moyens de mise en œuvre, usages et acteurs, et donc très intéressé par tout événement permettant de mixer tout cela. Cette année, en plus de l’incontournable rendez-vous annuel Paris Web en octobre, vous pourrez me croiser fin mai à Nîmes pour Web UX et Sud Web.

Web UX le 26 mai 2011

Voilà comment Web UX se présente :

Ce qui semble simple et facile au créateur de site, au chef de projet ou au designer devient, quelquefois, un obstacle insurmontable pour l’utilisateur. Or, naviguant sur un site Web, si on est bloqué ou simplement ralenti, on va voir ailleurs ! UX, ce sont les outils et les méthodes pour prendre en compte le comportement réel des utilisateurs et faciliter leur navigation.

Web UX, comme son nom l’indique, c’est une focalisation complète du sujet Web sur l’eXpérience Utilisateur, un regard pragmatique sur l’ergonomie du Web, pensée pour les internautes qui l’utilisent et non les techniciens qui le produisent.

J’aurais le privilège d’y animer une conférence sur la performance des sites Web, dont voici la présentation :

L’utilisateur n’aime pas attendre. Sa perception de la vitesse d’un site Web a donc une influence sur son comportement. Cette perception peut être orientée positivement en travaillant intelligemment l’optimisation des performances côté client du site Web.

Le premier réflexe quand on parle de performances Web est de se tourner vers des tests de montée en charge et des optimisations côté serveur, alors que l’optimisation des performances côté client peut être plus simple, plus efficace, et plus rentable.

Nous aborderons dans cette conférence les différents aspects de l’optimisation côté client des performances Web, en attirant l’attention sur -– par exemple –- les téléchargements bloquants, les manières optimales d’inclure le code JavaScript et CSS, et leur impact sur les performances perçues par les internautes.

Vous pouvez retrouver cette conférence sur Lanyrd, tout comme l’événement Web UX dans son ensemble, ce qui vous permettra de retrouver mon support dès que je l’aurais partagé sur SlideShare.

Sud Web le 27 mai 2011

Voilà comment Sud Web se présente :

une journée de conférences organisée par des bénévoles le 27 mai 2011 à Nîmes. Notre objectif est de « Savoir-faire et faire-savoir » le web en proposant une journée conviviale et de qualité réunissant les amoureux du web.

En exagérant un peu le trait, Sud Web est un petit frère de Paris Web, créé par des fidèles qui en avaient marre de faire le voyage vers le stress parisien et les grèves des transports en commun. Ils nous proposent d’aller les voir au soleil, en abordant des sujets assez proches, mais selon des axes différents.

Ce n’est donc pas une redite de Paris Web, mais bel et bien un complément, une manière d’engager un dialogue enrichissant entre deux événements.

Vous pouvez retrouver Sud Web sur Lanyrd pour avoir quelques détails supplémentaires, notamment voir qui y va et indiquer que vous allez aussi y participer.

Vite, vite, inscrivez-vous !!!

J’aurais dû écrire ce billet il y a déjà bien longtemps, et du coup, si vous découvrez ces événements en me lisant, il ne vous reste malheureusement pas beaucoup de temps pour vous inscrire, la clôture des inscriptions ayant lieu le 2 mai.

Alors courrez vous inscrire !

Si vous hésitez encore, j’espère que ce n’est pas à cause du prix, qui est vraiment léger en regard de ce que coûte l’organisation d’un tel événement, et de ce que coûte l’inscription à d’autres événements de même nature. En plus, vous pouvez bénéficier d’un tarif réduit si vous êtes étudiant, chômeur, ou bénéficiant du RSA.

J’espère que ce n’est pas non plus à cause des coûts de transport ou de logement. Vous pouvez profiter d’une remise de 20% sur les billets de train ou venir en covoiturage, et les campings sont nombreux dans la région¹.

J’espère que ce n’est pas non plus parce que cela vous imposerait de prendre des congés, puisque vous pouvez bénéficier d’une convention de formation, et ainsi facilement demander à votre employeur de vous y envoyer. Vous utiliserez votre DIF intelligemment, et vous reviendrez des conférences plein de bonnes idées et bonnes pratiques à appliquer.

Ah, j’oubliais, ces deux journées sont comme il se doit suivies d’apéritifs dînatoires afin de prolonger les discussions jusqu’à plus soif, donc si vous êtes dans le coin mais ne pouvez vraiment pas venir aux conférences, venez au moins à ces after !

Vous hésitez encore ? Lisez ces quelques billets qui complètent le mien, en l’ayant précédé :

Notes de bas de page

[1] Il paraît même que certains organisateurs ont de grands jardins...

Aucun commentaire pour l'instant. A vous de commencer !

« Retrouvons nous à Web UX et Sud Web les 26 et 27 mai » a été publié par Nicolas Hoizey le 28 avril 2011 sur Gastero Prod.

[Blog] Citation de Maria Montessori

Nicolas Hoizey — Fri, 15 Apr 2011 08:31:12 +0100

N’élevons pas nos enfants pour le monde d’aujourd’hui. Ce monde n’existera plus lorsqu’ils seront grands. Et rien ne nous permet de savoir quel monde sera le leur : alors, apprenons-leur à s’adapter.

Citation extraite de « Pédagogie scientifique : Tome 1, La maison des enfants », qui retranscrit bien l’esprit de l’éducation pensée par Maria Montessori, dont la formidable idée de base, « aide moi à faire seul ».

Aucun commentaire pour l'instant. A vous de commencer !

« Citation de Maria Montessori » a été publié par Nicolas Hoizey le 15 avril 2011 sur Gastero Prod.

[Blog] La navigation ne se fige plus en haut de l'écran lors du scroll

Nicolas Hoizey — Mon, 11 Apr 2011 19:53:00 +0100

Vous l’avez peut-être constaté par vous-même, le menu de navigation de ce site ne se fige plus en haut de l’écran quand vous descendez dans la page. Ce fonctionnement que j’avais trouvé très sexy s’avère poser plusieurs problèmes, donc j’ai préféré le supprimer.

Un problème ergonomique

Le premier problème — le plus important — est ergonomique.

Comme le met en évidence Stéphane dans son billet « Le problème de position:fixed » illustré par le cas concret du site de Jérémie, fixer des éléments en haut ou bas de page conduit à masquer une partie du contenu lorsque l’on scroll par à coups, avec les touches page suivante / page précédente du clavier.

Pour éviter cela, il faudrait redécaler le scroll dans le sens inverse de celui provoqué par l’utilisateur, avec un effet visuel sans doute déplaisant¹.

Un problème de performance

Le second problème — qui pourrait être très important mais sur lequel il est plus facile de corriger le tir — concerne la performance.

Dans le code que j’avais mis en ligne initialement, basé sur le tutoriel « Fixed Floating Elements » de jQuery for Designers, le traitement était provoqué par l’événement

window.onscroll

. Chaque mouvement, même infime, de l’ascenseur provoquait donc l’appel de mon code. L’effet dans les vieux navigateurs au moteur JavaScript pas du tout optimisé était désastreux.

Heureusement, un billet de John Resig sur un problème similaire trouvé chez Twitter m’avait permis de bien améliorer le système, en passant à un contrôle de la position de scroll toutes les 100 millisecondes plutôt qu’à chaque mouvement.

Un problème d’eXpérience Utilisateur

Malheureusement, cette nouvelle version du code, si elle était bien plus performante et impactait beaucoup moins les navigateurs obsolètes, faisait qu’il y avait un effet désagréable de saut du menu quand l’utilisateur descendait dans la page.

Le passage au point névralgique devant faire passer en position: fixed; ne se faisait effectivement que rarement au moment précis d’une itération de contrôle, donc le menu commençait à disparaître en haut, avant de revenir soudainement en place, de manière que j’ai jugée trop désagréable à l’œil pour pouvoir la conserver.

Notes de bas de page

[1] Je n’ai même pas osé essayer...

Déjà 3 commentaires. Ajoutez le vôtre !

« La navigation ne se fige plus en haut de l’écran lors du scroll » a été publié par Nicolas Hoizey le 11 avril 2011 sur Gastero Prod.

[Liens] Plutôt que regarder moins la télé, il faudrait la regarder mieux

Fri, 08 Apr 2011 12:50:04 +0100

« Oui, indiscutablement, la surconsommation de télé peut entrainer de nombreux effets nuisibles. Comme d’ailleurs la surconsommation de n’importe quoi d’autre, qui est par définition néfaste. Ce qu’on attendrait, de la part d’une association d’éducation aux médias, c’est qu’elle aide parents et professeurs à mieux utiliser cette ressource, en l’intégrant à nos autres pratiques culturelles, plutôt que de renforcer les préjugés. »

Voir en ligne : http://culturevisuelle.org/icones/1555

Aucun commentaire pour l'instant. A vous de commencer !

« Plutôt que regarder moins la télé, il faudrait la regarder mieux » a été publié par Nicolas Hoizey le 8 avril 2011 sur Gastero Prod.

[Blog] Where is the Fold ?

Mon, 04 Apr 2011 21:24:16 +0100

OK, on le sait tous, « there is no page fold », mais savoir où est ce non fold peut être carrément utile, alors heureusement qu’il y a des outils qui permettent de visualiser simplement ce que donne un site sur les résolutions les plus courantes.

Ce Fold Tester est plus complet que Google Browser Size, mais n’offre malheureusement pas plus de filtre par continent ou pays, ni d’indication sur la fraicheur des informations, qui seraient plus qu’utiles.

Aucun commentaire pour l'instant. A vous de commencer !

« Where is the Fold ? » a été publié par Nicolas Hoizey le 4 avril 2011 sur Gastero Prod.

[Liens] Why is Dropbox more popular than other tools with similar functionality ?

Sun, 03 Apr 2011 21:04:39 +0100

Excellente explication du succès de Dropbox par un des co-fondateurs de son concurrent Syncplicity, KISS l’emporte toujours !

Voir en ligne : http://www.quora.com/Dropbox/Why-is-Dropbox-more-popular-than-other-tools-with-similar-functionality#ans302513

Aucun commentaire pour l'instant. A vous de commencer !

« Why is Dropbox more popular than other tools with similar functionality ? » a été publié par Nicolas Hoizey le 3 avril 2011 sur Gastero Prod.

[Blog] GMail n'est pas tendre avec les e-mailing marketing en images

Nicolas Hoizey — Sat, 02 Apr 2011 07:33:00 +0100

Dans la liste des messages, GMail montre l’expéditeur, le sujet, et le début du texte. Si le message est principalement constitué d’image(s), apparaissant dès le début, le texte affiché dans la liste est alors celui trouvé en fin de message, ce qui n’est pas toujours du meilleur effet.

Voici un exemple probant avec un message venant d’un spammeur tentant de se faire passer pour Orange :

Et voilà ce que ça donne quand on l’ouvre :

Dommage que GMail n’aille pas jusqu’à laisser actif le lien de désinscription directement dans la liste de messages...

Déjà 4 commentaires. Ajoutez le vôtre !

« GMail n’est pas tendre avec les e-mailing marketing en images » a été publié par Nicolas Hoizey le 2 avril 2011 sur Gastero Prod.

[Liens] Nous y sommes, par Fred Vargas

Fri, 01 Apr 2011 13:56:48 +0100

Un très beau texte de Fred Vargas, constat accablant de l’enfant Homme qui a cassé les jouets offerts par sa mère la Terre :

"Nous y voilà, nous y sommes. Depuis cinquante ans que cette tourmente menace dans les hauts-fourneaux de l’incurie de l’humanité, nous y sommes. Dans le mur, au bord du gouffre, comme seul l’homme sait le faire avec brio, qui ne perçoit la réalité que lorsqu’elle lui fait mal. Telle notre bonne vieille cigale à qui nous prêtons nos qualités d’insouciance. Nous avons chanté, dansé."

Voir en ligne : http://taca.asso-web.com/55+nous-y-sommes-par-fred-vargas.html

Aucun commentaire pour l'instant. A vous de commencer !

« Nous y sommes, par Fred Vargas » a été publié par Nicolas Hoizey le 1er avril 2011 sur Gastero Prod.

[Blog] Quand Mozilla pose une question à son utilisateur, ce n'est pas pour qu'il fasse un choix...

Nicolas Hoizey — Wed, 30 Mar 2011 19:10:00 +0100

Je me suis enfin décidé à faire un peu de ménage dans mes collections d’extensions Firefox, et quand j’ai voulu supprimer les collections résiduelles, j’ai été surpris par la façon dont Mozilla demande confirmation, qui ne me paraît pas très ergonomique.

J’ai donc fait du ménage pour ne garder que deux collections complémentaires bien distinctes, l’une pour quand j’utilise Firefox pour naviguer et l’autre pour quand j’utilise Firefox comme outil de développement.

Quand j’ai voulu supprimer une collection, voilà l’écran que Mozilla m’a montré pour demander confirmation de cette suppression :

Ces points me paraissent mauvais en termes d’ergonomie :

il n’y a qu’un bouton, alors que si l’on veut demander confirmation à l’utilisateur, c’est à priori qu’on veut lui permettre deux actions, confirmer ou annuler la commande
le bouton — unique donc — n’a pas un libellé indiquant une réponse¹ ou une action², mais la question elle-même

Voici ce que je propose rapidement³ comme solution plus ergonomique :

Qu’en dites-vous ?

Mise à jour du 31 mars

je suis allé créer le ticket dans le Bugzilla de Mozilla⁴ : When asking the user for confirmation when deleting a collection, there should be two choices, "yes" and "no"

N’hésitez pas à aller commenter et plussoiner⁵ si vous êtes d’accord avec moi !

Notes de bas de page

[1] « oui » ou « non » par exemple

[2] « supprimer » ou « annuler » par exemple

[3] Merci Firebug !

[4] Bon sang que c’est moche et compliqué !

[5] Mettre un +1, quoi, rooh...

Déjà 12 commentaires. Ajoutez le vôtre !

« Quand Mozilla pose une question à son utilisateur, ce n’est pas pour qu’il fasse un choix... » a été publié par Nicolas Hoizey le 30 mars 2011 sur Gastero Prod.

[Liens] Le Record du Monde

Mon, 28 Mar 2011 14:13:16 +0100

Dans quelques heures, la Belgique va battre le record du monde du pays le plus longtemps sans gouvernement.

Voir en ligne : http://lerecorddumonde.be/

Aucun commentaire pour l'instant. A vous de commencer !

« Le Record du Monde » a été publié par Nicolas Hoizey le 28 mars 2011 sur Gastero Prod.

[Liens] Bloom : new ways to see and communicate

Thu, 24 Mar 2011 14:47:12 +0100

Voilà un joli site qui exploite subtilement un effet de parallaxe vertical, pour donner de la profondeur à la page, astucieux !

L’outil de visualisation lié à Facebook ou Twitter, fizz, est plutôt pas mal, pour compléter.

Voir en ligne : http://bloom.io/

Déjà 2 commentaires. Ajoutez le vôtre !

« Bloom : new ways to see and communicate » a été publié par Nicolas Hoizey le 24 mars 2011 sur Gastero Prod.

[Liens] TEDxPortland

Thu, 17 Mar 2011 18:47:27 +0100

Un excellent effet lié au scroll, à voir !

Voir en ligne : http://tedxportland.com/

Aucun commentaire pour l'instant. A vous de commencer !

« TEDxPortland » a été publié par Nicolas Hoizey le 17 mars 2011 sur Gastero Prod.

[Liens] THIS IS TEIXIDÓ

Thu, 17 Mar 2011 18:47:27 +0100

Encore un site qui sait s’adapter à l’espace disponible en largeur dans le navigateur grâce aux Media Queries.

Voir en ligne : http://teixido.co/

Aucun commentaire pour l'instant. A vous de commencer !

« THIS IS TEIXIDÓ » a été publié par Nicolas Hoizey le 17 mars 2011 sur Gastero Prod.

[Liens] MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims

Thu, 17 Mar 2011 18:47:27 +0100

Un plugin jQuery qui permet de prendre en charge les balises et de HTML5 dans tous les navigateurs, avec utilisation de Flash ou Silverlight pour le support de certains codecs. Semble magique, et est cité en exemple par des personnes recommandables comme Jake Archibald et Paul Irish...

Voir en ligne : http://mediaelementjs.com/

Aucun commentaire pour l'instant. A vous de commencer !

« MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims » a été publié par Nicolas Hoizey le 17 mars 2011 sur Gastero Prod.

[Liens] IE6 Countdown

Thu, 17 Mar 2011 18:47:27 +0100

Cela fait déjà pas mal de temps que les gens de Microsoft disent eux-mêmes qu’il faut abandonner IE6, là ils enfoncent le clou, avec un site démonstratif et didactique.

Voir en ligne : http://ie6countdown.com/

Aucun commentaire pour l'instant. A vous de commencer !

« IE6 Countdown » a été publié par Nicolas Hoizey le 17 mars 2011 sur Gastero Prod.

[Liens] Philippe Mignotte, studio de création spécialisé en identités visuelles à Lyon

Thu, 17 Mar 2011 18:47:27 +0100

Philippe a du talent !

Voici comment il se présente : "Graphiste créatif depuis maintenant douze ans, je me suis forgé une solide expérience en studio de création. J’ai exercé les métiers de webdesigner, graphiste, puis directeur artistique auprès des PME-PMI comme des grands comptes. Indépendant depuis deux ans, je mets ma créativité, ma rigueur et mon expérience au service de vos projets."

Voir en ligne : http://www.philippe-mignotte.fr/

Aucun commentaire pour l'instant. A vous de commencer !

« Philippe Mignotte, studio de création spécialisé en identités visuelles à Lyon » a été publié par Nicolas Hoizey le 17 mars 2011 sur Gastero Prod.

[Liens] Media Queries

Thu, 17 Mar 2011 18:47:27 +0100

Une galerie de sites exploitant les Media Queries pour proposer un design adapté quelle que soit la largeur d’affichage, notamment pour les mobiles.

Voir en ligne : http://mediaqueri.es/

Aucun commentaire pour l'instant. A vous de commencer !

« Media Queries » a été publié par Nicolas Hoizey le 17 mars 2011 sur Gastero Prod.

[Liens] HelloRacer WebGL

Thu, 17 Mar 2011 18:47:27 +0100

Le futur de la 3D sur le Web est déjà là, sans aucun plugin, bluffant ! Nécessite un navigateur moderne supportant WebGL, Firefox 4 par exemple...

Voir en ligne : http://helloracer.com/webgl

Aucun commentaire pour l'instant. A vous de commencer !

« HelloRacer WebGL » a été publié par Nicolas Hoizey le 17 mars 2011 sur Gastero Prod.