Group items tagged

Super technique pour servir des @font-face de la manière la plus adaptée qu'il soit à l'utilisateur, en tenant compte de sa langue etc.

La technique mise en place par Lonely Planet pour rester performant. Plus que de la technique, c'est avant tout une élaboration de culture de la vitesse et du plaisir à être rapide qui prime.

On fait quoi avec Retina et HiDPI ? On propose une image à résolution plus importante alors qu'on s'est battu des mois à améliorer les performances de nos sites Web ? Comparatif de compressions et de rendus pour haute densité … et où l'on peut constater que cette réduction de poids sera plus efficace et simple à gérer qu'une multiplication des résolutions d'image.

L'approche est maligne mais me dérange sur quelques aspects : 1. Si elle vient à se populariser on va se retrouver avec un Web remplies d'images de qualité médiocre uniquement exploitable sous forme de miniatures. En outre, nous pourrons faire une croix sur les recherches d'images ciblées par dimensions. 2. La contribution par des utilisateurs lambdas ne sera pas aisée de par la validation du rendu après réduction du visuel. 3. Quid de l'automatisation ? Les images présentées dans les exemples de Daan sont de qualité studio et supportent parfaitement le traitement. Enrichir le billet par des photos de moindre qualité serait intéressant.

Un tour du comportement et des tailles des icônes de pages sur les iOS et Android.

Une nouvelle technique pour masquer du contenu sans utiliser le fameux `left: -9999px`. Principal avantage : le navigateur n'a pas besoin de dessiner une boîte énorme pour y placer ce contenu.

Où comment la manière de servir des fichiers change l'expérience utilisateur. Quand la mécanique influe sur l'aspect pratique.

Intéressant mais rien de vraiment nouveau... les Streams, ça existe depuis Java 1.0 (1996), et sans doute avant dans d'autres langages. Tant mieux si ça arrive dans node.js !

Before we start, I'd like to mention that most (if not all) of these notes apply best to large, complex applications. Documents that have thousands of elements and that are highly interactive will benefit the most. In my case, I reduced page load time by ~650ms (~500ms (!)

Quelques bons conseils (les mêmes que d'hab) sur l'écriture universelle des CSS. Pas trop d'accord en revanche sur les raisons de ne pas utiliser les sélecteurs sur attribut - juste pour des raisons de compatibilité.

Une bonne solution pour s'occuper du cas des 15% de personnes ne recevant pas de contenu compressé, pour cause de proxy ou d'entête mal formée.

Attention qu'on risque de casser le rendu pour certains quand même. Je préfère l'optique de http://www.stevesouders.com/blog/2010/07/12/velocity-forcing-gzip-compression/ et http://velocityconf.com/velocity2010/public/schedule/detail/14334 Il s'agit de faire passer un petit js gzipé. S'il s'exécute correctement c'est que le navigateur sait lire gzip. On met alors un cookie et c'est la présence de ce cookie qui permet de forcer gzip côté serveur. La conséquence c'est que ces 15% n'auront pas gzip lors de leur premier accès, mais en retour on sait qu'on n'activera pas gzip s'ils ne le supportent vraiment pas

Web development on mobile devices is especially challenging. The debuggers and profilers we use on the desktop aren't available. Bookmarklets are a good alternative. They're lightweight and work on most browsers - even mobile browsers. But installing bookmarklets in mobile browsers is a pain. You could try to find all the good bookmarklets out there and install them one by one. Or... Just install the Mobile Perf bookmarklet!

Petit favori à ajouter, sur votre ordinateur ou téléphone mobile, pour un accès rapide à des outils d'audits de performance de page Web.

Compresseur, optimiseur et mise en forme de code JavaScript. C'est tout petit, efficace et basé sur NodeJS. Il a la particularité de mieux compresser que YUI Compressor, à peine mieux que Google Closure Compiler mais en beaucoup moins de temps.

Une excellente synthèse des APIs disponibles en HTML5 et CSS3 pour tirer partie des optimisations des navigateurs, et des choses à éviter dans le code. Qui eut cru que les fonctions anonymes pouvaient être nommées ? ;-)

J'ai l'impression que Diigo supprime systématiquement le dernier slash dans l'URL ;-(

ok, j'aurais pu le trouver tout seul. Excellente URL, elle parle de sujets qu'on trouve pas vraiment ailleurs.

Tumblr explique comment ils ont amélioré les performances d'affichage de leur lightbox en quelques lignes.

Une bonne manière de charger les boutons sociaux en s'inspirant du code de Facebook (fonctionne aussi sur les sites mobile).

Technique pour insérer les boutons sociaux facebook, Twitter et Google+ en asynchrone pour de meilleures performances.

OVH proposerait un CDN vers la fin de l'année 2011 - donc à des prix plus abordables. Démocratisation en vue pour des sites internationaux à petits budgets ?

Pour un CDN franchement pas cher dès maintenant et assez fiable : http://maxcdn.com/

Pourquoi créer 2 sites différents pour le mobile et le desktop (toujours pas de traduction/adaptation potable en français ?). Principalement pour des raisons techniques, d'expérience utilisateur et de performance (poids d'images, structure de page, usage adapté).

Si l'article le mérite on peut toujours ouvrir un Google Doc et essayer de traduire à plusieurs s'il y a des gens motivés. Eric pourrait même publier la traduction sur son blog. Perso j'ai déjà une traduction sur un long article UX en cours.