Cómo diseñé este blog

Primeros días de octubre. Por un lado intento terminar mis videos, por otro estoy repensando desde cero cómo quiero estar en redes sociales. Este blog salió en medio de ese ajetreo.

Quiero que mi portfolio funcione como un escaparate. Pocos trabajos, buenos, sin explicaciones largas. Sin embargo, mientras trabajo me paso el día investigando cosas, probando, y a veces abandonando a medio camino. Esa parte hasta ahora no tenía sitio en ningún lado. Si la meto en el escaparate, lo estropeo; si no la meto, se pierde. Así que decidí separar las dos cosas.

¿Y a qué se parece un blog que se lee? Lo primero que me venía a la cabeza estaba claro. Cuadrículas de tarjetas… grandes imágenes de portada… textos que aparecen al hacer scroll… Cuál de esas cosas ayuda a leer, la verdad es que no lo sabía. Empecé por ahí.

La gente no lee, escanea

Nielsen Norman Group lleva años haciendo estudios de seguimiento ocular y el resultado apenas cambia: los que leen un texto en pantalla palabra por palabra son minoría, casi todos escaneamos.¹ (Yo también, lo confieso.) A la forma más eficaz de escanear la llaman "patrón de pastel de capas". La vista salta de título en título y, si una sección le interesa, entra en ella.²

Lo que eso me dice es sencillo: alguien que solo lea los títulos también tiene que poder entender lo que dice el texto. Por eso cada texto empieza con un resumen de una frase. Y en la página de inicio no hay más que la fecha, el título y una línea. Quería que cualquiera pudiera ver en qué ando metido y cómo pienso sin abrir un solo texto.

Hay otra decisión que a algunos les puede chocar. Aquí no hay etiquetas como "borrador" o "en fase de idea". Si voy a escribir sobre una investigación a medias, la escribo como un texto terminado. No le veo sentido a publicar algo que no parezca serio a quien lo lee.

Cuánto debe medir una línea

Según los estudios que recopila Baymard, una línea cómoda de leer tiene entre 50 y 75 caracteres.³ El estándar de accesibilidad WCAG pone el límite en 80.⁴

Quería ver esas cifras con mis propios ojos. Abrí 14 blogs conocidos por lo bien que se leen y medí uno por uno el tamaño de letra, el interlineado y el ancho de la columna de texto. Los que se leían cómodos caían siempre en el mismo rango. En Craig Mod, letra de 20 píxeles y columna de 746. En Medium, 20 y 680. En Every, 20 y 736.

El sitio de Dan Luu, en cambio, es un ejemplo que da que pensar. En una pantalla ancha una línea llega a 224 caracteres, y al volver del final de una línea al principio de la siguiente la vista se pierde. Para mí es el caso más claro de un buen texto desperdiciado en una mala página.

Aquí la letra es de 20 píxeles en escritorio y 17 en el teléfono. El interlineado es 1,55 veces el tamaño de letra y la columna de texto mide 680 píxeles. En la versión turca del blog eso da entre 65 y 70 caracteres por línea (lo medí sobre el texto en turco). Las palabras turcas son largas, así que las líneas se cortan algo antes que en un texto en inglés. Aun así, se queda dentro del rango.

Nada de tarjetas, una lista

Lo que más veo en las portadas de los blogs es la cuadrícula de tarjetas. Una caja por artículo, una imagen por caja. Según NN/g, las tarjetas van bien para poner juntos contenidos distintos entre sí, pero para escanear cosas parecidas, como artículos de un blog, son más difíciles que una lista y ocupan más espacio.⁵ Y está la parte visual. Cuando te obligas a buscar una imagen para cada texto, al cabo de un tiempo empiezas a poner imágenes que no vienen a cuento.

Yo elegí la lista. Agrupada por años, y en cada línea la fecha, el título y una frase.

El escaparate es oscuro, esto es claro

Mi portfolio es oscuro y esto es claro. El motivo es un hallazgo de NN/g: con visión normal, el fondo claro da mejores resultados al leer, y la diferencia crece cuanto más pequeña es la letra.⁶ Para un sitio donde se van a leer textos largos, eso me bastó. Si tu teléfono o tu computadora están en modo oscuro, el sitio también se abre en oscuro, y puedes cambiarlo cuando quieras con el botón de arriba a la derecha.

Lo que no hay y una puerta que dejé abierta

No hay ventanas emergentes, ni caja de suscripción al boletín, ni comentarios, ni anuncios. Tampoco hay cookies, así que tampoco hay aviso de cookies. Ni siquiera las fuentes tipográficas se cargan desde otro servidor.

En los sitios que medí vi con total claridad lo mucho que cansa todo eso. En una página de artículo de Every había cinco capas fijas a la vez: la barra superior, la franja de cookies, la ventana de registro y dos cajas en las esquinas. En un texto de Substack me pidieron cuatro veces que me suscribiera. La página de Linear cargaba 217 scripts distintos. Y ninguno de ellos hace que el texto se lea mejor.

En cambio, hay una puerta que dejé abierta: los bots de inteligencia artificial. Pueden entrar tanto los que hacen búsquedas como los que rastrean sitios para entrenar modelos. Si que mis textos se usen para entrenar un modelo me va a beneficiar, no tiene sentido cerrarles esa puerta.

Por qué una dirección aparte

Primero pensé en un dominio totalmente separado, algo como burakreis.blog. Cuesta 20 dólares al año, y de momento no quise pagarlos. Luego descubrí que Google permite dar un nombre de sitio propio también a un subdominio.⁷ El blog vive ahora en blog.designedbyburak.com. En el menú del portfolio no hay ningún enlace que lleve aquí, para que el escaparate siga limpio. Pero aquí cada página dice quién escribe, y los dos sitios se conocen.

Si algo te chirría, una línea demasiado larga o una letra demasiado pequeña, escríbeme: hello@designedbyburak.com

NOTA: Mientras escribía este texto abrí el blog en una pantalla muy estrecha y el menú de arriba se salía de la página. Ya lo arreglé. Aun así, tiene su gracia que el primer fallo apareciera justo mientras escribía esto.