Web design sem tablets - Tableless web design

Cascading Style Sheets
Conceitos
Filosofias
Ferramentas
Comparações

O design da web sem tabelas (ou layout da web sem tabelas ) é um método de design da web que evita o uso de tabelas HTML para fins de controle de layout de página . Em vez de tabelas HTML, linguagens de folha de estilo como Cascading Style Sheets (CSS) são usadas para organizar elementos e texto em uma página da web .

História

HTML é uma linguagem de marcação cuja apresentação visual foi inicialmente deixada para o usuário. No entanto, à medida que a Internet se expandiu do mundo acadêmico e de pesquisa para o mainstream em meados da década de 1990, e se tornou mais voltada para a mídia, os designers gráficos buscaram maneiras de controlar a aparência visual de suas páginas da web. Como popularizado especialmente pelo designer David Siegel em seu livro Creating Killer Web sites , tabelas e espaçadores (geralmente imagens GIF de pixel único transparentes com largura, altura ou margens especificadas explicitamente) foram usados ​​para criar e manter layouts de página.

No final da década de 1990, os primeiros editores WYSIWYG razoavelmente poderosos chegaram ao mercado, o que significava que os web designers não precisavam mais de um conhecimento técnico de HTML para construir páginas da web. Esses editores incentivaram indiretamente o uso extensivo de tabelas aninhadas para posicionar os elementos de design. Conforme os designers editavam seus documentos nesses editores, códigos desnecessários e elementos vazios eram adicionados ao documento. Além disso, designers não qualificados costumavam usar tabelas mais do que o necessário ao usar um editor WYSIWYG. Essa prática freqüentemente levava a muitas tabelas aninhadas dentro de tabelas, bem como a tabelas com linhas e colunas desnecessárias. O uso de editores gráficos com ferramentas de fatiamento que geram HTML e imagens diretamente também promoveu um código ruim, com tabelas frequentemente tendo muitas linhas de 1 pixel de altura ou largura. Às vezes, muito mais linhas de código foram usadas para renderizar o conteúdo do que o próprio conteúdo em si.

A dependência de tabelas para fins de layout causou uma série de problemas. Muitas páginas da web foram projetadas com tabelas aninhadas em tabelas, resultando em grandes documentos HTML que usam mais largura de banda do que documentos com formatação mais simples. Além disso, quando um layout baseado em tabela é linearizado, por exemplo, ao ser analisado por um leitor de tela ou um mecanismo de pesquisa, a ordem resultante do conteúdo pode ser um tanto desordenada e confusa.

Cascading Style Sheets (CSS) foi desenvolvido para melhorar a separação entre design e conteúdo e voltar a uma organização semântica de conteúdo na web. O termo "design tableless" implica o uso de CSS em vez de tabelas de layout para posicionar elementos HTML na página. As tabelas HTML ainda têm seu lugar legítimo ao apresentar informações tabulares em páginas da web e às vezes ainda são usadas como dispositivos de layout em situações para cujo suporte a CSS é pobre ou problemático, como centralizar verticalmente um elemento. Outra área onde as tabelas ainda são usadas são os e-mails, porque muitos clientes de e-mail populares não acompanharam a renderização moderna de HTML e CSS. Em tal cenário, e- os mailers perdem um pouco de seu alinhamento estrutural e criativo.

Adoção

A especificação CSS1 foi publicada em dezembro de 1996 pelo W3C com o objetivo de melhorar a acessibilidade da web e enfatizar a separação dos detalhes da apresentação nas folhas de estilo do conteúdo semântico dos documentos HTML . CSS2 em maio de 1998 (posteriormente revisado em CSS 2.1 e CSS 2.2) estendeu CSS1 com recursos para posicionamento e layout de tabela.

A preferência por usar tabelas HTML em vez de CSS para controlar o layout de páginas inteiras da web deve-se a vários motivos:

  • o desejo dos editores de conteúdo de replicar seus elementos de design corporativo existentes em seu site;
  • as limitações no momento do suporte CSS em navegadores;
  • a base instalada de navegadores que não suportam CSS;
  • a falta de familiaridade dos novos web designers com os padrões CSS;
  • a falta de conhecimento ou preocupação com as razões (incluindo semântica HTML e acessibilidade na web ) para usar CSS em vez do que era percebido como uma maneira mais fácil de atingir rapidamente os layouts pretendidos, e
  • uma nova geração de ferramentas de web design WYSIWYG que encorajou essa prática.

Marcos na adoção de layouts baseados em CSS incluem o Web Standards Project 'Browser campanha s actualização de Fevereiro de 2001 e revista web design A List Apart ' s redesenho simultânea, seguida pela Wired redesenhar em 2002. O CSS Zen Garden website, lançado em 2003, foi creditado com a popularização de layouts tableless.

Justificativa

A finalidade pretendida e semântica das tabelas HTML reside em apresentar dados tabulares, em vez de dispor as páginas. Os benefícios de usar CSS para layout de página incluem acessibilidade aprimorada das informações para uma variedade maior de usuários, usando uma ampla variedade de agentes de usuário . Há uma economia de largura de banda como um grande número de semanticamente sem sentido <table>, <tr>e <td>as tags são removidas dezenas de páginas deixando menos, mas mais significativo cabeçalhos, parágrafos e listas. As instruções de layout são transferidas para folhas de estilo CSS de todo o site, que podem ser baixadas uma vez e armazenadas em cache para reutilização enquanto cada visitante navega no site. Os sites podem se tornar mais fáceis de manter, pois todo o site pode ser reestilizado ou remarcado em uma única passagem, apenas alterando a marcação do CSS específico, afetando todas as páginas que dependem dessa folha de estilo. Novo conteúdo HTML pode ser adicionado de forma que regras de layout consistentes sejam imediatamente aplicadas a ele pelo CSS existente sem nenhum esforço adicional.

Vantagens

Acessibilidade

Artigos principais: Acessibilidade na web e otimização de mecanismos de pesquisa

Por causa do rápido crescimento da Internet, da expansão da legislação de discriminação por deficiência e do uso crescente de telefones celulares e PDAs , é necessário que o conteúdo da Web seja disponibilizado para usuários que operam uma ampla variedade de dispositivos além do computador desktop relativamente uniforme e do ecossistema de monitores CRT a web se tornou popular pela primeira vez em. O design da Web sem tabletes melhora consideravelmente a acessibilidade da Web nesse aspecto, já que as tabelas muito largas para uma tela precisam ser roladas para os lados para serem lidas por completo, enquanto o texto pode ser contornado.

Leitores de tela e dispositivos braille têm menos problemas com designs sem tabelas porque seguem uma estrutura lógica. O mesmo é verdadeiro para os crawlers dos mecanismos de busca , os agentes de software que a maioria dos editores de sites espera que encontrem suas páginas, classifiquem-nas com precisão e, assim, permitam que usuários em potencial as encontrem facilmente nas buscas apropriadas.

Como resultado da separação de design (CSS) e estrutura (HTML), também é possível fornecer layouts diferentes para dispositivos diferentes, por exemplo , handhelds , telefones celulares, etc. Também é possível especificar uma folha de estilo diferente para impressão, por exemplo, para ocultar ou modificar a aparência de anúncios ou elementos de navegação que são irrelevantes e incômodos na versão para impressão da página.

As diretrizes de acessibilidade de conteúdo da Web do W3C no. 3 estados "usar marcações e folhas de estilo e fazê-lo corretamente." O ponto de verificação 3.3 da diretriz, um ponto de verificação de prioridade 2, diz "use folhas de estilo para controlar o layout e a apresentação".

Economia de largura de banda

O design tableless produz páginas da web com menos tags HTML usadas exclusivamente para posicionar o conteúdo. Isso normalmente significa que as próprias páginas ficam menores para fazer o download. A filosofia implica que todas as instruções sobre layout e posicionamento sejam movidas para folhas de estilo externas. De acordo com os recursos básicos do HTTP , como raramente mudam e se aplicam em comum a muitas páginas da web, eles serão armazenados em cache e reutilizados após o primeiro download. Isso reduz ainda mais a largura de banda e os tempos de download no site.

Capacidade de Manutenção

A manutenção de um site pode exigir mudanças frequentes, pequenas e grandes, no estilo visual de um site, dependendo da finalidade do site. No layout baseado em tabela, o layout é parte do próprio HTML. Assim, sem o auxílio de editores visuais baseados em modelos, como editores de HTML , alterar o layout posicional dos elementos em um site inteiro pode exigir muito esforço, dependendo da quantidade de alterações repetitivas necessárias. Mesmo o uso do sed ou utilitários globais de localização e substituição semelhantes não podem aliviar o problema inteiramente.

No layout tableless usando CSS, as informações de layout podem residir em um documento CSS. Como as informações de layout podem ser centralizadas, é possível que essas alterações possam ser feitas rápida e globalmente por padrão. Os próprios arquivos HTML podem não precisar ser ajustados ao fazer alterações no layout.

Além disso, como as informações de layout podem ser armazenadas externamente ao HTML, pode ser muito fácil adicionar novo conteúdo em um design tableless, seja modificando uma página existente ou adicionando uma nova página. Por outro lado, sem esse design, o layout de cada página pode exigir uma alteração manual mais demorada de cada instância ou o uso de utilitários globais de localização e substituição. No entanto, os proprietários de sites geralmente desejam que determinadas páginas sejam diferentes de outras no site por um período curto ou longo. Freqüentemente, isso exigirá que uma folha de estilo separada seja desenvolvida para essa página. O conteúdo da página (ou modelo) geralmente pode permanecer inalterado, o que não é o caso em um design baseado em tabelas.

Desvantagens

Como o CSS pode ser armazenado em cache, um layout inteiramente baseado em CSS pode ser renderizado incorretamente se alterações forem feitas e um cliente ainda estiver usando uma folha de estilo desatualizada. Isso pode ser mitigado com o desenvolvimento cuidadoso e o uso de técnicas de cachebuster .

Veja também

Referências

links externos