Home Actualités Conseils sur le responsive design

Conseils sur le responsive design

par Manuel

Vous aurez probablement lu au moins une fois sur un site web une déclaration telle que « Site optimisé pour une résolution de 1024×768 pixels ». Cette phrase indique que la mise en page du site a été conçue pour être affichée correctement avec un moniteur ayant une résolution minimale de 1024x768px. Les utilisateurs disposant de moniteurs à haute résolution verront le site correctement mais d’une manière légèrement différente, selon le type de mise en page :

Dans le cas d’une mise en page fixe, le site est affiché comme si le moniteur avait une résolution de 1024×768, mais il y aura plus d' »espace vide » des deux côtés du site (si le site est centré sur la page) ou sur le côté droit du site (si le site est aligné sur le côté gauche de la page). C’est de loin la solution la plus adoptée jusqu’à présent ;

Dans le cas d’un site à structure responsive, au contraire, le site reste fondamentalement le même, à la différence que le contenu « s’agrandit » pour occuper l’espace disponible.

Jusqu’à présent, ces deux solutions ont suffi pour résoudre le problème des différentes résolutions des moniteurs des utilisateurs. Ces derniers temps, cependant, la situation est devenue plus complexe, car avec le succès commercial des netbooks et des smartphones et le succès prévisible des tablettes informatiques, la gamme de tailles des appareils avec lesquels un utilisateur peut accéder au web s’est définitivement élargie.

En prenant comme référence la gamme de produits Apple, nous partons du 3,5″ de l’iPhone au 24″/27″ de l’iMac, en passant par le 9,7″ de l’iPad, le 11″/13″ du nouveau Macbook Air et le 13″/15″/17″ du Macbook Pro. Comment pouvez-vous surmonter cette nouvelle frontière de la conception moderne du web ?

Il y a quelques mois a été publié sur A List Apart un article écrit par Ethan Marcotte intitulé Responsive Web Design. Depuis lors, sur les blogs consacrés au web design, on parle beaucoup de ce nouveau concept, emprunté à l’architecture moderne et qui semble être un candidat pour résoudre le problème auquel nous sommes confrontés. Cela donne beaucoup de travail aux graphistes, ils doivent augmenter le nombre de propositions faites afin d’avoir un site web au design prévu pour bureau (desktop), tablette, mobile. Donc vous devez trouver des entreprises ou des agences de graphistes qui ont l’habitude.

C’est quoi un site web au design responsive ?

Un site web responsive est un site capable de réagir, de s’optimiser en temps réel à la taille du navigateur avec lequel il est affiché.

La création d’un site de ce type est possible principalement grâce à deux éléments :

  • Mise en page responsive. Le succès du web design réactif a remis en vogue la mise en page liquide, à laquelle on avait jusqu’à présent nettement préféré la mise en page fixe. Fondamentalement, dans une mise en page liquide, les dimensions des éléments d’une page web sont exprimées en pourcentage et ne sont pas fixes, et varient donc proportionnellement à la taille du navigateur.
  • Requêtes moyennes. Sans entrer dans des détails trop techniques, les requêtes médias sont un outil puissant et relativement nouveau qui permet au concepteur de sites web de modifier l’apparence d’une page web sous certaines conditions. Il est possible, par exemple, de faire des choix graphiques et des mises en page différents en fonction de la taille actuelle du navigateur. Pour mieux expliquer, voici un autre exemple de vidéo.

Le grand avantage d’un design web réactif

L’une des raisons pour lesquelles le concept de webdesign réactif connaît un tel succès est la possibilité de l’utiliser pour créer la version optimisée d’un site web mobile (pour les appareils mobiles, en particulier l’iPhone). Cependant, tout le monde n’est pas d’accord avec l’utilisation de cette possibilité. En fait, certains pensent que la version mobile d’un site traditionnel devrait être considérée comme un site distinct et différent : le contenu ne devrait pas être simplement adapté ou repositionné, mais « écrémé », réduit, choisi pour l’utilisateur qui le consulte en déplacement.

Conclusion

C’est une opinion à partager, mais elle est probablement plus valable pour certains sites que pour d’autres. Il est possible de penser qu’un utilisateur mobile se connecte au site web d’un magasin pour connaître son adresse ou ses heures d’ouverture plus que son histoire ou sa philosophie ; mais un utilisateur qui, par exemple, se connecte à un site d’information est probablement toujours à la recherche d’un article, qu’il le consulte depuis son iPhone ou depuis son ordinateur de bureau à domicile.

Articles Similaires