DAO of flexibility

Ethan Marcotte

wave-illus start

Bien avant notre ère, le monde du web n’était que chaos,

Il n’y a pas si longtemps à vrai dire, les webmaster concevaient des sites Internet en fonction des quelques devices capables de les utiliser

chaos-illus

En 2010 eut lieu une véritable explosion de mise en circulation de devices de toutes proportions permettant d’afficher un site de façon agréable pour l’utilisateur. Car le responsive design que l’on pratique aujourd’hui n’existait pas encore.

Avant 2010, très peu de devices pouvaient afficher un site de façon correcte. La grande partie des sites qui étaient disponibles pour mobiles étaient conçus pour le format de l’iPhone.

C’était l’un des seuls devices qui arrivait à afficher un site internet correctement. Contrairement à aujourd’hui où tous nos appareils peuvent afficher un site.

Ethan Marcotte dévoile donc sa méthode qui enchante et frustre certains webmaster car le concept de développement est très utile mais il faut mettre à jour de multiples sites de clients qui veulent eux aussi un site responsive.

Jusqu’au jour où Ethan Marcotte, mi-homme, mi-robot vint,

Né aux U.S. Ethan Marcotte a travaillé pour de nombreuse compagnies dans le but d’améliorer le web. Il a écrit plusieurs articles concernant le webdesign fluid qui lui valent sa renommée. C’est aussi lui qui a donné un nom a la pratique de travailler le web comme quelque chose de flexible. Grâce à sa façon de penser il crée une révolution dans le monde du web.

C'est cette révolution que l'on connaît de nos jours sous le nom de responsive design. Grâce à Ethan Marcotte de nombreuse personnes ont changé leur façon de penser et de travailler le web…

Les fondations du web

A l’instar des bâtiments, le web doit pouvoir s’adapter à son utilisation pour une expérience optimale. Le principe de cette adaptation est d’offrir, aux utilisateurs, le plus grand confort. Par exemple, selon le contenu des bâtiments, les fenêtres peuvent être teintées ou non, les murs peuvent aussi s’adapter en fonction du nombre d’utilisateurs. C’est simple, mais important.

Des devices, encore des devices

Parlons du web à présent. Imaginez un monde rempli de devices différents. Un nombre de devices tellement grand qu’adapter un contenu sur tous ceux-ci serait impossible. Vous ne rêvez pas, c’est bien de notre monde dont il s’agit.

Une seul solution, l'adaptation

Continuons et définissons ensemble ce que sont les “Media Queries”. Les Media Queries sont des spécifications de CSS3 qui permettent d'attribuer des propriétés CSS en fonction de conditions particulières (exemple: largeur de l'écran). Ces spécifications sont utiles car elles sont importantes dans la conception du Responsive Design. Ouvrons par exemple un même site sur desktop et sur mobile. Tous deux ont des propriétés CSS adaptées au device, c’est pourquoi la présentation du site sera différente sur ces deux devices.

fleche-illus

Fini les idées fixes

Ensuite, pour bien comprendre ce qu’est le Responsive Design, oublions la notion de largeur en pixels, et parlons plutôt de proportions en pourcentages. La raison principale d’utiliser des rapports de proportions en pourcentages est d’éviter un éventuel problème d’affichage. Le Responsive Design remplace une dimension fixe en pixels par une dimension fluide en pourcentages. En revanche, effectuer une simple proportion ne règle pas tous les problèmes. En effet, comme dit précédemment, le nombre de devices est énorme et il est physiquement impossible d’adapter un contenu pour tous les devices, c’est pourquoi l’idée de Responsive Design par rapport de proportions et de pourcentages est une révolution.

La solution ?

Pour finir, le confort utilisateur est, sans l’ombre d’un doute, l’une des notions les plus importantes à prendre en compte lors de la conception d’un site web. Il est gênant de lire un même contenu sur desktop et sur mobile. L’intention des utilisateurs n’est pas la même en fonction des devices, il faut donc repenser le contenu lors de l’adaptation du site afin que les utilisateurs puissent avoir une expérience agréable. Une variation de contenu est donc nécessaire pour qu’il puisse s’adapter à son utilisation.

Et inspirer une nouvelle génération de designers

Toutes ces améliorations ont permis aux sites de s'adapter à tous les supports qui se sont considérablement multipliés depuis. Les sites sont devenus multi-plateformes, et donc responsive. Aujourd’hui, les webdesigner suivent toujours les règles mises en place par Ethan Marcotte et les complètent afin de permettre aux contenus des devices actuels de s'adapter et d'anticiper les futures technologies. Même si ces devices se multiplieront et évolueront encore, on peut supposer que les recommandations d'Ethan Marcotte ne disparaîtront pas de si tôt. Pour terminer, il ne faut pas généraliser le tout en ne travaillant que sur les proportions et les spécificités du code sans prendre en compte le contenu. Il faut avant tout offrir à l’utilisateur une expérience plus confortable et agréable et le responsive design n’est qu’un moyen parmi d’autres pour y parvenir.