Les fenêtres de navigateur redimensionnées sont-elles un cas d'utilisation réel?
Je travaille sur le style d'un site qui utilise bootstrap 3. Le front-end n'est pas mon point fort, et mon rôle consiste à résoudre les petits problèmes.
Je développe mon travail sur un bureau en pleine largeur. Nous utilisons les vues prédéfinies bootstrap, que j'utilise pour créer un design réactif. Ensuite, je vérifie les performances mobiles et je pars de là. Ensuite, je regarde la disposition des tablettes et c’est généralement bien. Ma méthode n'est peut-être pas la meilleure pratique, mais elle a fonctionné jusqu'à présent.
Lorsque je présente les résultats de mon travail au client marketing, celui-ci "teste" différentes dispositions en redimensionnant la fenêtre du navigateur utilisée sur le bureau. En procédant ainsi, les éléments de la page sont remaniés par le navigateur et peuvent se retrouver dans des endroits inhabituels avec des largeurs de fenêtre arbitraires.
La situation est que je ne peux pas recréer ces mises en page brisées en sélectionnant les paramètres de périphérique dans les modes mobiles. Cela ne peut être fait qu'en ouvrant le site dans une fenêtre de navigateur de taille normale, puis en le redimensionnant à l'aide de la souris à certaines largeurs arbitraires.
Le marketing pense que cela signifie que le site n'est vraiment pas réactif, et nous devons le développer pour que la présentation ait une belle apparence, quelle que soit la largeur du navigateur, pixel par pixel. Tester les fenêtres de redimensionnement constituerait une rupture par rapport à notre méthode de développement actuelle.
En ce qui concerne les utilisateurs finaux du site, les fenêtres de navigateur redimensionnées sont-elles vraiment un scénario du monde réel? Est-ce que l'un de nos utilisateurs finaux va avoir une mise en page endommagée parce qu'ils ont redimensionné la fenêtre de leur navigateur (ne remplissent pas leur moniteur), ou ont une résolution inhabituelle sur leur système de bureau? Ou devons-nous seulement développer avec des tailles statiques prédéfinies?
Les utilisateurs ne redimensionnent presque jamais une fenêtre lorsqu'ils utilisent votre site. Il est souvent possible que le redimensionnement lui-même pose des problèmes. C'est notamment le cas lorsque vous utilisez JavaScript pour calculer et définir certaines tailles lors du chargement de la fenêtre. Certains frameworks reposent sur cette technique et la fenêtre redimensionnée à la volée est très brisée. Lorsque vous testez, vous pouvez toujours demander une actualisation après tout redimensionnement pour simuler un nouveau chargement de page.
Les utilisateurs utilisent toutefois un nombre impressionnant de largeurs d'écran. Vous devez vraiment rendre votre page belle à toute largeur de pixel arbitraire.
Il existe des dizaines de largeurs d'écran communes. Voici les données d'un site qui suivent les vingt premiers. Toujours "autres" représente près du quart des utilisateurs.
Res % 360x640 22.04 1366x768 12.1 1920x1080 7.5 375x667 4.88 720x1280 2.99 1440x900 2.94 768x1024 2.62 1280x800 2.46 1600x900 2.42 320x568 2.33 1024x768 2.08 414x736 1.98 1280x1024 1.92 320x534 1.87 1536x864 1.78 320x570 1.64 480x800 1.34 1280x720 1.26 1680x1050 1.14 412x732 1.14 Other 21.58- Les utilisateurs ne peuvent pas utiliser une fenêtre de navigateur agrandie. Cela est particulièrement courant sur les très grands écrans où l’utilisateur a attribué au navigateur une partie quelconque de l’écran à utiliser.
Même avec un navigateur optimisé, il peut exister des barres de défilement, des bordures de fenêtres ou même des barres latérales de navigateur (telles que des signets ou un historique) occupant des objets en largeur. Votre page Web n'aura souvent pas toute la largeur de la fenêtre pour travailler. Un grand nombre d'utilisateurs auront des dizaines de pixels inférieurs à la largeur de l'écran.
Voici n site qui a rassemblé les données quant au degré de rapprochement des fenêtres de navigateur des utilisateurs maximisés:
full screen % Totally 0.85 Within 50px 1.06 Within 100px 9.67 Within 200px 61.18
Entre le grand nombre de tailles d’écran et le grand nombre d’utilisateurs qui ne mettent pas à votre disposition toute la largeur de l’écran, vous devez prendre en charge des largeurs de pixels arbitraires pour votre site Web.
Il existe de bonnes techniques réactives pour le faire fonctionner:
- La plupart des sites choisissent une largeur minimum prise en charge d'environ 320px
- La plupart des sites choisissent une largeur maximale prise en charge (1200 pixels est commune), après quoi seules les marges autour du site s'agrandissent et le site est centré dans la page.
- Entre le minimum et le maximum, un ou deux points d'arrêt sont choisis lorsque les colonnes se réduisent et se superposent.
- Les éléments dans les colonnes sont généralement autorisés à s'étendre sur toute la largeur de la colonne.