SimpleWeb.fr

Avec les années la taille des écrans augmente, mais pas nécessairement celle de la surface d’affichage utile. Comprenez par là que si les résolutions d’écrans supérieures à 1024 px sont majoritaires (plus de 55% d’après le W3 Counter), les utilisateurs n’exploitent pas forcément la totalité de l’espace disponible. Résultat : la norme est indiscutablement de faire des mises en page de 1024 px de large (en fait 1005 px quand on tient compte de la barre de défilement verticale).

Problème : Comment faire pour afficher un maximum de choses dans la limite de visibilité (sans scroll de la page) ?

Solutions : 8 Layout Solutions To Improve Your Designs.

Dans ce très bon article, l’auteur nous livre ainsi différentes techniques pour virtuellement gagner de la place en jouant notamment sur les couches (layers en anglais) et sur une interface plus dynamique (entre autre) :

• Les carrousels et bandeaux défilants (ex. : Coda)
  

  Un exemple de carrousel

• Les onglets intérieurs (ex. : Fontecase)
  

  Un exemple d'onglets intérieurs

• Les fenêtres modales (ex. : KissMetrics)
  
• Le roll-over qui affiche un panneau de contenu (ex. : Miro)
  

  Un exemple de panneau affiché en roll-over

• La mise en page progressive qui fait apparaître le contenu au fur et à mesure des clics (ex. : Sursly)
  

  Un exemple de mise en page progressive

• Les grilles de lecture marquée qui autorisent une très grande densité d’information sur une seule page tout en assurant une bonne lisibilité (ex. : Neutron Creations)
  

  Un exemple de grille de lecture très marquée

• Les accordéons (ex. : Alex Cohaniuc)
  

  Un exemple d'accordéon

• Les menus sur-dimensionnés (ex. Porsche)
  

  Un exemple de menu sur-dimensioné

Voici donc une très belle collection d’exemples de ces différentes techniques permettant d’augmenter virtuellement le nombre de pixels.