Les sites Web fluides valent-ils la peine d'être créés?
Je fais un site Web maintenant et j'essaie de décider si je dois le rendre fluide ou non. Les sites Web à largeur fixe sont beaucoup plus faciles à créer et également beaucoup plus faciles à rendre cohérents.
Pour être honnête, je préfère personnellement regarder des sites Web fluides qui s'étendent sur toute la largeur de mon moniteur. Ma question vient du fait que dans la plupart des navigateurs modernes, vous pouvez garder le contrôle et faire défiler la molette de votre souris pour redimensionner n'importe quel site Web.
La création d'un site Web fluide en vaut-elle la peine?
Cela dépend de votre public et de votre contenu.
Les sites suivants sont des sites que je respecte et qui, à mon avis, sont des exemples à imiter.
Exemples de fluides:
Exemples statiques:
Certains mélangent!
Je pense que je préfère la statique la plupart du temps. Il est plus facile de le rendre beau dans plus de navigateurs. Il est également plus facile à lire.
Rendre un site Web fluide, mais ajouter un attribut min/max-width semble être le meilleur des deux mondes, pour moi. Vous soutenez la fluidité, mais vous la limitez à une certaine largeur (disons, 800px et 1200px).
Cela dépend de vous - voici quelques éléments à considérer:
- Le texte est difficile à lire lorsque les lignes sont très longues.
- Votre public peut avoir des résolutions plus grandes ou plus petites que la normale, et choisir une largeur statique "incorrecte" les ennuiera.
- Le maintien d'un site fluide peut être, mais ne doit pas être beaucoup plus difficile que son homologue statique.
Absolument. C'est un gros inconvénient pour les personnes disposant d'énormes moniteurs de devoir redimensionner la page. Il peut également être un peu louche avec certaines dispositions. De petits inconvénients, aussi insignifiants soient-ils, peuvent en fait affecter l'opinion des gens sur votre site.
En outre, les netbooks ont des résolutions étranges qui rendent difficile la conception de sites pour. Par exemple, j'écris ceci à 1024x600.
Ce n'est pas particulièrement difficile de nos jours non plus (dans les navigateurs modernes), surtout avec min- et max-height en CSS, et les nouveaux dégradés, etc. en CSS3, donc la mise à l'échelle de l'image ne sera pas un problème aussi important dans un avenir proche.
En réponse au commentaire ci-dessous, je pense que les avantages l'emportent sur les inconvénients dans ce cas particulier - IE6 est un problème partout. Nous devons juste y faire face.
Vous devez comprendre que la plupart des utilisateurs d'ordinateurs ne SAVENT même PAS comment zoomer dans le navigateur! La plupart des utilisateurs sont loin de la compréhension des ordinateurs que nous avons. Nous devons toujours nous souvenir de ce fait.
Du point de vue de mon iPhone, la disposition à largeur fixe est problématique lors de l'utilisation de blocs de code. La barre de défilement pour les blocs de code larges ne s'affiche pas, donc je ne peux pas lire à l'extrême droite du bloc.
Sinon, je pense que c'est une simple question de quel type de site vous concevez et à quoi il ressemble sur des écrans et des fenêtres de différentes tailles. Comme mentionné précédemment, il existe une option pour définir une largeur maximale, mais la même mise en garde s'applique aux blocs de code et aux iPhones. J'ai conçu les deux, et je ne préfère pas l'un à l'autre.
Bien que ce soit amusant de regarder les boîtes bouger pendant que je joue avec la taille du navigateur avec une disposition fluide, mais je peux facilement m'amuser.
Applications basées sur le texte: Non. Applications basées sur une table: Oui.
Avantages des dispositions fluides
- Les gens avec de grands moniteurs peuvent utiliser leur écran.
- Plus facile pour les utilisateurs avec de grands écrans lorsque vous avez beaucoup d'informations sur votre page.
Inconvénients des dispositions fluides:
- Une colonne de texte à largeur fluide est difficile à lire si elle est trop large. Il y a une bonne raison derrière l'utilisation des colonnes dans les journaux: il est beaucoup plus facile de passer à la ligne suivante.
- (Un peu) difficile à mettre en œuvre, en raison des limitations de CSS.
Si vous affichez des données tabulaires (iTunes, db manager, ...), la largeur du fluide est bonne. Si vous affichez du texte (articles, pages wiki, ...) la largeur du fluide est mauvaise.
La chose la plus importante est de considérer les cas d'utilisation dominants de votre site Web ou application. Vous attendez-vous à ce que les gens l'utilisent exclusivement sur des appareils mobiles? Téléphones portables, netbooks, ordinateurs de bureau?
Jetez un oeil à "Responsive Web Design" par Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/
Excellent article qui montre l'utilisation de mises en page vraiment fluides à l'aide de requêtes multimédias. Parfois, vous devez créer une interface utilisateur distincte pour différents agents utilisateurs, mais parfois les requêtes multimédias sont l'outil parfait pour gérer plusieurs résolutions sur différents agents utilisateurs.
Cela dépend de ce que vous essayez de faire. Jetez un oeil à SO. C'est une largeur fixe et c'est super. En fait, si c'était fluide, ce serait un peu un PITA. Certains sites ont une meilleure apparence avec des mises en page fluides, mais personnellement, j'opterais pour fixe, à moins que vous n'ayez une bonne raison d'aller fluide.
Beaucoup de bons points dans les commentaires mais à partir de votre question, il semble que vous aimez vraiment les designs fluides et que vous voulez en créer un alors allez-y, c'est votre site, il ne doit pas être comme tous les autres sites sur le web.
Soyez conscient des avantages et des inconvénients de chaque solution.
Jusqu'à un certain point - oui.
Il y a une certaine largeur, où le texte devient ennuyeux à lire s'il est trop large. Facile à tester si vous avez un grand écran, saisissez simplement le bloc-notes et collez-y du texte sans saut de ligne.
Cependant, lorsque vous descendez à des tailles plus petites, être fluide peut être une bonne idée. Les navigateurs de téléphones mobiles sont de plus en plus capables d'afficher très bien des sites Web "normaux", mais ils sont parfois limités en largeur, et en tant que tels, ils bénéficient si votre site peut tenir dans un espace un peu plus petit.
Personnellement, j'aime aussi garder le navigateur sur mon moniteur, mais seulement à la moitié de la largeur du moniteur (24 "). Les sites qui évoluent bien dans ce domaine sont très bons.
Je pense que c'est surtout un cas de commodité pour l'utilisateur. Tous les sites ne bénéficieront pas de la fluidité, mais je pense que les sites qui contiennent beaucoup de contenu textuel sont ceux qui en bénéficieront le plus, du moins s'ils sont fluides jusqu'à une largeur maximale (disons 800 px ou autre)
Préface: Pas un artiste web professionnel.
J'ai trouvé qu'il y avait beaucoup trop de bits délicats pour que les choses se déroulent exactement aux tailles de téléphone portable et d'écran large, en particulier dans tout ce qui est d'une complexité raisonnablement intéressante.
En règle générale, je conçois autour d'avoir un site à largeur fixe d'une certaine façon; généralement limité à [600,1200].
Je trouve également que les colonnes de contenu super larges sont difficiles à lire. Il me semble que certaines recherches suggèrent un nombre optimal de mots par ligne de colonne.
Vous pouvez le faire comme ça.
# Rendez la mise en page principale fluide et appliquez-lui ' max-width: 1140px ' et centrez-le.
Par cela, il n'y aura pas de "longues lignes" de texte sur des écrans plus grands et un règlement correct de la page Web sur des écrans plus petits (à l'exception de 800x *** et plus bas).
J'ai implémenté cette méthode dans mes nouveaux projets et ça marche comme un charme.
a.t.b .. :)
Oui. Le zoom sur la page est excellent, mais il est principalement utilisé pour agrandir le texte, et non pour que le texte remplisse la fenêtre. Certes, si le corps du texte est déjà trop large, un zoom vers le bas pour l'adapter le rendra généralement illisible.
Vous avez besoin d'une mise en page liquide si vous souhaitez adapter le texte à la fenêtre, qu'il soit agrandi ou non.
Le point sur les "lignes longues difficiles à lire" est souvent surestimé par les concepteurs qui tentent de justifier des conceptions à largeur fixe (*), mais en réalité, il ne semble pas tenir aussi fortement à l'écran que sur papier. Bien sûr, il est important de définir un bon interligne/hauteur de ligne, et la largeur maximale peut être utilisée pour empêcher les pires excès des lignes longues. (Définissez-le en unités em relatives à la police.) Vous n'obtenez pas la largeur maximale dans IE6, mais ce n'est pas le désastre qu'il était autrefois. (Vous pouvez le corriger avec un peu de JavaScript si vous vous souciez vraiment de ces gars-là. Je ne le fais pas.)
(* qui sont en effet moins de travail pour les mises en page très graphiques. Mais pour une mise en page plus simple comme, euh, StackOverflow, il n'y a vraiment aucune raison de ne pas devenir liquide. Tsk @SO, hein!)
Oui, les sites Web fluides valent la peine d'être créés
Comme vous l'avez dit, cela semble bon et raisonnable lorsque vous planifiez correctement la phase de conception.
Votre doute sur l'impact de Ctrl + Scrollbar n'est pas un gros problème. Cette fonctionnalité est principalement pour l'accessibilité, pour rendre le texte plus lisible en augmentant la taille.
Cependant, si vous mentionnez toutes vos tailles en pixels (px), cela ne se produira pas. Un ajustement correct ne se produit que lorsque vous utilisez "em" pour spécifier la taille. Vous avez donc un moyen de l'activer/le désactiver
Je pense que la décision fluide/fixe devrait également être basée sur conten du site:
Pour les sites contenant de grandes quantités d'informations simples (comme les portails d'actualités), il est préférable d'utiliser une mise en page fluide.
Les services Web ont une meilleure apparence et fonctionnent dans des dimensions fixes, de sorte que vous savez toujours où se trouvent les éléments d'interface à leur place et qu'ils ne se déplacent pas constamment.
Je vais aller contre la majorité et dire NON. Raisonnement: des sites fluides comme Wikipedia sont un cauchemar à lire sur de grands écrans en raison de leur longue longueur de ligne (bien que ses citations le rendent difficile à lire dans le meilleur des cas).
Le problème se produit vraiment car il n'existe aucun mécanisme pour dimensionner le texte par rapport à la résolution d'écran. Si vous pouviez automatiquement agrandir le texte sur des résolutions plus grandes, vous pourriez rester plus proche des 80 caractères impairs par ligne qui sont généralement considérés comme les meilleurs pour la lisibilité.
Il y a aussi le problème des images et autres éléments de taille fixe. Vous pouvez avoir de grandes images et laisser le navigateur les réduire si nécessaire, mais vous rencontrez ensuite d'autres problèmes comme des temps de téléchargement beaucoup plus longs et des problèmes de qualité d'image dans de nombreux navigateurs.
Je pense que c'est agréable de pouvoir bien évoluer sur l'écran d'un utilisateur, plutôt que de faire effectuer un panoramique et un zoom aux utilisateurs. À une époque où les utilisateurs surfent sur le Web à partir d'une si grande variété d'appareils, allant des smartphones aux PC ultra-mobiles, chacun avec sa propre résolution, éventuellement non standard, je pense qu'il est important de maintenir l'expérience utilisateur à un niveau élevé lorsque votre site est affiché sur ces écrans. En ce qui concerne la longueur du texte, il pourrait être limité par un certain rapport, donc il s'intégrerait bien dans la mise en page. Je pense qu'il existe également des cadres qui peuvent aider à écrire un site de manière fluide et à coder la maintenabilité.
La conception fluide - vraiment fluide - est difficile. Très dur. Ce n'est pas seulement une question de largeur de page - vos polices sont-elles mises à l'échelle et tout est-il adapté à elles? Idéalement:
- Les tailles doivent être définies dans
emplutôt quepx - ... et cela vaut pour les tailles d'éléments, pas seulement les polices!
- Étant donné un changement de taille de police ou de niveau de zoom, les éléments de la page doivent être de la même taille les uns par rapport aux autres
Notre produit principal est fluide, et c'est une douleur de mon point de vue en tant que designer, surtout parce qu'il implique beaucoup de contenu généré par les utilisateurs.
D'une part, les images - dans un site à largeur fixe, vous pouvez avoir une image qui occupe la moitié de la largeur et qui a fière allure. Dans un site fluide, cette image est tout aussi susceptible d'être perdue dans une mer d'espaces blancs, l'air plutôt solitaire.
La vie devrait être plus facile une fois border-radius et d'autres propriétés CSS3 entrent en jeu davantage, mais malheureusement, notre public principal est les employés du gouvernement, qui tous, TOUJOURS UTILISENT TOUJOURS IE F @! * ING 6!
Pour répondre à la question "ça vaut le coup"? Oui, si vous le faites correctement.
Voici un scénario: choisissez un site à largeur fixe: votre patron l'affiche à un client sur son tout nouvel ordinateur portable 1920x1600, puis se plaint de "comment tout cela semble petit sur l'écran de ce gars!"
Je suis un grand fan de fixe à <800px ... il est plus facile de lire des colonnes plus étroites, et cela va fonctionner n'importe où. Autrement dit, si vous essayez de créer un site Web qui présente des hypertextes ... Les sites Web qui présentent des applications frontales, sont je pense une autre boîte de vers entièrement ...
Je suis un fan des sites qui ont une largeur maximale fixe comprise entre 800px et 1000px, mais qui peuvent également être réduits pour que je puisse lire le contenu sans faire défiler côte à côte et sans zoom arrière car souvent le texte devient trop petit à lire et ça me fait mal aux yeux. Donc, c'est normalement ce que je veux, car je veux construire des sites dont je peux être fier.