É aconselhável usar um layout de fluido?

https://stackoverflow.com/questions/1963041

21-09-2019
|

Pergunta

Eu sempre preferia layouts de largura fixa a layouts de largura de fluido, um dos principais motivos é que eu sou capaz de entender melhor como será a imagem toda sem ter que se preocupar com a resolução da tela.

Mas agora a "imagem" mudou, Há uma alta discrepância entre as resoluções mais baixas e mais altas usadas pela maioria dos usuários hoje em dia E eles parecem estar aqui para ficar.

Eu tenho um netbook que suporta apenas 800 pixels ou 1024 pixels largo; Eu também tenho um monitor de 22 "que suporta 1650 pixels e, monitores de 24 "que apóiam 1920 pixels E mais estão se tornando bastante comuns.

Eu praticamente "ignorei" os usuários de 800 pixels há algum tempo e estou desenvolvendo com 950/960 pixels fixos de largura, também noto que sites populares (ASSIM por um) use essa abordagem ou a fluida.

Para texto (quase) apenas sites (como Wikipedia) Não vejo problema em usar o sistema fluido, mas e todos os outros Sites que dependem de imagens / vídeo para criar conteúdo interessante? Redes sociais, classificadas e assim por diante ... O que é (será) sua abordagem para resolver esse problema?

Escultura de costura Parece uma boa opção para o futuro próximo, mas não amadureceu o suficiente (nem os navegadores nem o jQuery suportam -o neste momento), também sinto que os usuários não o entenderiam, se confundem com isso e, como conseqüência, abandone o site.

o de fato O padrão na web ainda tem 1024 pixels de largura e saindo 980 pixels não utilizados Em um monitor de 24 ", parece claro não dizer errado. Então, quais são nossas opções?

Eu adoraria ouvir o que você pensa sobre isso e suas experiências com sistemas fluidos e fixos.

PS: Sites populares usando qualquer um desses sistemas também são bem-vindos, estou especialmente interessado em ver sites que não são de texto que usam o sistema de fluidos.

Edit: acabei de ver esta resposta E fiquei meio confuso sobre a diferença entre layouts de fluido e líquido, eles não deveriam ser exatamente iguais?

Solução

Eu geralmente acho que os layouts de fluidos são uma boa ideia. O problema começa quando o layout do fluido começa a ficar realmente largo com telas de alta resolução - há um limite para quão longe o olho humano pode rastrear horizontalmente sem perder o posicionamento vertical. É por isso que as colunas de jornais, por exemplo, são sempre bastante estreitas.

Tente olhar para a Wikipedia em uma tela de alta resolução, e você verá que eles limitam a largura máxima a algo em torno de 800-900px - mais do que isso (assumindo uma fonte bastante padrão de 12pt) e as pessoas param de poder ler até o fim da linha e, em seguida, encontre sem esforço o início da próxima linha, e a coisa toda se divide em uma bagunça de tensão nos olhos e pescoço.

Nos sites que construo, uso a largura máxima para limitar a largura máxima do conteúdo de texto (e também incluo imagens e outras coisas) a cerca de 720-800px, que com barras laterais e isso pode chegar a cerca de 1000px. Se a tela for mais ampla do que isso, centralize -se o conteúdo da esquerda (alinhe à direita nos sites da RTL) - ambos funcionam bem.

Mas você precisa projetar seu layout para que ele flua quando a largura disponível é mais estreita - isso é muito útil para pessoas com netbooks (que são bastante populares agora e espero que se tornem mais populares no futuro), smartphones e até tela pequena dispositivos móveis. Esses dispositivos móveis mais e mais recursos de recursos padrão e você deve abordar isso em seus designs - mesmo que um navegador móvel possa reduzir seu site de alguma forma, o "modo móvel" geralmente faz isso bagunçando a página e matando a experiência do usuário pretendida.

Outras dicas

Deixar 980 pixels sem uso em um monitor de 24 "parece simplesmente estranho para não dizer errado

Eu discordaria aqui. Se você tem um monitor com uma resolução alta, provavelmente não está executando com uma janela de navegador maximizada. E mesmo se você estiver, você está realmente preocupado com o fato de o conteúdo estar todo em uma área fixa no meio? Sério?

Desde que seu site tenha um layout decente e utilizável, não vejo o problema com o espaço de ambos os lados em monitores de alta resolução.

Existem maneiras de criar diferentes @media regras dentro de uma folha de estilo -W3C tem algo sobre isso-e, embora seja um grande gato de Schroedinger, se os navegadores dos computadores de mão obedecerão às regras, é bastante seguro supor que, mesmo que não tenham, eles têm telas grandes o suficiente e bem classificadas para usar apenas um modelo de escala do site como aparece nos desktops.

Parece-me que era do interesse dos fabricantes dos dispositivos torná-los compatíveis com sites que antecedem o advento de tais dispositivos em 5 a 10 anos.

E se não, é o problema deles.

Eu me aproximo do problema de um ângulo diferente. Tenha um layout de fluido, mas dê uma largura mínima (em vez de uma largura máxima). Você pode conseguir isso com CSS.

O problema com as imagens não é tão grande. O que você faz é o seguinte:

Carregue sua imagem no tamanho máximo que você espera ter.
Faça o fluido da imagem da seguinte maneira:

<img src="http://example.png" style="width:32.5%">

À medida que você redimensiona a página, a imagem se aprimora novamente na largura percentual. Apenas certifique -se de não ter nenhum atributo de largura ou altura na imagem. Eu chamo de superlástico :)

Layouts de fluidos foram a resposta antes Design responsivo O apoio nos navegadores saiu. Não há mais necessidade de usar layouts de fluido ou elástico.

Não há resposta certa para esta pergunta, pois não há dois objetivos de design iguais. Os layouts de fluido tornam praticamente impossível qualquer aparência de controle tipográfico, mas nem todos os designs precisam ou desejam.

Nenhuma coleção de "melhores práticas" equivale a uma educação de design real, e nem todos os usuários se sentem compelidos a soprar suas janelas do navegador para preencher toda a tela.

A discussão mais informativa sobre layouts que li até agora está no livro de domínio do CSS de Andy Budd. Se você tiver uma chance, leia -o. Eu acho que é um livro obrigatório sobre CSS (nível intermediário). Parece que o capítulo dos layouts está disponível no formulário de artigo aqui.http://www.webreference.com/authoring/style/sheets/css_mastery2/

Outro link:http://www.smingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-tight-one-for-you/

Líquido e fluido são dois nomes diferentes para a mesma técnica.

Hth.

Eu acho que é melhor ter uma largura máxima do layout, você pode mudar isso com o JavaScript. Um bom exemplo disso é esse layout, veja o que acontece (no Firebug ou algo assim) com o layout se você alterar a largura: http://tweakers.net/Eles escolheram uma largura de 1208px e o tornam menor com JavaScript quando a largura do navegador muda. Com o JavaScript desativado, o site ainda tem 1208px de largura, o que parece não ser um problema de qualquer maneira.

EDIT: A primeira largura do site será como 900px. Com o JavaScript, você verificará a largura do navegador e fornecerá a classe A com a resolução mais próxima da largura do seu navegador. Por exemplo: a largura do navegador parece ser de 1100px, então você dá a uma classe 'Res1024' ou a largura do navegador é de 1080px, então você dá uma classe 'res1100'. Este será o seu CSS:

#wrapper {
    width: 900px;
}
.res1024 #wrapper {
    width: 1000px;
}

.res1100 #wrapper {
    width: 1080px;
}

Espero que ajude você:], você pode mudar muito mais com esta aula do corpo, como:

.res900 #menu {
     width: 100px;
}

Edit 2: você pode lidar com imagens da mesma maneira:

.res900 img.fluid {
    width: 200px;
}

.res1100 img.fluid {
    width: 300px;
}

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow