jeudi 4 octobre 2012

Savoir s'adapter, de plus en plus vrai sur le Web!


Vous avez fort probablement déjà été obligé de « zoomer » (redimensionner) ou « scroller » (faire défiler) pour pouvoir consulter un site Web sur un mobile. Ceci est dû au fait que ces sites ont été conçus pour un écran d'ordinateur.

Ce problème peut être évité grâce au « responsive design » (conception adaptative ou réactive).
Cette méthode consiste à permettre à la mise en page d'un site Web de s'adapter aux divers appareils et à leur résolution d'écran respective.

Le site ainsi conçu changera de disposition selon la taille d'écran de l'appareil sur lequel il est affiché. Au moyen de CSS et de JavaScript, la dimension et la disposition des images, titres, textes et autres éléments pourra se modifier et permettre d'accéder à l'information du site de façon agréable. Ce type de design fluide s'oppose au design fixe de la méthode habituelle.

Il existe aussi un autre moyen de créer un site adapté aux divers appareils; il s'agit de faire plusieurs versions d'un même site. Ces versions séparées seront de diverses tailles et seront pensées pour faciliter la vie de l'utilisateur. Sur un appareil mobile par exemple, on pourrait trouver des options de géolocalisation ou de recherche de restaurants à proximité. L'utilisateur d'ordinateur de bureau, celui qui consulte un site sur sa tablette le soir bien assis dans son sofa et celui qui navigue sur son cellulaire en se déplaçant, n'ont pas les mêmes besoins.

Voici une comparaison de chacune des méthodes :

Responsive design (conception réactive) :
  • Une seule version doit être développée
  • Intégration plus complexe (compatibilité avec les navigateurs, CSS et code HTML plus poussé).
  • Conception du site en blocs modulables.
  • Maintenance plus facile
  • Adapté pour les sites informatifs
  • Moins de latitude dans le design (nottamment au niveau des images et de la disposition)
Versions séparés :
  • Utilisation adaptée à l'appareil sur lequel il est consulté
  • Couteux en temps et en argent lors de la conception
  • Maintenance plus difficile
  • Design plus facile car adapté au média visé
La conception du site débutera par la version mobile pour téléphones intelligents, comportant moins d'éléments et étant plus limitée. Elle se poursuivra jusqu'à la version la plus complexe, soit la version pour ordinateur de bureau ou portable.

Par Serge Bilodeau

Sources :
Explication détaillée du concept de « responsive design » (conception réactive)

Tendances du design Web pour 2012 – bref résumé du « responsive design » (conception réactive)

Définition du « Responsive Web Design » (conception réactive)

Aucun commentaire:

Enregistrer un commentaire