El porqué de no utilizar tablas
Este debería de haber sido el primer post de CSSLab, como antes tarde que nunca, traduzco y transcribo 11 misivas que explican porqué no deberías de utilizar tablas para diagramar un sitio. Comencemos:
1. Porque utilizar tablas es una estupidez: Las tablas existen en HTML por un motivo: mostrar datos tabulados. Pero con la disponibilidad del border="0", se hizo posible para los diseñadores tener grillas para contener su diseño. Aún hoy es la forma más común de diagramar y armar sitios.
2. Convenciendo al jefe / cliente: Algunos buenos motivos para trabajar con web standarts:
- sus sitios se cargarán más rápido
- los costos de hosting se reducirán con sitios más livianos
- los rediseños de sitios serán más eficientes y baratos
- será más fácil mantener una consistencia visual entre todas las páginas del sitio
- mejores resultados en buscadores
- su sitio será más accesible para todos los browsers
3. Asesinos: nested tables y spacers: Al principio fueron meras recomendaciones para trabajar ciertas limitaciones de los browsers existentes, y como trabajaban con las especificaciones de la W3C de la época (1995-1997…. Netxcape 2, 3). El problema es que estas recomendaciones aún persisten, cuando los standarts han evolucionado bastante. Muchos diseñadores van por el camino facilista de armar sitios web. El problema del uso de tablas:
- mezclan contenido con formato (dejando el peso de los archivos innecesariamente grandes, cargando los mismos datos d diagramación en cada página que visitan).
- el ancho de banda no es gratis…
- hacen el rediseño lento y caro.
- no hacen el sitio accesible para, por ejemplo, móviles, PDA’s y menos aún discapacitados visuales.
Por suerte esto ya está solucionado, los browsers modernos están mucho mejores para renderizar web standarts, y pronto esperamos extinguir estos métodos arcaicos de diseño web. Ya no más meter tablas dentro de tablas, llenar celdas vacías con GIF transparentes de 1 pixel…..
4. CSS y la separación del estilo gráfico: Utilizando hojas de estilos podemos ahora separar el contenido del estilo gráfico, lo que nos permite:
- rediseños más baratos y rápidos: basta con modificar una hoja de estilo para todo el sitio ver los cambios inmediatos.
- se reduce en ancho de banda utilizado para visualizar el sitio. El CSS que controla el layout se queda en el cache del browser.
- es más fácil mantener la consistencia visual del sitio: todas las páginas utilizan la misma familia tipográfica, tamaño de textos, colores, posición de elementos, lo que a la larga fortalece la marca y deja el sitio más usable.
- dejas tu sitio accesible, independiente del dispositivo que lo despliega.
- minimizando el código y utilizando correctamente los tags de texto (H1, H2, P, etc) ayudan a mejorar tu ranking en los buscadores.
5. Aún puedes seguir utilizando tablas: pero no uses tantas. Puedes darles formatos con CSS, y no uses más spacers!
6. Cambiando la forma en que piensas: Esto es probablemente lo que hace más reticentes al cambio a la mayoría de los diseñadores. Algo nuevo, con código, difícil de digerir. Diagramar con CSS requiere una nueva forma de pensar, ahora orientado a la información: títulos con H1, subtítulos con H2, etc. En vez de contener tu texto en una celda, conténla en un DIV. Dale a ese DIV un ID (identificador único) o un CLASS que describirá el contenido en función de la apariencia o posición.
7. Evita <b> y <br>: Lo que quieres decir, claro, tiene significado. Si es importante, <strong> (bold). Si quieres hacer énfasis <em> (itálica). <br> aún es soportado de modo transicional, pero ha sigo corregido: <br />. Esto porque según la regla, todos los tags deben de abrir y cerrarse. (<em></em>). Como <br /> hace de punto aparte, se abre en sí misma. Por ese el /; y no es el único tag que funciona de esta manera. Puedes utilizar CSS para hacer lo mismo:
.aparte {display:block;}
8. Menuliza con UL y LI’s: Menúes son meras listas de links. Entonces, utiliza UL para contenerlos, horizontal o verticalmente.
9. Más de una manera para hacer lo mismo: con CSS puedes llegar a la misma solución a cierto diseño de diferentes maneras, impulsando la creatividad. Haz la prueba, pregúntale a otra persona cómo posicionaría un elemento respecto a otro, o cómo diagramaría un menú con ancho elástico.
10. Migrando de tables a tableless: No es un camino fácil, pero es gratificante ciertamente.
- Primero que nada, debes rediseñar el contenido del sitio. Ya que si vamos a meter mano, hagámoslo bien.
- A continuación, deberás despedazar el sitio: encabezado, navegación principal, subnavegación, contenido, información adicional, etc.
- Limpiemos la casa: chao todos esos <font> y spacers. También adiós <b>, <bgcolor, background>, <center>.
- Elige un DOCTYPE de acuerdo con lo que estás construyendo. Transitional es lo recomendado aún, pero no está lejos el día en que todos debamos de utilizar Strict.
- Divide tu sitio en DIV’s lógicos; utiliza nombres descriptivos de acuerdo al contenido, no al estilo gráfico (por ejemplo: #menu, #contenido y no #menuderecha o #textorojo).
- Prueba, prueba, prueba! En los browsers y plataformas más variados. Sólo así lograrás llegar bien a todos tus visitantes, y posibles futuros clientes.
11. Nunca dejarás de aprender: es un interesante mundo, el que difícilmente dejarás de seguir aprendiendo nuevas técnicas. Aprende, y aprende de los mejores.
