web-dev-qa-db-fra.com

Statistiques ou recherches sur la taille de la fenêtre du navigateur en fonction de la taille de l'écran d'affichage

Il existe de nombreuses sources et références pour les rapports sur la résolution d'écran et les tailles d'affichage pour le bureau (et mobile), et il y a moins d'informations sur les tailles de fenêtre du navigateur. Je pense que les deux informations seraient précieuses pour la conception d'applications Web nécessaires pour déterminer leur stratégie de conception adaptative pour le bureau. Beaucoup de gens supposent probablement que les gens exécutent leur fenêtre de navigateur à la taille maximale, mais en fait, je pense que les moniteurs à écran large ou les téléviseurs rendent les utilisateurs moins susceptibles de le faire parce que la plupart des sites Web qui ont un design réactif semblent plutôt vacants sur les résolutions d'affichage large.

Quelqu'un connaît-il de bonnes sources d'information ou des recherches sur la comparaison entre la résolution d'écran et la taille des fenêtres du navigateur? Cela ne doit pas nécessairement concerner la population Internet, même juste un sous-ensemble d'utilisateurs ou un contexte spécifique dans lequel la recherche montre que les gens ne font pas correspondre la taille de la fenêtre de leur navigateur à la taille d'un moniteur.

Il n'y a peut-être pas de réponse définitive à la question, mais certains scénarios ou contexte pour savoir si c'est un comportement utilisateur connu de redimensionner les fenêtres du navigateur en fonction des applications Web qu'ils utilisent ou de le laisser identique seraient intéressants à savoir pour les concepteurs à considérer lors de la création d'une stratégie de conception.

MISE À JOUR: Maintenant que Google Analytics fournit une visualisation pour la comparaison de la taille de l'écran/du navigateur, certaines des réponses ici sont peut-être obsolètes ou peuvent être mises à jour.

16
Michael Lai

J'adore cette question et j'adore que vous la posiez. Points accordés.

Je pense aussi que c'est fondamentalement mal comprendre notre approche de la conception adaptative/réactive - ce qui n'est vraiment pas surprenant puisque nous sommes sur une carte UX et non sur une carte de conception de produit. Les concepteurs UX, presque par définition, ne sont pas des ingénieurs front-end.

Parce qu'il y a une récompense à ce sujet, je suppose que vous avez besoin d'une réponse utilisable - je vais donc faire de mon mieux pour en fournir une. Comme je l'expliquerai à la fin, je ne pense pas que vous ayez réellement besoin des données que vous recherchez. Plus à ce sujet dans un instant ... Je ne m'attends pas à ce que cela ait encore un sens.

Pardonnez-moi si certains de ces éléments sont redondants ou réparateurs, ce n'est pas un peu de votre intelligence ou de votre expérience, je préfère simplement répondre à cela d'une manière qui sera utile à tous les futurs lecteurs et pas seulement à quelqu'un qui est déjà conceptuel. Google a l'habitude de trouver ces choses plus tard, puis de les servir à de nouveaux chercheurs de connaissances. Donc, avec cela à l'esprit, revenons un instant en arrière et considérons certains des locataires fondamentaux de la conception réactive.

  1. Nous commençons par une première approche mobile , puis nous pratiquons amélioration progressive à partir de là. En règle générale, cela signifie s'assurer que notre site a fière allure à 320 pixels CSS large, puis changer notre mise en page à mesure que l'écran s'agrandit.
  2. Fondamentalement, nous ne pouvons pas prédire la taille de l'écran de notre utilisateur . Certaines personnes naviguent en mode portrait sur un téléphone ou une tablette, tandis que d'autres sont en mode paysage. Même si nous pouvions garantir à tout le monde de naviguer en mode plein écran, il y aurait des centaines de permutations basées uniquement sur les appareils mobiles. Certaines personnes naviguent en plein écran à une résolution de 1920 pixels, moins une barre de défilement de 28 pixels, et d'autres naviguent dans un cadre fenêtré. Pour faire face à cela, nous travaillons dans des largeurs fluides basées sur des pourcentages (et parfois des hauteurs) aussi souvent que possible, puis nous pensons dans les points d'arrêt pour des changements de disposition plus importants. Les frameworks CSS comme Foundation et Bootstrap ont été conçus pour éviter d'avoir à repenser un système fluide à chaque fois que vous obtenez un nouveau client, mais ils suivent la même logique que nous examinons ici.
  3. Ainsi, peu importe la définition de la résolution d'écran de notre utilisateur, car dans la conception réactive, , nous sommes déjà orientés vers la fenêtre d'affichage dans la requête multimédia , par opposition à la résolution totale de l'écran. Dans mon propre travail, j'utilise fréquemment des requêtes verticales sur les médias, qui ont tendance à être négligées par de nombreux concepteurs. Si je découvre que je n'ai que 500 pixels CSS d'espace vertical, je vais afficher: aucun le graphique d'en-tête 300px afin que mon contenu + mon appel à l'action ne soient pas poussés hors du page (utilisabilité hourra!). Bien que cela soit plus typique d'un visiteur sur une tablette plus ancienne ou un téléphone en orientation paysage, cela se produit de temps en temps lorsqu'un utilisateur peu alphabétisé visite un site et a 40 IE barres d'outils installé (buh-dum-tss).

Donc, quand on considère le fait qu'une requête multimédia CSS bien conçue demande déjà "combien d'espace horizontal/vertical ai-je, et comment dois-je organiser mes éléments?", Et c'est dans la perspective d'améliorer l'expérience utilisateur en tant que les pixels deviennent disponibles, plutôt que de les dégrader gracieusement à mesure qu'ils disparaissent; nous réalisons que le design réactif fonctionne déjà sur la taille de la fenêtre. Une requête multimédia ne prend pas en compte la taille de l'écran - ce qui nous indique uniquement la taille que nous pouvons atteindre dans des circonstances extrêmes.

La statique réelle elle-même serait extrêmement variable. Je tape dans une fenêtre plein écran, mais j'ai plusieurs fenêtres de taille aléatoire dans divers navigateurs sur mon moniteur de droite. J'ai même un onglet avec un tas de tailles réactives préconfigurées ouvertes via Web Developer extension for Chrome . Mon point ici - est que même sur ce seul système, je pouvais interroger 11 tailles de fenêtres différentes. Le résultat statistique ne serait pas un ensemble de normes, ce serait un histogramme.

Par conséquent, je ne suis pas sûr que vous trouverez jamais les données que vous recherchez, ne serait-ce que parce que les statisticiens préfèrent les données prédictives et exploitables aux données descriptives. Si vous comprenez bien comment et pourquoi les requêtes multimédias fonctionnent, vous devriez pouvoir éviter d'avoir à le savoir.

12
Imperative

Il y a quelques statistiques et une approche pour étudier ce problème dans cet article http://css-tricks.com/screen-resolution-notequalto-browser-window/

anciennes statistiques au fil du temps ici http://mentalized.net/journal/2009/02/19/size_still_matters/ de son argument d'origine contestant une suggestion de Jacok Nielson http://mentalized.net/journal/2006/10/24/browser_size_does_matter _-_ actual_numbers /

Comme il s'agit de statistiques provenant uniquement des utilisateurs de css-tricks.com, ils sont susceptibles d'être davantage de la communauté de conception/développement que du grand public. Si vous pouviez obtenir des données Google Analytics à partir d'autres sources, vous pourriez répéter le test.

Comme vous le mentionnez, de nombreux sites Web ne proposent pas actuellement de grands écrans, la plupart offrant une résolution de 960 pixels ou moins. Dans une certaine mesure, les problèmes techniques liés à l'adaptation à des écrans plus grands ont dépassé les avantages potentiels. Cela change cependant, car de nouvelles capacités de mise en page telles que la colonne CSS pour le contenu multi-colonnes et CSS Flex pour un meilleur contrôle sur la mise en page deviennent disponibles.

J'ai vu un "Veuillez redimensionner votre navigateur" sur www.remotecontroltourist.com s'il est trop petit, et le site fait un effort raisonnable pour tirer le meilleur parti du plein écran sur de grands écrans.

Je continuerai de chercher et je trouverai idéalement des livres blancs plus récents sur le sujet.

2
Thurstan

Vous essayez de dimensionner le marché en ligne ... au mieux, nous savons que 2,4 milliards de personnes existent potentiellement en ligne en ce moment et en supposant que vous pouvez identifier ce public à une ventilation statistique qualitative ...

En d'autres termes, j'ai essayé de dimensionner le marché de Microsoft Silverlight et cela s'est terminé essentiellement avec des méthodologies comme celle utilisée par Adobe Flash - c'est-à-dire% du marché potentiel présumé basé sur l'échantillonnage. Les échantillons eux-mêmes étaient un peu malodorants, car par exemple, Flash était téléchargé en moyenne 8 millions de fois par jour, mais ils avaient 98% d'ubiquité ... alors .. 8 millions * 365 = 2 milliards ????

Mon argument est que l'auteur d'origine a demandé une source "crédible" et que cela n'existera pas car personne n'a encore correctement dimensionné le marché (d'un gars qui a dépensé des millions en études de marché)

0
Scott Barnes