Quatre tendances en matière de conception front-end depuis la Smashing Conference à Oxford

Lees in het Nederlands - Read in English

Billet rédigé par Michiel Van de Veire, développeur web chez Intelligent (le holding dont Combell fait partie)

En tant que développeur web, je trouve qu’il est nécessaire de rester au courant des toutes dernières tendances et techniques. Des initiatives telles que Smashing Magazine, Smashing Books et les Smashing Conferences sont à mon sens une source d’inspiration idéale. Elles sont en effet entièrement consacrées à la conception web et au développement front-end.

Lorsque j’ai vu qu’une Smashing Conference allait être organisée à Oxford, j’ai donc été très enthousiaste à l’idée de m’y rendre. Au sein de Combell, la formation occupe une place très importante, et l’entreprise s’est donc immédiatement chargée de me réserver mes tickets pour le Royaume-Uni. Youpi !

Vitaly Friedman et la Smashing team se sont chargés de l’organisation de deux journées de conférences, présentées par d’éminents conférenciers venus des quatre coins du monde, sur des thèmes tels que les bibliothèques de patrons, SVG, Flexbox, les performances, HTTP/2, et bien d’autres choses encore… Bref, tout ce que j’adore !

Je tenais à partager ces quatre tendances, qui étaient très marquées à Oxford.

1. La conception adaptative reste importante

L’attention accordée à la conception adaptative (qui s’adapte au support utilisé) reste d’actualité, comme j’ai pu le constater à Oxford. Lorsqu’il est question de conception adaptative, on pense immédiatement aux requêtes médias, qui servent de points de rupture pour appliquer CSS ou non, mais Vasilis van Gemert nous a montré que l’on peut également s’en passer. L’utilisation ingénieuse de nombres à virgules, de colonnes CSS, de viewport units et de flexbox (voir 2^ème tendance) est en effet souvent une bien meilleure solution.

Vu que nous sommes en train de rendre le site web de Combell adaptatif, ces conseils tombaient clairement à point nommé. Vitaly Friedman nous a lui aussi appris quelque astuces. Son exposé, très justement intitulé ‘Dirty front-end tricks’, nous a permis de découvrir des tas de solutions créatives.

« Beware: you will not be able to unlearn what you’ll learn in the session! » – Vitaly Friedman

2. Flexbox

Le succès grandissant de Flexbox s’inscrit dans la tendance précédente. Il s’agit d’un module de CSS. Flexbox permet de concevoir, avec une grande efficacité, des mises en page qui s’adaptent parfaitement aux contraintes d’affichage. Christopher Wright, développeur front-end chez Campaign Monitor, nous a montré les nombreuses possibilités qu’offre Flexbox dans son exposé intitulé « Taking layout to the next level ».

“As web designers, we’re not designing around content, but rather we’re designing places for content to flow into.” – Mark Boulton

Flexbox entraîne de très nombreuses nouvelles possibilités, auxquelles je compte bien m’intéresser de plus près. Le maître-mot qui ressortait de cet exposé était très clair : expérimentez ! Fail early, learn faster…

3. HTTP/2

La conférence d’Oxford s’est également intéressée à HTTP/2, la nouvelle version du protocole http, qui assure la communication entre un navigateur web et un serveur.

Patrick Hamann, senior engineer chez Financial Times, nous a préparés à l’utilisation de HTTP/2. L’actuel protocole HTTP1.1, qui représente la norme depuis 1999 (et qui n’a pas changé depuis) a en effet besoin d’une mise à niveau. Avec HTTP1.1, on ne peut en effet charger qu’une quantité limitée de données simultanément (p. ex. six images à la fois).

Le grand avantage de HTTP/2 est le multiplexage. Cette technique permet en effet de grouper plusieurs requêtes http depuis le navigateur avant de les envoyer au serveur web. Ainsi, le nombre de connexions actives est nettement réduit, ce qui se traduit par une transmission plus rapide de toutes les données. Les pages se chargeront donc plus rapidement, ce qui ravira à coup sûr les utilisateurs finaux.

“HTTP/2 produces the biggest performance gains on mobile, because it remedies high latency.” – Patrick Hamann

Pour ce qui est de HTTP/2, notre recherche en est déjà à un stade très avancé. En mode de preuve de concept, certains de nos serveurs sont même déjà capables de prendre en charge HTTP/2. Nous prévoyons une intégration complète pour la plupart des clients d’hébergement sur notre grappe d’hébergement plus tard cette année.

Le multiplexage prévu par HTTP/2 entraînera, également dans l’environnement de Combell, une diminution drastique du nombre de connexions simultanées sur notre environnement. De plus, grâce au multiplexage, les navigateurs pourront charger du contenu plus rapidement. Et grâce au principe du server push, le client sera lui-même capable de précharger des ressources et de déterminer la priorité de ces ressources.

4. Living Design Systems

Les Design Systems représentent quant à eux une nouvelle tendance de conception. Il s’agit d’une approche qui garantit une conception cohérente et multiplateformes. Jina Bolton, qui travaille pour Salesforce UX, a présenté un exposé à ce sujet lors de la Smashing Conference.

“While a company is growing fast, there is nothing more important than constant communication and complete alignment.” – Mark Benioff

Il est important, surtout dans le cadre de projets d’envergure ou pour des grandes marques, que le style et les éléments de style restent uniformes. D’habitude, pour cela, on créait un guide de style, mais celui-ci n’était bien souvent pratiquement pas adapté et devenait finalement une sorte de guide de style « zombie ».

Un Design System est par contre un produit vivant, qui permet au code d’un tel guide de style de devenir dynamique. Sur cette base, tous les membres d’une équipe créent en fin de compte au sein d’une même conception. Le Lightning Design System est un exemple qui illustre parfaitement cette approche.

Bref, la Smashing Conference a été très instructive. Le contenu des exposés était parfaitement équilibré : des techniques front-end intéressantes et très utiles, et énormément de connaissances en matière de conception. Et le fait que tout cela s’est déroulé dans le magnifique cadre d’Oxford, qui est célèbre pour son Université et ses Collèges, a bien sûr rendu cette expérience encore plus unique !

Un grand merci à Smashing Magazine et Combell pour cette expérience et la formation.