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?
Respostas:
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.
fonte
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:
fonte
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-
emax-height
em 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.
fonte
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.
fonte
Aplicativos baseados em texto: não . Aplicativos baseados em tabela: Sim .
Prós de layouts de fluidos
Contras de layouts de fluidos:
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.
fonte
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.
fonte
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.
fonte
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.
fonte
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.
fonte
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)
fonte
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!)
fonte
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.
fonte
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 .. :)
fonte
Eu acho que a decisão fluida / fixa deve se basear também no conteúdo do site:
Para sites com grandes quantidades de informações simples (como portais de notícias), é melhor usar um layout fluido.
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.
fonte
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
fonte
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 ...
fonte
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:
em
vez depx
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-radius
e 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!"
fonte
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.
fonte
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.
fonte
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.
fonte