Les sites Web fluides valent-ils la peine d'être créés? [fermé]


218

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?


1
if (a == 1) {+ a} else {'nawp'}
Sphvn

Réponses:


52

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.


17
Comment CNN le mélange-t-il?
Alix Axel

43

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:

  1. Le texte est difficile à lire lorsque les lignes sont très longues.
  2. Votre public peut avoir des résolutions plus grandes ou plus petites que la normale, et choisir une largeur statique «incorrecte» les ennuiera.
  3. Le maintien d'un site fluide peut être, mais ne doit pas être beaucoup plus difficile que son homologue statique.

Des commentaires sur la compatibilité du navigateur pour cela?
HaveAGuess


Merci, je donne une chance à la grille réactive de getskeleton ..
HaveAGuess

37

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-et max-heighten 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.


24
"Ce n'est pas particulièrement difficile de nos jours non plus", je vous en supplie. IE6 est toujours bien réel. Écrire une mise en page fluide qui fonctionnera dans ce petit f @@@ er est un défi charnu. Essayez de rechercher "css Holy Grail". Grrr.
dépenser le

4
Je pense que, comme tous les développeurs Web, j'aime ignorer IE6 la plupart du temps. Ne s'en débarrasse pas, mais ça me rend plus heureux :). (Je sais que je contourne le commentaire, mais je ne peux penser à aucune réponse pour le moment.)
Lucas Jones

91
ARRÊTER DE SUPPORTER IE6
Jason

21
Oui, dans l'utopie, nous arrêterions tous DE SUPPORTER IE6, mais généralement l'argent dit le contraire.
dépensé le

13
Selon w3schools.com/browsers/browsers_stats.asp , 13% du Web utilise IE6, 15% utilise IE7. C'est une bonne raison de prendre en charge IE6. Une simple aversion généalogique ne suffit pas pour vider IE6. Désolé Jason.
Paul Nathan

16

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.


2
OK, ça veut dire quoi alors? De quel côté défendez-vous?
Mark

1
Cela signifie que je plaide pour des sites fluides, car nous ne pouvons pas supposer que les utilisateurs savent eux-mêmes comment modifier la taille.
Alex Baranosky

Ne devez-vous pas redimensionner le navigateur pour dire qu'un site Web est fluide? Comment peut-on ne pas savoir comment redimensionner une fenêtre?
mk12

1
oui, je voulais dire zoomer :) J'ai moi-même zoomé mon navigateur pour la première fois de ma vie il y a 1 minute.
Alex Baranosky

eh bien vous êtes celui qui ne sait pas utiliser les ordinateurs
bevacqua

9

Applications basées sur du texte: Non . Applications basées sur une table: Oui .

Avantages des dispositions fluides

  1. Les gens avec de grands moniteurs peuvent utiliser leur écran.
  2. Plus facile pour les utilisateurs avec de grands écrans lorsque vous avez beaucoup d'informations sur votre page.

Inconvénients des dispositions fluides:

  1. 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.
  2. (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.


et Wikipédia est difficile à lire sur un grand navigateur, car les écarts entre les phrases ne sont pas mis à l'échelle à mesure que la longueur de la ligne augmente. Je trouve qu'il est extrêmement difficile de balayer mon œil d'avant en arrière car il n'y a pas de "gouttière" à suivre lorsque je déplace mon œil d'avant en arrière.
Ape-inago

8

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.


6

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.


5

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.


1
Il conviendrait toujours à mon navigateur, au lieu de me faire redimensionner. Comment serait-ce un PITA? Il y a des cas où des dispositions graphiques complexes sont difficiles à réaliser avec une disposition liquide, mais cela ne s'applique certainement pas à la conception largement spartiate de SO.
bobince

2
ce serait un PITA car toutes les réponses s'étendraient sur la page. je suis content que le texte se termine à environ 500 pixels environ. c'est pourquoi les livres sont généralement au rapport de largeur qu'ils sont parce que les yeux des gens se fatiguent après un certain point se déplaçant latéralement ...
Jason

Ce n'est pas un PITA. C'est comme ça que je le veux. Si vous voulez limiter les lignes très longues, définissez max-width en em, mais 500px dans une taille de police typique n'est pas long. Le peu de recherche réelle qui existe ne sauvegarde pas les longueurs de ligne traditionnelles basées sur l'impression pour la lecture à l'écran.
bobince

3
Je préférerais que SO soit fluide moi-même.
Nosredna

4

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.


3

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)


D'accord. J'ai tendance à construire tous mes sites dans une large gamme de 800 à 1 200 px. En regardant 1600 pixels sur une page, il n'y a souvent pas assez de contenu pour se propager et cela commence juste à paraître vide.
womp

2

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!)


2

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.


2

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 .. :)


1

Je pense que la décision fluide / fixe devrait également être basée sur le contenu du site:

  1. 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.

  2. 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.


1

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


0

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 ...


0

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:

  • Les tailles doivent être définies dans emplutôt quepx
  • ... et cela vaut pour les tailles d'éléments, pas seulement pour 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-radiusque 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!"


0

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é.


0

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.


Je pense que les gens avec des écrans de haut niveau apprennent à définir le zoom par défaut, si vous construisez un site à largeur fixe, vous devrez peut-être repenser dans un an ou deux
HaveAGuess

0

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.