Que signifie réellement un site Web pliable?

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 bricolant dans les coulisses comme 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 nouveaux hybrides à double écran. 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écolle de manière importante, la conception Web pourrait envisager son plus grand bouleversement depuis bien plus d'une décennie.

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 que vous connaissiez la conception réactive avant vous n'avez encore rien vu.

Lectures complémentaires

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

La technologie d'écran flexible a été étudiée depuis les années 1970 mais n'a été développé 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 téléphone à clapet à 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.

Les hoquets matériels sont bien documentés et sont en cours de traitement. 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 la société 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 GitHub le 3 février .

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

• Variété de matériel sur le marché pliable.
  Certains appareils sont transparents tout en 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 tant de variété dans la forme et la taille des pliables, il est important de cibler une _classe _de périphérique plutôt que du 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'était 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 sur , 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 en cours 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, permettant 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 autres que le modèle d'objet de document où CSS n'est pas disponible, comme Canvas2d ou WebGL.

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 ne s'attend pas à de nombreux problèmes de démarrage:

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

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

Une nouvelle expérience de pliage 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 défilement ( un retour à la conception des journaux ), les développeurs devront bientôt faire face à des plis au milieu de la page.

au moins, cela signifiera probablement ajuster le 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 logique de repositionner certains éléments de manière à ce qu'ils reposent sur une moitié de l'écran ou sur l'autre.

"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 "", dit 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."

C'est vraiment pratique.
Passez-le en mode selfie, pliez-le à moitié et il (évidemment) se tient droit pour votre appel. pic.twitter.com/5reTQlpkXp

– Adrian Weckler (@adrianweckler) 19 février 2020

À l'extrémité la plus ambitieuse du spectre, les appareils pliables signifient effectivement un mini double – configuration de l'écran, dans laquelle les deux moitiés de l'affichage 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.

En termes de conception Web, cela permet de présenter le contenu d'une 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 de Samsung Developer va encore plus loin, suggérant que l'affichage secondaire peut lui-même être divisé en deux, fournissant trois «écrans» distincts en tout.

Sur un site Web de cuisine, cela pourrait 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. À son niveau le plus ambitieux, le Web pliable pourrait fonctionner comme deux écrans mobiles.

Ranger

Pour beaucoup, la montée des appareils pliables ne changera pas la donne autant qu'une modeste amélioration de l'expérience utilisateur. Steve Krug auteur de Don't Make Me Think! Une approche de bon sens pour l'utilisabilité 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. 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 un concurrent de haut niveau pour le pire portemanteau de tous les temps (il a perdu de justesse contre '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 est essentiellement 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 des rapports d'aspect différents, 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. À l'heure actuelle les tablettes ne détiennent qu'environ 3% de part 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 dans ce qu'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

Soyez 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. À l'aide de nouvelles fonctionnalités CSS et JavaScript, les développeurs pourront créer des expériences multi-écrans là où il y avait auparavant des rectangles uniques et ininterrompus de bureau, mobile et tablette.

Jusqu'où ces expériences peuvent aller reste à voir . 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 poussée 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 plates-formes 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.

Cela 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. Le moment est venu de s'impliquer, de faire des commentaires, de faire des suggestions et d'expérimenter.

Voici quelques ressources pour s'impliquer.

La conception mobile-first 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, que pensez-vous que est possible?

(ra, il)