Les sites Web fluides valent-ils plus d’être créés?

Je crée un site Web maintenant et j’essaie de décider si je devrais le rendre fluide ou non. Les sites Web à largeur fixe sont beaucoup plus faciles à créer et beaucoup plus faciles à rendre cohérents.

Pour être honnête, je préfère personnellement regarder des sites Web fluides qui couvrent 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 la souris pour redimensionner n’importe quel site Web.

Alors, créer un site Web fluide en vaut-il la peine?

Cela dépend de votre public et de votre contenu.

Les sites suivants sont des sites que je respecte et que je pense être un exemple à 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 le rendre beau dans plus de navigateurs. C’est aussi plus facile à lire.

Faire un site Web fluide, mais en ajoutant un atsortingbut 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).

C’est à vous de décider – voici quelques points à considérer:

  1. Le texte est difficile à lire lorsque les lignes sont très longues.
  2. Votre audience peut avoir des résolutions plus grandes ou plus petites que la normale, et choisir une largeur statique «incorrecte» les ennuiera.
  3. Maintenir 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 d’avoir à redimensionner la page. Il peut aussi être un peu risqué avec certaines dispositions. Peu d’inconvénients peuvent avoir des répercussions sur l’opinion de votre site.

En outre, les netbooks ont des résolutions impaires qui rendent difficile la conception de sites. Par exemple, j’écris ceci à 1024×600.

De nos jours, ce n’est pas particulièrement difficile (dans les navigateurs modernes), en particulier avec la max-height min- et max-height en CSS, et les nouveaux dégradés, etc. dans CSS3.

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 réaliser que la plupart des utilisateurs d’ordinateurs ne savent même pas 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.

Du sharepoint vue de mon iPhone, la mise en page à 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 qu’il s’agit simplement du type de site que vous concevez et de son apparence sur différents écrans et fenêtres. 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 sur l’autre.

Cependant, il est amusant de voir les boîtes se déplacer pendant que je joue avec la taille du navigateur avec une mise en page fluide, mais je peux être facilement amusé.

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

Avantages des dispositions fluides

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

Contre les dispositions fluides:

  1. Une colonne de texte de largeur fluide est difficile à lire si elle est trop large. Il y a une bonne raison derrière l’utilisation de colonnes dans les journaux: cela permet de passer beaucoup plus facilement à 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.

L’important est de considérer les cas d’utilisation dominants de votre site Web ou de votre 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 démontre l’utilisation de mises en page vraiment fluides à l’aide de requêtes média. Parfois, vous devez créer une interface frontale distincte pour différents agents utilisateurs, mais parfois, les requêtes média sont l’outil idéal pour traiter plusieurs résolutions entre 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 génial. En fait, si c’était fluide, ce serait un peu un PITA. Certains sites ont l’air mieux avec des dispositions fluides, mais personnellement, j’irais avec les corrections à moins que vous ayez une bonne raison de flotter.

Beaucoup de bons points dans les commentaires, mais d’après votre question, il semble que vous aimiez vraiment les designs fluides et que vous vouliez en créer un, alors allez-y, c’est votre site, il ne doit pas nécessairement être comme tous les autres sites Web.

Soyez conscient des avantages et inconvénients de chaque solution.

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 moniteur, attrapez simplement le bloc-notes et collez-y du texte sans sauts de ligne.

Cependant, pour 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 des sites Web «normaux», mais ils sont parfois limités en termes de largeur et, par conséquent, profitent si votre site peut tenir dans un espace un peu plus petit.

Personnellement, j’aime aussi garder le navigateur sur mon écran, mais seulement à la moitié de la largeur du moniteur (24 “). Les sites qui s’intègrent bien dans ce format sont très bons.

Je pense que c’est surtout un cas pratique pour l’utilisateur. Tous les sites ne bénéficieront pas de la fluidité, mais je pense que les sites qui ont beaucoup de contenu textuel sont ceux qui en bénéficieront le plus, du moins s’ils sont fluides jusqu’à une largeur maximale (par exemple 800px ou autre).

Oui. Le zoom sur les pages est excellent, mais il est principalement utilisé pour agrandir le texte, pas pour que du texte remplisse la fenêtre d’affichage. Certes, si le texte du corps est déjà trop large, le fait de faire un zoom arrière pour l’adapter le rendra illisible.

Vous avez besoin d’une mise en page liquide si vous souhaitez que le texte corresponde à la fenêtre d’affichage, que le zoom soit effectué ou non.

Les concepteurs qui tentent de justifier des conceptions de largeur fixe (*) insistent souvent sur le fait que les longues lignes sont difficiles à lire, mais en réalité, ils ne semblent pas aussi solides à l’écran que sur le papier. Bien sûr, il est important de définir une bonne hauteur de départ / de ligne et la largeur maximale peut être utilisée pour inhiber 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 qu’il était auparavant. (Vous pouvez le réparer avec un peu de JavaScript si vous vous souciez vraiment de ces gars-là. Je ne le fais pas.)

(* qui sont en effet moins efficaces pour les mises en page très graphiques. Mais pour une mise en page plus simple comme, par exemple, celle de StackOverflow, il n’y a pas de raison de ne pas restr liquide. Tsk @SO, hein!)

Préface: Pas un artiste web professionnel.

J’ai trouvé qu’il y a beaucoup trop d’éléments complexes pour que les choses se déroulent exactement à la taille des téléphones portables et des écrans larges, en particulier pour tout ce qui est d’une complexité raisonnablement intéressante.

En règle générale, je conçois avec un site à largeur fixe d’une certaine manière. généralement borné à [6001200].

Je trouve également que les colonnes de contenu super-larges sont un problème à lire. Il me semble que certaines recherches suggèrent un nombre optimal de mots par ligne de colonne.

Vous pouvez le faire comme ça.

# Fabriquez le fluide de mise en page principal et appliquez-lui « max-width: 1140px » et centrez- le.

De ce fait, il n’y aura pas de «longues lignes» de texte sur des écrans plus grands et de règlement correct des pages Web sur les plus petits (à l’exception des fichiers 800x *** et inférieurs).

J’ai implémenté cette méthode dans mes nouveaux projets et cela fonctionne comme un charme.

atb .. 🙂

Je pense que le choix / fixe devrait être basé également sur le contenu du site:

  1. Pour les sites contenant de grandes quantités d’informations simples (comme les portails d’information), mieux vaut utiliser une présentation fluide.

  2. Les services Web ont une meilleure apparence et fonctionnent dans des dimensions fixes. Vous savez donc toujours où se trouvent les éléments d’interface à leur emplacement et ils ne bougent pas constamment.

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 lors de la phase de conception.

Votre doute sur l’impact de Ctrl + Scrollbar n’est pas un gros problème. Cette fonctionnalité est principalement destinée à l’accessibilité, afin de rendre le texte plus lisible en augmentant la taille.

Cependant, si vous mentionnez toutes vos tailles en pixels (px), cela ne se produira pas. L’ajustement correct se produit uniquement lorsque vous utilisez “em” pour spécifier la taille. Donc, vous avez un moyen de l’activer / de désactiver

Je suis un grand fan de fixe à <800px ... il est plus facile de lire des colonnes plus étroites, et cela fonctionnera n'importe où. Autrement dit, si vous essayez de créer un site Web qui présente des liens hypertexte ... Des sites Web présentant des interfaces frontales, je pense qu’une autre boîte de Pandore est entièrement disponible ...

La conception fluide – vraiment fluide – est difficile. Très dur. Ce n’est pas simplement une question de largeur de page: faites-vous évoluer vos fonts et est-ce que tout est adapté à leur taille? Idéalement:

  • Les tailles doivent être définies en em plutôt qu’en px
  • … et cela vaut pour les tailles d’éléments, pas seulement les fonts!
  • En raison d’un changement de taille de police ou de niveau de zoom, les éléments de la page doivent avoir la même taille l’un par rapport à l’autre.

Notre principal produit est fluide, et c’est un sharepoint vue difficile pour mon concepteur, notamment parce qu’il implique beaucoup de contenu généré par l’utilisateur.

D’une part, les images – dans un site à largeur fixe, vous pouvez avoir une image qui remplit la moitié de la largeur et qui est superbe. Dans un site fluide, cette image risque tout aussi bien d’être perdue dans une mer d’espace blanc, semblant plutôt solitaire.

La vie devrait être plus facile une fois que border-radius propriétés border-radius et autres propriétés de CSS3 sont plus présentes, mais malheureusement, notre public cible est constitué de fonctionnaires, qui, TOUS, UTILISENT ENCORE IE F @! * ING 6!


Pour répondre à la question “est-ce que ça vaut le coup”? Oui , si tu le fais bien.

Voici un scénario: choisissez un site à largeur fixe: votre patron l’affiche sur un ordinateur portable 1920×1600 flambant neuf, puis se plaint de «la taille de l’écran de ce type!

Je pense que c’est bien d’être capable de bien évoluer sur l’écran d’un utilisateur, plutôt que de faire pivoter et zoomer les utilisateurs. À une époque où les utilisateurs surfent sur le Web à partir d’une grande variété de périphériques, allant des smartphones aux ordinateurs 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é votre site est affiché sur ces écrans. En ce qui concerne la longueur du texte, il pourrait être limité par un certain ratio, de sorte qu’il s’intégrerait parfaitement dans la mise en page. Je pense qu’il y a aussi des frameworks qui peuvent aider à écrire un site de manière fluide et aider à la maintenabilité du codage.

Je vais aller contre la majorité et dire NON. Raisonnement: les sites fluides comme Wikipedia sont un cauchemar à lire sur les grands écrans en raison de leur longueur de ligne (bien que leurs citations rendent la lecture difficile dans le meilleur des cas).

Le problème se produit vraiment car il n’y a pas de mécanisme pour dimensionner le texte par rapport à la résolution de l’écran. Si vous pouviez automatiquement agrandir le texte sur des résolutions plus grandes, vous pourriez restr plus près des 80 caractères par ligne, ce qui est généralement considéré comme le meilleur pour la lisibilité.

Il y a aussi le problème des images et des 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 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 suis fan des sites qui ont une largeur maximale fixe entre 800 et 1000 pixels, mais qui peuvent également être réduits afin que je puisse lire le contenu sans faire défiler côte à côte et sans effectuer de zoom parce que souvent le texte devient trop petit à lire et ça me fait mal aux yeux. Donc, ce que je veux normalement, c’est que je veux construire des sites dont je peux être fier.