Existe uma razão de negócios para se esforçando para layout CSS puro?

votos
21

Parece que cada vez que eu tento criar um layout CSS puro que me leva muito mais tempo do que se eu usar uma tabela ou dois. Obtendo três colunas para ser comprimentos iguais com diferentes quantidades de dados parece exigir particulares hacks extravagantes, especialmente quando se lida com questões cross-browser.

Minha pergunta:

Quem são essas algumas mesas vai doer?

Tabelas parecem funcionar particularmente bem em dados tabular - por que eles estão tão criticado neste dia e idade? Google.com tem uma mesa em seu código fonte, assim como muitos outros sites (stackoverflow.com não pelo caminho).

Publicado 07/08/2008 em 22:14
fonte usuário
Em outras línguas...                            


21 respostas

votos
25

Uma vez que este é pilha estouro , eu vou te dar meu resposta do programador

semântica 101

Primeiro dê uma olhada neste código e pensar sobre o que está errado aqui ...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

O problema, claro, é que uma bicicleta não é um carro. A classe de carro é uma classe inadequada para a instância bicicleta. O código é livre de erros, mas é semanticamente incorreto. Ele reflete negativamente sobre o programador.

semântica 102

Agora aplicar esta documentar marcação. Se o documento precisa apresentar dados tabulares, então a tag apropriada seria <table>. Se você colocar a navegação em uma mesa no entanto, então você está fazendo mau uso da finalidade do <table>elemento. No segundo caso, você não está apresentando dados tabulares - você está (mis), utilizando o <table>elemento para alcançar uma meta de apresentação.

conclusão

A quem isso dói? Ninguém. Quem se beneficia se você usar marcação semântica? Você - e sua reputação profissional. Agora vá e fazer a coisa certa.

Respondeu 16/09/2008 em 19:31
fonte usuário

votos
16

Como um monte de coisas, é uma boa idéia que muitas vezes é levado longe demais. Eu gosto de um layout div + css impulsionado porque é geralmente muito fácil de alterar a aparência, mesmo drasticamente, apenas através da folha de estilo. Também é bom para ser amigável para os navegadores de nível inferior, leitores de tela, etc. Mas como a maioria das decisões na programação, o propósito do site e o custo de desenvolvimento devem ser considerados na tomada de decisão. Nenhum dos lados é o caminho certo a seguir 100% do tempo.

BTW, eu acho que todos concordam que as tabelas deve ser usado para dados tabulares.

Respondeu 07/08/2008 em 22:20
fonte usuário

votos
9

No mundo real, suas chances de levar um projeto e totalmente reskinning-lo sem tocar a marcação são bastante remota. É bom para blogs e demos inventado como o csszengarden, mas é um benefício falso em qualquer site com um design moderadamente complexo, realmente. Usando um CMS é muito mais importante.

DIVs mais CSS! = Semânticas, tampouco. Boa HTML é bem interessante para SEO e acessibilidade sempre, se tabelas ou CSS são usados ​​para layout. Você realmente eficientes, web designs rápidos, combinando tabelas realmente simples com algum bom CSS.

layouts de mesa pode ser mais acessível do que layouts CSS, eo inverso também é verdadeiro - que depende totalmente do fim fonte do conteúdo, e só porque você evitou tabelas não significa usuários com leitores de tela será automaticamente ter um bom tempo em seu site . tabelas de layout são irrelevantes para o acesso leitor de tela desde que o conteúdo faz sentido quando linearizada, exatamente o mesmo que se você fizer layout CSS. tabelas de dados são diferentes; eles são realmente difíceis de marcar corretamente e, mesmo assim, os usuários do software leitor de tela geralmente não sabem os comandos que precisam para usar para entender os dados.

Em vez de agonizando sobre usando algumas tabelas de layout, você deve se preocupar que tags de cabeçalho e texto alternativo são usados ​​corretamente, e que os rótulos de formulários estão devidamente atribuída. Então você vai ter uma boa facada em acessibilidade mundo real.

Isto de vários anos de experiência em execução de testes de usuário para a acessibilidade web, especializada em design do site acessível e de consultoria para Cahoot, um banco online, sobre este tema durante um ano.

Assim, a minha resposta para o cartaz é não, não há nenhuma razão de negócios para preferir CSS sobre tabelas. É mais elegante, mais gratificante e mais correto, mas você como a pessoa construí-lo e que a pessoa que tem que mantê-lo depois que você são as duas únicas pessoas no mundo que dão a mínima se é CSS ou tabelas.

Respondeu 07/08/2008 em 23:25
fonte usuário

votos
8

Usando o design HTML semântica é uma daquelas coisas que você não sabe o que está faltando menos que você faça uma prática dele. Eu trabalhei em vários sites onde o site foi restyled após o fato, com pouco ou nenhum impacto para o código do lado do servidor.

Restyling sites é um pedido muito comum, algo que eu notei mais agora que eu sou capaz de dizer "sim" ao invés de tentar falar a minha maneira de sair.

E, uma vez que você aprendeu a trabalhar com o sistema de layout de página, geralmente é mais difícil do que o layout baseado em tabelas.

Respondeu 07/08/2008 em 22:26
fonte usuário

votos
7

A principal razão pela qual nós mudamos nossas páginas da web para DIV / layout baseado em CSS foi o atraso na prestação de páginas com base da tabela.

Temos um site público, com a maioria de sua base de usuários é em países como a Índia, onde a largura de banda de internet ainda é um problema (sua obtenção melhorado a cada dia, mas ainda não a par). Em tais circunstâncias, quando utilizado de layout baseado em tabelas, os usuários tinham que olhar para uma página em branco para consideravelmente longo tempo. Em seguida, toda a página serão exibidas como um todo em um carrapato. Ao converter nossas páginas para DIV, conseguimos trazer alguns conteúdos para o navegador quase instantaneamente como usuários entrou para o nosso site, e esses conteúdos, onde o suficiente para obter os usuários envolvidos até navegador transfere todo o conteúdo da página.

A grande falha com a implementação base em tabela é que, o navegador que irá mostrar o conteúdo da tabela somente depois que ele transfere todo o html para essa tabela. A questão vai soprar quando temos uma tabela principal que envolve todo o conteúdo da página, e quando temos um monte de tabelas aninhadas. Para o 'mesas flexíveis' (aqueles sem qualquer largura fixa), depois de baixar toda marca de tabela, o navegador tem que analisar até a última linha da tabela para descobrir a largura de cada coluna, então tem que analisá-lo novamente para exibir o conteúdo . Até que todos estes acontece usuários tem que olhar para uma tela em branco, então tudo virá a tela em um carrapato.

Respondeu 16/10/2008 em 14:16
fonte usuário

votos
7

Se você tem um site voltado para público, o caso de negócio real é SEO.

A acessibilidade é importante e manter a semântica (X) HTML é muito mais fácil do que manter layouts de mesa, mas que 1 º lugar no Google irá trazer para casa o bacon.

Por exemplo: relatório web mensal: 127 milhões de page views para julho

relatório web mensal: 127 milhões de page views para julho

...

Latimes.com cada vez melhor em SEO (search engine optimization), o que significa que nossas histórias são classificação mais elevada no Google e outros motores de busca. Nós também apresentam melhor desempenho em sites como o Digg.com. Tudo o que acrescenta-se a mais exposição e mais leitores do que nunca.

Se você olhar para o seu site, eles têm um layout CSS bastante decente indo.

Geralmente, você encontrar relativamente poucos layouts de mesa bom desempenho nas SERPs estes dias.

Respondeu 08/08/2008 em 00:22
fonte usuário

votos
7

Eu sou da ideia de que o layout CSS com tão poucas mesas possível é mais limpo e melhor, mas concordo que às vezes você só tem que usar uma tabela.

Business-sábio, é geralmente "o que vai fazê-lo da maneira mais rápida e confiável." Na minha experiência, usando algumas mesas geralmente cai nessa categoria.

Eu descobri que uma maneira muito eficaz para reduzir as diferenças entre navegadores na prestação CSS é usar o doctype "rigorosa" na parte superior da sua página:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Além disso, para as questões IE6 CSS temidas, você pode usar esse truque:

.someClass {
    background-color:black; /*this is for most browsers*/
    _background-color:white; /*this is for IE6 only - all others will ignore it*/
}
Respondeu 07/08/2008 em 22:18
fonte usuário

votos
6

fazendo uma reformulação completa de um site de 15 páginas apenas atualizando um arquivo é o céu.

Isso é verdade. Infelizmente, ter um arquivo CSS utilizado por 15.000 páginas complexas e muito diferentes é o seu pior pesadelo se tornar realidade. Mudar alguma coisa - se ele quebrar um milhar de páginas? Quem sabe?

CSS é uma espada de dois gumes em sites grandes como o nosso.

Respondeu 07/08/2008 em 23:31
fonte usuário

votos
6

Uma outra coisa que eu acabei de lembrar, você pode atribuir um estilo diferente para uma página para impressão vs. display.

Além de sua definição de estilo normal, você pode adicionar a seguinte tag

<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />

O que tornará o documento de acordo com esse estilo quando você enviá-lo para a impressora. Isto permite-lhe retirar as imagens de fundo, informações adicionais cabeçalho / rodapé e apenas imprimir a informação em bruto, sem criar um módulo separado.

Respondeu 07/08/2008 em 23:29
fonte usuário

votos
6

Na minha experiência, a única vez que isso realmente agrega valor do negócio é quando há uma necessidade de apoio de 100% para a acessibilidade. Quando você tem usuários que são deficientes e / ou usam leitores de tela para ver o seu site visualmente, você precisa ter certeza de que seu site está em conformidade com as normas de acessibilidade.

Os usuários que usam leitores de tela tendem a ter o seu próprio alto contraste, estilo grande fonte (se o seu site não fornecer um próprio) que torna fácil para os leitores de tela para analisar a página.

Quando um leitor de tela lê uma página e vê uma mesa, ele vai dizer ao usuário que é uma mesa. Portanto, se você usar uma tabela para layout, ele fica muito confuso, porque o usuário não sabe que o conteúdo da tabela é, na verdade, o artigo em vez de alguns outros dados tabulares. Um menu deve ser uma lista ou um conjunto de divs, não uma mesa com itens de menu, mais uma vez que é confuso. Você deve certificar-se de que você use blockquotes, atributos título alt-tags, etc para torná-lo mais legível.

Se você fizer seu projeto orientado a CSS, então todo o seu look and feel pode ser arrancada e substituída por uma visão crua que é muito legível para esses usuários. Se você tem estilos inline, layouts baseados em tabelas, etc, então você está tornando mais difícil para esses usuários para analisar o seu conteúdo.

Enquanto eu sinto que a manutenção é mais fácil para algumas coisas quando o site é puramente estabelecidos com CSS, eu não acho que é o caso para todos os tipos de manutenção - especialmente quando você está lidando com CSS cross-browser, que pode, obviamente, ser um pesadelo.

Em suma, sua página deve descrever o seu make-up de uma forma compatível com os padrões se você quer que ele seja acessível a usuários disse. Se você não tem necessidade / exigência e provavelmente não vai precisar dele no futuro, então não se preocupe perder muito tempo tentando ser um purista CSS :) Use a mistura de técnicas de estilo e layout que combina com você e faz o seu trabalho Mais fácil.

Felicidades!

[EDIT - acrescentou tachado de peças erradas ou enganosas de esta resposta - ver comentários]

Respondeu 07/08/2008 em 23:16
fonte usuário

votos
6

Mantenha o seu layout e seu conteúdo separar permite redesenhar ou fazer ajustes e alterações em seu site facilmente. Pode demorar um pouco mais na frente, mas a fase mais longa de desenvolvimento de software é a manutenção . Um site amigável css com clara separação entre conteúdo e design é melhor ao longo de manutenção.

Respondeu 07/08/2008 em 22:25
fonte usuário

votos
4

A ideia é que os designers podem design e web desenvolvedores podem implementar. Este é especialmente o caso em aplicações web dinâmicas, onde você não quer que seus designers para mexer em seu código fonte.

Agora, enquanto há motores de templates, Designers aparentemente só gostam de ficar louco e CSS permite a puxar muito mais acrobacias de tabelas.

Dito isto: Como um desenvolvedor, eu abandonada CSS layout principalmente porque meu projeto é uma merda mesmo, então pelo menos ele pode sugar adequadamente :-) Mas se eu nunca iria contratar um designer, eu iria deixá-lo usar o que seu editor WYSIWYG cospe.

Respondeu 07/08/2008 em 22:23
fonte usuário

votos
1

Além de ser facilmente atualizável e compatível ...

Eu uso para projetar todos os sites de mesa com base e eu era resistente no início, mas pouco a pouco me mudei para CSS. Isso não aconteceu durante a noite, mas aconteceu e é algo que você deve fazer tão bem.

Houve algumas noites eu queria atirar o computador pela janela, porque o estilo que eu estava aplicando para uma div não estava fazendo o que eu quero, mas você aprende com esses obstáculos.

Como para um negócio, uma vez que você começa a projetar sites por CSS até uma ciência, é possível desenvolver processos para cada site e até mesmo usar sites passadas e basta adicionar um diferente cabeçalho gráfico, cor, etc.

Além disso, certifique-se de incorporar / incluir todas as partes reutilizáveis ​​de seu site: cabeçalho, sub-cabeçalho, rodapé.

Depois de superar a corcunda, ele vai ser tudo down hill de lá. Boa sorte!

Respondeu 16/10/2008 em 13:20
fonte usuário

votos
1

* Eu iria deixá-lo usar o que seu editor WYSIWYG cospe
eu só joguei-up um pouco ...
* ahh Olá? Você não acha que o designer gráfico está escrevendo o CSS com a mão não é?

Curiosamente Eu tenho trabalhado com alguns designers e os melhores entre eles fazer mão-ajustar seu css. O cara que eu estou pensando realmente faz todo o seu trabalho de design como um arquivo XHTML com um par de arquivos CSS e cria elementos gráficos em tempo real como ele precisa deles. Ele usa Dreamweaver, mas só é realmente como uma ferramenta de navegação. (Eu aprendi muito com esse cara)

Depois de ter feito um investimento para aprender design puramente baseado em CSS e ter tido um pouco de experiência (descobriu onde IE suga [para ser justo está ficando melhor]) ele acaba sendo mais rápido do que eu encontrei. Eu trabalhei em Content Management Systems ea aplicação raramente teve de mudar para os designers para vir acima com um olhar radicalmente diferente.

Respondeu 08/08/2008 em 02:09
fonte usuário

votos
1

razão de negócios para o layout CSS: Você pode soprar os clientes dizendo "nosso portal é totalmente customizável / skinnable sem escrever código!"

Então, novamente, eu não vejo nenhum mal em projetar elementos de bloco com mesas. Por elementos de bloco Quero dizer onde não faz qualquer sentido para quebrar o dito elemento em diferentes modelos.

Assim, os dados tabulares seria melhor ser apresentados com mesas, é claro. Projetando principais blocos de construção (como uma barra de menu, notícias ticker, etc.) dentro de seus próprios quadros deve ser OK também. Só não dependem de tabelas para o layout geral da página e você vai ficar bem, methinks.

Respondeu 07/08/2008 em 22:22
fonte usuário

votos
0

Há definitivamente. Se você ainda está se esforçando para isso, você não está recebendo-lo direito.

DIV + CSS layout é realmente muito mais fácil do layout da tabela em termos de manutenção e produtividade. Basta manter a praticá-la antes que seja muito cedo para dizer isso.

Disposição da tabela é muito bom não é só significou para layouts e têm desvantagens excepcionais quando se trata de ajuste menor.

Respondeu 27/12/2008 em 13:34
fonte usuário

votos
0

i realmente pode ver tabelas em Stack Overflow na página de usuário.

Ele ainda tem montes de estilos inline ...

Respondeu 16/10/2008 em 02:39
fonte usuário

votos
0

Eu não acho que há uma razão de negócio em tudo. razão técnica, talvez, mesmo assim, mal - é um enorme timesuck em todo o mundo, e então você olha para ele no IE e quebrar e chorar.

Respondeu 08/08/2008 em 01:25
fonte usuário

votos
0

Quando um leitor de tela lê uma página e vê uma mesa, ele vai dizer ao usuário que é uma mesa. Portanto, se você usar uma tabela para layout, ele fica muito confuso, porque o usuário não sabe que o conteúdo da tabela é realmente o artigo, em vez de alguma outra dados tabulares

Isto não é verdade; leitores de tela, como JAWS, Window Eyes e HAL ignorar tabelas de layout. Eles trabalham muito bem em lidar com a web real.

Respondeu 07/08/2008 em 23:28
fonte usuário

votos
0

Algumas razões adicionais pelas quais esta é uma boa prática:

  • Acessibilidade - a web deve idealmente ser acessível por todos
  • Desempenho - poupar largura de banda e carregar mais rápido em dispositivos móveis (estes não têm largura de banda até certo ponto e não pode layout tabelas complexas rapidamente). Além de carregamento rápido é sempre uma coisa boa ...
Respondeu 07/08/2008 em 23:09
fonte usuário

votos
0

:: acena para palmsey e Jon Galloway ::

Estou de acordo com o fator de manutenção. Ele faz me demorar um pouco mais para obter o meu layouts iniciais feito (desde que eu ainda sou um aprendiz de jedi nas artes CSS), mas fazendo uma reformulação completa de um site de 15 páginas apenas atualizando um arquivo é o céu.

Respondeu 07/08/2008 em 22:39
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more