(Vídeo) Diseñar una newsletter sencilla y efectiva en menos de 15 minutos

Hoy vamos a diseñar una newsletter sencilla, con el editor de Mailrelay, y en menos de 15 minutos.

El vídeo dura un poquito más, pero es porque hablo un poco en la presentación, y luego al final también.

Lo que es la materia, el tema del diseño de la newsletter, solo dura poco más de 10 minutos.

Te dejo con el vídeo:

Diseñar una newsletter sencilla

También te recomiendo, si quieres verlo a pantalla completa, que accedas a Youtube:

• Puedes verlo aquí

Hay algunos detalles que se ven mejor a pantalla completa, pero en general el proceso lo verás claro aquí también:

¿Qué hemos visto en este vídeo? Basicamente algunos puntos clave en el diseño de una newsletter:

Cómo crear una tabla contenedora

De forma que podamos centrar el contenido dentro de la misma. A esta tabla le daremos:

• Una anchura del 100%.
• Una fila
• Una columna
• Sin borde

Te quedará esta configuración más o menos como en la imagen.

Cómo crear una tabla interior

A continuación lo que hacemos es crear una tabla interior, que irá dentro de la otra. Esto lo vamos a ver en dos pasos primero:

• Nuevamente es una tabla de una columna
• Y una fila pero hay dos diferencias
• El ancho es 65%
• Alineación centrado

Creo que me quedé un poco escaso de ancho, y quizá un 75% o 85% te den mejores resultados visualmente.

Es cuestión de probar hasta dar con lo que mejor resultado te de.

Ahora, sin salir de esta pantalla nos vamos a la pestaña avanzado.

Aquí vamos a modificar la casilla Estilos:

• max-width: 500px;
• Esto establece un ancho máximo, de forma que aunque el cliente de correo disponga de más ancho nuestra newsletter no lo exceda.
• padding: 5px;
• Con el padding lo que hacemos es dejar un espacio entre el borde de la tabla y el interior, de forma que si la tabla ajusta al borde del dispositivo, quede algo de espacio en blanco.

Te quedará algo así:

Insertar imagen en la newsletter

Y lo siguiente que hacemos es insertar una imagen, este paso es fácil, pero a su vez es importante configurar el ancho:

• Anchura: 100%
• Altura: vacío 

Es importante que dejes el campo altura vacío, porque así la imagen ajustará las proporciones in problemas, ajustando el ancho al ancho disponible.

Añadir un botón a la newsletter

En el siguiente paso vamos a añadir un botón para nuestra llamada a la acción.

Es muy fácil, simplemente marcamos el texto y hacemos click en el botón de enlace.

Luego vamos a la pestaña avanzado, y en la casilla estilo introducimos:

• background-color:#18adb3;
• Esto definirá el color de fondo del botón.
• border:2px solid #18adb3;
• Aquí indicamos el grosor y el color del borde
• color:white;
• El color del texto
• display:block; margin:0 auto;
• Dos valores para conseguir que el botón se centre en la página
• padding:5px;
• Un margen entre el borde y el texto
• width:50%;
• Ancho del botón, para que no ocupe todo el ancho del diseño.
• text-decoration: none;
• Para quitar el subrayado del enlace

Con estos valores te quedará un botón visualmente interesante.

Añadir una tabla con más columnas

Si queremos por ejemplo añadir una tabla para que tenga más columnas, podemos hacerlo simplemente así:

Definimos un ancho del 100%.

Y 5 columnas.

Aquí lo importante será, si añades imágenes que les pongas un ancho del 100%, como vimos antes en el apartado de las imágenes.

Por último.

El enlace de baja

Al diseñar una newsletter es muy importante que incluyas el enlace de baja.

Para hacerlo simplemente crea un enlace con estos valores:

• Protocolo: otro
• URL: [unsubscribe_url_click]

Y a partir de eso Mailrelay generará un enlace de baja para cada suscriptor.

¿Cómo queda nuestra plantilla de newsletter?

Pues si sigues este tutorial al pie de la letra al final del mismo deberías tener una newsletter muy parecida a esta:

Que la verdad, para haberla preparado en unos minutos no está nada mal ¿verdad?

¿Y si miramos la newsletter en un móvil?

Pues tenemos algo así:

Como comentaba al principio, quizá con un ancho en porcentaje superior al 65% se vería mejor, pues en este caso se ajusta demasiado.

Pero en general se ha adaptado de forma razonable

¿Por qué es efectiva esta newsletter?

Porque incluye todo lo básico que queremos en una newsletter:

• Cabecera con una imagen donde mostrar la marca
• El texto imprescindible
• Un botón y llamada a la acción para que el suscriptor ejecute la acción que queremos
• Más fotos en caso de ser necesario
• Algunos enlaces y llamada a la acción secundarias
• Enlace de baja

Podríamos haber insertado algún elemento más, pero no es indispensable.

[Lo indispensable está ahí]

En general es buena idea mantener el diseño de la newsletter al mínimo, porque al final lo que queremos es que quien la recibe realice alguna acción.

Normalmente que pinchen en algún enlace para hacer algo.

No es necesario ni recomendable recargar el diseño de la newsletter.

¡No te sobrecompliques!

Espero que este tutorial para diseñar una newsletter te sea útil

Si te ha gustado este formato de vídeo y guía coméntamelo y preparo alguno más.

¿Quizá para los boletines RSS?