Vale a pena fazer sites fluidos? [fechadas]


218

Estou criando um site agora e estou tentando decidir se devo torná-lo fluido ou não. Os sites de largura fixa são muito mais fáceis de criar e também mais fáceis de fazê-los parecer consistentes.

Para ser sincero, eu pessoalmente prefiro olhar sites fluidos que abrangem toda a largura do meu monitor. Minha pergunta vem do fato de que na maioria dos navegadores modernos você pode manter o controle e rolar a roda do mouse para redimensionar basicamente qualquer site.

Então, criar um site fluido vale a pena?


1
if (a == 1) {+ a} else {'nawp'}
Sphvn 14/06/10

Respostas:


52

Depende do seu público e do seu conteúdo.

A seguir, são sites que eu respeito e acho que são um exemplo para imitar.

Exemplos de fluidos:

Amazonas

Wikipedia


Exemplos estáticos:

maçã

eBay

MSN

StackOverflow

MSDN


Alguns misturam-se!

CNN

Eu acho que prefiro estática na maioria das vezes. É mais fácil fazer com que pareça bom em mais navegadores. Também é mais fácil de ler.


17
Como a CNN a mistura?
Alix Axel

43

Tornar um site fluido, mas adicionar um atributo de largura mínima / máxima parece ser o melhor dos dois mundos para mim. Você suporta fluidez, mas a limita a uma certa largura (por exemplo, 800 px e 1200 px).

Cabe a você - aqui estão algumas coisas a considerar:

  1. É difícil ler o texto quando as linhas são muito longas.
  2. Seu público-alvo pode ter resoluções maiores ou menores que o normal, e escolher uma largura estática 'incorreta' irá incomodá-los.
  3. A manutenção de um local fluido pode ser, mas não precisa ser muito mais difícil do que sua contraparte estática.

Algum comentário sobre a compatibilidade do navegador para isso?
HaveAGuess


Obrigada, Im dando grade reativa de getskeleton um ir ..
HaveAGuess

37

Absolutamente. É um grande inconveniente para as pessoas com monitores enormes ter que redimensionar a página. Também pode ser um pouco desonesto com alguns layouts. Pequenos inconvenientes, por mais triviais que sejam, podem afetar as opiniões das pessoas sobre o seu site.

Além disso, os netbooks têm resoluções estranhas, o que dificulta o design de sites. Por exemplo, estou escrevendo isso em 1024x600.

Hoje em dia também não é particularmente difícil (em navegadores modernos), especialmente com min-e max-heightem CSS, e os novos gradientes, etc., em CSS3; portanto, o dimensionamento de imagens não será um problema tão grande no futuro próximo.

Em resposta ao comentário abaixo, acho que os profissionais superam os contras nesse caso específico - o IE6 é um problema em todos os lugares. Nós apenas temos que lidar com isso.


24
"Hoje em dia também não é particularmente difícil", imploro para diferir. O IE6 ainda é muito real. Escrever um layout fluido que funcione nesse pequeno problema é um grande desafio. Tente pesquisar por "css santo graal". Grrr.
gastador

4
Eu acho que, como todos os desenvolvedores da web, gosto de ignorar o IE6 na maioria das vezes. Não me livre disso, mas isso me deixa mais feliz :). (Eu sei que estou evitando o comentário, mas eu não posso pensar de qualquer resposta agora.)
Lucas Jones

91
Parar de apoiar IE6
Jason

21
Sim, na utopia, todos paramos de apoiar o IE6, mas geralmente o dinheiro diz o contrário.
gastador

13
De acordo com w3schools.com/browsers/browsers_stats.asp , 13% da Web usa o IE6, 15% usa o IE7. Essa é uma boa razão para dar suporte ao IE6. Simples antipatia idealógica não é suficiente para despejar o IE6. Desculpe Jason.
Paul Nathan

16

Você precisa perceber que a maioria dos usuários de computadores nem sabe como aumentar o zoom no navegador! A maioria dos usuários está tão longe da compreensão dos computadores que possuímos. Sempre temos que lembrar desse fato.


2
OK, então isso significa o que, então? De que lado você está argumentando?
Mark #

1
Isso significa que estou defendendo sites fluidos, porque não podemos supor que os usuários saibam como alterar o tamanho deles mesmos.
Alex Baranosky

Você não precisa redimensionar o navegador para saber que um site é fluido? Como alguém pode não saber como redimensionar uma janela?
Mk12 21/10/09

1
sim, eu quis dizer aumentar o zoom :) Eu mesmo ampliei o zoom no meu navegador pela primeira vez na minha vida há 1 minuto.
Alex Baranosky 22/10/09

bem, então você é o único que não sabe como usar computadores
Bevacqua

9

Aplicativos baseados em texto: não . Aplicativos baseados em tabela: Sim .

Prós de layouts de fluidos

  1. Pessoas com grandes monitores podem usar o espaço da tela.
  2. Mais fácil para usuários com monitores grandes quando você tem muitas informações em sua página.

Contras de layouts de fluidos:

  1. É difícil ler uma coluna de texto com largura fluida, se for muito larga. Há uma boa razão por trás do uso de colunas nos jornais: torna muito mais fácil pular para a próxima linha.
  2. (Um pouco) difícil de implementar, devido às limitações no CSS.

Se você estiver exibindo dados tabulares (iTunes, gerenciador de banco de dados, ...), a largura do fluido é boa. Se você está mostrando texto (artigos, páginas wiki, ...) a largura do fluido está ruim.


e é difícil ler a Wikipedia quando em um navegador grande, já que as lacunas entre as frases não aumentam à medida que o comprimento da linha aumenta. Acho intensamente difícil escanear meu olho para frente e para trás, pois não há "sarjeta" a seguir enquanto movo meu olho para frente e para trás.
Ape-inago 02/12/19

8

Da perspectiva do meu iPhone, o layout de largura fixa é problemático ao usar blocos de código. A barra de rolagem para blocos de código largos não aparece, então não consigo ler a extremidade direita do bloco.

Caso contrário, acho que é uma questão simples de que tipo de site você está criando e como fica em telas e janelas de tamanhos diferentes. Como mencionado anteriormente, há uma opção para definir uma largura máxima, mas a mesma ressalva se aplica aos blocos de código e iPhones. Eu projetei os dois e não prefiro um sobre o outro.

Embora, seja divertido ver as caixas se moverem enquanto brinco com o tamanho do navegador com um layout fluido, mas posso me divertir facilmente.


6

O mais importante é considerar casos de uso dominantes do seu site ou aplicativo. Você espera que as pessoas o usem exclusivamente em dispositivos móveis? Telefones celulares, netbooks, desktops?

Dê uma olhada no "Responsive Web Design" de Ethan Marcotte: http://www.alistapart.com/articles/responsive-web-design/

Ótimo artigo que demonstra o uso de layouts realmente fluidos usando consultas de mídia. Às vezes, é necessário criar um front-end separado para diferentes agentes do usuário, mas às vezes as consultas de mídia são a ferramenta perfeita para atender a várias resoluções em diferentes agentes do usuário.


5

Depende do que você está tentando fazer. Dê uma olhada no SO. Tem largura fixa e é ótimo. De fato, se fosse fluido, seria um pouco de PITA. Alguns sites parecem melhores com layouts de fluidos, mas, pessoalmente, eu continuaria corrigido, a menos que você tenha um bom motivo para ficar fluido.


1
Sempre caberia no meu navegador, em vez de me redimensionar. Como isso seria uma PITA? Há casos em que é difícil realizar layouts gráficos complexos com layout líquido, mas isso certamente não se aplica ao design amplamente espartano da SO.
22909 bobince

2
seria uma PITA, porque todas as respostas esticariam a página. Fico feliz que o texto tenha cerca de 500 pixels ou mais. É por isso que livros são tipicamente na proporção largura que são porque os olhos das pessoas se cansar depois de um certo ponto que se move lateralmente ...
Jason

Isso não é uma PITA. É assim que eu quero. Se você deseja limitar linhas muito longas, defina a largura máxima em em, mas 500px em um tamanho de fonte típico não é longo. A pouca pesquisa real disponível não faz backup dos comprimentos de linhas tradicionais baseados em impressão para leitura na tela.
22909 bobince

3
Eu preferiria SO ser fluido, eu mesmo.
Nosredna

4

Muitos pontos positivos nos comentários, mas a partir da sua pergunta, parece que você realmente gosta de designs fluidos e deseja criar um, então vá em frente, é o seu site, não precisa ser como todos os outros sites da web.

Esteja ciente dos prós e contras de todas as soluções.


3

Até certo ponto - sim.

Há uma certa largura, em que o texto começa a se tornar irritante para ler se for muito largo. Fácil de testar se você possui um monitor grande, basta pegar o bloco de notas e colar algum texto nele sem quebras de linha.

No entanto, ao reduzir tamanhos menores, ser fluido pode ser uma boa ideia. Os navegadores de telefonia móvel são cada vez mais capazes de exibir sites "normais", mas às vezes são limitados por largura e, como tal, se beneficiam se o site pode caber em um espaço um pouco menor.

Pessoalmente, também gosto de manter o navegador no meu monitor, mas apenas com metade da largura do monitor (24 "). Os sites que se adaptam muito bem são muito bons.

Eu acho que é principalmente um caso de conveniência do usuário. Nem todos os sites se beneficiarão por serem fluidos, mas acho que os sites com muito conteúdo de texto são os que mais se beneficiarão, pelo menos se forem fluidos até uma largura máxima (por exemplo, 800 px ou qualquer outra coisa)


Acordado. Costumo criar todos os meus sites na faixa de 800 - 1200 px. Olhando para 1600 pixels em uma página, geralmente não há conteúdo suficiente para se espalhar e começa a parecer vazio.
womp 11/09/09

2

Sim. O zoom da página é excelente, mas é usado principalmente para aumentar o texto, não para preencher o visor. Certamente, se o texto do corpo já estiver muito amplo, diminuir o zoom para ajustá-lo geralmente o tornará ilegível.

Você precisa de um layout líquido para ajustar o texto à janela de visualização, com ou sem zoom.

O argumento de que “as longas filas são difíceis de ler” é muitas vezes exagerado pelos designers que tentam justificar os designs de largura fixa (*), mas, na realidade, ele não parece tão forte na tela quanto no papel. É claro que é importante definir uma boa altura de avanço / linha e a largura máxima pode ser usada para inibir os piores excessos de linhas longas. (Defina-o em unidades em relativas à fonte.) Você não recebe largura máxima no IE6, mas esse não foi o desastre de antes. (Você pode corrigi-lo com um pouco de JavaScript se realmente se importa com esses caras. Eu não.)

(* que são realmente menos trabalhosos para layouts altamente gráficos. Mas, para um layout mais simples, como o StackOverflow, não há realmente nenhuma razão para não ficar líquido. Tsk @SO, eh!)


2

Prefácio: Não é um artista profissional da web.

Descobri que há muitos bits complicados para fazer as coisas fluírem da mesma forma nos tamanhos de telefone celular e tela widescreen, especialmente em algo de complexidade razoavelmente interessante.

Normalmente, desenvolvo um site de largura fixa de alguma forma; geralmente limitado em [600.1200].

Também acho que colunas de conteúdo super grandes são um aborrecimento para ler. Lembro-me de que há algumas pesquisas que sugerem um número ideal de palavras por linha de coluna.


2

Você pode fazer assim.

# Torne o layout principal fluido e aplique ' max-width: 1140px ' nele e centralize-o.

Com isso, não haverá 'longas filas' de texto em telas maiores e resolução adequada da página da Web em telas menores (excluindo 800x *** e menores).

Eu implementei esse método em meus novos projetos e está funcionando como um encanto.

atb .. :)


1

Eu acho que a decisão fluida / fixa deve se basear também no conteúdo do site:

  1. Para sites com grandes quantidades de informações simples (como portais de notícias), é melhor usar um layout fluido.

  2. Os serviços da Web melhor visualizam e funcionam em dimensões fixas, para que você sempre saiba onde os elementos da interface estão localizados em seus lugares e eles não estão se movendo constantemente.


1

Sim, vale a pena criar sites fluidos
Como você disse, parece bom e razoável quando você planeja adequadamente na fase de design.

Sua dúvida sobre o impacto do Ctrl + Scrollbar não é grande coisa. Esse recurso é principalmente para acessibilidade, para tornar o texto mais legível aumentando o tamanho.

No entanto, se você mencionar todos os seus tamanhos em pixels (px), isso não acontecerá. O ajuste adequado ocorre apenas quando você usa "em" para especificar o tamanho. Então você tem uma maneira de ligar / desligar


0

Eu sou um grande fã de fixada em <800px ... é mais fácil de ler colunas mais estreitas, e ele vai trabalhar em qualquer lugar. Ou seja, se você está tentando criar um site que apresente hipertexto ... Sites que apresentam front-ends de aplicativos, acho que outra lata de worms é totalmente ...


0

O design do fluido - verdadeiramente fluido - é difícil. Muito difícil. Não se trata apenas da largura da página - suas fontes são dimensionadas e tudo é dimensionado com elas? Idealmente:

  • Os tamanhos devem ser definidos em emvez depx
  • ... e isso vale para os tamanhos dos elementos, não apenas para as fontes!
  • Dada uma alteração no tamanho da fonte ou no nível de zoom, os elementos da página devem ter o mesmo tamanho em relação um ao outro

Nosso principal produto é fluido e, do meu ponto de vista como designer, é uma dor, especialmente porque envolve muito conteúdo gerado pelo usuário.

Por um lado, imagens - em um site de largura fixa, você pode ter uma imagem que preencha metade da largura e tenha uma ótima aparência. Em um local fluido, é provável que essa imagem se perca em um mar de espaço em branco, parecendo bastante solitária.

A vida deve ser mais fácil uma vez border-radiuse outras propriedades do CSS3 entram em cena mais, mas, infelizmente, nosso público principal são funcionários do governo, que todos, TODOS AINDA USAM IE F @! * ING 6!


Para responder à pergunta "vale a pena"? Sim , se você fizer certo.

Aqui está um cenário: escolha um site de largura fixa: seu chefe o exibe para um cliente em seu novo laptop 1920x1600 e depois reclama de "como tudo parece pequeno na tela desse cara!"


0

Eu acho que é bom poder escalar bem na tela do usuário, em vez de fazer com que o usuário faça panorâmicas e zoom. Em um momento em que os usuários navegam na Web a partir de uma variedade tão grande de dispositivos, variando de smartphones a PCs ultra-móveis, cada um com sua própria resolução, possivelmente fora do padrão, acho importante manter a experiência do usuário em alto nível quando seu site é visualizado nessas telas. Em relação ao tamanho do texto, ele pode ser delimitado por uma determinada proporção, para que caiba bem no layout. Eu acho que também existem estruturas que podem ajudar na criação de um site de maneira fluida e na manutenção da codificação.


0

Eu vou contra a maioria e digo NÃO. Raciocínio: sites fluidos como a Wikipedia são um pesadelo para leitura em telas grandes devido ao seu comprimento de linha longa (embora suas citações dificultem a leitura na melhor das hipóteses).

O problema realmente ocorre porque não há mecanismo para dimensionar o texto em relação à resolução da tela. Se você pudesse aumentar automaticamente o texto em resoluções maiores, poderia ficar mais perto dos 80 caracteres ímpares por linha, geralmente considerados os melhores para facilitar a leitura.

Há também o problema de imagens e outros elementos de tamanho fixo. Você pode ter imagens grandes e permitir que o navegador as reduza, se necessário, mas você enfrenta outros problemas, como tempos de download muito mais longos e problemas de qualidade de imagem em muitos navegadores.


Acho que as pessoas com telas de alta rez estão aprendendo sobre zoom configuração padrão, se você construir um local fixo largura que você pode ter que redesenhar em um ano ou dois
HaveAGuess

0

Sou fã de sites que têm uma largura máxima fixa entre 800px e 1000px, mas também podem ser reduzidos para que eu possa ler o conteúdo sem rolar de um lado para o outro e também sem diminuir o zoom, porque geralmente o texto fica muito pequeno para ler e machuca meus olhos. Portanto, normalmente é esse o desejo que desejo, porque quero criar sites dos quais me orgulhe.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.