De 2000 à 2016 de nombreux évènements ont bousculé notre façon de voir et de concevoir le web. Récap.
Les contraintes de base…
Dans les années 2000, sur les forums de graphismes français, il y avait une créativité bouillonnante. C’était l’époque des sites personnels en PHP, des interfaces style Aqua de chez Apple et des web designs faits-main. L’époque de Windows XP et de Winamp.
Il y avait donc cette exploration graphique, la recherche des effets visuels, mais en même temps une volonté de bien faire les choses, des sites “pixel-perfect”, alignés, solides, fixes. On se basait sur 780 pixels de large pour nos webdesigns. On créait des icônes à 256 x 256 px. On perdait parfois une heure à retravailler l’interface pour qu’elle soit identique sur Mozilla et sur IE. Parce que le CSS de l’époque était souvent interprété différemment selon le navigateur … Mais comme des Mac Gyver numériques on bidouillait, on hackait, on fixait, on essayait des choses et au final, on obtenait ce rendu visuel identique tant mérité.
Pixel synonyme de précision
Le pixel-perfect était donc le garant non seulement de la qualité technique (le site est bien intégré puisqu’il n’a aucun bug visuel) mais aussi et surtout de la qualité de l’expérience globale (le site est identique sur mon ordinateur à la maison ou au bureau). Ces différences importaient tellement qu’il arrivait parfois que le web designer crée une image pour une ombre, un dégradé ou la police d’un titre au lieu d’utiliser du CSS.
Avec le recul, on se rend compte que ces contraintes et exigences sont heureusement dépassées. Avoir un site sans bug visuel est aujourd’hui le minimum attendu par l’utilisateur.
…mais un contexte changeant.
La standardisation de l’internet mondial avec les avancées en CSS3 en 2007, la création/spécialisation des nouveaux métiers du web et le développement de nouvelles solutions (frameworks, CMS) ont bien évidemment aidé à concevoir des sites plus rapidement et plus efficacement. Mais c’était sans compter en 2007 l’arrivée des iPhones qui embarquaient un internet mobile. Pour la première fois depuis la création du web, les interfaces devenaient en même temps beaucoup plus grandes (nouveaux écrans de PC, télévisions) et plus petites (smartphones).
Pour la première fois dans l’histoire du web, les interfaces devenaient en même temps plus grandes et plus petites
Pour résumer, il était devenu impossible de prévoir toutes les tailles d’écran depuis lesquelles nos sites web allaient s’afficher. C’est toute cette problématique du responsive web design (principe explicité en 2011 par Ethan Marcotte) qui a déposé un premier grain de sable dans la mécanique jusque là bien huilée des concepteurs de sites. La largeur fixe en pixels des sites n’était plus.
Les projets web ont du à partir de ce jour mettre de côté les pixels et adopter des unités de mesure relatives (%, em, vh…) et des grilles de mise en page fluide pour essayer de s’afficher au mieux sur l’écran de l’utilisateur.
Un web plus fin et plus beau
Une autre révolution, inattendue elle aussi, allait remettre en question notre façon d’utiliser et de créer le web en 2012.
L’arrivée des écrans Retina chez Apple, et “haute densité de pixels” chez les concurrents amène les utilisateurs à adapter leurs exigences en qualité de l’image. Les pixels existent mais sont invisibles par l’oeil humain ! Les concepteurs du web ne s’en rendent pas encore compte à ce moment là, mais l’ “ancien” web paraît flou, petit et pixellisé. Les utilisateurs vont avoir de nouvelles exigences en terme de finesse de l’image, et il va falloir s’adapter à eux. Rapidement.
Du vectoriel.
C’est justement en 2012 que le vectoriel arrive massivement dans nos navigateurs avec le SVG. Un format léger, facile à générer et à modifier. Et surtout adapté aux écrans fins du mobile. Pour toutes ces raisons, les icônes en pixels sur nos sites internet disparaissent progressivement au profit d’images vectorielles ou de polices d’icônes.
Des images en haute définition.
Résolution HD (2012), écrans plus grands, fibre optique (2011), 4G (2012), Ultra HD 4K (2015), vidéos 360° (2016) . Bref, tous les ingrédients sont réunis pour que les concepteurs de sites puissent enfin fournir des photos et vidéos grandes, détaillées et donc immersives.
Au final peu importe : la photo que vous mettez sur votre site doit être suffisamment large pour pouvoir s’adapter automatiquement à la taille d’écran physique et à la résolution de l’utilisateur. La taille en pixel des images compte peu : les médias deviennent fluides.
Nos outils sont prêts.
Le développement d’applis
Les unités de pixels n’existent pas dans les applis Android. Google préconise l’utilisation des dp et des sp lors des développements, depuis… Android 1.6 (2009).
iOS n’utilise pas non plus des pixels mais des points. Et un point sur cette plateforme vaut 1/163 pouce. C’est donc une unité abstraite aussi, indépendante de la densité de pixels de l’appareil.
Le pixel est donc absent de la conception d’applications mobiles. Point.
Les frameworks web
Twitter bootstrap existe depuis 2010. Lui et bien d’autres ont permis d’accélérer la construction des projets web. Même en entreprise, il m’est arrivé plusieurs fois de travailler avec des équipes qui l’incorporaient dans leur projet. En utilisant notamment les grilles de mise en page. Là encore, plus de pixels dans la construction des pages, mais des colonnes et des pourcentages.
Les logiciels de conception
Pour réaliser nos interfaces flexibles pour le web et le mobile, indépendantes des densités de pixels, rien de mieux qu’un logiciel vectoriel comme Illustrator ou Sketch.
Illustrator existe depuis 1987, Sketch depuis 2008. En parler mériterait un article à part, ils ne sont pas parfaits mais l’important à retenir c’est qu’ils sont rapides et adaptés pour créer des interfaces web ou mobile. Je ne vais pas vous faire la liste des avantages d’Illustrator. Ni pour Sketch. Mais vous comprenez l’idée.
Donc tout va bien en 2016 ?
— Ben Non.
Pourquoi écrire cet article si en 2016 les solutions techniques existent, que les problématiques sont identifiées depuis 4 ans et que les outils de conception existent et sont de plus en plus performants ?
Parce que le pixel n’est pas encore enterré.
De nombreux clients avec qui je travaille et de nombreux designers d’interfaces que je côtoie ont encore en 2016 des réflexes pixel-first.
Le web a changé plus vite que notre façon de le construire.
Le pixel appartient au passé. Dites-vous juste que le temps passé à vous occuper des pixels est du temps en moins à résoudre les vrais problèmes de votre utilisateur.
Êtes-vous êtes pixel-first ?
C’est assez simple à détecter :
- Votre première question en créant un nouveau document est : quelle taille en pixels pour ma zone de travail ?
- Vous comparez la maquette du designer avec la page développée. Au pixel-près.
- Vous trouvez que la marge autour de l’icône est un poil de pixel trop grande.
- Vous trouvez que la marge autour de l’icône est maintenant un poil de pixel trop petite (peut-être êtes-vous perfectionniste ?)
- Vous utilisez Photoshop pour vos interfaces web ou mobile.
- Vous créez un PSD retina et un PSD non retina.
- Vous analysez vos interfaces mobiles depuis un écran d’ordinateur.
- Vous revendiquez vous-même être “pixel-perfect”
- Et que, de toute façon vous avez toujours fonctionné comme ça, et que c’est pas aujourd’hui que vous allez tout changer (peut-être avez-vous peur du changement ?)
Bilan
Pas de panique. Il y a sûrement dans cet article et ailleurs des débuts de réflexion, des pistes quant à l’avenir du web design et des interfaces.
Réalité augmentée, réalité virtuelle, bots, voitures, wearables ? Personne ne saurait dire exactement à quoi ressemblera le web dans 5 ans. On l’a vu ici, trop de choses changent.
Mais une chose est sûre en tout cas : en 2016 le pixel est mort et ça serait bien qu’on l’enterre enfin.
