A propos de l'auteur

Frederick O’Brien est un journaliste indépendant qui se conforme à la plupart des stéréotypes britanniques. Ses intérêts incluent la littérature américaine, le graphisme, le durable…
Plus à propos
Frédéric

Les appareils pliables ont amené avec eux parler d'un «Web pliable» et l'idée que les conventions du Web de longue date pourraient être sur le point d'être remaniées sérieusement. Est-ce tout un battage médiatique, ou est-il temps de devenir flexible?

Après des années de discussions, d'expérimentation et de ventes de smartphones en plateau, les appareils pliables arrivent enfin sur le marché. Samsung, Huawei et Motorola ont tous publié des téléphones avec des écrans pliables, et bricoler dans les coulisses d'Apple n'est pas loin derrière. Le «Web pliable» arrive.

Ses appareils prennent diverses formes, des ordinateurs portables aux téléphones, en passant par les hybrides à double écran dernier cri. Il n'y a pas de définition fourre-tout pour cette nouvelle classe de gadgets, mais la plupart correspondent à l'une des deux catégories. Les «pliables» sont des appareils dans lesquels l'écran se plie littéralement, tandis que sur les «doubles écrans», les écrans sont séparés mais peuvent être utilisés comme un seul. En ce qui concerne la conception Web, les deux types respecteront probablement des règles similaires. Si la technologie décollait de manière importante, la conception Web pourrait envisager son plus grand remaniement depuis bien plus d'une décennie.

Informations Google Trends sur les "téléphones pliables" qui ont grimpé en flèche fin 2018
Les recherches de «téléphones pliables» ont explosé fin 2018. (Source des données: Google Trends) (Grand aperçu)

Tout cela semble très excitant, mais qu'est-ce que cela signifie réellement? Le «Web pliable» entraînera de nouveaux défis, de nouvelles opportunités et, selon toute vraisemblance, une nouvelle syntaxe. Le Web pourrait connaître son plus grand remaniement depuis le smartphone. Les utilisateurs et les codeurs se sont habitués au terrain de jeu: ordinateur de bureau et mobile avec une pincée de tablettes. Plus maintenant. Si vous pensiez connaître le responsive design avant de ne rien avoir encore vu.

Lectures complémentaires

Nouvelles normes Web, nouvelles expériences et nouveaux problèmes

La technologie des écrans flexibles a fait l'objet de recherches depuis les années 1970 mais n'a été développée sérieusement que depuis le début du millénaire. Ce n'est qu'au cours des deux dernières années que les appareils grand public ont commencé à entrer sur le marché – dans toutes les formes et tailles.

Certains, comme le Galaxy Z Flip, imitent un flip-phone à l'ancienne. D'autres, comme le Huawei Mate X, ont le ou les écrans enroulés autour de l'extérieur du téléphone. Beaucoup plus sont construits comme des livres électroniques, avec deux écrans intérieurs devenant un lorsque l'appareil est complètement ouvert. Souvent, il y a un écran séparé plus petit à l'extérieur pour que les utilisateurs n'aient pas à le déplier lorsqu'ils l'utilisent.

Une photo du Huawei Mate X et du Samsung Galaxy Z Flip
Le Huawei Mate X et le Samsung Galaxy Z Flip. (Remarque: les ombres dramatiques ne sont pas incluses avec la plupart des téléphones pliables.) (Grand aperçu)

Les hoquets matériels sont bien documentés et sont en cours d'élaboration. Les appareils pliables arrivent. Ce n'est pas l'objectif. Ici, l'accent est mis sur l'impact de la technologie sur les développeurs Web, les concepteurs UX et toute autre personne dont l'activité consiste à offrir des expériences de navigation de qualité.

Mises à jour CSS et JavaScript

Un nouveau matériel signifie un logiciel mis à jour. Microsoft a été particulièrement sensible à l'arrivée de la technologie pliable, en partie parce que l'entreprise travaille sur ses propres appareils pliables. Trois développeurs Microsoft – Bogdan Brinza, Daniel Libby et Zouhir Chahoud – ont publié un explicateur dans lequel ils proposent une nouvelle API JavaScript et une requête multimédia CSS. Chahoud a développé cela avec un article sur GitHub le 3 février.

Ils mettent en évidence les problèmes potentiels avec les appareils pliables, notamment:

  • Variété de matériel sur le marché pliable.
    Certains appareils sont transparents tandis que d'autres ne le sont pas, et leurs formes varient énormément. Le Windows Surface Duo et le Galaxy Fold sont tous deux en forme de livres – un avec une couture et un sans. Le Motorola Razr sans couture rappelle les anciens téléphones à clapet, avec les deux «moitiés» de l'écran plus proches des carrés que des rectangles. Considérez également que ce n'est sûrement qu'une question de temps avant qu'un pliable en trois parties n'apparaisse sur la scène. Avec autant de variété dans la forme et la taille des pliables, il est important de cibler une _classe _de périphérique plutôt qu'un matériel spécifique.
  • Fonctionnalité «Zone de pliage».
    Le miracle des écrans pliables a nécessité quelques sacrifices. Un problème majeur est la gêne potentielle du ou des écrans près du pli. Le contenu positionné sur ou à travers la couture d'un écran partiellement plié peut être difficile à visualiser ou à interagir avec. Les livres et les magazines ont tendance à éviter d'imprimer du contenu dans leurs plis; il en sera probablement de même pour les écrans pliables. De plus, certains tests d'utilisabilité ont suggéré que la réactivité de l'écran tactile n'est pas aussi fiable sur les pliables.

Pour tenter de résoudre ces problèmes et d'autres, Brinza, Libby et Chahoud ont proposé une fonctionnalité multimédia CSS s'étendant, qui peut tester si la fenêtre du navigateur est affichée sur deux écrans ou sur un pli. Si tel est le cas, le contenu peut alors être positionné par rapport au pli ou à la couture. Cela joue dans l'évolution continue de la conception réactive, qui doit de plus en plus tenir compte de la taille de l'écran.

En conséquence, des variables d'environnement ont également été proposées, fournissant un moyen de reconnaître la taille et les orientations des segments. De tels ajouts permettraient effectivement aux sites Web de se façonner en trois dimensions. La même page peut se comporter différemment lorsqu'elle est plate que lorsqu'elle est en forme de L.

Les suggestions CSS sont accompagnées d'une nouvelle énumération des segments de fenêtre pour l'API JavaScript, qui permettrait aux sites de se comporter plus dynamiquement. Par exemple, ce qui est affiché peut changer selon que l'écran est courbé ou non, ou se comporter différemment selon que les utilisateurs touchent la moitié de l'écran ou l'autre. La nouvelle API JavaScript améliore également les fonctionnalités sur les cibles de modèle d'objet non-document où CSS n'est pas disponible, comme Canvas2d ou WebGL.

Les sites Web pourraient se façonner autour de la couture d'un appareil. Maquettes de l'explicateur de Bogdan Brinza, Daniel Libby et Zouhir Chahoud. (Grand aperçu)

Ces propositions ne représentent pas plus de deux écrans ou segments, mais pour l'instant la technologie semble aller dans cette direction. Si ces propositions étaient mises en œuvre, elles ajouteraient une nouvelle couche à la conception Web réactive. Le temps pourrait bientôt arriver où nous ne pouvons plus supposer que les sites ne doivent fonctionner que dans des espaces rectangulaires uniques. De nouvelles spécifications CSS et JavaScript comme celles proposées par Brinza, Libby et Chahoud donneraient aux développeurs un moyen de faire quelque chose.

Chahoud n'attend pas beaucoup de problèmes de dentition:

«Nous considérons les appareils à double écran et pliables comme une autre cible de conception Web réactive, ce que les développeurs Web font depuis des années avec des CSS spécifiques aux téléphones, ordinateurs de bureau, tablettes, etc.»

Si les nouvelles primitives Web restent en avance sur la technologie, les développeurs pourront se concentrer sur l'amélioration des fonctionnalités de leurs sites.

Une nouvelle expérience de pli et de double écran

Qu'est-ce que cette fonctionnalité améliorée implique? L'un des principaux points à retenir est qu'il y a un nouveau repli en ville. Alors que "au-dessus du pli" existe depuis aussi longtemps qu'il y a du défilement (un retour à la conception des journaux), les développeurs devront bientôt faire face aux plis au milieu de la page.

À tout le moins, cela signifiera probablement l'ajustement du contenu afin que les utilisateurs n'aient pas à interagir avec quoi que ce soit sur le pli. Si les commandes tactiles sont limitées au niveau du pli ou si l'appareil est partiellement plié, il est judicieux de repositionner certains éléments de sorte qu'ils reposent sur une moitié de l'écran ou sur l'autre.

Les pliables offrent de nouvelles opportunités pour les conceptions mobiles à double écran. Maquette de l'explicateur de Bogdan Brinza, Daniel Libby et Zouhir Chahoud. (Grand aperçu)

"Je pense qu'il y a beaucoup d'opportunités non seulement dans l'augmentation de l'immobilier mais aussi dans l'immobilier" défini "", explique Chahoud. «Le pli (que l'appareil soit transparent ou doté d'une couture) divise l'écran en deux régions d'affichage bien définies et les créateurs peuvent organiser un contenu spécifique par région.»

À l'extrémité la plus ambitieuse du spectre, les appareils pliables signifient effectivement une mini configuration à double écran, dans laquelle les deux moitiés de l'écran peuvent être utilisées pour différentes choses. En effet, lorsque vous réduisez le Web pliable, cela ressemble étrangement à des appareils comme la Nintendo DS – un seul appareil avec deux écrans fonctionnant ensemble. La technologie a considérablement progressé depuis lors, au point où les deux écrans peuvent être connectés de manière transparente, mais l'expérience de base est très similaire.

Nintendo DS
J'ai vu l'avenir et ça ressemble un peu à 2004. (Grand aperçu)

En termes de conception Web, cela permet de présenter le contenu de manière plus similaire à une application. Chahoud déclare: «Je crois que les conceptions ciblant les appareils à double écran ou pliables seront une grille à deux colonnes à la base, représentant les régions d'affichage logique ou physique disponibles.» La documentation des développeurs Samsung va encore plus loin, suggérant que l’écran secondaire peut lui-même être divisé en deux, offrant trois «écrans» distincts.

Maquettes de développeurs Samsung de plusieurs fenêtres sur des appareils pliables
Pourquoi s'arrêter sur deux écrans? La toile pliable pourrait être un monde à fenêtres multiples. Maquette de la documentation des développeurs Samsung pour le Galaxy Fold. (Grand aperçu)

Sur un site de cuisine, cela peut signifier avoir la recette sur un écran et les ingrédients sur l'autre. Sur un site Web d'actualités, cela peut signifier que l'article est copié sur un écran et la lecture associée sur l'autre. Cela dépend, comme toujours, du contenu. Dans sa forme la plus ambitieuse, le Web pliable pourrait fonctionner comme deux écrans mobiles.

Rangement

Pour beaucoup, l'essor des appareils pliables ne changera pas la donne autant qu'une modeste amélioration de l'expérience utilisateur. Steve Krug, auteur de Ne me faites pas réfléchir! Une approche de bon sens pour la convivialité du Web, voit le Web pliable comme une évolution plutôt qu'une révolution. «Les téléphones pliables m'ont toujours semblé être la prochaine étape raisonnable», dit-il. Non pas à cause des capacités de double écran, mais parce qu'elles rendent les expériences sur tablette plus portables, répondant au désir de «une tablette que je peux porter dans ma poche».

Phablet, tout en étant l'un des meilleurs prétendants au pire portemanteau de tous les temps (il a perdu de justesse face à «guesstimate» aux Championnats du monde 2019), pourrait bien trouver un nouveau domicile. Plutôt que de signifier un téléphone si gros qu'il s'agit essentiellement d'une tablette, une phablette sera l'une ou l'autre selon que l'appareil est ouvert, fermé ou quelque part entre les deux.

"Il existe des classes d'applications qui bénéficieraient d'un écran partagé ou de différents rapports d'aspect, mais pour la plupart, ces appareils ne vous apporteront rien de nouveau si vous voulez juste un écran plus grand pour regarder des vidéos."

– Steve Krug

Dans de nombreux cas, le «Web pliable» signifie simplement une meilleure optimisation des sites pour les écrans de la taille d'une tablette. Actuellement, les tablettes ne détiennent qu'environ 3% de parts de marché dans le monde (contre 52% pour les mobiles et 45% pour les ordinateurs de bureau). Si les appareils pliables font une brèche, ils seront beaucoup plus difficiles à ignorer.

Lorsque des gens comme Apple lancent un appareil pliable, il est sûr de dire qu'il se vendra comme des petits pains. Alors que de plus en plus de technologies pliables arrivent sur le marché, la conception Web devra augmenter sa réactivité juste pour maintenir les fonctionnalités existantes. À tout le moins, il y aura du rangement à faire.

Lectures complémentaires

Être flexible

Alors, que signifie la toile pliable? Bref, c'est à vous de décider. Cette tendance marque probablement la prochaine étape de la conception réactive. Avec l'aide de nouvelles fonctionnalités CSS et JavaScript, les développeurs seront en mesure de créer des expériences multi-écrans là où il y avait auparavant des rectangles uniques et ininterrompus de bureau, mobile et tablette.

Il reste à voir jusqu'où ces expériences peuvent aller. Il est prudent de supposer que le "Web pliable" n'arrivera pas prêt à l'emploi. Il n'y a aucune garantie que les appareils décolleront comme l'ont fait les smartphones, surtout que la plupart d'entre eux coûtent encore plus de 2000 dollars. Il y aura une dentition du côté matériel, une période de turbulence après laquelle la technologie s'installera probablement dans des styles fiables.

C'est le rôle des développeurs et des concepteurs de pousser ces plateformes aussi loin que possible. Le Web pliable est l'occasion de donner aux sites Web une fluidité et des fonctionnalités qui n'étaient pas possibles auparavant. Cela signifie rendre les sites Web plus réactifs que jamais.

Il représente également une occasion unique d'explorer un territoire inexploré. Bien qu'il ne s'agisse pas d'un changement sismique, le Web pliable est probablement le plus grand changement au statu quo depuis l'iPhone. Ce que cela signifie en ce qui concerne la syntaxe est très à gagner. Les standards du Web ne sont pas concoctés dans les arrière-salles remplies de fumée. Il est maintenant temps de vous impliquer, de faire des commentaires, de faire des suggestions et d'expérimenter.

Voici quelques ressources pour vous impliquer.

La conception axée sur le mobile est sur le point de devenir plus compliquée, mais aussi plus excitante. Le Web pliable pourrait être la première fois que les appareils portables se sentent expansifs plutôt que restrictifs. Pour certains sites Web, cela signifiera des ajustements, tandis que pour d'autres, une refonte en gros. L'étendue de ce qui est possible dépend de l'innovation des développeurs.

Alors, qu'est-ce que vous pense que c'est possible?

Smashing Editorial
(rail)