Busca Interna.

Digite expressão ou palavra-chave.

• Links
• Contatos
• Mapa do site
• Feeds

Destaques.

• Vídeo: Acessibilidade Web: Custo ou benefício?
  Esse vídeo com 12 minutos mostra os principais obstáculos e soluções de acessibilidade e usabilidade na web.
• Lista Acesso Digital A Acesso Digital criou uma lista de discussão para tratar de acessibilidade na web. Quer participar? É só se inscrever.
• Recomendações para a Acessibilidade do Conteúdo da Web 1.0
  Versão do WCAG 1.0 em português de Portugal. Os itens de acessibilidade web preconizados pelo W3C através do WCAG 1.0, apesar de serem os mais discutidos internacionalmente, ainda servem, em sua maioria, como padrão para desenvolvimento de páginas web acessíveis em todo o mundo.
• Diretrizes para a Acessibilidade dos Conteúdos da Web 2.0
  Versão do WCAG 2.0 em português do Brasil. A versão WCAG 2.0 vem substituir as Diretrizes de Acessibilidade para o Conteúdo da Web 1.0 [WCAG1.0], que foram publicadas como uma Recomendação W3C em Maio de 1999. Embora seja possível seguir tanto as WCAG 1.0 como as WCAG 2.0 (ou ambas), o W3C recomenda que os conteúdos novos e atualizados utilizem a versão WCAG 2.0. O W3C recomenda também que as políticas de acessibilidade da Web façam referência às WCAG 2.0.
• WCAG Samurai em Português.
  Esta é uma errata às WCAG 1.0. A WCAG Samurai é uma alternativa à WCAG 2.0. Você pode seguir a WCAG 2.0 ou esta errata, ou mesmo não seguir nenhuma delas, mas não é possível seguir ambas.

Layout: Fixo, Líquido ou Elástico?

Ivo Gomes - 19 de Outubro de 2006.

Ao conceber ou redesenhar um web site, normalmente coloca-se sempre esta dúvida: o layout vai ser fixo ou líquido?

Um layout fixo permite ter mais controle sobre o web site porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira. Um layout líquido ou fluídico permite que a página se adapte à largura da tela do usuário, ocupando todo o espaço visível em vez de ficar encostada a um canto ou centralizada, como acontece com os layouts fixos.

Ambas as soluções têm os seus pontos positivos e negativos.

Layout Fixo.

Pontos positivos:

• O web designer tem controle sobre a forma como a informação é apresentada;
• As linhas de texto têm uma largura fixa e curta, o que facilita a leitura de texto na tela;

Pontos negativos:

• Numa tela com uma resolução grande, o web site fica encostado a um dos lados ou centrado na página, com muito espaço disponível à sua volta;
• Menor acessibilidade, uma vez que o layout não se adapta às necessidades do usuário;

Layout Líquido/Fluídico.

Pontos positivos:

• Os conteúdos ocupam toda a área visível da tela, permitindo transmitir mais informação;
• Deixa de haver espaço vazio à volta do website;
• Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de tela do usuário;

Pontos negativos:

• Maior dificuldade na leitura de linhas de texto demasiado longas;
• Perde-se o controle sobre o posicionamento de alguns elementos na página;

Não se pode dizer que um dos layouts seja melhor do que o outro, porque ambos são opções válidas, dependendo do contexto do web site que estamos desenvolvendo. No entanto, existe um ponto intermediário: o layout elástico.

Layout Elástico.

Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluídico. Ou seja, a largura da página é extensível até um certo ponto, a partir do qual se torna fixa. Na prática, isto significa que podemos ter uma página que tenha uma largura mínima de 800px e uma largura máxima de 1280px. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo), a largura não se altera e a página funciona como uma página com layout fixo.

Isto permite ter, ao mesmo tempo, controle dos elementos na página por parte do web designer e controle da largura da janela por parte do usuário, eliminando assim alguns pontos negativos identificados nos dois tipos de layouts anteriores.

Outro item interessante é o fato de, num monitor com uma largura muito grande (vamos imaginar uma tela com 2028px de largura) o nosso web site elástico ocuparia cerca de metade da tela e o texto poderia tornar-se demasiado pequeno para se conseguir ler. Ao aumentar o tamanho do texto no browser (Firefox: CTRL+), a largura da página irá aumentar na mesma escala. Desta forma, o web site irá aumentar a sua largura máxima consoante o tamanho do texto!

Para conseguir este efeito, basta definir a largura máxima da página em unidades "EM". Desta forma, a largura da página irá comportar-se da mesma forma como o tamanho do texto, ou seja, responde aos comandos do usuário para aumentar ou diminuir o seu tamanho.

Se tiverem um monitor com uma resolução grande (superior a 1024px) podem experimentar aumentar o tamanho do texto agora e verão que a largura desta mesma página irá acompanhar o aumento do texto. Caso a largura da janela seja inferior a 1024px, a página mantêm-se fixa e o texto aumenta.

Obs. do MAQ: O layout deste site, o "Acessibilidade Legal", já foi um layout líquido. Entretanto, alterei-o para um layout elástico pelo fato de que alguns usuários reclamarem de que, ao usarem resoluções maiores que 1280 de largura, as informações laterais ficavam distantes e incômodas de serem vistas e utilizadas e, dependendo da tela (widescreem acima de 20 polegadas) e da resolução (acima de 1680) tínha-se de movimentar não somente os olhos, mas até a própria cabeça para se atingir todas as informações. Assim, meu layout preenche toda a tela até 1280 px de largura, exatamente segundo a recomendação do autor. Conforme ele próprio escreveu : "Não se pode dizer que um dos layouts seja melhor do que o outro, porque ambos são opções válidas, dependendo do contexto do web site que estamos desenvolvendo". Entretanto, como estamos aqui considerando a acessibilidade dos sites, não é recomendável o desenvolvimento de layouts fixos, pois impedem a boa utilização deles por pessoas com baixa visão, que aumentam e diminuem o tamanho das letras e das resoluções de tela para maior conveniência de sua visão reduzida.

Disponibilizado em: 24/04/2008.