Introducción a la maquetación con CSS

La maquetación con CSS es algo que ya forma parte de nuestro día a día. ¿Es así? Si tu respuesta es que sí, felicidades!! estás ahorrándote muchos quebraderos de cabeza y enfocando tus esfuerzos en la vía correcta, que te permitirá crecer y evolucionar como diseñador web y desarrollador en general. Puedes incluso ahorrarte la lectura de este artículo y pasar directamente a otros temas más avanzados del manual de Maquetación CSS de DesarrolloWeb.com.

Si respondiste que la maquetación CSS no forma parte de tus técnicas habituales, o si piensas que no la necesitas, estás en el lugar correcto, donde intentaremos hacerte cambiar de idea y sobre todo, enseñarte a hacer las cosas tal como dicen los estándares, que a la postre comprobarás que es la manera más sencilla y más potente.

En DesarrolloWeb.com tenemos diversos artículos ya publicados sobre la maquetación web y según escribimos estas líneas, los estamos agrupando todos en el Manual de Maquetación CSS. Estamos creando este artículo como una mera introducción al mundo de la maquetación web basada en estándares, con CSS, o si lo preferimos, el diseño web sin tablas, o "tableless", como se conoce en inglés.

Qué había antes de la maquetación CSS

Antes de la llegada de CSS disponíamos únicamente del HTML, que tenía múltiples carencias a la hora de posicionar elementos en la página, porque cuando fue creado no se esperaba que la web se convirtiera en un multi-medio, donde los profesionales aportarían caudales de creatividad y diseños caprichosos. HTML en principio únicamente permitía organizar el texto en párrafos, acompañado de enlaces, listas, imágenes, tablas y poco más.

Como sólo había HTML, los diseñadores utilizaron el único recurso que tenían a mano para posicionar elementos en la página: las tablas, que estaban pensadas para presentar información tabulada (en celdas formadas por filas y columnas), pero no para maquetar una web entera. Anidando tablas (colocando unas tablas dentro de otras) y con el recurso de imágenes de un píxel transparente, se podía obtener una estructura de diseño para luego llenarla con los contenidos que se desease.

Las tablas solucionaron por un buen tiempo las necesidades de los diseñadores de webs, pero tenían diversos problemas, aparte de no facilitar mucho la estructura de sitios con un diseño complejo.

• El contenido se mezcla con las reglas de presentación o formato. Lo que hace que el código de tu página web sea innecesariamente grande y ello deriva en páginas más pesadas. Al final, con tablas tenemos una web más lenta y la transferencia de datos de nuestro servidor también aumenta, con lo que tu servidor podría atender a menos usuarios al mismo tiempo y te saldrá más caro de mantener.
• El rediseño de una web se hace mucho más complicado, porque para cambiar la forma con la que se ve tu página tendrás que actualizar todo el código. Si maquetas utilizando CSS sólo tendrás que cambiar el código CSS para que el aspecto de tu página sea tan distinto como desees.
• Tu página tendrá problemas serios al verse en otros dispositivos, como Palms o teléfonos móviles, que tienen pantallas menores.
• Tendrás que remar contra corriente para intentar que tu página se vea como quieres, porque estás utilizando unas herramientas, las tablas, que no te ofrecen las posibilidades necesarias para maquetar a voluntad. Tendrás que aprender mil truqillos para saltarte las limitaciones de las tablas y a medida que los apliques, tu código se hará más y más pesado, menos entendible y su mantenimiento será cada día más complicado.

Por qué maquetar con CSS

Cuando apareció CSS tuvimos que aprender un lenguaje nuevo, lo que siempre es, al menos, un poco pesado. Pero es que los navegadores al principio tampoco lo soportaban completamente y lo peor de todo, no sabíamos cómo utilizarlo para librarnos de las tablas, o incluso no sabíamos que CSS nos iba a servir para eso. En definitiva, que durante un buen tiempo estaba la solución a todos los problemas (las hojas de estilo en cascada: CSS) delante de nosotros, pero ya sea por pereza, por falta de soporte de los browsers, o porque no sabíamos cómo valernos de ese nuevo lenguaje, muchos de nosotros retrasamos todo lo posible la incorporación de esta nueva herramienta para maquetar toda una web.

Afortunadamente, todas las razones por las que podíamos estar dejando de maquetar una web con CSS han pasado a la historia. Los navegadores las soportan por completo y existe una extensa documentación sobre la maquetación con hojas de estilo en cascada, que podemos leer en DesarrolloWeb.com y en otros muchos sitios, aparte de infinidad de libros. Sobre la pereza, estoy seguro que la opinión de muchos webmasters en artículos como este y la evolución de sitios web de referencia, han hecho que poco a poco nos haya resultado menos pesado empezar a trabajar intensivamente con CSS.

Por otra parte, la profesionalización de los diseñadores de webs y la competencia, hace necesario que, las personas que nos pretendemos dedicar a trabajar en este mundo del desarrollo, tengamos que aumentar la calidad de nuestro trabajo, así como mejorar la productividad y la facilidad de mantenimiento. Incluso si no pretendemos convertirnos en diseñadores profesionales y tan sólo queremos tener una web bonita y práctica, las CSS serán nuestro mejor aliado.

Y todo esto ¿por qué? ¿Sólo porque con CSS se separa el contenido del aspecto o presentación?

Entiendo que muchas personas no encuentren de entrada ventajas en separar el contenido de la presentación. Yo mismo tardé bastante en entender cómo esta práctica iba a ayudar en mi trabajo, pero os comentaré un par de casos de mi experiencia:

Hace ya bastantes años, DesarrolloWeb.com estaba alojado en un servicio de hosting donde me cobraban un extra por la transferencia. Es decir, tenía contratado con el servidor un plan de alojamiento (que por aquel entonces era el plano mayor que existía en ese alojador), que me asignaba una tasa de transferencia mensual que siempre acababa superando. Entonces la empresa de hosting me pasaba una factura mensual por el extra de transferencia que había consumido el sitio. Ahora ya no recuerdo bien las tasas de transferencia que estaban contratadas y las que utilizábamos, pero lo que sí recuerdo fue que hicimos un cambio rápido a CSS (por aquel entonces no utilizaba las hojas de estilo para nada en la página), de manera que el estilo quedó separado (en buena parte) del contenido de la web y no se repetían infinidad de veces etiquetas del estilo de FONT, tablas con estilos repetitivos, etc. Todo eso hizo que el peso de cada página se redujera bastante y también la transferencia del servidor y recuerdo me ahorré alrededor de 20.000 de las antiguas pesetas (unos 120 euros) al mes en factura por el extra de transferencia. He de reconocer que en esta actualización ni siquiera nos libramos de las tablas, pero fue un primer paso en la adecuación del sitio a las CSS, hoy sé que si hubiéramos suprimido las tablas todavía habría ahorrado más dinero.

Os cuento otro caso representativo, que ocurrió con otro sitio web que realizamos también nosotros: Guiarte.com, que estaba diseñado con tablas y llevamos unos 4 años en rediseñarlo con maquetación CSS, desde que me nos lo propusimos hasta que lo terminamos. Ya sé, es vergonzoso, pero por falta de tiempo ocurrió así. El rediseño, de tablas a maquetación CSS, se hizo a la vez que un cambio de tecnología de servidor y había que rehacer el sitio por completo. Pero sirva de prueba que en el último año se rediseñó otra vez y sólo tuvo que intervenir una persona de nuestro equipo durante un par de semanas para conseguirlo.

Uno de los sitios web que más me impactaron a la hora de entender cómo CSS podría ayudar en la maquetación de webs, fue el CSS Zend Garden, en el que podemos ver una web a la que se le cambia el diseño radicalmente, sólo alterando la hoja de estilo en cascada. Podemos acceder a ese sitio y ver el diseño principal, pero además, en la barra de la derecha, encontrarás un listado de alternativas de aspecto creadas por otras personas que resultan sin duda impactantes, por lo mucho que cambian con respecto a diseño original con sólo alterar el archivo CSS con los estilos. Sin duda, una demostración como la de CSS Zend Garden es realmente ilustradora sobre las posibilidades que tendremos a nuestro alcance, si maquetamos únicamente con hojas de estilos.

Sobre las ventajas de maquetar con CSS frente a la maquetación con tablas ya hemos hablado en otros artículos en DesarrolloWeb.com, por lo que no voy a repetir de nuevo las mismas ideas. En este artículo he querido hablar sobre las desventajas de las tablas y compartir con vosotros algunas de mis experiencias, con intención de motivar a las personas en el aprendizaje de la maquetación CSS.

Así pues, espero que os animéis a leer este manual de Maquetación CSS, donde aprenderéis diversas técnicas con las que empezar a utilizar posicionamiento CSS en lugar de las poco recomendables tablas. Os sugiero también de paso otro manual interesante que también trata sobre la maquetación de webs con CSS, que tiene además una serie de vídeos donde podréis ver las técnicas que utilizamos de primera mano: Maquetación CSS con 960 Grid System .