Share
Le principe qui sous-tend un site Web réactif ne consiste pas uniquement en une construction conviviale pour les sites Web. Il s'agit de libérer notre contenu afin qu'il puisse être utilisé par tous les moyens nécessaires - et cela à grande échelle. Jetons un coup d'oeil aux considérations de conception derrière le grand écran de bureau souvent négligé.
Ceux d'entre vous qui aiment jouer avec des mises en page flexibles auront (comme moi) sans aucun doute un coup de pied bizarre en voyant vos conceptions s'adapter facilement aux petites fenêtres. Ce qui était autrefois une belle mise en page multicolonne devient un pilier tout aussi beau et confortable de texte lisible, exempt d’encombrement et de non-sens inutiles. Mais combien d’entre vous pensez à vos aménagements au-delà du confort d’une grille 960?
Croyez-le ou non, il y a des gens qui regardent votre travail dans une gloire grand écran cinématique haute définition (même les écrans iMac 27 "et Thunderbolt d'Apple bénéficient d'une résolution de 2560x1440px). Les écrans d'ordinateur deviennent de plus en plus grands. sensible disposition? Flottant à la dérive au milieu d’un océan, c’est là que.
Plus de cinq pour cent des Webdesigntuts + visiteurs du mois dernier l'ont fait sur un écran comme celui ci-dessus, pas un chiffre à renifler. Et avant de vous jeter dans la gorge à propos de la mise en page de ce site, soyez assuré qu'une solution est en cours!
Nous semblons être bloqués à 960px, une largeur qui est devenue standard grâce à l'utilisation de systèmes de grille. Pendant longtemps, il était inhabituel de trouver des écrans plus grands que 1024x768px, aussi nos dispositions de largeur fixe ne pouvaient certainement pas dépasser cela. 960px est en fait une excellente figure avec laquelle travailler:
Des problèmes sont apparus lorsque l'accès à Internet sur de plus petits appareils est devenu courant. Les grandes mises en page sont difficiles à voir correctement dans de minuscules fenêtres. Par conséquent, la nécessité étant la mère de toute invention, notre attention a logiquement été tournée vers cette question. Une mise en page de 960 pixels restera belle sur un écran plus grand. Les concepteurs ont donc tendance à concevoir un site Web réactif comme un moyen de créer leurs mises en page. mobile amical.
Nous sommes habitués à concevoir des mises en page de taille moyenne. Pour cette raison, il est plus facile (bien que beaucoup d'entre vous ne l'admettent pas) de visualiser et de concevoir comme vous l'avez toujours fait, puis réduisez les éléments pour les appareils mobiles. Votre première aventure dans RWD impliquera probablement la dégradation de requêtes de média telles que celles-ci (extraites du squelette):
/ * tous vos styles initiaux vont ici… * / body width: big-ish; / * Plus petit que la norme 960 (appareils et navigateurs) * / @ Écran uniquement multimédia et (largeur maximale: 959px) / * Taille de portrait de tablette au format standard 960 (appareils et navigateurs) * / @ Écran uniquement multimédia et (min. -width: 768px) et (max-width: 959px) / * Toutes les tailles mobiles (appareils et navigateur) * / @ Écran uniquement multimédia et (max-width: 767px) / * Taille de paysage mobile en portrait de tablette ( appareils et navigateurs) * / @média uniquement écran et (largeur minimale: 480px) et (largeur maximale: 767px) / * Taille du portrait mobile en taille de paysage mobile (appareils et navigateurs) * / écran uniquement multimédia et ( max-width: 479px)
Commencez gros, puis passez à de plus petits appareils. Cela est gênant pour un certain nombre de raisons, notamment le fait que vous vous engagez souvent sur une largeur maximale de mise en page avant de vous aventurer dans d'autres tailles d'écran potentielles. Revenir à la prise en compte de plus grandes tailles d’écrans, c’est revitaliser vos requêtes multimédia..
D'autre part, une approche mobile d'abord signifie que vous devez d'abord gérer les écrans les plus petits possibles, puis créer vos requêtes multimédia à mesure que les fenêtres grandissent. Répondre à une autre requête multimédia à la fin, car vous remarquerez un point d'arrêt à 2000px, est simple.
La solution évidente est de permettre à nos présentations flexibles d’étendre toute la largeur de l’écran sur lequel elles sont visionnées. Facile! Mais il y a une raison pour laquelle vous verrez souvent largeur maximale revenir en css sensible; la conception de grands écrans nécessite un examen attentif.
Laissons de côté un instant les obstacles techniques. Comment pouvons-nous concevoir pour des écrans plus grands? Quelques approches vous viennent à l’esprit, alors allons-y de manière logique..
En supposant que nous ayons affaire à une grille fluide, nous pouvons simplement permettre à nos colonnes de s’étendre proportionnellement et de remplir l’espace écran disponible..
Le problème criant de cette approche est d'avoir des colonnes de texte très larges. Un corps de texte de 30 cm de large ne rendra pas votre mise en page esthétique, mais surtout, sa lisibilité sera également réduite..
La largeur d'une ligne de texte est désignée de manière typographique comme la "mesure" et, afin de préserver la lisibilité, elle doit être composée d'environ 45 à 75 caractères. Trop de caractères et il devient difficile pour l’œil du lecteur de revenir en arrière dans le texte et de localiser le début de la ligne suivante. On peut lutter contre cela en augmentant la hauteur de ligne (interligne), assez facile à mettre en œuvre aux moments appropriés au moyen de requêtes de médias, mais ce n'est pas une solution complète..
Le module de disposition multi-colonnes CSS3 semble prometteur à cet égard. Lorsqu'un corps de texte atteint une certaine largeur, le fractionner en un nombre approprié de colonnes résoudrait les problèmes de lisibilité. Nous devançons cependant nous-mêmes. L'implémentation du navigateur dans les colonnes CSS3 est toujours incohérente et manque quelques détails typographiques.
Je pense que nous avons commencé à nous réchauffer lorsque nous avons mentionné l'augmentation de la hauteur de ligne, ce qui m'amène à l'approche suivante…
Ours avec moi sur celui-ci - que diriez-vous que nous venons de tout transformer? Certainement, en ce qui concerne le type, cela aurait du sens. La lisibilité est encore une fois au cœur de cette problématique; les écrans plus grands sont généralement vus de plus loin. Nous regardons les écrans le plus confortablement avec un angle de vue d'environ 30 °.
Ce qui signifie effectivement
Plus l'écran est grand, plus la distance de vision optimale est confortable.
Cela se traduit par une distance de visualisation optimale de 3 à 6 largeurs d'écran. Remarque: ces chiffres s'appliquent spécifiquement à la visualisation télévisuelle, mais les principes pour les moniteurs de bureau restent les mêmes. Apple vous recommande de vous asseoir entre 18 "et 24" de votre écran, en fonction de sa taille. Ils suggèrent 15 "du dernier iPad, 10" d'un iPhone 4.
C’est une plage importante, il serait donc judicieux de modifier la taille de la police en fonction de la distance à laquelle elle est lue..
Les Ems sont notre ami ici. En définissant votre type, votre hauteur de trait, voire toute la grille de la ligne de base (il y a un défi), en utilisant des unités de mesure relatives (ems ou rems), il est très facile de faire évoluer le tout..
/ * définir la valeur initiale * / html taille de la police: 100%; body taille de la police: 0.875em; / * 14px * / / * Augmentez-le lorsque le temps est correct * / @ uniquement écran et (min-largeur: 768px) corps taille-de-police: 1em; / * 16px * /
Je suis un fan de gros caractères lisibles, mais si vous avez déjà hésité à définir votre copie de corps à 16px, peut-être une disposition sur grand écran est-elle l'endroit idéal pour vous salir les mains!
Les mises en page CSS avancées sont encore assez avancées, mais même dans notre monde de flotteurs, nous pouvons réorganiser les mises en page sans trop de difficultés. Si le but de cet exercice est de tirer le meilleur parti de l’écran inutilisé, pourquoi ne pas simplement ramener du contenu caché dans l’image?
Prenez le pied de page, par exemple. Le plus souvent, il se trouve caché hors écran, en bas de la page. Ce n'est pas un problème; ce n'est pas vraiment l'endroit idéal pour le contenu très important, mais un pied de page peut contenir des informations utiles; pensez donc à le placer sur le côté de votre mise en page en tant que colonne supplémentaire..
Sémantiquement c'est toujours un . Le balisage indique toujours à quel endroit son contenu appartient par rapport à la hiérarchie de la page, mais nous sommes libres de le placer où bon nous semble. Travailler sur une grille et sur une structure de mise en page modulaire rendra ceci plus facilement réalisable.
Vous pouvez également déplacer le contenu du corps vers le haut en repositionnant des éléments horizontaux tels que la navigation principale, en transformant ce qui était une mise en page à biais vertical en une orientation plus horizontale..
Je suggère qu'une combinaison de toutes ces approches vous mettrait dans la bonne position; construisez pour le mobile d'abord, permettez à votre mise en page de s'étendre en largeur, augmentez l'échelle (légèrement) et repositionnez les éléments modulaires.
Regardez comment tout cela se déroule (j'ai même jeté les multi-colonnes CSS3 dedans pour faire bonne mesure).
Il y a toujours des mais…
N'oubliez pas les espaces. Les espaces sur les bords d'une mise en page définissent cette mise en page. Les zones vides d'un écran permettent de cibler des zones de contenu et aident à diriger le regard de l'utilisateur. Ne remplissez pas avec impatience les espaces, mais vous pouvez le faire.
Cela est particulièrement vrai en ce qui concerne notre approche de «repositionnement». Une disposition modulaire peut être aisément réorganisée de manière à afficher le contenu masqué. Mais présenter à l'utilisateur plus d'informations à traiter peut diluer ce que vous essayez d'atteindre..
Prenons cet exemple tiré de la récente présentation de Windows 8 par Sneek. Sur des périphériques plus petits, l'interface en mosaïque est très efficace:
Sur de plus grands écrans, cela peut être décrit comme déroutant:
Donc, le concept que "l'espace est là pour être rempli" n'est pas nécessairement vrai. J'espère néanmoins que cela vous donne matière à réflexion et j'ai hâte d'entendre vos propres expériences lors de la conception de grands écrans.
Accentsconagua