Para sites, é melhor ter um layout de largura variável ou um layout de largura fixa?
Devido a diferentes resoluções de tela, a experiência do usuário navegando em um site pode ser diferente. É melhor fazer o layout do site com uma largura fixa? (e, em caso afirmativo, deve haver larguras estáticas diferentes para resoluções padrão?) Ou um site deve sempre ser definido em largura variável?
Eu não acho que haja uma resposta fácil aqui, porque, em última análise, depende do que você está construindo e para quem está construindo. Sites de largura fixa e sites de largura variável têm suas vantagens e desvantagens.
Uma coisa que devo salientar aqui, não falarei sobre experiências móveis para sites fixos/fluidos, porque sites móveis são melhores quando o design é específico para dispositivos móveis, não uma porta de um site de desktop para uma plataforma móvel.
Largura Fixa - Vantagens
Um site de largura fixa é uma experiência mais consistente e mais rápida de se desenvolver do que um site de largura variável. Ele também permite que o designer tenha mais controle sobre a apresentação, porque você pode definir valores rígidos para larguras, comprimentos de linha, tamanhos de tipografia etc. É também mais fácil de manter do que um site de largura variável.
Largura fixa - Desvantagens
Por outro lado, os designs de largura fixa começam a falhar quando os casos do Edge aparecem. No momento, é muito comum as pessoas projetarem sites para um monitor com resolução de 1024px de largura, mas ainda existem pessoas com máquinas de resolução mais baixa. No momento, estou trabalhando em um aplicativo que foi projetado usando uma grade de 960 pixels; Dei uma olhada nas análises hoje e notei que 3% dos usuários estavam em monitores de 800 x 600 e cerca de 5% do total estavam em resoluções abaixo de 1024 x 768. Esses usuários provavelmente estão tendo uma experiência muito ruim porque o site tem largura fixa .
Largura do fluido - Vantagens
A largura do fluido permite que o design seja expandido com base nas configurações do usuário; o design se adapta a eles, o que é uma coisa boa. Isso permite que o site mantenha um espaço negativo proporcional, para que ele nunca pareça muito confuso ou muito aberto (a menos que tenha sido especificamente projetado dessa maneira).
Largura do fluido - Desvantagens
Infelizmente, os designs de largura de fluido também não são impermeáveis aos gabinetes Edge. Quando as larguras ficam muito finas ou muito grandes, coisas ruins podem acontecer, especialmente no texto. Comprimentos de linha muito curtos ou muito longos são essencialmente ilegíveis. Além disso, muitas formas de mídia, como imagens ou objetos Flash, são difíceis de dimensionar em projetos de largura de fluido; IE requer javascript para redimensionar as imagens, caso contrário, elas serão pixelizadas).
Web design responsivo
Algumas pessoas mostraram exemplos, mas ainda não se referiram a essa técnica pelo nome. Ethan Marcotte recentemente cunhou o termo para descrever layouts de fluidos que podem mudar completamente com base na resolução da tela do usuário (veja detalhes aqui ). Trata-se de um híbrido de largura fixa e largura de fluido - permite definir mínimos e máximos para que os comprimentos de mídia ou linha não fiquem fora de controle e também permite que o design se ajuste às configurações do usuário. Obviamente, essa técnica também tem suas próprias vantagens e desvantagens. Embora tenha fornecido um layout escolhido especificamente para as configurações de um usuário, esse tipo de site é difícil de desenvolver. Nem todos os navegadores suportam as consultas de mídia necessárias para fazer isso. Além disso, você está essencialmente desenvolvendo vários layouts, estendendo a quantidade de tempo necessária para criar e manter.
Eu acredito que é impossível colocar um cobertor "Sempre use isso" ou "Nunca use isso"; Eu diria que você deve sempre avaliar suas necessidades antes de tomar uma decisão. Na maioria dos casos, sinto que um layout de largura fixa servirá a seus propósitos, mas que um layout fluido ou responsivo pode fornecer uma experiência de usuário muito melhor, apenas com o custo de uma dificuldade extra.
O problema com o uso de largura variável de 100% é que ele realmente não é exibido corretamente para usuários com as telas menores e maiores. Geralmente, projetarei minha seção de conteúdo principal para a norma definindo uma largura mínima/máxima e depois centralizarei o conteúdo importante (fixo). Você pode ter elementos de design de largura variável (uma vez que não são tão importantes) que se esticam/encolhem para preencher a tela.
Dessa forma, as informações importantes sempre (espero) são exibidas corretamente, com boa aparência em muitas resoluções.
Não sou web designer, mas acho que idealmente você deve fazer um layout fluido. Ou seja, um layout que será alterado automaticamente (e dinamicamente) de acordo com a largura atual. Dessa forma, dispositivos estreitos, como telefones, são bem suportados, assim como todas as várias larguras de tela.
A postagem no blog Finalmente, um Hicksdesign fluido explica e domina a técnica. Ele possui 3 layouts de coluna, 2 colunas e uma coluna, selecionados de acordo com a largura da janela do navegador.
É difícil ler o texto quando o comprimento da linha fica muito longo. Portanto, para sites de largura variável, é necessário que haja pelo menos uma largura máxima para todas as áreas de texto para manter a legibilidade.
É muito mais difícil fazer com que um site de largura variável tenha uma boa aparência.
Depende do que estou trabalhando, mas continuo inclinado a sites de largura fixa. O motivo é que ele permite controlar melhor a interface do usuário e mantê-la consistente nos tamanhos de tela. Muitos locais com largura de fluido parecem terríveis em monitores maiores/menores (dependendo do que eles foram projetados).
Regra geral para mim:
- Se a usabilidade do site é amplamente dependente da interface e/ou o conteúdo é principalmente texto: largura fixa
- Se o site tiver uma interface mínima, mas o conteúdo for em grande parte visual (sites de fotos ou aplicativos de mapas, por exemplo), então busco fluidez.
Aqui está uma grande descrição de alguns prós/contras: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- para você /
Sempre que posso, tento não definir a altura e a largura específicas de um objeto em px, mas em %
Sugiro considerar a largura variável ou fornecer um layout alternativo para telas mais amplas.
Se você optar por uma largura fixa - verifique se ela não é pequena! Eu já vi alguns sites com uma largura de 500 ou 600px, que tornam a leitura do site uma digitalização das páginas amarelas.
Sou fã da abordagem do The Man In Blue de fornecer layouts alternativos com base na largura disponível: veja a demonstração ao vivo aqui
Convém criar o layout do seu site na orientação paisagem. Mais e mais monitores widescreen estão sendo usados, com grandes resoluções de 1920x1080 (sendo esta a mais comum). Você já tentou maximizar uma janela do navegador exibindo um layout fixo em retrato? É como metade a dois terços da tela preenchida com a cor/imagem do plano de fundo.
É bom que o Windows 7 permita redimensionar rapidamente uma janela para metade da tela e colá-la ao lado: WindowsKey + Left/Right
A largura variável é provavelmente o caminho a seguir, porque, com uma largura fixa, algumas pessoas podem pensar que seu site é muito pequeno para o monitor e outras podem achar que é muito grande para o monitor.
Depende do conteúdo do site. Se houver muito texto, a largura variável fará mais sentido, pois o texto pode se espalhar e os usuários podem lê-lo com mais eficiência. Se for mais parecido com um site de marketing em que a aparência é mais importante, escolha largura fixa, pois é muito mais difícil criar um site de largura fixa com uma ótima aparência.
Quaisquer suposições feitas ao projetar um layout de tamanho fixo estão erradas para alguns de seus usuários. A única maneira de fornecer uma experiência satisfatória para todos é usar um design flexível e responsivo.
Dois problemas (tentando evitar duplicação):
Você não pode assumir que o navegador é de tela cheia; as análises que relatam a resolução da tela contam apenas parte da história.
Você não pode assumir que os usuários estão usando os mesmos tamanhos de fonte que você. As linhas que são muito largas para serem lidas no tamanho da fonte podem não ser muito lidas para alguém que teve que aumentar o tamanho da fonte em alguns pontos; por outro lado, a coluna para a qual você define uma largura fixa com base nas configurações de fonte pode significar que o usuário vê cinco palavras por linha ou algo assim.
Para ser utilizável por todos os usuários, seu web design precisa usar todo e apenas o espaço que o navegador lhe oferece. Confie no usuário para dimensionar seu navegador para otimizar sua própria experiência; você deve trabalhar dentro desses limites. Essa abordagem funciona em monitores de 30 "e tablets de 7" (e até telefones, se você não criou uma versão específica para celular).