Bootstrap, ricitos de oro y Ray Charles

Caramba, cuánto tiempo hacía que no escribía en el blog, ¡ya iba siendo hora!

La primera versión de esta web usaba el estupendo framework web Twitter Bootstrap para dar formato a las páginas. Pero he decidido eliminarlo y substituirlo por otro que me gusta más.

Las ventajas

La verdad es que Twitter Bootstrap tiene muchas ventajas:

  • Es cómodo: tiene "todo" lo que hace falta para construir un sitio web de forma rápida: elementos CSS, componentes Javascript, etcétera.
  • Está hecho por gente que sabe: estos ingenieros de Twitter tienen que batallar con la web casi a diario, y están al tanto de los problemas que presenta. Saben lo que hacen.
  • Funciona siempre: porque estos ingenieros de Twitter tienen que hacer que sus páginas funcionen en todos los navegadores y todos los sistemas operativos, y han dejado el Twitter Bootstrap fino fino.
  • Funciona siempre en todos los dispositivos: porque lleva incluido un "responsive design" (diseño adaptativo, en español) que permite ver las páginas en móviles o pantallas grandes adaptándose a cada tamaño de pantalla automáticamente.

Las desventajas

Pero también tiene desventajas:

  • No es semántico: para usar Twitter Bootstrap uno tiene que utilizar un montón de "clases CSS " que tienen que ver con la estructura de la página (columnas, filas, etcétera), y no con el contenido en sí. Al final el código de las páginas se contamina con un porrón de estupideces que dicen dónde debe estar cada cosa.
  • Es gigantesto. Tras instalar la nueva versión de Twitter Bootstrap uno tiene que "bajarse" un porrón de liberías que no sabe qué hacen. El proceso es muy sencillo, porque todo se descarga automáticamente, pero me da pánico bajar e instalar cosas que no sé para qué valen.

Hay mucha otra gente que señala las desventajas de Twitter Bootstrap. Para más información se puede consultar este artículo de Zing Designn que creo que señala los defectos estupendamente.

Que Twitter Bootstrap tenga estas desventajas no es, obviamente, un consejo para no usarlo. Creo que en ciertas situaciones es ideal para hacer prototipos, o incluso para hacer sitios web de forma rápida y sencilla. Pero resulta que a mí no me vale.

La alternativa

¿Cuál es la alternativa, entonces? Pues tras buscar un poco me encontré con la aproximación "Goldilocks", que se basa en centrarse en el contenido primero, y luego darle forma a diferentes resoluciones.

Las ventajas son, para mí, enormes: uno se centra en el fondo de las cosas, y luego le va dando forma para que se adapten a diferentes resoluciones y dispositivos. Se elimina mucho código inútil (que sí hacía falta con Bootstrap) y se simplifica uno la vida.

Goldilocks utiliza tres "estilos": pequeño, mediano y grande, y el contenido semántico (las figuras, las cabeceras, etcétera) se ajustan automáticamente a cada estilo.

Goldilocks es, además, muy flexible: te permite meter la pata con el diseño CSS a tu modo, de modo que los errores que cometes (como seguro los habrá en estas páginas web) son responsablidad tuya. Todo un placer.

Tipografía

Para ir terminando: parece que la moda actual consiste en incluir tipografías en las páginas web. La mayoría de las páginas que uno visita tienen la tipografía Open Sans de Google. Esto está muy bien, pero resulta que las páginas se quedan momentáneamente "en blanco" hasta que la tipografía se descarga, se procesa y se muestra. Un horror, vamos.

La Open Sans es muy bonita, y todo lo que quieran, pero la verdad es que a mí me gusta mucho la Georgia, que está disponible en la mayoría de las plataformas (Mac OS/X, Windows, BSD, Linux). ¿Para qué liarse entonces haciendo que el usuario tenga que esperar a descargarse la tipografía de turno para luego mostrar el contenido? Comprendo que esto es estupendo en otros sitios más bonitos, pero a mí (y al lector de esto) no le hacen falta.

Finalmente creo que Georgia se ve medianamente bien con un tamaño medio-grande, ideal para mi incipiente presbicia. Dicho y hecho.

Para futura referencia dejo aquí un enlace a este estudio (ligeramente obsoleto) titulado Georgia On My Mind que explica bastante bien las ventajas de esta tipografía, e incluye ejemplos de diseños bonitos con Georgia.

Hablando de Georgia, aprovecho para colar el vídeo de "Georgia On My Mind" de Ray Charles, que da título al enlace anterior, y que me gusta.