Vous dessinez votre site avec une largeur fixe ?
Cette largeur augmente, et aujourd’hui, la plupart des sites sont réalisés pour un écran de 1024 pixels de large.
La hauteur est habituellement variable : il est « commun » de réaliser des sites avec une hauteur variable et une largeur fixe : les internautes sont habitués à « scroller » verticalement, et pas horizontalement.
Ceci dit, rien d’obligatoire : certains sites ont essayés la navigation horizontale, comme Gucci :
Donc, votre site, il a des pages avec une hauteur variable, et une largeur fixe. Point.
C’est un bon début, mais on peut aller bien plus loin.
Pour vous en convaincre, ouvrez une page d’un service de Google, GMail, par exemple.
L’occupation de l’espace est bien différent :
La page est complètement remplie, sur toute la largeur, quelque soit la taille de la fenêtre.
Bon, en dessous d’un minimum, il y a un scroller horizontal, mais dès qu’on a une largeur raisonnable, la page s’affiche simplement en pleine largeur.
Au niveau vertical, la page déborde, avec un ascenceur donc.
Mais quand on dessend dans la page, un bloc reste collé en haut :
(j’ai entouré en rouge la partie qui reste fixe, quand on scroll la page)
On peut également voir ce type de mise en forme avec le back office de magento.
C’est là ou je voulais en venir : c’est, il me semble, une tendance clé des nouveaux services : cet usage de morceaux « scotchés ».
On peut, comme GMail, scotcher un bandeau, permettant de garder des actions clés toujours visibles (ici, ce sont les boutons pour naviguer dans les mails : envoyer, forwarder, …).
On peut aussi scotcher un bandeau en bas. Headict l’avait fait avec un footer toujours visible. Bon, ils l’ont enlevé pour remonter ces éléments dans le header, et je n’ai pas trouvé d’autres exemples ;). Salomon a sur son site e-commerce, un exemple de footer scotché :
On peut encore scotcher un morceau a gauche ou à droite.
Exemple, avec le service Feedback 2.0, sur Beansight :
Le bouton a gauche est « collé » au bord de la fenêtre, et se déplace, en fonction du scroll de la fenêtre.
Ces fonctions sont très riches, et très utiles.
Quelques bémoles cependant :
- D’expérience, il faut une mise en oeuvre impeccable. J’ai vu pas mal de site avec une mise en oeuvre approximative. Cela donne, à mon avis, un rendu très amateur. Si on n’a pas les moyens de faire un truc bien travaillé, il vaut mieux s’abstenir.
- Comme toujours quand il s’agit d’interfaces, le diable se cache dans les détails. Il faut tester le service dans des configurations et des usages limites. Que va-t-il se passer si la fenêtre est toute petite ? Et si l’internaute agrandit l’affichage ? Ou s’il le réduit ? Il faut penser à tout.
- Enfin, ça peut être super utile de garder des espaces scotché, mais c’est de la place qui ne pourra pas être utilisé pour autre chose. La place sur l’écran, elle est « chère ». C’est donc une super idée d’utiliser ces fonctions pour garder afficher des choses escentiels, pas pour le superflux.
Nous avons enlevé la barre permanente sur Headict qui contenait les éléments de réassurance pour les intégrer directement dans le header (encore plus de visibilité).
Ceci dit tu trouveras un excellent exemple de barre scotchée sur le site de Salomon, avec accès au chat 😉
http://www.salomon.com/fr/
@Antonin> Hello !
Merci pour ces éléments. Effectivement, je vais compléter mon billet avec l’exemple de salomon.
Le site de Helena Rubinstein aussi a une barre scotchée en bas :
http://avantpremiere.helenarubinstein.com/fr/
Je trouve son contenu bien choisi d’ailleurs. Ils pourraient aussi rajouter le numéro de hotline, et c’est aussi effectivement un bon endroit pour un lien d’accès au chat.