Use only grid system (or other component) from Bootstrap

PSA: You don’t need to add the whole Bootstrap code and a zillion dependencies and plugins just because it’s easier to use col-md-3 than hacking some CSS to float a few divs.

Use the link below to download a customized version of Bootstrap. Need the Grid System? Perhaps the pretty Glyphycons or tooltips? This has you covered:

Customize & Download Bootstrap

HTML0 – A starting point for front-end design

My last post was about front-end design workflow. Since then I got to think that others might benefit from it in a more concrete way.

So here it is, I put everything I use to kickstart a new HTML design project. For lack of time and creativity I named it HTML0. Its main parts are Browsersync + Sass, with a couple of Sass helpers I use frequently.

Any feedback is welcome :)

Fork HTML0 on GitHub.

Legibilidad en los medios online

Cada vez utilizo menos el RSS para leer noticias, y en cambio recibo lo más importante y/o lo urgente vía twitter. Esto me ha hecho visitar directamente los portales de noticias locales.

Sin mucho análisis se puede ver que la mayoría de los medios de comunicación online uruguayos tienen problemas de legibilidad [1]. Algunos bastante graves, a pesar de que debería importarles mucho cómo se lee su contenido.

Ya se, “la semana que viene lanzamos un rediseño”, “una nueva versión del sitio nuevo está en desarrollo”, y muchos más. Sin embargo, pasan semanas y nunca se actualizan. O peor, las nuevas versiones siguen teniendo los mismos defectos.

La usabilidad es algo que se va mejorando de a poco, a medida que vamos evaluando y apilando pequeñas mejoras, que a la larga, hacen una experiencia agradable para el usuario. Por eso creo que la mejora en este aspecto no puede esperar al próximo rediseño, debería ser algo más dinámico, que se evalúa y se mejora en iteraciones más cortas, que se pueden implementar hoy.

Voy a detallar algunos ejemplos de algunos de los medios que más me chocan. En todos los casos, pueden corregirse con no no más de 5 líneas de código CSS.

El País

Simplemente un poco de espacio entre párrafos y más interlineado, fuente apenas más grande y serifada.

180

En este caso el problema más grave es el tamaño de fuente que es muy pequeño.

Brecha

El problema más grande es el uso innecesario del fondo a rayas, que contrasta bastante mal con el texto. Un poco más de espacio no le viene mal tampoco.

Para ser justo, hay quienes están haciendo las cosas bastante mejor. Un ejemplo digno de mención es El Observador, que sin dudas es el más agradable para leer. De todas maneras, también tiene margen para mejorar.

De hecho, todos siempre van a poder mejorar. El objetivo de usabilidad al 100% es inalcanzable, y eso está bueno porque siempre se está buscando pequeñas mejoras que faciliten el uso del producto.

Notas

  1. Me refiero en realidad a lo que se define como “Readability”. No estoy seguro si “legibilidad” es una buena traducción, ya que “legibility” también existe en inglés y no refiere exactamente a lo mismo.
  • Merecen un capítulo aparte las publicidades de algunos de los sitios, que saltan encima de todo, te siguen, algunos no te dejan leer hasta que las cerras, etc.
  • Mientras no llega la “próxima actualización del sitio”, podemos usar una hermosa aplicación web llamada Readability, que transforma cualquier artículo online, aplicandole un estilo legible y agradable. También elimina contenido secundario, publicidad, etc. Claramente estas aplicaciones no deberían existir si se estuvieran haciendo bien las cosas en este aspecto.