Design flexible comme évolution du web ?
24 juin 2010L’évolution d’internet est rapide et souvent peu homogène, ce qui demande à moi et mes confrères des métiers du web une veille constante du média et de ses possibilités. Jusqu’ici, je n’apprends pas grand chose à grand monde. Je m’aventure un peu plus loin : une de ces évolution est sans conteste la prise en compte de la place de plus en plus importante que prennent les nouveaux "terminaux" (j’entends pas terminaux par exemples les smartphones, les bornes interactives, les tablets mais aussi les PC portables ou ordinateurs de bureau).
Imaginez : si on considère que le marché va vers une offre de plus en plus grande de formats d’écran (du smartphone à la télé 42 pouces à leds), cela signifie pour nous webdesigners d’être à même de concevoir des sites web capables d’être confortables à la consultation sur tous ces terminaux.
Même si nombres de mes clients sont encore peu conscients de cette pluralité grandissante il est normal que ma veille m’amène à trouver des solutions à cette évolution. J’ai réalisés à plusieurs reprises quelques sites avec une détection du terminal par un script serveur (PHP) permettant de renvoyer une mise en page adaptée en fonction de la largeur d’écran détectée. C’est donc assez simple techniquement mais cette méthode dispose d’un grand désavantage : si on suit mon raisonnement, plus on avance dans le temps plus je devrais réaliser de mises en pages différentes ce qui peut impliquer à la fois une gestion difficile du site sur le long terme et un coût assez cher pour le client.
La méthode décrite par Ethan Marcotte pour A List Apart est pour le moins beaucoup plus séduisante : le design flexible (lire l’article "Responsible webdesign"). Il site notamment John Allsopp pour démarrer son propos dont voici une traduction rapide :
"La mise en page dans le cas du médium print est lié aux limitations du format de la page papier. Nous devrions adopter le constat que le web n’a pas les mêmes contraintes et donc concevoir avec le critère de flexibilité."
Il poursuit cette fois de sa plume :
As a long-time proponent of non-fixed layouts, I’ve long felt they were more “future proof” simply because they were layout agnostic. And to a certain extent, that’s true : flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes.
Autant dire que j’ai été assez méfiant à la première lecture. Les designs flexibles sont plus tourné vers l’avenir ? Concevoir des mises en page flexibles (une mise en page qui s’adapte en largeur à l’écran sans largeurs fixes, voici un exemple) est une pratique que j’ai abandonnée il y a quelques années pour plusieurs raisons :
- Les contraintes techniques sont assez difficiles : comment garantir au client que le texte de son site s’affichera correctement sur un écran 1024pixels ou 1900 pixels ? Comment s’en sortir avec des éléments qui sont eux fixés en taille (vidéos YouTube, images, bannières...) au sein d’un design flexible ?
- Les contraintes visuelles donnent a priori une impression qu’on ne pourra pas être aussi créatif que si on est dans un environnement fixe.
Autant dire que j’ai eu besoin d’arguments supplémentaires pour me convaincre. Il arrive juste après : en utilisant la fonction de détection du média via les feuilles de styles (CSS), cela permet au designer qui a développé un design flexible de rapidement prévoir des adaptations de mise en page en fonction du média détecté. Plus besoin donc d’ajouter des détection en PHP d’un iPhone, BlackBerry, iPad mais l’attribut "media" et son sous-attribut "max-device-width" (la largeur maximum du navigateur) permettent rapidement d’ajouter des styles complémentaires de mise en page en restant dans la feuille de style.
Le critère de design flexible n’est pas indispensable mais facilite très fort les adaptations de mise en page en fonction des tailles de navigateurs détectés. Sur ce critère j’ai d’ailleurs appliqué une détection pour le site et blog d’Exibit qui s’adapte pour la lecture sur Smartphone et iPad.
En conclusion...
La bonne nouvelle pour les responsables de site web est que cette méthode facilite grandement les adaptations de leur site en fonction de cette évolution d’internet. Le design fluide pur jus reste néanmoins contraignant et difficile à réaliser pour les designers, il semble donc que nous continuerons à voir différents coutants dans les années à venir et difficile de savoir à ce stade si la voie "flexible" va réussir à s’imposer.
Quelques exemples :
- Un design 100% flexible, images compris
- Le blog de Hicksdesign prévoit pas moins de 7 adaptations du design en fonction de la taille du navigateur
Ajouter un commentaire
Flickr
le Blog
