Link

Le ver est dans la pomme

Avec quelques amis — essentiellement utilisateurs de MacBook, iPhone et iPad mais pas fanboys aveuglés tout de même — nous avons constaté une lente mais de plus en plus visible dégradation de la légendaire qualité de finition des logiciels fournis par Apple. Nous avons lancé un Tumblr pour partager simplement ces constats.

PNG - 30 ko

Voilà le texte de présentation de ce Tumblr :

Difficulté à gérer le succès ? La grosse capitalisation boursière ? La perte de Steve Jobs ? Il y a trop de petits signes négatifs qui entâchent l’image de perfection jusqu’au-boutiste d’Apple ces derniers mois pour ne pas s’inquiéter. Voici quelques preuves…

Le Tumblr est à cette adresse : http://bit.ly/12G7Ddo.

Bonne visite, et n’hésitez pas à proposer des contenus !

Link

Les bonnes pratiques webperf toujours sous la main

La collection « mémento » de chez Eyrolles vient de s’agrandir, avec l’ajout d’un petit nouveau dédié aux performances web, en termes de vitesse. Incontournable !

JPEG - 1.4 Mo

Et je ne dis pas ça juste parce que j’ai eu l’honneur d’être invité à participer à sa relecture par ses auteurs Armel Fauveau et Lionel Pointet1, c’est vraiment un condensé — très complet et didactique tout de même — des principales bonnes pratiques à respecter pour développer des sites performants, et donc plus agréables pour les visiteurs.

JPEG - 1.6 Mo

En plus ils ont eu le bon goût de citer mon billet où j’explique pourquoi « PageSpeed et YSlow ne sont pas des indices de performance »… ;-)


1Aux côtés de Delphine Malassingne et Eric Daspet, c’est dire la qualité finale !

Link

Glitches

Grâce à un tweet d’Olivier, je découvre cette excellente vidéo et toute la chaine YouTube de CorridorDigital, ils sont vraiment doués !

Link

De nouvelles fontes sur Gastero Prod.

Navigant régulièrement avec une connexion de piètre qualité, j’en ai un peu marre de voir de nombreux sites me présenter juste des éléments d’interface en attendant le chargement des fichiers de fontes utilisées par @font-face. Du coup, vu que ce site n’a pas spécialement d’enjeu graphique particulier, j’ai décidé de me passer des deux fontes que j’imposais depuis la refonte récente. L’occasion de me replonger dans l’enfer des font stacks web safe

Pourquoi changer ?

Avant de parler des fontes retenues voici une illustration de ce problème que posent les fontes chargées via @font-face aux utilisateurs à faible bande passante.

Le site de Smashing Magazine utilise deux fontes différentes pour la titraille et le corps de texte, chacune étant définie avec une instruction @font-face et nécessitant donc le téléchargement des ressources correspondantes. Ces fontes font partie des éléments importants du récent redesign du site, et participent à sa qualité visuelle, ce serait dommage de s’en priver :

PNG - 597.8 ko

Mais si on va sur le site avec une connexion pas géniale, on obtient très rapidement certains éléments graphiques, et beaucoup moins vite les fichiers des fontes, d’où un affichage assez étonnant :

PNG - 273.7 ko

On constate assez simplement d’où vient le problème :

PNG - 36.5 ko

Nous sommes donc en attente des fichiers des deux fontes, et pendant ce temps là le navigateur ne peut pas afficher le texte. Quand @font-face a commencé à être largement implémenté dans les navigateurs, ils ne se comportaient pas de la même façon. Firefox par exemple présentait d’abord les textes avec des fontes web safe présentes sur le poste client, avant de redessiner les textes avec les bonnes fontes une fois celles-ci téléchargées. Cela donnait un effet très pénible bien décrit dans le billet de référence sur le sujet, Fighting the @font-face FOUT par Paul Irish. Aujourd’hui, le comportement des navigateurs est plus homogène, ils attendent tous quelques secondes sans rien afficher avant de se rabattre sur le fallback si nécessaire. Il faut donc que les fichiers de fontes soient téléchargés le plus vite possible par le navigateur pour réduire la durée de non affichage.

Dans le cas de Smashing Magazine illustré ici et de tant d’autres sites, une difficulté supplémentaire s’ajoute. Le service Fontdeck que l’on voit dans la base de tâche ci-dessus fait partie des leaders des solutions SaaS de fourniture de fontes, avec notamment Typekit maintenant dans le giron d’Adobe, et Google Web Fonts en alternative gratuite.

Quand un site utilise ce type de service, le navigateur demande les fichiers de fonte à un autre serveur que celui du site, ce qui ajoute un petit délai supplémentaire pour la requête DNS. Les fichiers de fontes arrivent donc plus lentement, pénalisant un peu plus l’Internaute.

Que de points qui peuvent paraître bien négatifs, mais il faut avouer que la richesse offerte par la multitude de fontes maintenant disponibles pour le web permet de développer une grande créativité qui fait beaucoup de bien au Web.

Sauf que mon pauvre blog n’a rien d’un site professionnel dont le design [1] nécessite l’usage de telles fontes. Il doit bien y avoir dans les fontes web safe, c’est à dire ne nécessitant pas de chargement supplémentaire avec @font-face, de quoi proposer quelque chose de suffisamment « joli » — à mon goût en tout cas — et original.

En quête donc…

Mes choix de fontes

Ayant lu et entendu depuis quelque temps que les fontes à empattements ne posent plus de problèmes avec les écrans modernes, voire même améliorent la lisibilité des corps de textes, j’ai décidé de me jeter à l’eau.

Histoire de faire un peu original et éviter les classiques, j’ai cherché un peu ce qui pourrait être disponible suffisamment largement, mais essayer de trouver un ensemble cohérent dans une liste telle que ces most common fonts on all systems to 5 April 2012 n’est clairement pas à ma portée de béotien de la typo. Heureusement, un peu aidé par une recherche sur Google, je suis retombé sur ce billet Revised Font Stack de Amrinder Sandhu qui avait pas mal circulé il y a 3 ans, et je suis immédiatement tombé sous le charme de la font stack issue de Sushi & Robots, battis sur une base de fonte « Hoefner Text »

PNG - 40.9 ko
Un aperçu de la fonte Hoefner Text

Côté titraille, je voulais du coup une fonte linéale pour contraster avec la sérif du corps de texte.

C’est en parcourant la liste des fontes ajoutées à iOS 6 que j’ai découvert la famille de fontes Avenir conçue par Adrian Frutiger pour Linotype, et déclinée en 2003 en Avenir Next. Cette fonte est arrivée ensuite sur Mac OS X avec Moutain Lion puis sur iOS avec la version 6.0.

PNG - 39.2 ko
Un aperçu de la fonte Avenir

Un extrait de la page Wikipedia présentant Adrian Frutiger présente ainsi la famille Avenir :

C’est en 1988 qu’il présente le caractère Avenir (dont le nom est un clin d’œil au Futura), le juste milieu entre une Linéale indéniablement géométrique et une Grotesque humaniste, dont l’harmonie des formes génère l’équilibre optique. Avenir s’impose naturellement comme une alternative de qualité au Futura et à l’Avant-Garde, il est moins radical et abrupt, plus chaleureux et avec plus de personnalité. Son utilisation en capitales, que l’on réservera aux titrages, donne beaucoup de stabilité à la composition et également de la classe, grâce à la rigueur de la structure des lettres ; il évoque une certaine prestance, la stabilité et le professionnalisme, la beauté et la féminité. Ses bas de casse possèdent les avantages des Linéales géométriques classiques sans leurs inconvénients : plus faciles à lire, ils peuvent s’utiliser pour des articles de presse ou des rapports relativement courts.

Comment hésiter plus longtemps ?

Et maintenant ?

Je l’avoue bien volontiers, je suis complètement ignare en termes de typographie. J’ai par exemple beaucoup appris en terminologie avec la conférence « La typographie comme outil de design » de David Rault à Paris Web en 2010.

Il est donc probable que la démarche que j’ai suivie, ainsi que le résultat, ont de quoi faire hurler d’horreur les spécialistes du domaine. Mais tant pis pour eux, je suis plutôt satisfait du résultat, jusqu’à ma prochaine remise en question…


[1] Quel design ?

Link

Mise à jour de ma politique de sauvegarde

Je profite d’un nouveau billet d’Éric sur le sujet pour mettre un peu à jour ce que je disais il y a 6 mois dans mon billet « Le Backup Day, c’est tous les jours ! ».

Je ne vais pas pouvoir l’aider sur sa recherche de solution « sans y mettre des sommes folles », mais ma configuration peut être intéressante tout de même :

J’ai donc un Mac mini avec CrashPlan qui sert d’une part, comme je l’envisageais il y a 6 mois, de destination de backup pour tous mes autres ordinateurs, et est d’autre part lui-même [1] backupé sur CrashPlan+.

PNG - 222.4 ko

Le stockage sur le mini n’est pas suffisant pour recevoir les backups de tous mes ordinateurs, donc j’ai un Drobo S de Data Robotics connecté dessus en Firewire 800. Il contient 5 disques de 2 To et est configuré avec 2 disques de fail over pour être un peu plus sûr de ne pas avoir de problème.

J’ai par contre fait l’erreur d’acheter les 5 disques dans la même série, je m’en suis rendu compte trop tard, donc si l’un flanche à cause d’un problème de conception ou construction, la série risque de faire de même dans la foulée.

En tout cas, j’ai déjà eu une défaillance d’un disque, et j’ai eu le plaisir de constater que l’alerte était donnée rapidement, et que la reconstruction du RAID après remplacement du disque s’est faite de façon totalement transparente, sans empêcher l’accès au disque.

Autre point important, les services après vente de CrashPlan et Drobo sont exemplaires, j’ai eu à faire avec les deux à quelques semaines d’intervalle, et ils ont été tout aussi réactifs, pertinents et efficaces. Cela compte aussi beaucoup.


[1] Ainsi qu’un disque externe USB supplémentaire, mais là n’est pas la question.

Link

L'avenir du Web se prépare aujourd'hui

Dans le billet hebdomadaire de WDFriday, Matthieu Bué lance un appel à la mobilisation pour contribuer à l’élaboration de solutions pour « gérer la multiplication des devices ». Ce billet contient une incitation très pertinente à participer aux community groups du W3C, mais se trompe à mon avis de catalyseur.

Tout l’accent est mis ici sur la multiplication des appareils avec lesquels nous accédons au Web, du smartphone à la Smart TV en passant par la fablet/tabphone et l’ordinateur traditionnel [1], cela étant indiqué comme un danger pour le Web actuel, qui n’aurait pas les outils nécessaires.

Par exemple, cet extrait m’a particulièrement fait tiquer :

plus d’un an avant sa sortie, Sony a annoncé que sa prochaine PlayStation 4 supportera une résolution de 4096 x 3072 !

Comme je l’ai déjà dit via Twitter, et puisque j’ai été invité à détailler mon point de vue :

Et alors ?!?!

Le viewport du navigateur intégré à cette PlayStation 4 sera sans doute bien inférieur aux dimensions natives supportées, et les supports mis en place pour les écrans Retina actuels suffiront dans 99.99% des cas. Détecter les pixels sur un écran Retina nécessite déjà une bonne vue, voir ceux d’écrans 4K relèvera du miracle ou de la bionique. Ces résolutions seront sans doute réservées aux écrans de grande taille que l’on regarde à bonne distance.

Il faut arrêter le FUD. Arrêter de se faire peur.

Les techniques actuelles sont certes perfectibles, mais le W3C y travaille — notamment au sein du Responsive Images Community Group — et il y a déjà largement de quoi faire aujourd’hui des sites qui se comporteront bien sur les écrans prévus pour se démocratiser dans 3 à 5 ans.

Pensons déjà de manière plus générale à faire de l’Adaptive Web Design, en ne se limitant pas au trop restrictif et technocrate Responsive Web Design.

Faisons déjà bien ça et on avancera ensuite là où cela deviendra nécessaire. Incroyable le nombre d’horreurs qu’on voit qui se targuent honteusement d’être en RWD…

Ce thème me tient particulièrement à cœur depuis pas mal de mois, au point que j’avais proposé d’en parler à Sud Web cette année. Ma proposition n’a pas été retenue [2], donc je trouverais un autre moyen de présenter ce que je fais murir tout doucement…

Mais sinon, oui, mille fois oui, il faut participer aux community groups du W3C, tout comme il faut participer à la documentation sur MDN, à l’évangélisation sur OpenWeb et à tant d’autres projets. Mais pour de bonnes raisons.


[1] Si ce terme a encore un sens dans le domaine…

[2] Quand je vois la qualité du programme je n’ai aucun regret.

Link

Dans une vie antérieure, j'ai été animateur radio

Ah, ce qu’on a pu se marrer avec Philou en préparant ces quelques émissions pour la radio « Positive EISTI Waves », du temps où on faisait nos études à l’EISTI !

Non content de participer à 4 ou 5 associations de l’école, dont le BDE, j’avais trouvé le moyen de prendre en charge la radio interne, et d’animer une émission de pur délire avec mon comparse de l’époque Philou.

J’ai retrouvé deux des émissions que nous avions animées ensemble, justement parce que c’étaient les plus travaillées, ayant nécessité des heures de recherche [1] d’illustrations sonores à assembler pour raconter des histoires. Tout ce travail avait nécessité un ordinateur, et donc un format numérique stockable, alors que toute les autres n’étaient qu’en live, et malheureusement pas enregistrées.

Je vous laisse découvrir ces monuments de l’insouciance d’étudiants en école d’ingénieur — vous savez, ces écoles ou on trime comme des malades et ne voit jamais le jour, plongés dans nos cahiers et exercices —, merci d’avance pour votre indulgence :


[1] Souvent au détriment d’autres tâches plus rébarbatives demandées par les profs…

Audio
Audio
Link

iTunes Match tronque les morceaux de musique

N’écoutant que rarement de la musique sur mon Mac, j’ai constaté sur mon vieil iPhone 3Gs que la lecture de certains morceaux de musique s’arrêtait soudainement, en plein milieu, pour passer au morceaux suivant. Sans avoir creusé plus que ça, j’étais alors convaincu que ce n’était qu’un symptôme supplémentaire de la vétusté de mon iPhone. Mais le changement d’iPhone n’a rien changé, et j’ai constaté hier le même problème sur le Mac. J’ai donc creusé un peu le sujet.

J’ai rapidement constaté que je suis loin d’être seul à avoir ce problème, de multiple discussions ayant été lancées sur le support Apple, dont une qui occupe déjà 17 pages de mécontents : « itunes chopping off end of songs now that i signed up for match ».

Mon entourage [1] est aussi touché, c’est donc bien relativement fréquent [2] :

En fouillant un peu [3], on peut trouver un billet de Kirk McElhearn intitulé « What’s Going On With Truncated iTunes Downloads ? » avec quelques explications, et surtout un lien vers un script iTunes développé par Doug Adams [4] permettant d’identifier les morceaux tronqués : « Find Truncated Tracks ».

Je vous laisse lire ses explications sur le fonctionnement du script, mais il faut juste retenir qu’il va parcourir une de vos playlists et mettre les morceaux tronqués dans une nouvelle playlist nommée « _Truncated Tracks ».

Ensuite, la méthode recommandée sur le support Apple [5] est de supprimer ces morceaux de votre iTunes — mais surtout pas de iTunes Match — puis de les télécharger à nouveau.

Pour supprimer un morceau depuis une playlist, il ne suffit pas de presser la touche Suppr qui va juste supprimer le morceau de la playlist. La page des raccourcis clavier iTunes proposée par Apple indique qu’il faut presser Option et Suppr en même temps.

J’espère que iTunes / iTunes Match sera corrigé pour détecter automatiquement ces morceaux tronqués et les télécharger intégralement…


[1] Puis-je encore dire que ma communauté ego centrée de followers Twitter fait partie de « mon entourage » ? ;-)

[2] Saleté de widget Twitter qui inclus le tweet initial quand on veut afficher sa réponse, mais ne permet pas l’inverse !

[3] Bon, d’accord, en quelques millisecondes avec une recherche sur Google

[4] Son nombre préféré doit être 42…

[5] Pas par les gens d’Apple, qui ne semblent malheureusement pas être impliqués dans les discussions…