Le Web Design adaptatif 
Par habitude, à l’image du peintre et de sa toile, les concepteurs Web (créatifs, ergonomes, intégrateurs…) considèrent l’interface, la mise en forme, comme quelque chose devant s’inscrire dans une surface cernée, délimitée par des cotes (ex. : 1024*768).
Seulement, la lecture des pages n’est pas toujours adaptée aux contraintes des terminaux mobiles.
Alors pourquoi ne pas redistribuer/ reformater les éléments d’interface en fonction de ces configurations ?
CSS3 et les Media Queries :
L’arrivée du HTML5, et plus particulièrement des CSS3 grâce aux Media Queries, nous donne les moyens de voir plus loin, de dépasser les limites du « canevas » unique.
On peut dès aujourd’hui concevoir une couche graphique qui s’adapte au terminal de consultation. Nos navigateurs modernes[1] (Chrome, Safari, Firefox, IE9…) permettent un habillage conditionnel ; habillage graphique qui se fait selon les caractéristiques de l’appareil utilisé pour la consultation.
Techniquement, il est possible de détecter la surface d’affichage, que ce soit celle du browser lui-même, ou de l’écran, mais pas seulement : on peut détecter la profondeur de couleurs, l’orientation de la tablette (portrait, paysage), le format d’écran (4/3 ou 16/9). Les types de médias incluent de même les terminaux non graphiques comme la plage braille ou la synthèse vocale…
Cette détection passe par des requêtes faites aux navigateurs sur leur type et configuration, ex.[2]:
@media only screen and (min-width : 1224px) {/*code CSS pour un PC par ex.*/} => un navigateur ayant une largeur minimum de 1224px.@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {/*code CSS pour une tablette par ex.*/} => un écran faisant entre 768px et 1024px de large.
Attention, à la terminologie : width pour le navigateur versus device-width pour l’environnement.
- Navigation qui s’écourte
- Images qui s’adaptent à la réduction de leurs containers
- Blocs de contenus qui se repositionnent ou s’éclipsent (la suppression de certains contenus peut poser un problème d’accessibilité. Pourquoi priver certains internautes d’informations ?).
[HTML5]<head> <link rel="stylesheet" type="text/css" href="full-styling.css" />
[CSS] 1 seul fichier de styles CSS :/* Full styling CSS */body {background-color:silver}// Landscape phones and down@media (max-width: 480px) { body {background-color:red;} }// Portrait tablet to landscape and desktop@media (min-width: 768px) and (max-width: 980px) { body {background-color:orange;} }// Large desktop@media (min-width: 1200px) { body {background-color:green;} }
Exemple avec plusieurs fichiers CSS
[HTML]<head> <link rel="stylesheet" type="text/css" href="core-styling.css" /> <link rel="stylesheet" media=" screen and (max-width: 480px)" href="phone.css" type="text/css" /> <link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 980px)" href="tablet.css" type="text/css" /> <link rel="stylesheet" media="screen and (min-width: 1200px)" href="desktop.css" type="text/css" />
[CSS]//4 fichiers de styles CSS : 1 base et 1 « téléphone », 1 « tablette » et 1 « PC ».
Perspectives
Cette approche nouvelle et encore peu explorée est particulièrement excitante en termes de perspectives, car elle permet de concevoir des réponses adaptées à la prolifération des terminaux web.
Ce sont tous les acteurs habituels d’un projet web qu’ils soient designer, ergonome, intégrateur, rédacteur… qui sont « challengés » dans leurs habitudes face à ces nouvelles perspectives.
Design adaptatif ne signifie pas non plus la mort des sites dédiés à la mobilité. Cela peut être aussi vu comme complémentaire, et comme un enrichissement.
En tous cas, de belles aventures à venir !