Quel est le meilleur conteneur de contenu de largeur maximale dans un site Web?
Après Bootstrap 3/4 ou d'autres frameworks, nous avons remarqué des écarts en termes de largeur maximale pour le contenu principal, par exemple:
- Dans bootstrap 3 la largeur maximale du conteneur est 1170px
- Dans bootstrap 4, la largeur maximale du conteneur est de 1140 px.
- Sur le site Web de Microsoft, la largeur maximale est actuellement de 1600 pixels.
Les données de Google Analytics indiquent que la plupart des utilisateurs ont une résolution d'écran de 1366x768 d'environ 12,76%.
Quel principe/règle pouvons-nous utiliser pour déterminer quelle est la meilleure largeur maximale suivant les normes et les résolutions d'écran?
Merci
La "meilleure" largeur maximale dépendra de votre contenu. Web Accessibility Initiative suggère de viser une longueur de ligne maximale de 80 caractères. Selon la disposition, la conception, les choix de polices et le comportement réactif de votre contenu, la largeur optimale variera. Par exemple, une disposition à trois colonnes peut être capable de prendre 1600px tout en conservant des longueurs de ligne décentes, mais une disposition à une seule colonne aura du mal à faire de même.
En règle générale, j'essaie de définir ma largeur maximale en fonction du contenu et, comme Pectoralis Major l'a mentionné, je propose une mise en page différente en fonction de la taille de l'écran du spectateur.
Quel principe/règle pouvons-nous utiliser pour déterminer quelle est la meilleure largeur maximale suivant les normes et les résolutions d'écran?
Si votre largeur maximale est trop grande, vous créerez très probablement une expérience horrible pour vos utilisateurs. Est-ce quelque chose que vous êtes prêt à vivre en largeur?
En supposant que vous ne voulez pas forcer vos utilisateurs à faire défiler horizontalement pour voir les données importantes, la navigation et l'interface utilisateur (comme un bouton d'achat), vous devrez réduire votre largeur maximale.
La largeur est trop large dépend beaucoup de votre conception et de votre base d'utilisateurs. Pourtant, vous voudrez vous assurer de ne pas larguer les utilisateurs parce que vous voulez afficher votre design fantastique.
D'un autre côté, si vous, ou votre entreprise, êtes prêt à dépenser du temps et de l'argent pour créer un style pour les utilisateurs sur un écran de plus de 1600 pixels, allez-y.
Ceci est mon site préféré absolu de référence pour les résolutions maximales: https://www.hobo-web.co.uk/best-screen-size/
Les points clés à retenir sont les suivants:
- 1. Flexible Max. Un peu de côté, mais toujours pertinent: il est fortement recommandé d'utiliser un design réactif quelle que soit votre résolution maximale. De cette façon, si votre résolution maximale est supérieure à l'affichage d'un utilisateur, elle sera toujours accessible pour eux.
- 2. Région. Votre site est-il consulté à l'échelle mondiale ou locale? Hobo fournit des statistiques de résolution pour les États-Unis, le Royaume-Uni et le monde qui varient d'une région à l'autre. Ils mettent à jour leurs résultats de temps en temps, il est donc inutile que j'y fasse référence directement dans cette réponse. Gardez à l'esprit que cela change toujours, ce qui m'amène à ...
- 3. Chaque cas est différent. Bien que les statistiques liées soient un bon point de départ, vous devez analyser les visiteurs de votre site. Vos propres analyses seront en mesure de vous montrer quelles sont les résolutions les plus courantes qui visitent votre site. Par exemple, si votre site était destiné aux joueurs sur PC, une bonne partie d'entre eux utilisent des écrans 4K. En tant que tel, leur résolution maximale serait plus élevée. Si votre site s'adresse aux entreprises, il est probable qu'elles utilisent du matériel obsolète en raison de contraintes budgétaires qui entraîneraient des moniteurs plus anciens avec des résolutions plus faibles (les moniteurs sont à peine mis à niveau dans le monde des affaires). Bien que cela soit parfait pour une refonte d'un site qui a déjà d'anciennes statistiques, c'est moins idéal pour un nouveau site. En tant que tel, les statistiques de la région en 2 ci-dessus seraient un bon point de départ.
Gardez à l'esprit que la largeur maximale n'a pas besoin de s'étendre sur toute la largeur de la résolution de l'utilisateur. Les utilisateurs avec des écrans 4K sont habitués à voir de grandes colonnes vides à gauche et à droite. Voici une question quelque peu pertinente concernant ces marges.
Quel principe/règle pouvons-nous utiliser pour déterminer quelle est la meilleure largeur maximale suivant les normes et les résolutions d'écran?
Vous pouvez fournir plusieurs versions pour différentes résolutions d'écran afin que chaque utilisateur ait une bonne expérience de navigation sur votre site.
12,76% n'est pas beaucoup contre 87,24% et c'est pourquoi cela n'a aucun sens d'utiliser ces résolutions pour tout le monde, vous devez fournir des versions pour téléphones, tablettes et résolutions d'écran plus petites/plus grandes.