Conception réactive pour les grandes résolutions
Je voudrais concevoir un site à un seul pageur qui sera réactif et sera bien présenté dans des résolutions énormes, telles que la largeur 2560. Une méthode consiste à concevoir le site avec une taille de contenu fixe maximale de, disons, 1024, et à mettre un arrière-plan de pixels répétitifs sur les côtés.
Mais je ne veux pas cela, car dans les résolutions énormes, le contenu sera très petit. J'aimerais que tous les éléments grandissent de manière fluide, exactement comme ils diminuent lorsque la résolution diminue à la taille du téléphone.
- Quelque chose que je devrais considérer?
- Une référence pour ces sites qui sont compatibles avec la résolution 2560?
- L'idée principale est que les utilisateurs avec de grands écrans, tels que 42 pouces, verront le site correctement.
Pour les arrière-plans, ce n'est pas une mauvaise idée d'étirer les images avec le navigateur, car vous pouvez maximiser l'impact des images, cependant pour le texte, le faire évoluer de manière fluide jusqu'à 2560 n'est pas une bonne idée.
Un exemple: http://thegreatdiscontent.com/
Leur image d'arrière-plan s'adapte à toute la largeur du navigateur, ce qui sera parfait sur des écrans plus grands.
Cependant, si vous faites défiler vers le bas, vous pouvez voir que leur texte reste à une largeur fixe. Imaginez que si le texte s'étendait jusqu'à 2560, le nombre de caractères par ligne rendrait le texte difficile à lire. L'œil devrait tracer une longue ligne depuis la fin de la ligne jusqu'à la ligne suivante, ce qui facilite la perte de la ligne que vous lisez actuellement.
De l'Institut Baymard:
La longueur de ligne optimale pour votre corps de texte est considérée comme étant de 50 à 60 caractères par ligne, espaces compris ("Typographie", E. Ruder). D'autres sources suggèrent qu'un maximum de 75 caractères est acceptable.
Alors, quels sont les inconvénients de violer cette plage?
Trop long - si une ligne de texte est trop longue, l'œil du visiteur aura du mal à se concentrer sur le texte. En effet, la longueur rend difficile de se faire une idée du début et de la fin de la ligne. De plus, il peut être difficile de continuer à partir de la ligne correcte dans de grands blocs de texte.
Source: http://baymard.com/blog/line-length-readability
Si vous êtes vraiment déterminé à rendre votre site fluide pour toutes les tailles d'écran, vous pouvez envisager d'augmenter la taille de votre police à mesure que la largeur du navigateur augmente afin que vous puissiez maintenir le nombre de caractères dans une colonne à un nombre acceptable.
C'est en fait assez simple à réaliser, il vous suffit de vous assurer de ne pas contraindre accidentellement votre conception en dimensionnant les éléments en pixels ou en autres unités absolues.
- Définissez votre taille de police racine avec une unité relative, de préférence% ou em.
- Définissez la largeur de votre conteneur de contenu en em (en le rendant sensible au contenu)
- Déclarez vos requêtes multimédias, si vous en utilisez, en em.
- Dimensionnez vos éléments de conception dans une unité relative, comme em ou%.
- Ajustez votre taille de police racine à l'aide de requêtes multimédias.
Étant donné que chaque élément de votre conception sera dimensionné par rapport à la taille de police de l'élément racine, l'augmentation augmentera non seulement la taille de la police pour les écrans plus grands, mais mettra également à l'échelle votre conception (y compris sa largeur maximale) en conséquence.
J'utilise ces techniques comme base pour presque tout ce que je construis, et vous pouvez le voir dans mon framework CSS (très basique) ici: https://nternetinspired.github.io/embrace/ Essayez juste de peaufiner la valeur de la taille de police sur l'élément html avec les outils du navigateur et vous verrez l'échelle de conception.
Pour un exemple plus extrême, consultez mon entrée 10K Apart: https://nternetinspired.github.io/10K-Circus/ La taille de l'écran n'est pas pertinente, le contenu évolue simplement proportionnellement.
Tu as dit:
"Une méthode consiste à concevoir le site avec une taille de contenu fixe maximale de, disons, 1024"
Dans ce cas, vous aurez dans la page un conteneur principal, avec le contenu, avec une largeur fixe et vous devez définir une largeur max.
Lorsque la largeur maximale est supérieure à la taille de l'écran, le contenu occupe simplement toute la largeur de l'écran.
Lorsque la largeur maximale est inférieure à la taille de l'écran, vous disposez d'une colonne centrée de contenu et d'un arrière-plan/espace à l'extérieur. Si vous avez une couleur de fond ou une image de fond, c'est moins important.
L'avantage de cette approche est que cet espace vide peut aider l'utilisateur à se concentrer sur le contenu.
Le problème peut être dû à un espace trop important, vous devez donc choisir une largeur idéale de la colonne principale. D'après mon expérience, la plupart du site que j'ai vu avait la colonne principale avec une largeur comprise entre 900px et 1600px. Par exemple, Bootstrap a la largeur par défaut définie sur 1170 px lorsque la fenêtre d'affichage est de 1200 px ou plus.
Une autre approche, à mon avis, consiste à définir la colonne principale à 70% de la largeur de la fenêtre. J'ai utilisé cette option en tant que développeur et je la recommande comme une option. Vous pouvez modifier le pourcentage pour différents points d'arrêt. Veuillez noter que 2560 * 70% est 1792px, ce qui peut être assez large.