Boss — Por quê fazer o redesign de um site usando Tableless?

Este é uma documento que fiz para a empresa onde trabalho, acho que pode ter utilidade quando precisar falar sobre as vantagens de desenvolver utilizando padrões, tableless, CSS, etc ….

——ƒ——

“Redesign de um site usando tableless”.

Atualização, organização e otimização.

Atualmente o site possui o layout feito com ‘tabelas’, há por volta de 800 linhas de html, css e Java script em um único arquivo. Também existem vários erros de aninhamento de tags na página.

Ao substituir tabelas por layout tableless e corrigir o aninhamento diminuiremos o tempo de carregamento da página para o cliente, e por diminuir o consumo de banda teremos uma melhora na performace do servidor.

Dividiremos o desenvolvimento em 3 arquivos: conteúdo (HTML), layout (CSS) e comportamento (JS), organizando e facilitando a manutenção.
O aspecto visual não será mudado, será adaptado o existente.

O custo deste projeto é o mesmo de um projeto com tabelas, também estaremos sujeitos a empecilhos e imprevistos. Uma outra questão, em alguns sites que utilizam tabelas para o layout ainda existe diferenças de aspecto visual entre diferentes browsers, problemas com alinhamento de boxes e alinhamento de blocos de texto. Podemos solucionar estes problemas como também pode vir a ocorrer outros que certamente poderemos solucionar.
Custos

  • Conhecimento de CSS para atualizar.
  • Alterações futuras precisam ser feitas com cuidado para não prejudicar o projeto e trazer de volta a estrutura desorganizada e ultrapassada.
  • Talvez alguma área do layout precise ser alterada no alinhamento e/ou no tamanho, existem algumas diferenças entre tabelas e CSS.

Um prazo estipulado em 3 à 4 semanas, calculo que seja feito em menor período, mas o prazo adjacente seria para imprevistos que possam aparecer no desenvolvimento do projeto.

Benefícios:

  • Diminuir o tamanho do arquivo (estimado em até 20% a 30%), diminuir tempo de donwload, diminua consumo de banda do servidor, diminua o tempo de render no browser.
  • O usuário precisará baixar o estilo em CSS uma única vez, o css fica em cache.
  • Melhorar a semântica, melhorar a acessibilidade, melhorar a indexação dos engines de busca.
  • Melhorar o acesso a diversos dispositivos (leitores de telas, mobile).
  • Facilitar o redesign, diminuir o numero de linhas, separar as camadas (conteúdo, layout, comportamento) em arquivos.
  • Substituição de metodologia de desenvolvimento web ultrapassada por uma metodologia atual.

A pagina atual:

  • A pagina possui layout a base de ‘tabelas’, aumentando o tamanho do arquivo e o tempo de render.
  • Possui vários erros de aninhamento de tags pela página, aumentando o tempo de render no browser.
  • A alguns CSS embutidos no arquivo HTML, impossibilitando o cachê para arquivo css.
  • Um arquivo, espaguete de HTML, CSS, JAVASCRIPT; com 800 linhas.

A pagina após o redesign:

  • Estrutura no conceito tableless, seria feito a remoção das tabelas e sua substituição por tags html apropriadas.
  • Correto animanhento das tags (diminuindo o tempo de render no browser).
  • Arquivo CSS externo (o usuário faz o donwload uma única vez ou quando houver atualização no CSS), isto colabora para diminuir o total de bytes transferidos.
  • Diminuir o numero de linhas no arquivo e organizar as camadas.

——ƒ——

Qualquer sugestão para melhorar o discurso será bem recebida.

Anúncios

6 Respostas para “Boss — Por quê fazer o redesign de um site usando Tableless?

  1. Gostei da descrição.
    Adorava ver um exemplo do seguinte tipo:
    aqui está uma tabela convencional – aqui está o redesign proposto

    Parabéns.
    Um abraço

    José Manuel

  2. acho que toda essa coisa de seguir padrões e de metodologia ultrapassada não tem lá muito valor para o cliente… acharia mais interessante vc focar em coisas que têm valor para ele:

    + quanto de bandwidth ele vai gastar a menos por mês com a diminuição das páginas
    ( vc pode fazer uma simulação como o cara que postou antes e fazer um teste de stress com 100 acessos a mesma página… pra mostrar os ganhos de ter parte do material em cache e de ter menos dados pra transferir )

    + páginas lentas e mal alinhadas afastam os usuários. então argumente que o ganho de performance aliado ao aumento da base de usuários acessíveis (por ser uma solução que vai diminuir os problemas de incompatibilidades entre diferentes browsers e aumentar a indexabilidade por engines de busca) podem aumentar o número de acessos do site

    + mostre o quanto em eficiência na manutenção do site ele vai ganhar. sites em tabelas são mais difíceis de atualizar e de reorganizar.

    acho q esses pontos são mais importantes para um cliente do que

  3. Gostei, simples e coeso, realmente é assim que devemos fazer.

  4. Nós usamos tableless… porém o tempo para desenvolvimento da página é MUITO maior. É uma pena que o Dreamweaver ainda não consiga fazer os ajustes e apresentar o layout… isso ajudaria bastante.

    []’s

    Ricardo

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s