Newsletter
Cuando un post sale a la luz, también sale por correo: una campaña por idioma, cada una a su propia lista. El correo toma prestado el lenguaje de diseño del sitio y reutiliza las palabras del propio post, para que la bandeja de entrada y el sitio se sientan un solo producto.
El diseño del correo
Una sola columna de 600 píxeles: una tarjeta blanca sobre una página gris suave, una barra de acento lima de cuatro píxeles en la parte superior, el logotipo debajo y Inter en cada línea. Después, la banda: la ilustración del post, oscurecida, con un gran numeral verde de la parte y el título en blanco. Los enlaces usan el verde legible de texto y las esquinas de la tarjeta quedan a 14 píxeles. Es el sitio, traducido a lo que permiten los clientes de correo.
La banda es una imagen generada (una por post y por idioma), así que se ve igual en todos los clientes, y el título se repite debajo como texto real: quien lea con imágenes desactivadas, con letra más grande o con un lector de pantalla no pierde nada más que la atmósfera. El modo oscuro sigue la preferencia del lector, con la misma idea de valores emparejados que los tokens del sitio: la página pasa a casi negro, la tarjeta a gris oscuro, el logotipo cambia a su versión clara y los verdes suben para seguir siendo legibles. La banda ya es oscura por diseño, así que es el único elemento que no necesita cambio.
Por qué el título va doblado
La banda y el titular muestran el mismo título a lectores distintos. Cada razón de abajo es un lector que el diseño perdería de otro modo.
- Quien escanea se salta los banners. Un bloque gráfico estilizado al inicio de un correo se lee como publicidad (el patrón se llama ceguera ante los banners), y un lector con prisa salta directo al primer texto. Si el título viviera solo en la banda, ese lector no lo vería. El titular de texto es donde aterriza su mirada.
- El Outlook corporativo bloquea las imágenes remotas por defecto, y los lectores de este boletín son ingenieros, justo el público con más probabilidad de usarlo. Con el título como texto, un correo con todas las imágenes bloqueadas sigue diciendo de qué va; el texto alternativo de la banda repite la serie, la parte y el título por la misma razón.
- Los lectores de pantalla navegan el correo por titulares, y un título dentro de una imagen no es un titular. La letra ampliada por el lector escala el texto, nunca las imágenes. Las WCAG (las pautas de accesibilidad para el contenido web) piden lo mismo en el punto 1.4.5: nada de imágenes de texto donde el texto real puede hacer el trabajo.
- El doblado se mide, no se supone. La banda y el botón enlazan al mismo post con valores distintos de
utm_content, así que los datos de clics muestran si la banda se gana su sitio o si el botón hace el trabajo.
Fuentes: Nielsen Norman Group — la ceguera ante los banners, la investigación con seguimiento ocular · Litmus — el bloqueo de imágenes en correo, cliente a cliente · W3C — entendiendo la WCAG 1.4.5, imágenes de texto
Qué dice el correo
El correo reutiliza las propias palabras del post, así que nada se escribe dos veces y nada puede contradecir al sitio. Un post de serie recibe el eyebrow de la serie y su número de parte, el cuerpo es la propia descripción del post, y el botón es la única acción.
- Asunto de serie: «Nuevo en la serie: {título} (Parte N)», con el título cortado en el primer signo de dos puntos para que la línea quede corta.
- Asunto de post suelto: «Nuevo artículo: {título}».
- Un solo botón verde, «Leer el post →». El correo pide exactamente un clic.
- Un post de serie cierra nombrando la serie y enlazando la parte anterior, para que un suscriptor nuevo pueda llegar a las partes anteriores.
- La campaña de cada idioma va a su propia lista, y solo cuando la traducción existe.
- El título aparece dos veces a propósito: compuesto en la imagen de la banda y de nuevo como titular de texto. La banda es presentación; el titular de texto es lo que realmente recibe un lector de pantalla o un cliente sin imágenes.