Quand on dessine un site, on se pose rapidement la question de la largeur de l’écran, qui va conditionner la largeur d’affichage de la page.
On est ainsi passé du 640 au 800, et maintenant au 1024.
Ce genre de réflexion conduit à faire un site de largeur fixe, adapté à une taille d’écran donné.
Si l’écran est plus petit, il y aura un vilain ascenseur en bas de la fenêtre du navigateur.
Si l’écran est plus grand, il y aura une bordure, à gauche et à droite du contenu… Comme sur ce blog par exemple.
Tout cela est en fait bien dommage, pour plusieurs raisons :
- La taille des écrans est très variable, et va continuer à évoluer. On ne peut donc pas avoir un site adapté à tous les cas ;
- C’est très réducteur de faire le choix du « plus petit dénominateur commun », faire des écrans étroits, qui ne seront pas adapté aux grands écrans ;
- Le navigateur n’est qu’une fenêtre dans l’écran. Qui nous dit que l’internaute veux afficher sa fenêtre en plein écran ? Donc, même si l’internaute à un grand écran, on ne peut pas préjuger de la taille qui nous sera allouée.
Comment répondre à cette problématique ?
La meilleure solution est probablement de concevoir sa page avec une largeur variable.
Concrètement, il faut quand même définir une largeur minimum. Tout ne peut pas être variable, il faut bien une taille minimum.
Ensuite, la disposition des éléments HTML s’adapte à la largeur de la fenêtre.
Prenons comme exemple Amazon (par hazard 
).
Voici la fenêtre, la plus petite possible (880 pixels) :
Voici la même page, dans une fenêtre beaucoup plus large (1400 pixels) :
Cet exemple permet de montrer toute la richesse de cette adaptation dynamique :
- Les onglets restent de taille fixe et centrés (on doit pouvoir faire mieux ) ;
- La largeur de la colonne de gauche évolue, entre un minimum et un maximum ;
- La colonne de droite est de largeur fixe ;
- Pratiquement toute l’adaptation se fait en fait au milieu ;
- La partie la mieux faite étant la deuxième ligne, ou le nombre de produits évolue dynamiquement, en fonction de la largeur disponible (ajax…).
Dans cet exemple, on a bien une utiliation (presque) optimum de l’espace, quel que soit la taille de cet espace.
Mais voilà, concevoir de tels interfaces est beaucoup plus difficile, et réellement beaucoup plus long, donc, mécaniquement… plus cher !
ARAOK! conseille les entreprises qui souhaitent améliorer leur performance sur Internet.
ARAOK! accompagne ses clients dans leurs projets e-commerce, aide à faire les bons choix et à suivre le déroulement des projets
AU NIVEAU GRAPHIQUE il est vrai que la méthode du « Liquid Design » permet de s’adapter aux différentes résolutions existantes (bien que le 800×60 est passé en dessous des 10% de visiteurs et continue à diminuer). AU NIVEAU MARKETING c’est une toute autre histoire. En effet lorsque nous sommes sur de grandes résolutions comme dans votre exemple, et si nous utilisons des méthodes telles que le Eye Tracking pour suivre le regard de l’internaute, on s’aperçoit que plus le site est étiré plus son efficacité se dégrade…
1 juin 2008 @ 12:57
@Sax> Commentaire super intéressant !
Oui, ce sont les limites qu’il faut trouver, il faut probablement plutôt travailler sur des limites min/max. On peut pas étirer à l’infini.
1 juin 2008 @ 20:07
Je suis en règle général partisan d’une largeur variable, mais ceci est a adapter en fonction du site.
par exemple, pour un site de publication (type journal en ligne), les articles ne doivent pas exceder une certaine largeur sinon la lecture est plus que pénible, il suffit de voir les preconisations des techniques de lecture rapide.
Un site ou le contenu tient sur une ligne, n’est absolument pas lisible!
Pour un site de présentation de photo, en revanche le site peut presenter une largeur variable si et seulement le site est bien fait.
pour reprendre l’exemple d’amazon et sa page d’accueil, avec mon ecran en 1680 de large, il n’y a que 3 produits par ligne dans la partie centrale.
Si chaque produit etait dans un div en float:left avec une largeur définie, le design variable serait très adapté.
3 juin 2008 @ 9:30
La vraie question est surtout de savoir si le responsable du site ou de la marque concernée est prêt à faire un effort important en terme de rendu car avec un site qui demeure un minimum designé (pas comme Amazon qui est (en terme d’interface) à l’ecommerce ce que google est à la recherche) on perd beaucoup la maitrise du rendu du design… Tout est histoire de compromis en fait
(je rejoins au passage le commentaire de Sax !)
3 juin 2008 @ 12:45
@Jul> Si je te comprends bien, tu dis qu’une interface variable est beaucoup plus difficile à mettre au point, et donc plus cher ? Je partage complètement ce point de vue : il vaut mieux une interface fixe très bien faite qu’une interface dynamique mal réalisée.
3 juin 2008 @ 12:57
Je partage ton point vue effectivement, mais je soulignais plus le fait de dire que dans certains cas l’annonceur veut maitriser au pixel près le rendu de son site et son seul salue passe par un design fixe !
3 juin 2008 @ 14:54
Je suis d’accord avec stephane,
Je suis généralement partisan d’une largeur variable, mais cela reste compliqué à définir fonctionnellement. l’exemple d’amazon n’est pas idéal car le coeur de la page ne ressemble a rien !!
quelqu’un a un exemple d’un site qui l’a implémenté de manière intelligente ?
4 juin 2008 @ 21:36
Oui oui, il vaut largement mieux une largeur fixe bien faite qu’une largeur variable mal gérée…
5 juin 2008 @ 6:51
Salut François,
perso j’encourage toujours la largeur fixe.
cela évite de se retrouver avec certains cas isolés qui doivent trop scroller pour avoir des informations évidentes comme le prix ( généralement en haut à droite ) devant les yeux.
Il est toujours envisageable de Cloacker sur la taille de l’écran. ( je le fais souvent sur des forums ou portails pour la taille des adsense. )
Mais pour une boutique, n’oublions pas… faire simple avant de faire compliquer.
Ce n’est pas parceque plus personne n’a de 15″ que tout le monde à des bons yeux.
Mon patron travaille sur un 22″ comme moi., mais il est en 1024*768 sinon les textes sont trop ptits !
Bref
5 juin 2008 @ 13:21
Surtout que quand toi tu travailles avec ton 22″ sur un site en % tu ne te rends pas de suite compte des soucis sur les petits écrans, souvent trop petit que pour faire rentrer tout ce que tu y a mis avec ton 22, tellement tu trouvais cela jolis !
( vivement que tout le monde aie son 30″, finis l’ère des sites riquiqui ! Toute l’information sur une seule & une seule page sans scroll =D
5 juin 2008 @ 13:23