Le défilement parallaxe (ou scrolling différentiel) est une technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
Cet effet consiste à superposer plusieurs calques et les faire défiler à des vitesses différentes.
Il est possible de recréer cet effet dans une page web assez facilement avec CSS et jQuery.
Il y a environ un an, Google avait sorti un site de démos techniques (www.chromeexperiments.com) afin de promouvoir la rapidité de son navigateur Chrome par rapport à ses concurrents.
Depuis, les développeurs continuent de poster de nouvelles démos sur le site.
Effet de peinture à partir d’une photo grâce à HTML5, Canvas et jQuery
Ces démos présentent les possibilités offertes nativement par Javascript combiné avec des technologies web comme HTML5, Canvas ou SVG.
Pour les non développeurs, CSS3 ne semble rien apporter de révolutionnaire.
Des coins arrondis, des ombres… On en faisait déjà avant, non ?
La grande nouveauté, c’est que CSS3 permet aux intégrateurs d’automatiser ces effets visuels qui nécessitaient jusqu’à présent l’utilisation d’images, de scripts ou de modifications du code HTML : ombres portées, coins arrondis, opacité, arrière plans multiples, dégradés complexes, multi-colonage, effets textuels…
A gauche : Internet Explorer 8 / A droite : Firefox 3.5
Dans cet exemple, il suffit d’une seule ligne de code CSS3 pour activer les effets visuels visibles à droite.
Google Labs viens de sortir un outil baptisté Brower Size qui permet de tester vos pages pour savoir quelles sont les zones les plus visibles pour vos visiteurs.
En effet, tout le monde n’a pas un écran 24 pouces et certains éléments risquent de ne pas être vus par vos visiteurs ayant de faibles résolutions.
Sans surprise, les zones les plus visibles sont situées en haut et à gauche. La largeur de vos pages ne devrait donc pas dépasser 1000px pour s’afficher correctement sur la majorité des écrans.
Mais cela veut-il dire également que vos pages doivent tenir dans moins de 600px de hauteur ?
Absolument pas ! les tests utilisateurs prouvent que les internautes savent scroller !
Cela veut dire que vos éléments les plus importants doivent apparaître avant la limite et les éléments secondaires plus bas.
Cette pratique existe également dans la presse papier. En effet, les journaux mettent toujours les informations les plus percutantes ‘above the fold’ (au dessus du pli) afin qu’elles soient visibles du premier coup d’œil dans les kiosques.
Quelques conseils pour encourager vos visiteurs à scroller :
Pour plus d’informations, lisez The myth of the page fold: evidence from user testing
Avec la montée de l’offre internet mobile, il devient intéressant de tester ses sites sur les différents appareils du marché.
En effet, l’expérience utilisateur ne sera pas la même d’un appareil à l’autre car le parc mobile est plus hétérogène que le parc “desktop” : curseur ou écran tactile, clavier ou pavé numérique, support moins répandu de javascript, Flash, etc…
A mesure que les navigateurs deviennent de plus en plus performants, que les sites deviennent de plus en plus riches, il devient difficile pour les développeurs de réaliser le grand écart et de supporter encore Internet Explorer 6.
Continue reading “IE6 : L’abandon accéléré par les développeurs”
