Web design sem mesa

O design da Web sem tabela (ou layout da Web sem tabela ) é 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 tornou-se mais orientada 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 Criando sites matadores , tabelas e espaçadores (geralmente imagens GIF transparentes de pixel único com largura, altura ou margens explicitamente especificadas) foram usados ​​para criar e manter layouts de página. ^[1]

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. ^[2]Esses editores indiretamente encorajaram o uso extensivo de tabelas aninhadas para posicionar elementos de design. À medida que 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 provavelmente usariam tabelas mais do que o necessário ao usar um editor WYSIWYG. Essa prática frequentemente levava a muitas tabelas aninhadas em tabelas, bem como tabelas com linhas e colunas desnecessárias. O uso de editores gráficos com ferramentas de fatiamento que produzem HTML e imagens diretamente também promoveu código ruim com tabelas muitas vezes com muitas linhas de 1 pixel de altura ou largura. Às vezes, muito mais linhas de código eram usadas para renderizar o conteúdo do que o próprio conteúdo real.

A dependência de tabelas para fins de layout causou vários 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 pouco confusa e confusa.

Cascading Style Sheets (CSS) foram desenvolvidos para melhorar a separação entre design e conteúdo e voltar para uma organização semântica de conteúdo na Web. ^{O termo "design sem tabela "} implica o uso de CSS em vez de tabelas de layout para posicionar elementos HTML na página. em situações em que o suporte a CSS é ruim ou problemático, como centralizar verticalmente um elemento. Outra área em que 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. Nesse cenário, e-mails complexos perdem parte de seu alinhamento estrutural e criativo.

Adoção

A especificação CSS1 foi publicada em dezembro de 1996 pelo W3C ^[4] com o objetivo de melhorar a acessibilidade na web e enfatizar a separação de detalhes de apresentação em folhas de estilo do conteúdo semântico em documentos HTML . CSS2 em maio de 1998 (mais tarde revisado em CSS 2.1 e CSS 2.2) estendeu CSS1 com facilidades para posicionamento e layout de tabela.

A preferência pelo uso de tabelas HTML em vez de CSS para controlar o layout de páginas inteiras da web deveu-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 a CSS em navegadores;
• a base instalada de navegadores que não suportavam CSS;
• a falta de familiaridade dos novos web designers com os padrões CSS;
• a falta de conhecimento ou preocupação com os motivos (incluindo semântica HTML e acessibilidade na web ) para usar CSS em vez do que foi percebido como uma maneira mais fácil de alcançar rapidamente os layouts pretendidos e
• uma nova geração de ferramentas de web design WYSIWYG que incentivou essa prática.

Marcos na adoção de layouts baseados em CSS incluem a campanha Browser Upgrade do Web Standards Project de fevereiro de 2001 e o redesenho simultâneo da revista de web design A List Apart, seguido pelo redesenho do Wired em 2002. [ 5 ^] O CSS Zen Garden website, lançado em 2003, foi creditado com a popularização de layouts sem mesa. ^[6]

Justificativa

A finalidade pretendida e semântica das tabelas HTML reside na apresentação de dados tabulares ^{[3] [7]} em vez de apresentar páginas. ^[8] 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 grande variedade de agentes de usuário . Há economia de largura de banda, pois um grande número de semanticamente sem sentido <table>e <tr>as <td>tags são removidas de dezenas de páginas, deixando menos títulos, parágrafos e listas, mas mais significativos. As instruções de layout são transferidas para folhas de estilo CSS em todo o site, que podem ser baixadas uma vez e armazenadas em cachepara 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 renomeado em uma única passagem simplesmente 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

Devido ao rápido crescimento da Internet, à expansão da legislação de discriminação de deficiência e ao uso crescente de telefones celulares e PDAs , é necessário que o conteúdo da Web seja acessível aos usuários que operam uma ampla variedade de dispositivos além do ecossistema relativamente uniforme de computadores desktop e monitores CRT . a web se tornou popular pela primeira vez. O design da Web sem tabelas melhora consideravelmente a acessibilidade da Web a esse respeito, pois as tabelas muito largas para uma tela precisam ser roladas lateralmente para serem lidas na íntegra, enquanto o texto pode ser contornado.

Leitores de tela e dispositivos braille têm menos problemas com designs sem mesa porque seguem uma estrutura lógica. O mesmo vale para os rastreadores da Web de mecanismos de pesquisa , os agentes de software que a maioria dos editores de sites esperam encontrar suas páginas, classificá-las com precisão e, assim, permitir que os usuários em potencial as encontrem facilmente em pesquisas apropriadas.

Como resultado da separação de design (CSS) e estrutura (HTML), também é possível fornecer layouts diferentes para diferentes dispositivos, 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 irrelevantes e incômodos na versão para impressão da página.

As Diretrizes de Acessibilidade de Conteúdo da Web do W3C ' guideline no. 3 afirma "usar marcação e folhas de estilo e fazê-lo corretamente." ^[9] 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". ^[10]

Economia de largura de banda

O design sem tabela produz páginas da Web com menos tags HTML usadas apenas para posicionar o conteúdo. Isso normalmente significa que as próprias páginas ficam menores para download. A filosofia implica que todas as instruções relativas ao layout e posicionamento sejam movidas para folhas de estilo externas. De acordo com os recursos básicos do HTTP , como eles 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 em todo o site. ^{[11] [12]}

Manutenibilidade

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 faz parte do próprio HTML. Assim, sem a ajuda de editores visuais baseados em templates, como editores HTML , alterar o layout posicional de elementos em um site inteiro pode exigir muito esforço, dependendo da quantidade de alterações repetitivas necessárias. Mesmo empregar sed ou utilitários globais semelhantes de localizar e substituir não pode aliviar totalmente o problema.

No layout sem tabela usando CSS, as informações do 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 de forma rápida e global por padrão. Os próprios arquivos HTML podem não precisar ser ajustados ao fazer alterações de 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 sem tabela, 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 localizar e substituir. No entanto, os proprietários de sites geralmente desejam que determinadas páginas sejam diferentes de outras no site por um curto período ou longo prazo. Isso geralmente 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 totalmente baseado em CSS pode ser renderizado incorretamente se forem feitas alterações e um cliente ainda estiver usando uma folha de estilo desatualizada. Isso pode ser mitigado com desenvolvimento cuidadoso e uso de técnicas de cachebuster .

Veja também

• Enquadramento (World Wide Web)
• Web design responsivo
• Alfabetização Web (design e acessibilidade)
• Santo Graal (web design)

Referências

Links externos

• COMO FAZER Layout do W3C Tableless
• 13 razões pelas quais o CSS é superior às tabelas no design do site
• Open Designs (uma coleção de modelos da Web sem tabela compatíveis com W3C)