Este artículo se escribió originalmente en 2009. Mucho ha llovido desde entonces! Lo actualizamos en 2020, mencionando para comenzar que la maquetación CSS sigue siendo fundamental y que es importante realizarla con las tecnologías más actuales, porque nos ahorrarán muchos dolores de cabeza, harán nuestro trabajo más sencillo y además, conseguiremos nuestros objetivos en mucho menos tiempo.

Por eso queremos que cualquier desarrollador interesado en la maquetación CSS conozca las prácticas más recomendables a día de hoy, de modo que hemos revisado todo el texto y agregado los puntos importantes que debes de conocer para seleccionar bien tus técnicas CSS a la hora de maquetar.

Por qué maquetar 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. Este manual lo creamos cuando comenzó la corriente del diseño web sin tablas, o "tableless", como se conoce en inglés. Pero lo estamos actualizando para incorporar las técnicas más actuales basadas en estándares, con CSS.

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, no las explotábamos debidamente.

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.

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.

Por qué es tan importante separar el contenido de la 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.

Evolución de la maquetación CSS

Hemos hablado mucho sobre las ventajas de usar CSS y evitar el diseño con tablas de los orígenes de Internet. Pero a decir verdad no creo que haya nadie que aún diseñe con tablas. Sería preocupante! Pero sin embargo, mucha gente no llega a usar el CSS como debería, con las técnicas más sencillas y modernas. Es por ello que quiero ahora pararme unos minutos a explicar cómo la evolución de las técnicas CSS también han facilitado mucho la maquetación web.

Cuando empezó a usarse CSS para maquetar una web estábamos en el estándar de CSS 2. Supuso un gran avance para el diseño web, pero han aparecido otras versiones del lenguaje, como CSS 3 y, incluso bajo la misma versión han surgido especificaciones nuevas como CSS Grid o Flexbox.

Maquetación por floats

Como hemos dicho, el viejo CSS 2 permitía maquetar de una manera rudimentaria. Se usaba una propiedad de CSS llamada float que permitía llevar las cosas a la derecha o a la izquerda de la pantalla. Eso avanzó mucho el mundo de la maquetación, ya que nos permitía crear columnas.

Sin embargo, el sistema de floats no estaba realmente pensado para crear sitios web con columnas, sino para hacer que ciertos elementos flotasen hacia un lado y el texto rodease los elementos flotantes, igual que cuando alineas una imagen a la derecha o la izquierda en un párrafo. Como consecuencia, existían muchos problemas para conseguir cosas como fondos continuos en las columnas, obtener diseños de varias columnas, etc.

Al final, los desarrolladores usábamos "hacks" que nos permitían solventar los problemas del CSS, pero que requería tener muchos conocimientos (y a menudo bastante retorcidos) y, lo que es todavía peor, generaba una experiencia de desarrollo muy poco agradable.

CSS3 Flexbox

La primera especificación de CSS que vino al rescate de los diseñadores y maquetadores fue Flexbox. Básicamente es un nuevo modelo de caja que permite posicionar las cosas en columnas y filas y permite ser mucho más específico sobre cómo queremos que estas columnas y filas se distribuyan en posición y tamaño.

Flexbox nos ayudó mucho a maquetar con placer y permitió hacer cosas que antes eran prácticamente imposibles, como alinear el contenido en la vertical. Si no conoces flexbox te recomiendo empezar por aquí: Manual de Flexbox.

CSS Grid Layout

La segunda especificación de CSS 3 que ya vino para dar unas herramientas definitivas para la maquetación web fue CSS Grid Layout. Flexbox facilita enormemente la maquetación, pero los diseñadores están acostumbrados a disponer de sistemas de rejillas para colocar los elementos en el diseño. Aunque se podría hacer (y de hecho hay varios) un sistema de rejilla con Flexbox, tampoco estaba pensado para eso.

CSS Grid es en sí un sistema de rejilla, completamente personalizable por atributos CSS. Es un nuevo modelo de caja donde los elementos se pueden distribuir en filas y columnas totalmente adaptables a las necesidades de los diseñadores, parecidos a los que se dispone cuando se quiere diseñar en papel.

CSS Grid Layout es una maravilla y usarlo es la auténtica delicia! Si no lo conoces te recomiendo empezar aquí: Manual de CSS Grid Layout

Conclusión

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.

Una vez adquiridos unos conocimientos básicos, con la lectura de los siguientes artículos, os sugiero completar las explicaciones y de paso aprender un poco sobre las prácticas habituales sobre maquetación CSS en los vídeos: Videotutorial de introducción a la maquetación con CSS y en el Vídeo Práctico de Maquetación CSS.

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.