Blog Webdesign : Conception web, développement, référencement...

Optimiser son site en maitrisant sa mise en cache

noreply@blogger.com (Jimmy) — Wed, 14 Jul 2010 10:44:00 +0000

Précédemment dans notre quête de la performance, nous avions vu qu'à l'aide de quelques consignes données à notre serveur, nous pouvons alléger la quantité de données reçues par nos visiteurs sans les altérer.

Poursuivons le raisonnement. Plutôt que d'alléger les données, posons-nous la question : mon visiteur a t-il vraiment besoin de recevoir cette donnée ?
Le principe du cache navigateur est de stocker sur le disque dur du visiteur les composants de pages (images, scripts, page HTML), pour ne pas avoir à les recharger plus tard.

Le cache n'a généralement pas une très bonne réputation : il est plus connu pour ses méfaits que pour ses avantages ("ça ne s'affiche pas chez toi ? c'est un problème de cache !"), et n'est pas le meilleur ami de la vie privée.
En revanche, pour le webmaster, maitriser la cachabilité de ses éléments de page est essentielle dans l'optique d'améliorer les performances de son site.
Bien géré, il ne doit pas causer de problème et doit profiter à vos visiteurs en toute transparence.

Le test qui parle

Prenons l'exemple d'un portail assez chargé, yahoo.fr.

Chargement de yahoo.fr cache vide : 58 requêtes HTTP, 531 Ko
Chargement de yahoo.fr avec cache rempli :17 requêtes HTTP, 46 Ko

Une économie de 90% de données transmises !

Les statuts HTTP sont nos amis

Lorsque le navigateur de l'internaute détecte un élément de page dans le code HTML renvoyé, voici comment il le traite dans le cas le plus général :

L'élément existe en cache :
- Il n'a pas expiré
  il lit directement le fichier sur le disque sans aucun échange avec le serveur
- Il a expiré...
  
  ... et n'a pas été modifié depuis le dernier accès
  il n'a pas besoin de le télécharger à nouveau donc lit le fichier sur disque
  
  ... et a été modifié depuis le dernier accès
  il doit le télécharger à nouveau
L'élément n'existe pas en cache
il le télécharge

Lorsque l'élément en cache n'a pas été modifié, le serveur retourne un statut HTTP 304 Not Modified. Quand il doit être téléchargé ou re-téléchargé, il renvoie un statut 200 OK.
Les 3 situations sont décrites dans le schéma ci-dessous, mettant en évidence les gains de performance.

Remarque : résolution DNS, établissement de la connexion TCP/IP et temps CPU client/serveur ne sont pas représentés.

Mise en œuvre du cache

Pour gagner du temps, il faut donc éviter à ses visiteurs d'avoir à retélécharger des éléments qu'ils possédent déjà. Images, scripts, CSS, sont tant d'éléments statiques que vous ne modifiez pas tous les jours. Favorisez leur mise en cache et vous serez doublement gagnant : en bande passante côté serveur, en performance de page côté client.

Sous Apache, le mod_expires (http://httpd.apache.org/docs/2.0/mod/mod_expires.html) nous permet de paramétrer la cachabilité des éléments de page.

Les directives ExpiresDefault et ExpiresByType offrent une grande souplesse dans la mise en oeuvre du cache, tant dans leur forme que dans leur fonction.

Quelques exemples:

Expiration après 5 jours en cache pour toutes les images

ExpiresDefault A432000 # A pour accès - 432000 sec = 5 jours

équivaut à

ExpiresDefault  "access plus 5 days"

Expiration des feuilles de style un mois après leur modification

ExpiresDefault M2592000 # M pour modification

Expiration des scripts javascript 10 jours après accès

ExpiresByType  text/javascript "access plus 10 days"

Expiration des contenus flash 1 mois après accès

ExpiresByType  application/x-shockwave-flash "access plus 1 month"

Plus plus d'informations, consultez la documentation sur ExpiresDefault et ExpiresByType.

Voici un extrait de fichier .htaccess que j'utilise sur mes sites :

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault A3600
ExpiresByType image/png A864000
ExpiresByType image/gif A864000
ExpiresByType image/jpeg A864000
ExpiresByType image/jpeg A864000
ExpiresByType text/css A259200
ExpiresByType image/x-icon A4320000
ExpiresByType text/javascript A864000
ExpiresByType application/x-javascript A864000
</ifmodule>

Maitriser la mise à jour de ses éléments

A ce stade, il serait dommage que le cache se transforme en source de problème. Car, il vous a rendu bien des services pendant des mois, mais aujourd'hui vous publiez un joli logo spécial Noël et vous aimeriez bien qu'il s'affiche dès maintenant pour tous les visiteurs.

Côté cache, un élément de page est identifié par son URL. Votre logo actuel est donc reconnu par son adresse complète : http://www.monsite.com/logo.jpg.
Si votre nouveau logo a la même adresse que l'actuel, vous pouvez parier que tous vos visiteurs ne verront pas tous le même logo. Pas génial.

Pour contourner ce problème, donnez à votre nouveau logo une URL qui lui est propre, par exemple : http://www.monsite.com/logo-noel2010.jpg.

Aucun de vos visiteurs n'ayant déjà téléchargé cette ressource, vous serez certain que tous la verront dès sa mise en ligne.

Bien sûr, cet exemple est simple et s'opère chirurgicalement. Pour un site de taille conséquente, l'opération peut s'avérer plus délicate (dans quelle pages et fonctions ce contenu est-il appelé ?). Voici quelques conseils à suivre :

Structurez votre code en ayant la mise en cache à l'esprit dès le départ
Evitez les inclusions dispersées de scripts CSS ou JS, mais centralisez-les, voire mettez-les en fonction
Pour le nommage des fichiers cachables, rajouter un versionnement (compte, date) identifiant de manière unique une ressource. Exemple : style.20100611.css

Un peu d'ordre dans votre code, quelques ligne dans un .htaccess et vous aurez une maitrise parfaite de votre cache.

3 raisons de ne pas aimer les contenus vidéos

noreply@blogger.com (Jimmy) — Sat, 17 Apr 2010 13:47:00 +0000

... ou pourquoi j'aimerais bien ne pas tomber sur des vidéos m'expliquant comment rendre mon site accessible.

La vidéo n'est pas le meilleur support pour tout

Pour apprendre à faire un nœud de cravate, monter un meuble, ou passer un bon moment devant les vidéos de Rémi Gaillard, c'est un des meilleurs supports, pas de doute.

Mais pourquoi est-ce que je regarderais une vidéo de 30 minutes où un type avec une voix rigolote va m'expliquer comment utiliser Google Adwords en filmant son écran, ou bien un autre m'offrant son plus beau sourire lorsqu'il passe 10 minutes à déballer son iPad ?

La vidéo est élitiste

Mon débit perso est de 512Kb, et à ma connaissance je ne suis pas le seul dans ce cas.
Donc si je tombe sur une vidéo et pense que je vais trouver le même contenu sous forme statique, je quitte le site dans la seconde.
Et pour le reste, certains lecteurs flash continuent de charger le flux vidéo quand ils sont sur pause. Donc, on met la lecture en route, on clique sur pause, et on revient 15 minutes plus tard pour visionner. On télécharge, quoi.

La vidéo n'est pas accessible

On sont donc passés les militants de l'accessibilité et les mécontents du Flash ? Les polices de caractères à taille réglable, le bon choix de contraste des couleurs ?

Et le web sémantique dans tout ça ? La séparation du contenu et de la forme ? Aux oubliettes ?

Les conventions de conception web

noreply@blogger.com (Jimmy) — Mon, 15 Feb 2010 00:46:00 +0000

Au fil des années, certains schémas de conception web se sont affirmés au point de devenir des habitudes d'utilisation pour les internautes.

Réutiliser des mécanismes qui sont devenus courants permet de profiter de l'expérience que vos visiteurs ont acquise en surfant sur d'autres sites pour les aider à avoir une navigation plus efficace. L'effet d'expérience adapté au web, en quelque sorte.

Voici quelques exemples de ces conventions de conception web.

Le logo

Positionné en haut à gauche pour une identification rapide, avec un lien hypertexte qui permet un retour sur la page d'accueil depuis n'importe quelle page du site.

Le formulaire de recherche

En haut de page, absolument. Souvent positionné à droite, voir sur un bloc indépendant centré lorsque la recherche est prépondérante.

Profil et panier

Informations de connexion et d'inscription pour les sites communautaires, ou accès direct au panier de commande pour les sites d'e-commerce, sont très souvent placés à droite tout en haut de page.

Au passage, notez au sujet du panier que le fait d'associer le terme de "panier" à une icône représentant un Caddie (marque déposée de la société Caddie SA) est parfaitement entré dans les mœurs.


Amazon

La Redoute

Rue Du Commerce

Les informations sociétés et mentions légales

Les informations sur la marque ou la société, ainsi que les mentions légales (droit de reproduction, collecte de données personnelles) sont généralement en centrées dans le pied de page, le plus bas possible.

Dans le cas de plusieurs liens, une liste horizontale avec un séparateur très simple (tiret -, trait vertical | ), voire sans séparateur est d'usage.

Le fil d'Ariane

En haut de page, souvent placé entre l'entête et le contenu central, le fil d'Ariane est généralement présent dès que la structure du site est une arborescence à 2 niveaux ou plus. Le séparateur utilisé est souvent le crochet >

Allociné

Dailymotion

eBay

Les indicateurs de chargement

Avec Ajax, le chargement dynamique d'informations ou de sections de pages s'est généralisé. Et pour indiquer à l'utilisateur qu'il doit patienter, certaines icônes animées sont devenues des marqueurs usuels :

Tester son site sous les versions d'Internet Explorer 6, 7, 8

noreply@blogger.com (Jimmy) — Wed, 10 Feb 2010 19:56:00 +0000

Si la mort prochaine de la version 6 d'Internet Explorer est annoncé un peu partout ces derniers temps, il n'empêche que l'univers des navigateurs (et particulièrement celui d'IE) avance bien plus lentement que ne naissent les normes et se développent les technologies.

Assurer la compatibilité de ses sites web avec les différentes versions d'Internet Explorer demeure un casse-tête, et chacun sait qu'il est maintenant quasiment impossible de faire coexister plusieurs versions d'IE sur son PC.

La dernière version standalone d'IE que j'ai installé sur mon Vista ayant provoqué des dégâts irréversibles, j'ai décidé de ne plus tenter l'expérience et de me tourner vers des services web comme Browsershots.

Je viens de découvrir IETester, j'ignore encore comment j'étais passé au travers de cet outil. Conçu par les développeurs de la DebugBar (dont j'avais parlé dans un précédent billet), ce freeware embarque les moteurs de rendu d'IE 5.5, 6, 7 et 8, le tout dans une application à onglets, permettant de visualiser simultanément le résultat dans les 3 navigateurs !

Ajoutez à cela des options de désactivation du cache, des scripts ou des images, et vous avez un outil incontournable pour tout développeur web.

SEO : le temps des experts est-il révolu ?

noreply@blogger.com (Jimmy) — Thu, 17 Dec 2009 18:38:00 +0000

Le chat et la souris

Le SEO est une discipline qui nécessite soumission et d'abnégation. Depuis que la pratique est née avec l'essor des moteurs de recherche (début des années 2000), elle ne cesse de devoir s'adapter aux changements de fonctionnement de son maître, le moteur de recherche.
Ainsi, pendant près de 10 ans, les webmasters ont du (et su) s'adapter aux évolutions des critères pris en compte par les moteurs, et surtout par Google, forcément.

Chronologiquement, et de mémoire :

le contenu textuel des pages
les balises meta keywords et description
le titre de page
le nom de domaine
la réécriture d'URL
le nombre de liens entrants
l'ancre de ce mêmes liens
un mix d'un peu de tout ça à la fois

Évidemment, chaque nouvelle génération d'algorithme a engendré sa part sombre de spams et d'abus, plus communément appelée "techniques SEO" :

l'ancestral Texte blanc sur fond blanc (toujours vivant)
<meta name="keywords" content="jeux,vidéo,jeu,vidéo,jeux vidéo,sexe,xxx" (même spour un site non prono cela va de soi)
les titres de billets qui sont plus bossés que le billet lui-même
http://www.la-meilleure-banque.com
http://www.la-meilleure-banque.com/avec-les-credits-les-plus-avantageux.html
les fermes de liens, les inscriptions automatiques à 1000+ annuaires, etc.
les commentaires sur un blog lambda signés "Agence Web à Lyon"

Pris au jeu de la suroptimisation qu'il a lui-même causée de par son quasi-monopole, qu'a fait Google ?
Il a crée la Sandbox, le nofollow, la dénonciation des liens sponsorisés qui ne sont pas marqués nofollow, les pénalités de positionnement (minus 50)...

Aujourd'hui, les techniques d'optimisation sont connues de tous, gérées nativement ou presque par tous les CMS majeurs, et les techniques secrètes, de l'ordre du black hat SEO, sont moins faciles à mettre en place que l'ajout d'un simple mot-clé.

Les SERP personnalisées

Depuis quelques jours, Google intègre la personnalisation des pages de résultats (SERP) pour tous ses utilisateurs, même les non inscrits. Ça signifie qu'un site sur lequel vous cliquerez souvent dans les pages de résultats de recherche aura tendance à être positionné plus haut lorsqu'il apparaitra dans de futures recherches.

C'est l'utilisateur qui fait sa propre promotion des sites qui répondent à sa recherche, et lui seul profite de cette optimisation.

Et n'est-ce pas l'essence même d'un moteur de recherche ?

Allons plus loin, peut-on imaginer que dans l'avenir le moteur étudie notre navigation post-SERP pour en déduire notre réaction positive ou non à la lecture des pages trouvées ?

En tant que webmaster, je souhaite évidemment que mon site soit bien positionné et que tout le monde clique dessus lorsqu'il apparait dans les résultats.

En tant qu'utilisateur, soyons honnête, si un site que j'apprécie aborde un sujet que je recherche, alors autant consulter ce site en priorité. Oui, ça ne pousse pas à la diversité mais après tout, rien ne m'empêche d'aller voir plus bas pour avoir d'autres propositions. Ou tout simplement d'oublier Google et passer à autre chose.

L'avenir ?

Si Google poursuit dans cette voie, en dépendant de moins en moins des techniques d'optimisation, ça signifie que l'expert SEO ne sera plus cet ajusteur capable d'améliorer le positionnement d'un site en quelques lignes de codes magiques.

Si l'optimisation pour les moteurs de recherche pourrait prendre moins d'importance puisqu'ayant moins d'impact sur le trafic d'un site, les notions d'intérêt du site, fidélisation du visiteur et taux de conversion en ressortiront renforcées.

Se recentrer sur le client en quelque sorte...

La compression HTTP pour accélérer vos sites

noreply@blogger.com (Jimmy) — Thu, 10 Dec 2009 21:56:00 +0000

Avec les récents changements et déclarations de Google autour de la prise en compte de la performance des sites comme un éventuel futur critère de pertinence des sites, les problématiques d'optimisation vont (re)devenir d'actualité.

Un des moyens très rapide pour optimiser sensiblement les performances de son site web consiste à compresser le flux de données qui transite entre votre serveur et le navigateur Internet de vos visiteurs.

D'abord, si vous ne l'avez pas encore lu (soyons honnête : c'est sans doute le cas), je vous invite à lire mon précédent billet sur l'analyse des performances d'un site web pour avoir une description simplifiée des échanges HTTP entre un client et un serveur.

La compression HTTP, un quick-win de l'optimisation des performances

En qualité, une des méthodes pour prioriser des actions d'améliorations consiste à les placer sur une matrice impact/effort. L'impact, c'est ce que vous allez gagner à mettre en œuvre l'amélioration. L'effort, c'est le prix à payer pour le faire (en temps et/ou en argent).

Cette matrice permet d'identifier de manière simple les quick-wins, ces améliorations qui ne demandent pas un investissement lourd mais produisent un résultat immédiat et conséquent.

La compression des flux HTTP s'inscrit complètement dans ce cadre : rapide à mettre en place (voir lpus bas), elle permet d'obtenir un gain considérable en temps de chargement.

Transférer moins plus gagner du temps

Rappelez-vous (maintenant vous l'avez lu j'espère !), un des leviers d'actions les plus logiques consiste à envoyer moins de données du serveur au client, qui mettra donc moins de temps à récupérer et afficher le contenu de vos pages.

Pour ça nous allons simplement compresser les données qui sont envoyées par votre serveur. Aucun élément de page ne sera perdu ni altéré, il s'agit simplement d'en réduire la taille par un traitement avant l'envoi (côté serveur) et de les remettre dans leurs état initial à l'arrivée (par le navigateur web).

Implémentation

Si vous avez un serveur Apache 2 avec le mod_deflate activé, ajoutez simplement cette ligne à votre fichier .htaccess ou bien créez ce fichier à la racine de votre site si vous n'en n'avez pas encore :

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript application/xhtml+xml application/xml application/rss+xml application/atom_xml
</ifmodule>

Ce code a pour effet de compresser tous les contenus de type texte, javascript, xml et rss. Ce n'est pas besoin d'appliquer une compression aux images, celles-ci sont normalement déjà compressées (jpeg, png, etc.)

Pour vérifier la prise en compte de cette modification, utilisez des outils d'analyse de requêtes HTTP, ou encore les extensions indispensables YSlow ou Google Page Speed.

Démo

Quelques dizaines de Ko gagnés sur un site relativement simple, avec une simple ligne ajoutée dans un htaccess.

Ça serait dommage de passer à côté !

Compatiblité

Sachez que tous les navigateurs récents acceptent l'encodage des flux HTTP. Si vous n'avez pas le choix et devez absolument assurer une compatibilité avec des navigateurs plus anciens, vous pourrez ajouter les lignes suivantes à votre htaccess.

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Enfin, si votre hébergement n'accepte pas le mod_deflate, jetez un oeil du côté du mod_gzip. Cette compression moins forte est implémentée sur Apache dans sa version 1.

S'il n'accepte aucun des deux, il vous restera peut-être la possibilité de compresser via php / zlib, solution dont nous reparlerons peut-être une prochaine fois.

Réduire le temps d'indexation d'un nouveau site dans Google

noreply@blogger.com (Jimmy) — Wed, 09 Dec 2009 17:48:00 +0000

Si l'indexation en temps réel est quasiment devenu une réalité pour les sites déjà référencés et proposant du nouveau contenu régulièrement, l'indexation d'un nouveau site dans Google reste plus difficile à maitriser, et il est particulièrement frustrant d'attendre semaines avant de voir ses premières pages apparaitre dans Google.

Difficile de faire le buzz et de récolter des liens réciproques quand on débute, je vous propose 3 étapes indispensables pour réduire considérablement le temps d'indexation d'un nouveau site dans Google.

Référencer au plus tôt : dès que vous prenez possession de votre nom de domaine et hébergement, prenez une petite heure pour élaborer une page d'accueil temporaire.
Évitez l'effet "page en construction" pouvant rebuter vos premiers visiteurs, et profitez-en pour commencer à fidéliser en proposant à vos premiers visiteurs d'être alertés du lancement de votre site.
L'indispensable sitemap : une des premières choses à faire dès le lancement d'un nouveau site. Inscrivez-vous aux Google Webmasters Tools, et indexez le sitemap de votre site.
L'auto-promo : difficile de faire le buzz, alors on est jamais aussi bien servi que par soi-même. Vous avez peut-être déjà un autre blog qui est indexé depuis longtemps déjà ? Celui-là bénéficie sans doute d'une indexation rapide de ses nouveaux billets, donc écrivez un petit billet contenant un lien vers votre nouveau site.

En suivant ces 3 étapes, j'arrive pour ma part à indexer un nouveau site dans Google en 3/4 jours. Précisons qu'il s'agit du début du processus d'indexation, consistant généralement à n'avoir qu'une seule page indexée et souvent très mal placée sur les principaux mots-clés choisis.

Et vous, quelles techniques utilisez-vous pour indexer rapidement un nouveau site ? Pour quelles résultats ?

Google Webmasters Tools : performances du site

noreply@blogger.com (Jimmy) — Thu, 03 Dec 2009 21:28:00 +0000

Dans le même temps qu'il proposait aux webmasters un tracker Analytics asynchrone afin d'améliorer les performances de leurs sites, Google ajoutait à ses Webmasters Tools une nouvelle fonction dans la section Labs : Performances du site.

Cet onglet offre un monitoring du temps moyen de chargement des pages d'un site et quelques conseils pratiques d'optimisation, tout droit tiré des conseils donnés par Google Page Speed.

De quoi confirmer la volonté qu'à Google dans un avenir proche de favoriser les sites performants.

Tracker Google Analytics asynchrone

noreply@blogger.com (Jimmy) — Thu, 03 Dec 2009 21:19:00 +0000

Google a mis à disposition en début de semaine un code pour son tracker Analytics fonctionnant en mode asynchrone.

Fini donc le chargement de page qui se gèle pendant quelques fractions de seconde pour que le tracker Analytics soit chargé !

Le nouveau code du tracker est disponible, mais notez que vous pouvez toujours rester au tracker synchrone classique si vous le souhaitez.

Avez-vous migré vos trackers Analytics ? Avez-vous ressenti des gains de performances ?

Le pire du web

noreply@blogger.com (Jimmy) — Sat, 24 Oct 2009 13:51:00 +0000

Elles peuvent être des innovations techniques très jolies qui ne servent à rien, les solutions les "moins pires" à un problème réel, ou encore des gadgets qui ont tendances à se croire utile : voici ma sélection des pires idées du web, générations 1.0 et 2.0.

Le pire du web 1.0

Un peu de nostalgie d'abord, souvenez-vous des ces fameuses trouvailles qui ont révolutionné le web !
Comment ça, elles n'ont pas complètement disparues ?

Plop, voilà une popup !

Le fléau du web des années 90. Très prisé par les sites underground, mais également très étendu sur des sites plus traditionnels. Entre la popup de promo invitant à voter pour le site, et, avouons-le, la popup porno qui apparait par magie en plein écran alors que êtes loin d'être seul dans la pièce, dur pur bonheur.

Si les bloqueurs de popup de Firefox, puis d'Internet Explorer ont changé la donné, ces petites choses intempestives ont évolué vers un peu plus de finesse : les pop-under (s'affichent derrière la fenêtre active), les popup javascript (type ligntbox)...

"Désolé, clic droit interdit !"

Un des mes préférés.
Comment éviter de se faire voler le fruit d'un dur labeur par un visiteur sans scrupule ? Lui bloquer son clic-droit.

On en croise encore régulièrement, ça doit correspondre à la 2eme phase de croissance du webmaster : d'abord il publie ses œuvres avec fierté, ensuite il refuse d'être copié, puis enfin il réalise qu'il est heureux d'être copié parce que ça flatte son ego.

L'effet tunnel, l'art de la patience

Ouf, il en reste très peu, de ces animations qu'on nous obligeait à regarder en entier avant d'entrer sur le site, sans même un petit Passer l'introduction pour aller à l'essentiel.

Il ne serait pas surprenant que ces petites choses sympathiques aient disparues au moment où on s'est intéressé à la notion de rebond.

L'horloge, le bouche-trou dynamique

Pourquoi afficher l'heure sur son propre site ? Parce ça bouge (c'est dynamique), et en plus ça remplit bien ce petit espace vide où je ne savais pas quoi mettre.

Digitale ? A aiguilles ? Tellement fun, la vieille horloge javascript a traversé les âge et s'est transformée en widgets à succès.

Le pire du web 2.0

Le web devient social, interactif, et passe à l'Ajax. Le pire du web suit le même chemin et devient plus beau, plus vicieux, plus tendance. Mais pique toujours autant.

La prévisualisation des liens, pourquoi ?

Vous avez bien croisé ces affreuses fenêtres de preview Snap qui fleurissent un peu partout ?

Qui a pensé un jour que prévisualiser la cible d'un lien dans une fenêtre de 300 pixels avait de l'intérêt ?
Même les gars de chez Techcrunch ont apparemment trouvé le truc génial à sa sortie, il parait que ça fait gagner du temps au visiteur.

En réfléchissant bien, ça fait certainement gagner du temps aux internautes extrémistes. Du genre fans d'une couleur "Oh, ce site est tout en nuance de bleu, j'y cours", ou intégristes d'un modèle de grille "Ah j'ai bien de prévisualiser ce site, j'ai failli me rendre sur cet infâme template 3 colonnes".

Moi, je ne vois qu'une chose : ça me cache à chaque fois une partie des pages alors que j'ai rien demandé.

La publicité contextuelle dans le texte

La grande sœur de la précédente. Celle la imite des vrais liens hypertextes en surlignant des mots-clés dans le texte d'un article, et au passage de la souris sur un des ces mots apparait en surpimpression une popup promouvant un site du même thèse que le mot clé.

L'évènement déclenché au passage de la souris

Si les deux précédentes sont sœurs, celui-ci est leur parrain, à l'origine de tout.
Si je retrouve l'adresse de ce site de webdesign qui avait buzzé à l'époque par sa navigation extraordinaire sans clic, je le mets ici aussitôt.

Je pense que ne sommes pas prêts à ce type de comportement. Bouger son pointeur de souris, c'est regarder. Cliquer c'est agir.

Je n'ose imaginer l'internaute un peu tremblotant dont le pointeur ne fait que passer et repasser sur un lien actif au passage de la souris. De quoi frôler la crise d'épilepsie.

La dernière version du portail Yahoo! a pris cette voie : passez votre souris sur Yahoo! Mail et un aperçu de votre boite de réception apparait, cachant une bonne partie de la page. Etonnant.

A quand un panneau Attention où vous mettez votre pointeur de souris ! ?

Les commentaires Twitter dans les blogs (RT moi ça tout de suite).

Depuis que Twitter a explosé, on voit fleurir sur les blogs les trackbacks Twitter.
Seul problème, en 140 caractères, il est difficile de citer le billet d'origine et son adresse en bit.ly, d'y mentionner un retweet RT @webmaster, et en plus d'y ajouter son commentaire personnel.

Conclusion, sur certains sites populaires, avant de lire les vrais commentaires, on a le droit a avalanche de commentaires Twitter qui ne cite rien d'autre que le titre du billet.

Le backlink, ce marchand de faux

Tout amateur de SEO (optimisation pour les moteurs de recherche) sait qu'avoir des liens vers son site de la part d'autres sites est un plus, surtout quand le texte du lien n'est pas choisi au hasard.

Ainsi, si je souhaite aider mon blog à se positionner sur les mots clés "blog webdesign", rien de tel que mes amis webmasters m'offrent généreusement des liens du type Blog Webdesign.

Si elle semble logique, cette loi dictée par l'omnipotent Google a un effet pervers, car elle donne de la puissance au moindre texte de lien (on parle d'ancre).

Ainsi, lisant récemment un billet sur le blog Axe-net.fr, je suis tombé sur des commentateurs se nomme Chef de projet Web, Agence Nantes, ou encore Conseil Management Meilleur Fournisseur.

Même ici, mon seul et unique commentaire !

Si le nofollow est une réponse à ce problème, on peut considérer qu'il va cependant à l'encontre de l'usage des liens hypertextes.

Conclusion(s)

Sur l'air du c'était mieux avant : Elles n'avaient pas du bon finalement, nos bonnes vieilles popups porno plein écran ? Ben non, pas pour certains.
Soyons honnêtes, beaucoup d'entre nous ont utilisé une des ces techniques un jour. Si si.

A vous la parole :

Quelles sont les tendances de la création web qui vous font bondir ?

Quelles sont les horreurs du passé que vous êtes bien content de voir disparaitre ?

Créer sa carte de visite web

noreply@blogger.com (Jimmy) — Sat, 25 Jul 2009 11:08:00 +0000

La gestion de son identité sur le web est une des problématiques importantes du moment. Si les Facebook, Twitter, et autre MySpace sont devenus des moyens de communication incontournables, il n'en reste pas moins que le moyen le plus sûr de gérer son identité web est de posséder son propre site et son propre nom de domaine.

Ainsi, la tendance est aujourd'hui à la création de carte de visite web, ou business web cards.

Les avantages ? Disposer d'un point d'entrée pérenne, qui ne dépendra que de vous (et de votre capacité à payer hébergement et domaine, forcément), et sans doute plus crédible : j'ai tendance à penser que http://www.nom.prenom.fr a un meilleur effet sur un CV que http://www.facebook/nom.prenom.

Que trouve t-on généralement dans une carte de visite web ?

Une présentation succincte
Un CV
Ses coordonnées, un formulaire de contact
Un accès à ses réseaux sociaux
Un portfolio, notammentpour les créateurs, photographes, etc.

Si vous souhaitez vous y mettre, voici quelques sources d'inspiration :

Et si en voulez encore, faites un petit tour sur ces articles :

Plus de 100 packs d'icônes gratuites !

noreply@blogger.com (Jimmy) — Fri, 24 Jul 2009 20:33:00 +0000

Je vous avais proposé il y a quelques temps 15 packs d'icônes gratuites. Aujourd'hui, on fait plus fort, avec une page qui regroupe plus de 100 packs d'icônes gratuites, soit pas moins de 100000 icônes gratuites accessibles en un clic !

Cette fois, pas besoin de faire un listing détaillé, puisque iconfinder l'a fait pour nous.

Tous les packs sont gratuits, certains étant placés sous licence Creative Commons ou GPL. L'information est donnée pour chacun des packs, avec un aperçu du contenu de chacun d'entre eux.

Tout se qu'il faut pour faire son choix !

Accédez à plus de 100 packs d'icônes gratuites

Web sémantique, les Rich Snippets de Google

noreply@blogger.com (Jimmy) — Mon, 08 Jun 2009 10:27:00 +0000

Pendant que Bing faisait une entrée remarquée sur la scéne des moteurs de recherche, Google a annoncé la semaine dernière la prise en charge de rich snippets par son moteur.

De quoi s'agit-il ? D'une formalisation du codage HTML des notations et avis, qu'on trouve maintenant sur la plupart des sites web, pour que les moteurs affiche ses données directement dans ses listes de résultats.

Ainsi, les sites web qui proposent à leur utilisateurs de noter et/ou annoter des produits ou services (livres, voyages, hôtels, matériel informatique...) pourront structurer l'information pour qu'elle devienne compréhensible par Google, et qu'elle prenne plus de sens que du simple texte.

Côté site web, cela implique une modification du balisage HTML afin d'utiliser le formalisme du microformat hreview ou un balisage RDFa
Côté moteur, les résultats d'une recherche affiche directement notes et commentaires.

Notez que pour le moment, le service s'ouvre progressivement, uniquement pour des sites qui en font la demande et qui sont sélectionnés.

Le SEO revisité

Considérons moteurs de recherche et sites web comme 2 univers voisins, dont la frontière est le lien proposé dans les résultats de recherche.

Tous les webmasters savent aujourd'hui qu'ils peuvent accroitre leur taux de fréquentation en améliorant le positionnement de leur site sur Google, sur des mots clés correctement choisis.

Si je place correctement mon site dans les SERP, j'augmente le volume d'utilisateurs qui voient mon site dans l'univers du moteur. Une fois qu'ils ont franchi la frontière, à moi de les intéresser, de les fidéliser, de leur faire acheter mes produits... dans mon univers.

Maintenant, imaginons qu'à la frontière entre les mondes apparait un panneau "Note 1/10 - Moyenne des avis de 30 utilisateurs". Que se passe t'il ?
Certains seront sans doute intéressés par lire les avis négatifs sur une référence produit précise, mais on peut facilement penser que pour une recherche générique, comme "appareil photo numérique", les produits non recommandés verront leur taux de clics diminués.

Jusqu'alors, un site proposait peut-être quelques produits peu recommandés, mais le visiteur était dans l'univers du site, et il pouvait se voir proposer d'autres produits à acheter dans la foulée.

Certes, recueillir des avis sur un produit n'est pas nouveau, mais jusqu'alors l'information est présente soit sur le site lui-même (Amazon, Rueducommerce...), soit sur un site externe (Ciao)
La différence ici, c'est le volume. Lorsque Google se met à afficher les avis produits, c'est une des plus grosses sources de nouveaux visiteurs qui peut en être affectée.

Les sites marchands auront-ils intérêt à utiliser ce système ?

Spamdexing 2.0

Google a toujours favorisé les sites à travers leur réputation informatique : le pagerank est un indicateur reflétant le succès d'un site à travers les liens que d'autres sites ont vers lui.
C'est ce qui a causé par exemple l'apparition du link farming.

Demain, si Google affiche les commentaires dans les résultats de recherche, peut-on s'attendre à une multiplication des faux avis pour booster la notation d'un produit dans Google ?

Une recherche universelle sur une base universelle

Difficile de terminer ce billet sans constater un des effets pervers du web sémantique : utiliser les mêmes formalismes (en quelque sorte parler la même langue) pour décrire intelligemment le contenu du web, c'est ouvrir des perspectives d'échanges et d'interactions peu ou pas exploitées à ce jour.
C'est aussi toutefois offrir encore un peu plus de données compréhensible à la pieuvre géante Google, qui n'en finit plus d'absorber le web tout entier.

En indexant les actualités, les images, en affichant la structure des sites (siteslinks), et maintenant avec les rich snippets, Google rediffuse de plus en plus de données qui ne lui appartiennent pas.

Et il peut se le permettre, tant sa position est forte : ne pas entrer dans le jeu de Google, c'est perdre du terrain sur ses concurrents qui le feront.

Optimiser les performances d'un site web

noreply@blogger.com (Jimmy) — Thu, 19 Mar 2009 20:47:00 +0000

Introduction

J'ai récemment eu à améliorer les performances d'une application web d'entreprise hébergée en France et accessible depuis l'étranger par réseau interne. Cette problématique m'a conduit à approfondir la nature même du protocole HTTP et à découvrir de nombreuses règles d'optimisation des performances d'un site ou applicatif web.

Beaucoup de réflexions sont inspirées par les Best Practices des développeurs Yahoo! que je vous conseille vivement de lire.

Ce dossier sera découpé en plusieurs chapitres s'intéressant à un point précis d'optimisation. Si certains aspects sont décrits de manière simplifiée, je vous invite à suivre les références externes pour des informations plus détaillées.

Le contexte

Il est très simple : un internaute (l'utilisateur) accès à un site ou application web hébergé sur un ordinateur distant (le serveur). Il utilise son navigateur Internet favori (le client).

Les pages de notre site sont classiques, constituées d'éléments de nature diverses :

du contenu pouvant être généré dynamiquement (PHP, JSP, ASP...)
des scripts javascripts (notamment des librairies tierces comme Prototype)
des images constituant l'interface graphique
une ou plusieurs feuilles de style CSS

Nous cherchons à optimiser le temps de chargement de ces pages, s'étendant de l'appel à la page (clic sur un lien, saisie d'URL) au chargement complet des pages.

1^e partie - L'échange HTTP

Pour localiser les différents leviers d'action à notre disposition, il est nécessaire d'avoir une compréhension globale des échanges HTTP qui s'effectuent entre le client et le serveur.

Conversations...

Supposons que notre utilisateur a demandé l'accès à la page index.php du site http://www.monsite.com.

Nous nous plaçons dans la situation la moins favorable : cet utilisateur n'a jamais consulté notre site.

Voici la chronologie des évènements :

en bleu les opérations effectuées côté client

en orange les opérations effectuées côté serveur

#1 Le client résout le nom de domaine
- Client : "Je cherche monsite.com, quelle est son adresse ?"

Rappelons que les noms de domaine ne sont que des raccourcis plus faciles à retenir pour nous que des adresses IP.
Le navigateur, lui, a besoin de connaitre l'adresse IP du serveur distant, pour savoir à qui envoyer sa demande d'accès à la page : transformer monsite.com en 111.222.333.444.

De la même façon que nous consultons les pages Jaunes pour connaitre le numéro du livreur de pizzas, lui consulte ses serveurs DNS pour connaitre l'adresse du serveur.

#2 Le client établit une connexion TCP/IP avec le serveur ==>
- Client : "Bonjour serveur monsite.com, pouvons-nous ouvrir le dialogue ?"

Première prise de contact, l'établissement du canal de communication. Pour plus de précisions sur la nature de l'échange, je vous invite à consulter cet article de Wikipedia. Retenez simplement que l'établissement de cette connexion a un coût en temps.

Nous verrons dans un prochain article que les configurations actuelles permettent une réutilisation des connexions existantes.

<== #3 Le serveur accepte la connexion avec le client

Serveur : "Oui. Parlons."

Le serveur accuse réception et accepte l'échange à venir.

#4 Le client envoie sa requête HTTP ==>
- Client : "Je suis Firefox 3 pour Windows. Je sais parler en HTTP 1.1 et suis même capable de récupérer des flux compressés. Je souhaite récupérer ta page index.php"

Le navigateur se présente, informe le serveur de ses capacités, et demande la récupération de la page.

#5 Le serveur traite la demande
- Serveur, pour lui-même : "Ce client veut la page index.php, générons la immédiatement"

<== #6 Le serveur répond à la demande
- Serveur : "J'ai réussi à effectuer cette requête. Voici le contenu demandé, c'est un fichier de type text/html qui pèse 50 Ko, qui a été modifié le 10 Mars 2009"

Le serveur constitue une enveloppe décrivant les informations renvoyées (les entêtes de réponse) et envoie au client les données demandées.

#7 Le client traite les données reçues
- Client, pour lui-même : "j'ai trouvé 10 images, 2 fichiers javascripts et 2 feuilles de style. Allons donc récupérer ces éléments."

Le navigateur interprète le flux reçu, et répète les étapes #1 à #7 pour tous les éléments qui y sont référencés (fichiers javascripts, images...) jusqu'à leur traitement complet.

Les durées significatives

La transcription simplifiée de cet échange met en valeur les différents temps de traitement que nous allons essayer d'optimiser dans les prochains chapitres.

Globalement, 3 axes d'amélioration se dessinent :

Véhiculer les données plus vite

Il est d'abord question ici de la simple performance des lignes utilisées. Si pour un site Internet public il est impossible de maitriser le débit de la connexion de l'utilisateur, dans un réseau d'entreprise des technologies logicielles et matérielles peuvent être utilisées pour améliorer les performances du réseau.

Si nous n'irons pas plus loin sur les questions d'architecture réseau, il est utile de garder à l'esprit la notion de latence réseau. Si l'on s'intéresse généralement au débit constaté (le volume de données reçues par unité de temps), celui-ci est fortement impacté par le délai de transmission d'un signal d'une extrémité à l'autre de la ligne, qu'on appelle latence.

Dans le cas de notre site Web, ça signifie qu'à volume de données égal, plus d'échanges signifie plus de délai. Nous verrons comment réduire ce phénomène.

Autre facette de l'envoi plus rapide des données, la génération des pages transmises (étape #5). On touche ici au travail d'optimisation du moteur applicatif, qui passe par de bonnes pratiques de codage, la réécriture de requêtes SQL, ou encore l'utilisation de cache côté serveur.
Ces techniques sont intimement liées à la nature de l'application web, mais ont le même objectif : réduire le temps de génération des pages.

Véhiculer moins de données

C'est une évidence logique qu'il est bon de rappeler : moins il y a de données à transmettre, plus le temps de chargement global de la page se fait rapidement.

Envoyer moins de données, c'est :

ne pas envoyer d'éléments "inutiles"
diminuer le volume des éléments utiles envoyées, sans perte de contenu pour l'utilisateur

Des articles publiés prochainement seront consacrés à cette baisse de volume transmis.

Véhiculer les données plus intelligemment

Enfin, nous verrons que certaines bonnes pratiques de conception découlent directement de certains mécanismes du protocole HTTP, en jouant par exemple sur l'ordre des éléments dans la page ou leur conception même.

Dans le prochain article, nous entrerons dans le vif du sujet avec les premières règles à appliquer pour optimiser les performances de son site web.

La suite : prochainement !

Optimiser les images de son site web

noreply@blogger.com (Jimmy) — Mon, 09 Mar 2009 20:33:00 +0000

Je vous invite aujourd'hui à découvrir smush.it, une application en ligne qui permet très simplement d'optimiser les images de son site web.

N'oublions pas que le contenu est roi, et qu'un site beau doit également être confortable et ne pas être ralenti par son design. Si le poids global d'un site a tendance à devenir une notion obsolète avec les hauts débits, il n'en reste pas moins un écueil majeur pour les bas débits (connexion limitée, accès WAN entreprise...). Dans certaines situations, il est également intéressant de pouvoir diminuer le trafic sortant de son site.

Optimiser ses images doit donc rester un objectif, surtout lorsqu'il est question d'en conserver le niveau de qualité. Ainsi, smush.it propose d'optimiser lesimages de votre site web, grâce à ses modes Uploader (tranfert des images), URL (optimisation d'images présentes sur le web), ou Extension Firefox (optimisation de toutes les images d'un site).

Le résultat est présenté très clairement, et vous pouvez télécharger immédiatement un fichier zip contenant toutes les images optimisées.

Le test smush.it sur le blog Webdesign

Essayez dès maintenant smush.it sur votre site web

Ecrire des spécifications fonctionnelles

noreply@blogger.com (Jimmy) — Thu, 26 Feb 2009 21:15:00 +0000

Dans le développement logiciel comme dans la conception web, écrire les spécifications fonctionnelles est souvent considéré à tort comme une tâche fastidieuse et inutile.

Si le concept d'écriture de spécifications reste obscur pour vous, je vous invite fortement à découvrir les articles de Joël Spolsky sur le sujet. En quelques articles (traduits en français), il explique de manière très claire ce qu'est une spécification fonctionnelle, ce qu'elle doit contenir, et par qui elle doit être écrite.

Et quand vous aurez fini, vous pourrez encore lire les autres articles du même auteur, à recommander à toutes les personnes impliquées dans la conception logicielle en général.

Simplifier le processus d'authentification

noreply@blogger.com (Jimmy) — Fri, 20 Feb 2009 15:35:00 +0000

Avec l'explosion des réseaux sociaux, la belle vie des boutiques d'e-commerce, ou encore la personnalisation de portail (Netvibes, Google...), s'identifier sur un site est devenu courant.

Toutefois, si les techniques d'authentification restent sensiblement les mêmes, à savoir être reconnu à partir d'un couple de valeur saisies (je m'identifie pour montrer qui je suis, je donne mon mot de passe pour le prouver), il convient de suivre quelques bonnes pratiques afin de faciliter la reconnaissance du visiteur et rendre l'opération naturelle.

1 - Identifier clairement l'accès au formulaire d'authentification

2 alternatives :

Afficher le formulaire d'authentification sur toutes les pages du site

La technique semble de mois en moins répandue. Si elle facilite l'accès au visiteur, elle n'en reste pas moins une zone "morte" de la page tant que qu'il ne s'est pas connecté.

Afficher un lien vers la page de connexion

Les plus gros sites du moment (Google, YouTube, MySpace, Amazon) ont tous adopté le principe d'un lien présent sur toutes les pages du site, qui pointe sur la page de connexion.

Toutefois, il convient de porter une attention particulière sur le libellé de ce lien. Il doit être évident et être reconnu de manière unique, notamment ne pas être confondu avec le lien d'inscription).

Pour le positionnement, on choisira une zone fixe généralement en haut, position qui a tendance à devenir un standard de fait. Ceci évite de perdre le lien dans le contenu de la page.

Le choix de quelques sites parmi les plus importants :

Google, Youtube : Connexion
Yahoo, eBay : Ouvrez une session
Amazon : Identifiez-vous pour découvrir nos conseils personnalisés
PayPal : Connexion

Les liens d'authentification de Youtube

2 - Choisir l'e-mail comme clé d'identification

OpenID commence à faire son chemin, mais considérons pour le moment que notre visiteur lamba a déjà une dizaine d'autres comptes sur d'autres sites, et que l'authentification sur votre site est complètement indépendante.

Si la difficulté de retenir plusieurs mots de passe est évidente, celle de retenir également un pseudonyme est apparue clairement au fil des années. Dans certains cas, nous préfèrons apparaître sous identité "réélle" (nom.prenom), dans d'autres cas sous un pseudonyme, parfois même notre pseudo préféré est déjà pris. Et ocassionnellement, les règles de nommage des pseudonymes sont particulères (pas d'accents, ni de chiffres...).

L'e-mail apparait comme la clé la plus évidente d'identification.

Il convient d'ajouter que quelque soit la solution retenue, il ne faut pas oublier une des règles essentielles de l'utilisabilité : l'utilisateur n'est pas là pour ce poser des questions sur l'utilisation de votre formulaire.
Guidez le donc au maximum, en mettant vos libellés de champs en parfaite cohérence avec les données à saisir : adresse e-mail ou un pseudonyme. Évitez à nouveau les flous artistiques, du genre Identifiant qui peut vouloir tout dire.

Le choix des gros :

Yahoo, Google, Amazon, PayPal : adresse e-mail + mot de passe
eBay, YouTube : pseudonyme + mot de passe

Formulaire d'authentification de Facebook

3 - Concevoir une interface évidente

La page d'authentification n'a qu'un but, et il est technique. On ne s'attend donc pas à charger une page de 100 Ko et des bandeaux de publicité.

On s'attend à y trouver principalement 2 champs de saisie et un bouton de validation. En cas de problème, on s'attend aussi à y trouver une procédure de secours (que dois-je faire si j'ai oublié mon mot de passe ?).

N'oublions pas que notre visiteur est de passage sur cette page. Donnez lui alors quelques moyens techniques simple d'accélérer sa manipulation :

Au chargement de la page, positionner le focus sur le premier champ de saisie.
Utiliser l'attribut HTML tabindex pour passer d'un champ à l'autre avec la touche Tabulation.
Permettre (plus exactement ne pas empêcher) la validation du formulaire avec la touche Entrée.

4 - Proposer le rappel du mot de passe au plus tôt

Inutile de préciser que la fonctionnalité est primordiale.
Toutefois, ne pas attendre que le visiteur ait échoué pour lui proposer l'opération, et faire apparaître de façon claire l'existence de cette issue de secours.

On donnera un petit avantage au rappel du mot de passe par rapport à l'initialisation d'un nouveau mot de passe, pour des raisons de simplicité.

N'oubliez pas enfin qu'une adresse e-mail n'est pas forcément éternelle, prévoyez donc un mécanisme de changement d'e-mail pour l'utilisateur connecté.

Le choix des gros :

Google : Impossible d'accéder à mon compte
Amazon : Vous avez oublié votre mot de passe ? Cliquez ici
Yahoo : Mot de passe oublié ?
YouTube : Nom d'utilisateur oublié - Mot de passe oublié
eBay : J'ai oublié mon pseudo - J'ai oublié mon mot de passe
PayPal : Vous avez oublié votre adresse e-mail ou mot de passe ?

Formulaire d'authentification de Google

Pour aller plus loin :

Cheat Sheets pour Web Designers

noreply@blogger.com (Jimmy) — Wed, 11 Feb 2009 17:25:00 +0000

Une Cheat Sheet, en français antisèche ou aide-mémoire, consiste à réunir dans un format simple et court (généralement une page, facile à imprimer) des principes de bases ou des fonctions pratiques utilisés fréquemment mais pas forcément connu par cœur.

En quelque sorte, le compagnon idéal avant d'aller plonger dans une aide ou une référence plus complète.

J'ai réunis ici quelques unes des meilleurs Cheat Sheet liées au Webdesign orienté développement .
La plupart d'entre elles sont en anglais, disponibles gratuitement en version PDF ou fichier image.

Développement

Cheat Sheet HTML : balises essentielles
Cheat Sheet Encodage des caractères spéciaux en HTML
Cheat Sheet CSS (en) : sélecteurs, modèle de boîte (box-model), unités, attributs de texte, tableaux, couleurs et fond
Cheat Sheet Expressions régulières
Cheat Sheet PHP : fonctions tableaux et chaînes de caractères, expressions régulières, fonctions et formatage de dates, variables globales
Cheat Sheet MySQL : fonctions, types, et fonctions PHP
Cheat Sheet Javascript : fonctions DOM, XMLHttpRequest, Évènements

Librairies/Frameworks

Divers

Cheat Sheet htaccess Apache
Cheat Sheet du mod_rewrite Apache
Cheat Sheet 50 fontes gratuites : référence rapide à des fontes gratuites de qualité
Cheat Sheet UML : diagrammes d'états, d'activités, de séquences, et classes/objets

15 packs gratuits d'icônes pour applications web

noreply@blogger.com (Jimmy) — Fri, 06 Feb 2009 20:51:00 +0000

Développeur ou infographiste, à chacun son métier. S'il vous manque le second, vous serez intéressés par cette liste de 15 sites proposant des packs d'icônes gratuits de très bonne qualité à utiliser dans vos applications web !

Remarque : Consultez toujours les droits d'utilisation des ressources avant de les utiliser ! "Gratuit" ne signifie pas avoir le droit de faire n'importe quoi. Diffuser des ressources gratuites est souvent un moyen de se faire connaitre, jouez le jeu lorsque vous en profitez.

Packs complets d'icônes pour applications web

Simplicio

Ganato Design, icônes type barre d'outils

Nuvola, très complet et coloré

DryIcons Aesthetica

WebAppers set, façon 3D

Icojoy set, petit format mais beaucoup d'icônes

Famfamfam Silk

Starfish web consulting, icônes pour boutique en ligne

Function Icon set

Packs d'icônes RSS

Perishable Press

Feedicons2

Les packs d'icônes réseaux sociaux, très Web 2.0 (Digg, Flickr...)

Fasticon

Vikiworks Iconset

Les packs pas comme les autres

Web2.0rigami, les icônes célèbres du Web 2.0 façon Origami

Free Hand Drawn Doodle Icon Set, le pack d'icônes griffonnées au stylo

Les outils d'analyse de requêtes HTTP

noreply@blogger.com (Jimmy) — Tue, 27 Jan 2009 19:43:00 +0000

L'analyse des échanges HTTP entre navigateur et serveur web est un bon moyen de détection des opérations les plus consommatrices en temps, soit celles qui impactent le plus le temps de chargement global d'une page.
Tour d'horizon des outils gratuits existants :

Outils en ligne

D'une utilisation simple et rapide, ces outils proposent une vision synthétique des échanges à travers une chronologie précise des opérations, ainsi que le détail des requêtes et réponses HTTP. Toutefois, ils ne proposent généralement pas les mêmes options qu'un navigateur, notamment en terme de gestion de cache.

L'analyse de ce blog par Pingdom tools

Plugins navigateurs

Ces outils s'intègrent à votre navigateur, ce qui vous permet de simuler exactement les situations de configurations de vos visiteurs.

Firefox

Le compagnon idéal est l'extension livehttpheaders, outil de capture des requêtes et réponses HTTP
Firebug propose également une analyse complète, avec une visualisation chronologique des échanges

Firebug, onglet Réseau

Internet Explorer

La DebugBar, équivalent de Firebug pour IE, propose un onglet d'inspection des échanges HTTP, en détaillant le contenu des entêtes, la taille des données échangées, et le temps pris pour chaque opération

Logiciels

Fiddler est un proxy HTTP qui intercepte et analyse les échanges entre navigateur et serveur.
Le résultat est présente sous forme de différents rapports : liste des échanges, chronologie, visualisation graphique des statistiques... Il offre également des fonctionnalités avancées, comme la construction et l'envoi de requêtes.
Sa nature de proxy le place en couche intermédiaire, entre le serveur et votre navigateur, ce qui lui permet d'être utilisable avec tout navigateur : Internet Explorer, Firefox, Opera (à la seule condition de modifier vos paramètres de proxy pour les navigateurs autres que IE)

L'analyse par Fiddler

Utilisabilité et expérience utilisateur

noreply@blogger.com (Jimmy) — Mon, 26 Jan 2009 17:55:00 +0000

La fidélisation des visiteurs est un enjeu majeur pour tout site Web :

il est moins couteux d'attirer un visiteur fidèle qu'un nouveau visiteur
un visiteur fidèle a plus tendance à participer qu'un autre : il peut posséder son profil, émettre des commentaires, donner son avis...
un visiteur fidèle recommandera plus facilement le site à d'autres visiteurs potentiels, puisqu'il en est satisfait, générant donc ainsi de la publicité à moindre coût

Fidéliser le visiteur reviendra alors à faciliter l'identification du site (logo, nom du site), à lui permettre de s'abonner à de l'information ciblée (newsletters, alertes), ou encore à lui proposer des offres privilégiées (membres premium, ventes privées).

Conceptuellement, la fidélisation s'appuie sur deux leviers essentiels :

L'expérience utilisateur, ou comment déclencher l'intérêt du visiteur.

L'utilisabilité, ou comment concentrer son attention sur le contenu en lui évitant toute contrainte technique ou fonctionnelle

Là ou l'expérience utilisateur fait généralement appel à nos émotions pour favoriser un ressenti positif, l'utilisabilité travaille dans l'ombre pour nous éviter d'avoir un ressenti négatif.

Par exemple, si nous retournons à un restaurant, c'est sans doute que la nourriture y est bonne, les employés y sont souriants et à notre service, il y a même des jeux pour enfants.
Notre expérience utilisateur est positive, nous avons trouvé ce que nous cherchions (voire plus) et repartons satisfaits.

Mais nous y retournons aussi, parce que : l'accès est facile et pratique, il est facile d'y garer son véhicule, les tables ne sont pas les unes sur les autres.
Ce n'est certainement pas la raison principale de notre retour, mais y serions nous fidèles si les places de parking n'étaient pas assez grandes pour notre véhicule ?

Pour un site web, l'expérience utilisateur se définit au travers d'une interface plaisante, de contenus enrichis (vidéos), d'exclusivités, d'une mise en valeur de utilisateur (sites communautaires, réseaux sociaux).

L'utilisabilité se traduit, elle, par des contenus accessibles, une navigation fluide, des temps de chargements réduits, une utilisation facile (ergonomie), des procédures simple (inscription, commande, paiement).

En savoir plus :

Firebug, extension Firefox pour le développement web

noreply@blogger.com (Jimmy) — Fri, 23 Jan 2009 16:33:00 +0000

Outil bien connu des webmasters, Firebug est une extension pour Firefox incontournable pour tous les développeurs web. L'extension propose plusieurs outils d'aide au développement :

Inspection du code HTML : parcours du DOM, identification rapide de tous les éléments d'une page, édition du code et visualisation instantanée des modifications
Inspection des styles CSS : affichage des styles appliqués aux éléments de la page, édition en live du
Debug Javascript : console d'erreurs améliorée, possibilité d'interrompre l'exécution du code (breakpoints)
Traçage de l'activité réseau : examen complet du chargement des pages, avec visualisation chronométrique du chargement de tous les éléments de la page, et des échanges HTTP associés.

L'onglet réseau de Firebug appliqué au chargement de yahoo.fr

Bienvenue sur le blog Webdesign

noreply@blogger.com (Jimmy) — Fri, 23 Jan 2009 15:39:00 +0000

Contrairement à ce qu'on pourrait penser, le Webdesign n'est pas uniquement la mise en œuvre de l'identité graphique d'un site Internet.
Le Webdesign englobe tout le processus de conception d'un site Internet, de la définition de l'organisation et de l'enchainement des pages au développement même du site.

Ce blog sera articulé autour des 2 axes majeurs de la réalisation d'un site :

Concevoir & Développer

Définir une structure, organiser les pages
Réaliser les interfaces, développer les scripts, optimiser les performances...

Par extension, nous nous intéresserons aux activités qui en découlent naturellement :

Référencer & Promouvoir

Favoriser le référencement et le positionnement dans les moteurs de recherche
Accroitre le trafic, fidéliser le visiteur...

Bonne lecture !

Ce site est listé dans la catégorie
Web designer :

Aides et tutoriels création web de l'annuaire et

Contactez-moi

noreply@blogger.com (Jimmy) — Tue, 01 Jan 2008 19:35:00 +0000