Archives par mot-clé : Interface

Chrome et le e-commerce

Chrome, c’est un navigateur de plus, qui s’ajoute à la longue liste de ceux existants (Internet Explorer 6 et 7, Firefox 2 et 3, Opéra, Safari, …).

Et comme Google a en particulier réécrit le moteur Javascript, on peut imaginer que ça va engendrer des différences.

Pour le e-commerce, c’est donc la nécessité de faire des tests en plus… D’autant plus que le javascript est de plus en plus utilisé pour enrichir les sites en lignes.

Site e-commerce – largeur fixe ou variable : that is the question !

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.

Exemple de rendu, dans une fenêtre étroite

Si l’écran est plus grand, il y aura une bordure, à gauche et à droite du contenu… Comme sur ce blog par exemple.

Exemple de rendu d'un site en largeur fixe

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) :

Fenêtre étroite pour Amazon

Voici la même page, dans une fenêtre beaucoup plus large (1400 pixels) :

Fenêtre large pour Amazon

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 !