Le GIF animé montre ce qui se passe sur Invidious lorsque je réduis la fenêtre du navigateur de quelques pixels.
La mise en page des éléments sur la page change complètement: la mise en page originale à trois colonnes se transforme soudainement en une mise en page à une colonne, et la première chose est le contenu de cette petite colonne qui était située sur le bord gauche et contenait des informations totalement sans importance.
Je suis sûr que je ne suis pas le seul à rencontrer souvent cela. Personnellement, j'aime bien quand les fenêtres de mon navigateur sont suffisamment étroites, mais au cours des dix dernières années, les pages Web ont commencé à réagir à cette préférence comme si je voulais une version mobile et fonctionnelle de la page. Il y a un gros problème ici, et pas seulement un.
Éclairage spatial au gaz
L'un des concepts fondamentaux derrière la conception du Macintosh, la première interface utilisateur graphique véritablement centrée sur le client, est l'idée d' organiser spatialement les interactions homme-machine lorsque vous travaillez avec un ordinateur. L'utilisateur a été soulagé de la nécessité de mémoriser les commandes de texte afin d'organiser les fichiers sur le disque, et a fourni la possibilité de mélanger les fichiers de manière à ce qu'ils soient visuels et - le voici, la perspicacité - de se souvenir de leur position, comme si dans espace. L'utilisateur peut se rappeler où il a mis le dossier, et il est si important que le fichier est appelé . C'est ainsi que nous nous souvenons où nous avons mis le portefeuille, les clés ou le document important.
Cette idée d'orientation spatiale est fondamentale pour la conception de toute interface utilisateur et de la conception Web en particulier. Lorsqu'un utilisateur visite votre site encore et encore, il découvre progressivement comment tout fonctionne ici. Plus vous consacrez de temps à la conception de votre site, plus les utilisateurs peuvent le gérer efficacement et plus ils aimeront votre site. Vous êtes-vous déjà demandé pourquoi il y a tant de scandales de grande envergure sur le Web liés à la refonte? Voici votre réponse. Les utilisateurs n'aiment pas que les efforts qu'ils mettent dans la maîtrise du site soient barrés au gré du créateur, que le concepteur s'ennuie simplement avec l'ancien site.
C'est exactement le problème que j'ai avec la conception réactive. La plupart des implémentations de conception réactive sont essentiellement comme la refonte de votre site chaque fois que l'utilisateur redimensionne la fenêtre. L'exemple le plus flagrant de ce type est celui où une barre de menu horizontale se transforme en une barre verticale. Tout ce que l'utilisateur a réussi à retenir visuellement sur l'emplacement des liens sur le panneau vole dans le tuyau! Vous pensiez que cette option était cachée ici? Non, elle est là!
Incohérence intersite
Mais même si les utilisateurs n'aiment pas le design réactif, il est impossible de le contourner. De nombreux exemples de conception dite réactive sont implémentés à l'aide de requêtes multimédias utilisant CSS - essentiellement des instructions conditionnelles qui indiquent au navigateur d'appliquer un ensemble de règles CSS lorsque certaines conditions sont remplies, par exemple, si la largeur de la fenêtre du navigateur dépasse ou non dépasser un nombre spécifié de pixels ... Le nombre exact dans ce cas est choisi par le concepteur Web; en conséquence, deux concepteurs Web différents ne choisissent presque jamais la même largeur.
Je pense que tout le monde conviendra que sur un ordinateur de bureau, nous préférons afficher la plupart des pages Web dans une mise en page pleine largeur. Il existe des exceptions dans lesquelles la version réduite de la page est plus pratique., mais ils sont rares, voire isolés. En règle générale, travailler avec une page Web pleine largeur est beaucoup plus agréable et plus facile.
Afin de ne pas avoir à gérer des versions réduites des pages Web, l'utilisateur doit ajuster lui-même la largeur de la fenêtre du navigateur, en s'assurant que la page tient dans toute la fenêtre. Mais, comme deux concepteurs Web ne spécifieront presque jamais la même largeur dans leurs requêtes multimédias, il est impossible pour un utilisateur de faire correspondre une largeur de fenêtre qui est garantie pour s'adapter à une version complète de n'importe quelle page Web, à moins que l'utilisateur abandonne et soit satisfait. le mode plein écran ou une fenêtre trop large. Cependant, il est important pour l'utilisateur non seulement d'avoir accès aux versions complètes des pages Web, mais aussi de garder de nombreuses fenêtres dans la portée à la fois, et pour cette raison, la largeur d'une fenêtre individuelle doit être limitée.
Il semblerait que l'utilisateur n'ajuste tout simplement pas la taille de la fenêtre s'il atterrit sur une page Web qui nécessite une fenêtre plus large pour être affichée. Après tout, c'est ainsi que l'utilisateur devait agir avant l'avènement du responsive design, lorsqu'il était possible de simplement basculer entre des pages Web d'une largeur fixe donnée. Mais la réalité n'est pas si simple: sur les pages non réactives, il est assez clair si vous devez redimensionner la fenêtre pour l'adapter à la page entière. Et sur une page Web responsive, rien ne dit à l'utilisateur: «hé! La page entière ne rentrera plus dans une fenêtre comme la vôtre maintenant. " Il n'y a pas de barre de défilement ni de découpage de contenu; au mieux (ou, je suppose, au pire) il y a un menu hamburger ou une autre interface bizarre de type "mobile".
Que doit faire l'utilisateur?
Cela laisse penser que l'utilisateur pourrait résoudre ce problème en désactivant la prise en charge des requêtes multimédias dans le navigateur. Si seulement c'était si simple! La racine du problème est que c'est une pratique courante chez les concepteurs Web d'attribuer une conception pleine largeur à une requête multimédia et de servir une version mobile par défaut . En désactivant les requêtes multimédias, nous obtiendrons le résultat exactement opposé sur ces pages.
Il serait plus rationnel de forcer le navigateur à donner la même largeur définissable par l'utilisateur aux feuilles de style et aux scripts sur toutes les pages Web. Ceci est souhaitable, ne serait-ce que pour des raisons de confidentialité.
La solution idéale est de fournir la possibilité d'identifier une requête multimédia (le cas échéant) qui activerait la pleine largeur pour le site, et de l'activer, tout en désactivant toutes les autres requêtes multimédia liées à la sélection de la largeur de la fenêtre. Cela pourrait potentiellement être fait comme une extension de navigateur utilisant JavaScript qui analyse toutes les requêtes multimédias dans la feuille de style, en les supprimant de manière sélective si nécessaire.
Que doit faire un concepteur Web?
J'ai laissé cette section pour la fin car c'est la plus importante. Tout ce qui précède nous amène à une conclusion simple: les concepteurs Web doivent réfléchir longuement à la manière de mettre en œuvre un design réactif .
Certes, à un niveau supérieur, il faut se poser la question, quelle est la signification générale du responsive design. Décidément, cette conception est très utile: les utilisateurs modernes accèdent à Internet à partir d'une grande variété d'appareils avec différentes largeurs d'écran, et ce problème est résolu à l'aide d'une conception réactive. Mais peut-être que le problème de la conception adaptative est la sur-généralisation d'une telle solution. Il est conçu pour prendre en charge toutes les tailles d'écran imaginables, mais les écrans sont-ils vraiment si diversifiés? Au contraire, ils sont normalisés et subdivisés en quelques catégories facilement identifiables. Comme ceux-ci:
- PC de bureau / ordinateur portable
- La tablette
- Téléphone intelligent
Ne serait-il pas beaucoup plus pratique pour l'utilisateur que la conception du site soit faite séparément pour chacune de ces tailles d'écran? Ensuite, l'utilisateur pourrait utilement passer du temps à apprendre l'interface du site, car elle aurait l'air cohérente sur tous les appareils du même type.
Je n'arrive pas à croire que je dis cela, mais il vaudrait peut-être mieux revenir à la détection de l'agent utilisateur, sous une forme ou une autre:
let mobile = navigator.userAgent.match(/Mobi/); let ipad = navigator.userAgent.match(/iPad/); let android = navigator.userAgent.match(/Android/); if (mobile && !ipad) this is a phone else if (ipad || android) this is a tablet
Le code ci-dessus est peut-être incomplet, mais je pense qu'il couvre de nombreuses choses de base. Assurez-vous simplement de choisir par défaut la version PC du site, car tous les navigateurs de PC ne prennent pas en charge de manière uniforme JavaScript, mais tous les smartphones et tablettes le font.
Nos serveurs peuvent être utilisés pour le développement et l'hébergement de sites Web.
Inscrivez-vous en utilisant le lien ci-dessus ou en cliquant sur la bannière et bénéficiez d'une remise de 10% pour le premier mois de location d'un serveur de toute configuration!
