Por qué diseñar con CSS

Mostramos algunas ventajas al maquetar con CSS respecto a otras formas de hacerlo.

Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para diseñar un sitio, sino para la presentación de datos tabulares. La utilización del border=0 y las imágenes transparentes hicieron posible crear una rejilla que permitió a los diseñadores organizar textos e imágenes, establecer tamaños y ubicar objetos. Pero ésto es sencillamente incorrecto. Las tablas no se crearon para maquetar y no deben utilizarse para eso, porque de esta forma se mezclan presentación y contenido.

La solución es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son más las empresas que deciden dejar atrás las tediosas tablas y evolucionar desarrollando sus sitios respetando los estándares establecidos por la W3C (organización internacional que desde hace unos 12 años se dedica al desarrollo de pautas y estándares web), lo que facilita la accesibilidad y la correcta visualización de las páginas en los navegadores que respeten dichos estándares.

Algunas de las ventajas de la maquetación con CSS:

  • Separación de forma y contenido. Generalmente CSS y HTML se encuentran en archivos separados, lo que facilita el trabajo en equipo porque diseñador y programador pueden trabajar independientemente. Por otro lado, permite el acceso a distintos navegadores y dispositivos.
  • Tráfico en el servidor. Las páginas pueden reducir su tamaño entre un 40% y un 60%, y los navegadores guardan la hoja de estilos en la caché, ésto reduce los costos de envío de información.
  • Tiempos de carga. Por la gran reducción en el peso de las páginas, mejora la experiencia del usuario, que valora de un sitio el menor tiempo en la descarga.
  • Precisión. La utilización de CSS permite un control mucho mayor sobre el diseño, especificando exactamente la ubicación y tamaño de los elementos en la página. También se pueden emplear medidas relativas o variables para que la pantalla o la caja contenedora se acomode a su contenido.
  • Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario introducir un cambio porque se modifica un solo archivo, el de la presentación, sin tener que tocar las páginas que contienen la estructura con el contenido.
  • Diseño unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio con sólo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo archivo permite mantener la misma apariencia en todas las páginas.
  • Posicionamiento. Las páginas diseñadas con CSS tienen un código más limpio porque no llevan diseño, sólo contenido. Esto es semánticamente más correcto y la página aparecerá mejor posicionada en los buscadores. Google navega obviando el diseño.

Recomiendo un sitio simpático y didáctico sobre el tema: http://www.hotdesign.com/seybold/spanish/

Autor

Serviweb

Diseño web Murcia

Compartir

Comentarios

pakos

02/5/2007
en concluciones generales y bueno como yo trabajo, no estoy de acuerdo en el uso de CSS al 100% en los sitios, creo que la estructura (base, esqueleto)deve de ir en una tabla, ¿por que?, muchas veces al usuar las propiendades de position:absolute;top:1;lef:3; por ejemplo, se pone fija esa ubicacion y las cosas se vuelben realmente dificiles cuando se intenta porgramar una pagina dinamica ya que hay que hacer operaciones mateticas para reubicar esas direciones de forma dinamica, algo que si se mete en una tabla el explorer solito lo acomoda, el diseño y el contenido se puede ceparar aun sin css, yo en lo personal creo una platilla index.php donde estara mi diseño, a este index le envio variagles get de modulo, segun el modulo en la parte de contenido se carga uno u otro archivo que contedra dicho contenido quedado y reutilizadonce el diseño y quedando a nivel de programacion/diseño el diseño y los contenidos aparte, creo que esto del usar el 100% css en las paginas web, se ve desde un punto de vista muy particular de los diseñadores (no programadores) las tablas siempre fuerón y serán lo mas dificil de dominar del html, y los diseñadores que a vista de necesidad han tenido que tomar una PC para sus trabajos se reusan a tomar algo complejo como las tablas, no se diga de programacion de sitios dinamicos (siempre andan buscando un programador externo) que caro muchos programadores carecen de la estetica del diseño (pero esto no es regla general como muchos plantean), lo que si estoy de acuerdo es que el css se deve usar para definir los formatos aplicando clases a la estrucutra, y gestionando los contenidos con un leguaje de servidor para el reciclado de codigo y facil actualizacion.. en lo personal trabajo así:
-Estructura Base o Esqueleto una Tabla HTML
-Formateo (poner la pagina bonita, colores fondos, etc) el alejido es CSS (para hacer formateo con las etiquetas de html es un mega trabajo y vastate duro de modificar)
-Manejo y gestion de los contenidos = el elejido es PHP, uno de los lenjuages de programacion mas populares y libres (arriba el soft libre :D [perdon pero me emociono al ablar de soft libre]),
- y por ulitmo interactividad con el usuario - JavaScript.

y si combinamos todo exo podemos tener webs 2.0 con el manejo de denominado AJAX (soy de los que dice para que decir que algo es nuevo si ya se podia hacer desde hace mucho prefiero decir que son paginas con un buen uso de JS, CSS, PHP)

bueno ese es mi mas umilde punto de vista ...

ZurdoSoft

02/5/2007
Estoy de acuerdo con el comentario de pakos.
Es lamentable ver sitios web hechos en puro CSS que no se cargan, que se deforman, que requieren de determinado explorador.
Hay que trabajar, como yo, tratando de hacer operables PCs antiguas que solo funcionan con W98 o MacOs 8 y que no pueden navegar correctamente, a veces no navegan, debido al sistema de programación CSS utilizado por los sitios.
En cambio una página realizada con tablas funciona ágil, sin problemas de compatibilidad y rápido.
El consorcio W3 está manejado por el mercado y a menudo saca normas que dan risa y se contradicen.
La función de Internet es mostrar todo a todos los niveles, independientemente si tengo un micro 233Mhz o DualCore. No caigamos en la estupidez de creer que todo lo nuevo es mejor solo porque es nuevo, dejemos que lo demuestre.
Les propongo el desafio de recomendar páginas en distintos formatos y probarlas en distintos exploradores y sistemas operativos.
Saludos.

legion

02/5/2007
Las tablas no son dificiles usando dreamweaver o NVU.
El css no es nuevo.

para mi ke kienes aun trabajan con tablas es por:
- la mayoria del contenido es dinamico (php,asp..) y por tanto el diseño es "cuadrado" y/o simple (no importa lo vistoso, solo los reportes)
- Les parece muy complejo el CSS, o son reacios al cambio

Aprended algo de CSS y evolucionad!

Pedro

02/5/2007
Es cierto que es mejor trabajar con standares, pero también es cierto, como dicen Pakos, y ZurdoSoft, que NO siempre es bueno trabajar con PURO CSS. y NO es que uno no quiera trabajar con CSS porque sea difícil ya que, al contratrio, es mucho más sencillo que trabajar con tablas.
Ni menos que uno sea REACIO AL CAMBIO. Pero, si somos inteligentes debemos aceptar que NO todo es perfecto.

Yo soy diseñador web y experto en SEO, por eso, en mi caso, trabajo mis diseños web usando 90% de CSS, porque me ayudan mucho, no solo por la facilidades de formateo y otras que ha expuesto el autor del artículo sino por el SEO = Search Engine Optimization
pero al mismo tiempo NO puedo prescindir de las tablas porque me ayudan mucho también y hacen cosas que los estilos CSS no pueden hacer, como tabular mucha información.
Así como apreciamos el tremendo valor que ha aportado los CSS así también debemos reconocer sus limitaciones. simplemente NO son perfectos.

Cuando un web site es demasiado grande y debe contener demasiada información en forma tabular los CSS simplemente se vuelven un infierno. Ahí las tablas son la solución sencilla por excelencia.

Inclusive los mismos expertos en CSS como Dan Cederholm (Bulletproof Web Design) donde enseña como sacar el máximo provecho de los estilos reconoce que las tablas todavía son necesarias.

La Conslusión más inteligente es que sería estúpido decir que usar tablas es estupido.


pakos

03/5/2007
un comentario mas.. yo en lo particular trabajo para una emrpesa de diseño y multimedia, tengo alrededor de 8 meses trabajando con ellos, tienen varios sitios previamente construidos a mi llegada, con ello realizo nuevos sitios y les doy mantenimiento a anteriores, hay muchos sitios que no me gustan como esta diseñados aqui una muestra mas de que las css no se llevan con las cosas que cambian
http://leon-mexico.com/agenda/feriasexpo.html , esta apagina a menudo me da broncas con esto por estar crear tablas con listas y que las listas parescan tablas...., al final y al poco cambio todo se descuadra, y no estoy de acuerdo con que las paginas dinamicas son solo reportes, aqui algunos de mis trabajos donde convino de todo css, html(tablas no son dificiles pero si es lo mas complejo de html y vastante dificiles para los que estan casados con dreamweaver o etc), php, y todo absolutamente el sitio es dinamico
http://www.paxqu.com.mx
http://www.ragsamexico.com
http://www.comimpex.com.mx

Angel

04/5/2007
El manejo de css permite cambiar incluso la distribución(ubicación de las distintas partes) de la página sin tener que cambiar nada en la programación esa es una capacidad que ninguna tabla puede; pero en el manejo de contenido dinámico surge el reto de adecuar los tamaños de los resultados por lo que decidí mantener el diseño en CSS y colocar algún iframe dentro de un DIV, así no pierdo flexibilidad. Otra buena solución es trabajar con tablas manejando sus colores letras y fondos con una hoja de estilos y todo este contenido dntro de un div contenedor(si es posible no siempre lo es).

pakos

04/5/2007
no solo los div se pueden mover, mas vien todos los elementos con las proiedades possition:absolute; y con top y left para ubicarlos, lo que tienen de mas las div, es que cuando se maneja JavaScript los objetos Div's tienen la propiedad inneHTML para poser ser modificada, y en las demas etiquetas a exepcion del SPAN puedes acceder a innerHTML pero no a modificarlo, solo si necesitas hacer modificaciones interactivas en los textos de la pagina el texto cambiante deveria ir en un div o span, de eso las demas etiquetas les puedes cambiar la ubicacion con CSS (ha ablado el ke se reusa a aprender el CSS...)

manuel

18/5/2007
los que opinan como uds no tienen ida suficiente de css, las tablas se usan en css, pero para poner el contenido en ese tipo de diagramacion, p lo demas se usan divs. Actualmente relizo los cambios de diseño de un sitio standard realizado en php, son todas iguales lo unico que cambio es el css, todo el diseño del sitio esta hecho en css, y aunque aveces se reniega un poco se logran cosas mas flexibles que de otra manera seria mas dificil. saludo s

Arriba el uso de CSS

02/8/2007
Respetando el comentario de pakos y ZurdoSoft les comento que difiero en cierto grado de sus apreciaciones. La pagina www.pixel2life.com esta en un 100% elaborado empleando el uso de CSS y la puedes visualizar en distintos browsers y notaran que no varia. Es una pagina que maneja un buen volumen de información. Respecto al comentario de ZurdoSoft, uno no puede en un campo tecnologico como lo es el internet continuar pensando en quienes no se actualizan. A cada momento este campo varia, salen nuevas tecnologias, técnicas, de seguir tu consejo estariamos realizando animaciones por tween en flash en lugar de usar las librerias MX. Es deber de los diseñadores, desarrolladores inculcar la necesidad de actualizarse y andar a la par con el día a día.
Ciertamente edo tiene razón las tablas aún son necesarias de la forma que el plantea, aunque incluso en esos casos podrian suplantarse pero requeririan de un labor extra.

Nitemare

04/8/2009
CSS vs Tablas
Yo también opino que no siempre se puede usar CSS al 100% o al menos, no es rentable a nivel de tiempo invertido y resultados obtenidos, las tablas, por mucho que nos pese, nos sacan de apuros serios... y si no, a ver quien me centra un texto VERTICALMENTE en una caja, de forma SENCILLA, donde yo elija el tamaño horizontal y vertical de la caja y sin usar tablas... se puede hacer con CSS, pero la inversión de tiempo y código que hace falta respecto a hacerlo en una celda no creo que merezca la pena en absoluto.

Manuel Castillo

06/8/2009
Yo voy a favor de las tablas
Hola todos yo soy nuevo en los sistemas como unos 15 años en pese en esto con el commodore 64 ya ni me acuerdo pero este tema de las tablas en el diseño de las paginas web tiene muchos criterios encontrados pero para mi hay una cosa bien clara una tabla se visualiza en el 100% de los navegadores hasta el navegador mas simple te visualiza una tabla pero que pasa con CSS en los navegadores del mismo nombre ejemplo explore versión 6 -7 y 8 un estilo CSS no se visualizan igual en algunos casos debes agregar ala pagina unos <meta> de compatibilidad y agregarles script que te los provee el creador del navegador pero con la tablas no pasa esto hay mas a favor de las tablas si usas el comando colspan y rowspan tu tabla puede tener la forma que quieras buscando por ahí en internet encontré como decorar mis tabla incluyendo el style detro de la tabla te muestro ejemplo <td style="border:double #F00" onmousemove="this.bgColor='#E1E1E1'">Hola Mundo</td> este ejemplo haría que al poner el mouse sobre la tabla te muestre un color pero que tiene esto espectacular esto lo bueno de esta forma para decorar es que el navegador mas simple o editor html te mostrara esa tabla con su efecto. bueno y como se comprueba que esto es verdad crea una tabla con el ejemplo que te doy claro que puedes agregarle mas efectos y crea otra con CSS después de dicha tarea ejecútalas en tu navegador una ves ejecutadas en tu navegador le das seleccionar todo y copiar hecho esto vas a hotmail y en el editor de texto de Hotmail le das pegar y listo notaras que las tabla funcionas y que el CSS NO funciona .te funcionaran todos los efecto claro que al darle enviar Hotmail y Gmail por seguridad desactiva la fusiones del mouse pero la decoración queda igual lo que no sucede con CSS bueno aprovecho esta oportunidad para que creáramos un grupo de desarrolladores para protestar contra tanto navegador me explico en mi caso en ocasiones paso horas ajustando un Script para que funcione y después lo vas a probar en otro navegador y nada te toca desistir mejor dicho eso es frustrante por que parece que lo estándar de w3c.org no funciona creas una pagina y tiene que probarlo en explore netscape mozilla opera safari chrome no se algo debemos de hacer por que nosotros somos los perjudicados si alguien tiene alguna idea para solucionar esto pro yo estoy aburrido de tener que probar mis paginas en 7 navegadores gracias

Ricardo Valverdi

07/8/2009
Me encanta leer la opiniones de gente experta
Soy de Argentina provincia de Mendoza les cuento tengo un sitio de compra ventas www.mendoshops.com Uds que me aconsegarian hacer con mi sitio es recomendable CSS

marcos gomez

12/2/2012
Sobre las tablas
Permitame comentar que las tablas, en un principio, SI se crearon como recurso web y por lo tanto se aplican y se aplicarán en maquetación. Otra cosa es que tengamos a disposición las ventjas de css