Conception Web réactive vs reniflement d'agent utilisateur

La mediafonction de requête CSS3 a conduit à de nombreuses possibilités intéressantes en termes de développement de sites Web qui s'adaptent à de nombreuses tailles d'écran et appareils différents.

Cependant, dans la pratique, je commence à avoir le sentiment que la mediafonction de requête CSS3 et l'ensemble du mouvement "Responsive Web Design" peuvent ne pas être à la hauteur de sa promesse.

Le problème que je vois, c'est qu'en fin de compte, les développeurs Web se soucient principalement de savoir si leurs utilisateurs consultent le contenu via un ordinateur de bureau, une tablette ou un appareil mobile. Mais CSS3 ne fournit qu'un moyen de détecter la résolution d'écran . En théorie, la détection de la résolution d'écran semble être un excellent moyen de s'adapter à différents appareils. Mais en pratique ...

Supposons que nous ayons une fonction Javascript simple qui ne fasse que sortir la largeur de l'écran:

function foo()
{
   alert(screen.width);
}

Sur mon Blackberry Touch, cela produit:

Sur mon Samsung Galaxy, cela produit:

Donc ... euh, à ce stade, la résolution des téléphones intelligents traditionnels se rapproche assez des résolutions de niveau bureau. La capacité de détecter si un utilisateur consulte votre site Web via un smartphone, une tablette ou un ordinateur de bureau semble être de plus en plus difficile si vous vous contentez de la résolution d'écran.

Cela me fait remettre en question toute la sagesse derrière tout le mouvement CSS3 "Responsive Web Design" basé sur les requêtes des médias. Il semble presque que la mediafonction de requête soit mieux adaptée à l'adaptation à une fenêtre de redimensionnement du navigateur sur un écran de bureau, plutôt qu'à divers appareils mobiles.

Une autre technique possible pour détecter les appareils mobiles ou tablettes consiste à utiliser la détection des fonctionnalités, en vérifiant si l' ontouchstartévénement est pris en charge. Mais même cela devient de moins en moins fiable car de nombreux écrans de bureau commencent à prendre en charge le toucher.

Question: Donc ... en tant que développeur Web, si je ne peux pas compter sur RWD ou la détection de fonctionnalités, le reniflement d'agent utilisateur (aussi notoirement peu fiable que toujours) est-il vraiment la meilleure option pour détecter les appareils mobiles?

web-development javascript css

— Channel72
source

Si l'objectif du Responsive Web Design est (comme le prétend Wikipédia ) "une lecture et une navigation faciles avec un minimum de redimensionnement, de panoramique et de défilement", alors pourquoi vous souciez-vous qu'il s'agisse d'un ordinateur de bureau ou d'un mobile? Ce qui compte, c'est la résolution et la taille de l'écran de l'appareil, et non le type d'appareil. Non?

— ruakh

Je suppose que ce que je dis, c'est que le lien entre la "résolution d'écran" et la taille réelle de l'écran (par exemple, centimètres / pouces de largeur d'écran) devient de plus en plus transitoire.

— Channel72

Je pensais que vous étiez censé faire quelque chose avec la requête de média sur la largeur de l' appareil, car la largeur / résolution devient de plus en plus imprécise, en particulier avec la densité de pixels de divers écrans, par exemple les appareils "Retina" d'Apple. Donc, si la largeur de l'appareil est dans la largeur générale d'un appareil mobile, vous affichez une disposition différente. Pour un utilisateur de tablette / ordinateur de bureau, je montre simplement la même disposition, c'est-à-dire 1024px de large.

— zuallauz

@zuallauz, le support n'est-il pas device-widthassez mauvais?

— Channel72

Pourquoi ne pas passer par les unités em? De cette façon, le contenu change en fonction de l'espace de texte disponible ...

Réponses:

Arrêtez de vous inquiéter autant sur des appareils spécifiques.

La capacité de détecter si un utilisateur consulte votre site Web via un smartphone, une tablette ou un ordinateur de bureau semble être de plus en plus difficile si vous ne vous contentez que de la résolution d'écran

Il est plus en plus difficile à détecter par la résolution de l' écran, et il sera que plus dure que plus d' appareils entrent sur le marché, mais le but de requêtes des médias est de ne pas détecter dispositif types.What requêtes des médias sont bonnes à se faire quelques réglages à votre conception lorsque il n'est plus agréable à utiliser aux dimensions actuelles. Si le site commence à se désagréger à 550 pixels de large, alors peu importe s'il y a un appareil avec ces dimensions ou non: vous définissez le point d'arrêt là-bas.

C'est la même chose avec la détection des fonctionnalités. Si l'appareil prend en charge le toucher, qu'importe si c'est un appareil mobile ou un futur moniteur mural? Dans tous les cas, les améliorations tactiles seront probablement utiles.

Le reniflement des agents utilisateurs - comme vous l'avez dit - n'est absolument pas fiable. Je pourrais changer ma chaîne User-agent en guillemets Shakespeare si je le voulais vraiment aussi. Que déciderait alors votre site de mon navigateur?

Les agents utilisateurs nécessitent également beaucoup de travail pour gérer toutes les possibilités. En avez-vous un pour Firefox sur Android? Chrome sur IOS? Dauphin sur Froyo? Le navigateur WiiU? Le navigateur extrêmement limité de mon ancien téléphone LG? Lynx? IE 13? Liens? IceWeasel? Le navigateur du Blackberry Playbook? Comment voyez-vous la différence entre Opera fonctionnant sur une tablette et l'opéra fonctionnant sur un téléphone?

Cette liste ne peut que s'allonger avec le temps.

— Mike Gossmann
source

Eh bien, une disposition à 1 colonne se prête généralement bien aux smartphones. Pour une tablette, vous pouvez vous en tirer avec une disposition à 2 ou même 3 colonnes, et pour les ordinateurs de bureau, 3 colonnes fonctionnent généralement bien. Quoi qu'il en soit, le nombre idéal de colonnes que vous affichez est généralement fonction des capacités biologiques de l'œil humain , plutôt que de la résolution de l'écran. Mon point est qu'il serait bien qu'il y ait une corrélation plus étroite entre la résolution de l'écran et la probabilité qu'un humain typique puisse facilement scanner visuellement votre site. Au moins, CSS3 semble supposer une telle corrélation.

— Channel72

Il doit y en avoir, en fait. Les pixels CSS sont censés être définis en utilisant des angles et des distances et non des pixels physiques. De nombreux fabricants ignorent cependant cela dans leurs paramètres par défaut.

— Mike Gossmann

@ Channel72 Une disposition à 1 colonne se prête bien à n'importe quelle largeur d'écran étroite . Peu importe que la largeur de l'écran soit étroite, car il s'agit d'un navigateur de smartphone ou d'un navigateur de bureau dans une fenêtre redimensionnée sur un moniteur géant. La conception Web réactive tente de s'adapter à tous les scénarios de manière appropriée, quel que soit l'agent utilisateur.

— Eric King

Que se passe-t-il si vous allez proposer une vue complètement différente pour les utilisateurs mobiles. Qu'en est-il d'empêcher les utilisations mobiles de télécharger toutes les données non pertinentes nécessaires aux utilisateurs de bureau. L'agent utilisateur est la voie à suivre ...

— John

Les agents utilisateurs mentent aussi. Si vous parcourez Google, vous trouverez des listes d'agents utilisateurs par rapport à la réalité. C'est donc un problème. Certains ont recours au paramètre dpi pour déterminer de quel type d'appareil il s'agit.

— Rob
source

Si quelqu'un avait besoin de fournir de fausses données dans les données de l'agent utilisateur, il obtiendra une version par défaut du site Web ...

— John