Tout le monde le dit aujourd'hui, la résolution standard des écrans est le 1024 x 768 pixels. On va donc assister à beaucoup de refontes d'Interfaces Web pour tenir compte de ce nouveau paradigme. Si vous êtes dans ce cas prenez le temps de lire ces quelques lignes avant d'agir, peut-être bêtement.

La solution facile et pour le moins contre productive serait de "figer" la structure du site pour le "1024 x768" comme on l'avait précédemment fait pour le "800x600". Ce qui serait une grosse bêtise !

Pourquoi ?

1 - 17 % des usagers utilisent encore le "800 x 600" et ce chiffre pourrait se stabiliser, puisqu'il inclut non seulement les "vieux écrans" mais aussi les "nouveaux" des gadgets électroniques (tablette PC, écran pour voiture, réfrigérateur intelligent…).
2 – Dans l'avenir, on pourrait assister à une prolifération des résolutions d'écran : du "640 X 480" (Ipod, cellulaire), au maxi écran en "5000x3000".

Que faut-il faire ?

Au minimum :

Développer une structure liquide qui s'adapte à plusieurs résolutions d'écran, au moins du 800 X 600 au 1280x1024.

Mais le plus intéressant est de détecter la taille d'écran et présenter une interface avec plus ou moins de contenus en fonction de la résolution. Ainsi on pourrait avoir une page pour du "800x600" et une autre avec des contenus supplémentaires pour un écran "1024x768".

La structure fixée en "1024x768" : une mauvaise idée : le cas de " Window live space "

Window live space structure de page figée en "1024x768" - résolution "1024x768"

Window live space structure de page figée en "1024x768" - résolution "800X600"
Apparition d'une barre de scroll horizontal

La structure figée en 800 X 600. Très commun, mais perte d'efficacité

Futureshop - structure de page figée en "800X600" - résolution "800X600"
Pas de problème

Futureshop - structure de page figée en "800X600" - résolution "1024x768"
Le site reste fonctionnel

Mais perte d'espace pour le marketing du site. Les zones non utilisées sont affichées en jaune dans l'image.

Futureshop - même structure figée en "800X600" - résolution "1024x768"
En jaune, les zones non utilisées qui auraient pu afficher du contenu

Solution intermédiaire : La "structure flottante"

Les contenus restent les mêmes, mais il s'adaptent à plusieurs résolutions d'écran. Mais on "en voit plus" en 1024x768. En 800x600, seule "l'information prioritaire" apparaît.

Alengryconcept.com résolution "1024x768"

Alengryconcept.com résolution "800X600"
Moins de contenus apparaissent à l'écran, mais la page reste présentable

La meilleure solution : Optimisation de la disposition des contenus de la page en fonction de la résolution d'écran

Les contenus sont choisis et affichés en fonction de la résolution d'écran.

Le portail d'actualité Rezo.net - résolution "800x 600"
Les contenus " 2 colonnes"

Le portail d'actualité Rezo.net - résolution "1024x768"
Les contenus "3 colonnes"
Plus de choix sont accessibles que dans l'écran 2 colonnes