Design et performance web : enfin réconciliés !

En matière de webdesign, la tendance est à l'ergonomie. Clairement. Un bon designer web travaille aujourd'hui en pleine conscience de l'expérience utilisateur. La page web doit être esthétique, équilibrée, ultra-lisible et fluide.

Si certaines pratiques tendent à faire converger naturellement ces qualités, d'autres requièrent une attention particulière pour maintenir l'équilibre, notamment entre esthétisme et fluidité.

Flat design : l'enfance de l'art

Des aplats de couleur unies, des formes simples, une structure aérée… Le Flat-Design, c'est l'apologie de la légèreté. Succédant aux reflets, ombres, lumières et dégradés du "Skeuomorphisme" , le "Flat" propose de soulager l'œil de l'internaute avec des éléments visuels limpides. Cette pratique génère des images plus légères, parfois vectorielles. Elle permet d'utiliser des polices pour afficher des icônes. Bref, le soulagement s'opère également sur le poids de la page web et c'est tant mieux !

Monopage : un long défilé ?

Un site constitué d'une seule et même page, n'est-ce pas plus long à charger ?
Cette tendance du "longscrolling" (long défilement vertical) révèle une nuance importante : le temps de chargement ne correspond pas toujours à la fluidité ressentie. Bien optimisé, un site monopage propose au contraire une expérience utilisateur des plus agréables : la zone d'accueil s'affiche en priorité et le chargement se poursuit en arrière-plan, préparant pour la suite une navigation quasi-instantanée.
Il ne s'agit pas non plus d'envoyer systématiquement l'intégralité du site à chaque internaute. L'équilibre est souvent trouvé grâce à un affichage/chargement progressif en ajax.
Simple et intuitive, cette structure sied parfaitement aux sites dont la quantité de contenu reste limitée.

L'animation, tout en légèreté

Bien dosés, les effets d'animation sur une page web peuvent faire sensation. Le CSS3 désormais largement supporté permet une économie substantielle de code pour afficher de douces transitions animées. Les sliders Jquery remplacent parfois avantageusement les animations Flash, lesquelles impliquaient jusqu'alors la présence d'un plug-in installé côté client.
Enfin, les effets de "parallaxe" - qui consistent à faire défiler une image de fond en harmonie avec les mouvements de l'internaute - sont très légers à mettre en œuvre.
Aujourd'hui, l'animation se fait en finesse et en apesanteur !

Grands textes et webfonts pour un poids plume

Charger toute une police de caractères pour l'afficher sur un site ? Cela peut être pertinent, même du point de vue de la performance web. Rappelons qu'il a longtemps fallu, pour afficher un texte dans une typographie atypique, utiliser des images ! Suffisamment exploitée, une "webfont" va permettre d'afficher de grands textes colorés à vocation d'agrément visuel partout sur le site, en lieu et place de lourdes images. Parfait, c'est la tendance ! Attention toutefois à ne pas multiplier les polices "spéciales" et leur chargement.

Responsive avec modération

En principe, le "Responsive Design" vise à proposer un site qui s'adapte à l'internaute et à son périphérique d'affichage (pc, tablette, smartphone, friteuse connectée …). En principe toujours, il s'agit donc d'une pratique soucieuse du confort de l'utilisateur.
Qu'en est-il en pratique ?
Pour anticiper tous les cas de figure, un site "responsive" prévoit généralement des images dans différentes tailles, il affiche ou masque certaines zones en fonction de la résolution de l'écran. Il arrive alors parfois que le navigateur web charge des éléments qu'il n'affichera finalement pas. Et là, nous avons un bel exemple de "contre-performance web", avec autant de secondes passées à charger des données inutiles.
Il est donc important de limiter au maximum les différences entre ce qui est affiché d'un périphérique à l'autre, tout en conservant la souplesse et la fluidité d'un design "responsive".

Grandes images et infographies : ouvrons l'œil !

A priori le temps de chargement n'aime pas les images, encore moins les grandes. Diaporamas en pleine largeur, photos en plein écran, … ces pratiques très répandues sont pourtant pleines d'intérêt en terme d'expérience utilisateur.
Une grande image concentre et simplifie la lecture, elle remplace souvent une multitude de petites vignettes. Quant à l'infographie, elle présente des données qui resteraient plus légères sous forme de textes et de listes à puces, certes. Mais cette mise en forme de l'information est autrement plus lisible, digeste et attractive. Le bon compromis ? Celui que l'on trouve presque toujours : l'infographie en "Flat-Design", qui reste dans une taille de fichier tout à fait raisonnable.
Ajoutons enfin que les images d'un site peuvent et doivent être optimisées (compression, progressivité ...).

Pour conclure ...

Le Design web aurait donc un penchant pour les pages simples, lisibles et légères au chargement. Coïncidence ou mode passagère ? Rien de tout cela. En réalité, le webdesigner devient un ergonome "responsable", pour qui le confort visuel de l'internaute n'est désormais plus dissocié de son confort au sens large.
Cette conscience en amont ne dispense toutefois pas d'une certaine rigueur par la suite. Ainsi, le déploiement d'un nouveau design doit être contrôlé comme toute autre évolution applicative et faire l'objet de tests de charge et de tests fonctionnels avisés.

Smartphone / Tablette