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)
Harrah's Resort Atlantic City - MPR Hub
RépondreSupprimerCome and find out what makes Harrah's Resort Atlantic City unique 제주도 출장마사지 and exciting. From 성남 출장샵 its 군포 출장마사지 beautifully appointed rooms, unique dining 거제 출장안마 and nightlife to 거제 출장샵 its exciting