Je crée 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 aussi 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?
Réponses:
Cela dépend de votre public et de votre contenu.
Ce qui suit sont des sites que je respecte et je pense sont des exemples à imiter.
Exemples de fluides:
Amazone
Wikipédia
Exemples statiques:
Pomme
eBay
MSN
StackOverflow
MSDN
Certains le mélangent!
CNN
Je pense que je préfère la statique la plupart du temps. Il est plus facile de la rendre belle dans plus de navigateurs. Il est également plus facile à lire.
la source
Rendre un site Web fluide, mais ajouter un attribut de largeur min / max 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:
la source
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. Par exemple, j'écris ceci à 1024x600.
Ce n'est pas particulièrement difficile de nos jours non plus (dans les navigateurs modernes), en particulier avec
min-
etmax-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.
la source
Vous devez réaliser que la plupart des utilisateurs d'ordinateurs ne SAVENT même PAS comment zoomer dans le navigateur! La plupart des utilisateurs sont si loin de la compréhension des ordinateurs que nous avons. Nous devons toujours nous souvenir de ce fait.
la source
Applications basées sur du texte: Non . Applications basées sur une table: Oui .
Avantages des dispositions fluides
Inconvénients des dispositions fluides:
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 source
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.
la source
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 frontale 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.
la source
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 des correctifs, sauf si vous avez une bonne raison d'aller fluide.
la source
Beaucoup de bons points dans les commentaires, mais d'après votre question, il semble que vous aimez vraiment les designs fluides et que vous souhaitez 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.
la source
Jusqu'à un certain point - oui.
Il y a une certaine largeur, où le texte commence à devenir 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)
la source
Oui. Le zoom sur la page est excellent, mais il est principalement utilisé pour agrandir le texte, pas 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 une bonne hauteur de début / de ligne, et la largeur maximale peut être utilisée pour empêcher les pires excès des longues lignes. (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 que c'é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!)
la source
Préface: Pas un artiste web professionnel.
J'ai trouvé qu'il y avait beaucoup trop de morceaux 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 très larges sont difficiles à lire. Il me semble que certaines recherches suggèrent un nombre optimal de mots par ligne de colonne.
la source
Vous pouvez le faire comme ça.
# Rendre la mise en page principale fluide et appliquer ' max-width: 1140px ' et la.
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.
atb .. :)
la source
Je pense que la décision fluide / fixe devrait également être basée sur le contenu 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.
la source
Oui, les sites Web fluides valent la peine d'être créés
.
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
la source
Je suis un grand fan de fixe à <800px ... il est plus facile de lire des colonnes plus étroites, et il va travailler partout. 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 ...
la source
La conception fluide - vraiment fluide - est difficile. Très dur. Ce n'est pas seulement une question de largeur de page - vos polices évoluent-elles et tout est-il adapté à elles? Idéalement:
em
plutôt quepx
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
que les autres propriétés CSS3 entrent en jeu, mais malheureusement, notre public principal est les employés du gouvernement, qui tous, TOUJOURS UTILISENT 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!"
la source
Je pense que c'est bien 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 source
Je vais aller contre la majorité et dire NON. Raisonnement: les 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.
la source
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.
la source