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)
