Diseño de información con grids para css

El diseño visual de elementos en interfaces web puede beneficiarse del uso de sistemas de diseño de css basados en grids. Se revisa la noción de diseño mediante grids, y se señalan varios frameworks de desarrollo.

Durante el reciente DrupalCamp Spain tuve oportunidad de asistir a una BOF sobre diseño de temas. La verdad es que el diseño visual es la última de mis preocupaciones cuando implementamos un producto de información digital: contenidos, usuarios, tipos de información, funcionalidades… es lo que me interesa, y luego sobre el producto «plano» probamos y modificamos temas ya existentes, que nos proveen de la capa de presentación, modificando cuestiones básicas si es necesario. La verdad es que casi siempre encontramos temas libres que nos sirven, y siempre queda la posibilidad de hacer algo por encargo. Buscando un poco se descubre que hay todo un dinámico mercado para las cuestiones de diseño de capas o temas de presentación para los CMS, sean WordPress, Drupal o Joomla.

Por lo que pude aprender allí, gran número de desarrolladores y diseñadores utilizan sistemas de implementación, o frameworks, que usan grids, o rejillas cuadriculadas. Se trata de una técnica en la que se usa una división del espacio de la página web  en columnas iguales, y se seleccionan conjuntos regulares de las mismas, para crear áreas y espacios, a los cuales posteriormente se asignarán estilos de presentación. De esta forma se obtiene una presentación visual que puede aplicarse, con las oportunas modificaciones, a diferentes sistemas de gestión de contenidos. Lo interesante del resultado es que se obtiene un conjunto de ficheros que contienen las hojas de estilo necesarias (ficheros CSS) para montar la capa visual sobre el producto, respetando los estándares web. Además, varios de estos frameworks incorporan las capacidades para añadir el Javascript necesario, si es menester.

Lo que apenas tiene sentido en la actualidad es seguir explicando cómo hacer una página con todas y cada una de las etiquetas HTML; me he encontrado casos recientes de formación en diseño web que no cubren apenas las CSS, y muchos menos un grid de este tipo: hay que seguir teniendo al cliente cautivo, no vaya a ser que aprenda y encuentre algo mejor y más barato. Entre sistemas casi automáticos de publicación digital y soporte al diseño individual de  interfaces, sólo los mejores sobrevivirán en un mercado cada vez menos dispuesto a pagar por diferentes motivos. Bueno, por uno siempre se pagará: por un producto de calidad.

En los últimos años los css frameworks han sido objeto de numerosos comentarios y análisis. Al calor del éxito del diseño basado en css que se refleja en los numerosos trabajos publicados en CSS Zen Garden, se puede encontrar una introducción al uso de frameworks en A List Apart, y tres completas listas con breves descripciones en:

Uno de los más potentes, y que he visto referenciado en varios lugares, es 960 Grid System, cuyos resultados se aplican en muchas ocasiones a recursos implementados sobre Drupal. Una introducción visual a su uso la ha hecho M. Santirso en The Source Cookbook. A partir de aquí, ya no quedan muchas excusas para no incluir cuestiones de diseñó e implementación de interfaces web para productos de información en la formación de los futuros profesionales… o tal vez sí, pero yo no tengo tiempo ahora, aunque me ha picado el gusanillo.