Site funcionando em todas as resoluções

Dia desses recebi um email do nosso querido leitor Raenner, de Itabira – MG. No email ele pergunta:

Bruno, queria saber como fazer que um site funcione em
todas as resoluções. usando Dreamweaver. Se não der para colocar no
Avante, pelo menos dê uma dica, irá ser muito interessante um post no
Avante sobre este assunto.

Ok, Raenner, então vamos lá. Existe muito, mas muitos textos, artigos e dicas referentes a este assunto na Internet. O que vou fazer aqui é comentar um deles. Primeiro leia o texto  publicado no Fator W, Projetar layout líquido é justiça com o usuário, de Leonardo Procópio. Nesse artigo, Leonardo nos mostra as vantagens de utilizar um layout líquido.  Layout líquido ou fluído  é nada mais do que um site diagramado com valores de largura em porcentagem. Um exemplo, sem frescura, é quando você coloca tudo dentro de divs com larguras em porcentagem. Capiche?

Pois então, no texto Leonardo cita também as desvantagens do layout líquido.

A desvantagem do layout líquido é que ele é bem mais difícil de projetar que o fixo. O desenvolvedor tem que observar diferentes resoluções, não pode usar posicionamento absoluto para os objetos e uma série de outros fatores.

É, em algumas resoluções o site pode ficar feio, o texto muito solto e comprido e todo o site ficar com aspecto de “linguiça”. Por isso que até hoje o layout líquido não pegou. Talvez uma prova disso esteja no próprio layout do Fator W. Veja o que Leonardo disse em 2005:

Aqui no fator W, uso layout líquido. A coluna de informações varia de acordo com a área disponível na tela. Isso permite que tanto quem usa 800×600, 1024×768 ou 1152×864 vejam o site usando todo o espaço disponível na tela.

É, mas se você notar, ao entrar no Fator W, o site não é mais líquido. Quem entra no site utilizando resolução 800 x 600 tem que apelar para a barra de rolagem horizontal. Acho que até o Leonardo cansou do layout líquido por conta da dificuldade de trabalhar com esse tipo de construção. O texto foi escrito em 2005, portanto, de lá pra cá o layout do Fator W deve ter mudado.

Bem, ainda prefiro o layout fixo, prevendo uma resolução mínima. Como sei por estatística que mais de 90% dos meus visitantes usam resoluções acima de 1024 x 768, trabalho com essa resolução mínima, criando o layout baseando-se nessa resolução.  Porém, daqui a um tempo essa minha preferência pode ser mudada. Há 10 anos criava sites baseados em resoluções 640 x 480. O que precisamos então é ficar antenados nas mudanças.

Para o alto e Avante!

Bruno Ávila é publicitário e pós-graduando em Marketing com ênfase em ambiente digital pela FGV Brasília. Abriu sua própria agência em 1997, atendendo grandes clientes brasileiros. De 2001 a 2003 foi diretor de criação web do Grupo de Comunicação O Povo. Foi ganhador de três prêmios IBest, maior prêmio da Internet brasileira. Há 10 anos dirige a Ávila EAD, empresa voltada para soluções em educação a distância. Ministra cursos específicos sobre Design, Publicidade e Empreendedorismo por onde já passaram mais de 10 mil alunos. Bruno é autor do livro "Quero ser um Web Designer", um guia para os que desejam iniciar no mercado de web design.

5 Comentários

  • Jonathan

    16/07/2008 às 12:06 am

    Muito bom esse artigo.
    Não vou m meter a besta de fazer um layout líquido… rsrsrs

    Abraços!
    fuix…

  • Wellison

    16/07/2008 às 4:26 pm

    Brunao, me diga se eu estiver errado, mas Layout liquido mesmo so em Flash né? Pq fazendo o site todo em flash tudo diminuiu ou aumenta sem desorganizar nada né!? O ruim disso é justamente fazer tudo em Flash, pra atualizar nao é tao pratico. Abracao.

  • Guilherme

    22/07/2008 às 12:14 am

    Realmente , um fato a se pensar , eu já até utilizei alguns scripts de javascript que de adequam com a resolução de cada browser visitante , assim vendo suas configurações de resolução e o layout ajustando-se de acordo com o que ele possui no micro , mais , não aconselharia.

    muito bom Brunão :D

  • valter donizeti melo

    06/12/2009 às 5:20 pm

    Bruno:
    Em resumo, como faço para que um site com css permaneça fixo, examente com os mesmos 950px em todos resoluções.
    Ah.. o site tem imagens.
    Quantdo tiver tempo, dê um olhadinha.

    http://www.feriaseviagens.com.br abra a página de monte verde e
    dê uma olhada no código fonte.

    Por favo me dê essa força.
    Valter

  • Kaique Prazeres

    30/11/2013 às 6:13 am

    É um assunto que ainda deixa muito Web Design de cabelo em pé.
    A questão da resolução pode ser um problema quando não se conhece o tipo de monitor que é usado pelo seu publico alvo.
    Mas é como o tio Bruno falou, é necessário tomar como base uma resolução que sabemos que a mais comum nos desktops hoje em dia e que pelo menos boa parte dos usuarios a possuam que é a de 1024×768.
    Essa nunca falha.
    Vale uma ressalva também quanto a este padrão, temos observado que está mudando, o que antigamente era padrão no 1024×768 hoje em dia é 1366×768.
    Já a questão de criar Layout fluído, realmente, é um pouco mais complicada, exige um pouco mais de estudo e dedicação, visto que é necessário ter paciência para fazer calculos de porcentagens também.
    Apesar que isso é o minimo, mas esse minimo pode provocar um atraso consideravelmente preocupante no desenvolvimento do projeto.
    Como solução para as diferentes resoluções de sites, é possível adotar a técnica do design adaptável. É uma ótima técnica, inclusive pode ser aplicada juntamente a técnica do layout fluído e o responsivo.
    Mas, vai da necessidade de cada um, é claro que cada uma das opções que citei tem suas vantagens e desvantagens, mas, as combinações possuem mais vantagens e vale apena.
    Devemos considerar também que os sites que desenvolvemos, devem ter também o foco na experiência do usuário e não só no conteúdo, fazendo com que o mesmo se adapte a qualquer dispositivo sem omitir o conteúdo sem a devida necessidade.
    Atualmente estou estudando muito sobre o layout responsivo, adaptável e fluído ou líquido, quero chegar a uma boa conclusão a respeito do assunto e desenvolver técnicas que facilitem a construção de sites dos tipos citados.
    Abração a todos!

  • Comente

    *
    *

    counter

    O Significado das Cores

    Receba gratuitamente o eBook "O Significado das Cores" onde Bruno Ávila mostra os sentimentos positivos e negativos transmitidos pelas cores, auxiliando você a eleger a melhor opção para o seu projeto.

    Coloque seu email e receba gratuitamente: