Plantillas responsive para newsletter en Mailrelay
¿Plantillas responsive en mis newsletters con Mailrelay? Sí es posible, y además de muy recomendables de usar es muy fácil de implementarlas en tus envíos.
Todas las blogueras o emprendedoras que conozco dedican una cantidad de horas ingente a profesionalizar el diseño de su blog o web corporativa:
- Analizan la gama de colores
- Seleccionan las tipografías
- Optimizan la navegación
- Eligen fotografías que refuercen el mensaje
- Repasan una y otra vez los textos más importantes de su web
VISITAR ÍNDICE DE EMPRENDE DESDE CERO
Pero ¿qué pasa con sus newsletters? ¿Utilizan también plantillas responsive?
Tus suscriptores son tu valor más preciado
Son aquellas personas que han confiado tanto en ti y en tu marca como para darte acceso a su correo electrónico personal, ese área íntima y privada que cada uno de nosotros guarda con recelo en internet y dónde solo dejamos entrar a aquellos en los que confiamos de verdad.
Si se han suscrito a tu lista, es porque has conseguido demostrarles que eres una profesional, sabes de lo que hablas y puedes aportarles ese contenido de gran valor que les ayude a seguir creciendo y evolucionando contigo.
No puedes estropearlo ahora utilizando un diseño al azar para tu newsletter ¿no crees?
En el apartado de plantillas para boletines de Mailrelay tienes infinidad para empezar, pero necesitas tener unas nociones mínimas de programación para personalizarlas e incorporar tus colores y tipografías.
Además de que no todas son responsive. Y, como ya deberías saber, el índice de personas que leen sus correos desde sus dispositivos móviles… ¡va en aumento! Y supera a los que lo hacen desde su ordenador.
Por eso, para que cuides tu imagen de marca también en tus boletines corporativos, he programado y diseñado dos modelos de newsletter responsive para Mailrelay que puedes descargar gratis y personalizar a tu gusto siguiendo unos puntos muy básicos que no tienen pérdida.
Eso sí, tendrás que dedicar unos minutos de tu tiempo a cambiar mis colores por los tuyos o estaremos en las mismas ¿verdad?
Ambos modelos tienen dos columnas que puedes eliminar si no las necesitas, pero es la parte más creativa y original de estas plantillas, ya que desde tu ordenador se verán así:
Y desde tu móvil, las dos columnas pasarán a solo una en vertical, adaptándose por completo a la medida de la pantalla del dispositivo móvil desde el que la están leyendo.
¿Qué te parece? ¿Quieres aprender a utilizar estas plantillas responsive en tu newsletter y adaptarlas a tu imagen corporativa? ¡Pues vamos allá!
Descargar e instalar los archivos
He preparado dos archivos txt con los dos modelos que he diseñado para ti.
Los puedes descargar desde el siguiente enlace con los nombres: modeloresponsiveuno | plantillamodeloresponsivedos
El siguiente paso es instalar la plantilla en tu área privada de Mailrelay.
1.- Entra en tu cuenta y ve a PLANTILLAS — PLANTILLAS DE BOLETÍN.
2.- Click en CREAR.
3.- Pon el nombre con el que quieras diferenciar a tu nueva plantilla responsive.
4.- Pincha en VERSIÓN HTML.
5.- Pega el código de la plantilla que hayas elegido para empezar, eliminando las líneas que encontrarás por defecto.
6.- Desmarca el botón VERSIÓN HTML.
7.- Ya tienes tu nueva plantilla instalada.
8.- Baja hacia abajo y pincha en el botón verde SALVAR.
9.- Para instalar la segunda plantilla sigue los mismos pasos.
Personalizar las plantillas responsive
Ahora voy a darte una serie de nociones básicas para que puedas personalizar los colores de los dos archivos que has descargado.
Si ya tienes conocimientos de programación, no te será complicado, pero si es la primera vez que te enfrentas al código HTML, no te preocupes, lo veremos de forma sencilla y detallada para que no te pierdas.
Plantilla responsive modelo uno
► Las fotos
Haz clic encima de la imagen que quieres cambiar y se marcará en azul.
Si te fijas, la imagen del cabecero no ocupa todo el ancho, está alineada a la izquierda. Esto hace que al verse desde el móvil la imagen se adapte a la perfección al espacio disponible y no se perfeccione.
La medida de las imágenes que aparecen en la plantilla de la newsletter modelo uno son:
Logotipo cabecero: 264*109px
Columna: 264px de ancho
Como ves, la imagen de la columna no lleva establecida altura ya que se adaptará a la pantalla desde la que sea vista.
► Las tipografías
Muy sencillo:
Por defecto aparecerá Tahoma 16, pero para cambiarla solo tienes que marcar el texto por párrafos e ir seleccionando la familia tipográfica y tamaño que quieres utilizar.
► Los colores
Aquí ya si nos metemos en el código de la plantilla, pero no te preocupes, que voy a enseñarte a utilizar el buscador para cambiar mi código de color por el tuyo. No hace falta que entiendas al 100% lo que dice cada fragmento de código para personalizarlo.
El fondo: código color — #8fe1d8 (azul clarito)
¿Cómo cambiarlo? Pasa de nuevo a VISTA HTML y pulsa a la vez las teclas Control + F. Se abrirá el buscador del navegador, pega el código que acabo de darte y presiona ENTER.
Encontrarás el siguiente fragmento de código en tu newsletter:
*@editable*/background-color:#8fe1d8;
Cambia mi código de color azul claro por el que quieras que aparezca como fondo de tu newsletter.
Te recomiendo utilizar uno de tus colores corporativos, el de mayor peso visual en tu marca pero de una tonalidad clara, que no llame demasiado la atención ni despiste al lector.
Tu objetivo es que te lean así que no le quites protagonismo a tu contenido con los colores de fondo ¿de acuerdo?
Los subtítulos: muy sencillo, ni siquiera necesitas mi código, puedes cambiarlo como lo hiciste con el tipo y tamaño de la letra:
Los botones: aquí, de nuevo, pasamos a VISTA HTML. Pero tranquila, abre de nuevo el buscador del navegador (Control + F) y busca la palabra que hay dentro del primer botón: VER DESCUENTOS
Encontrarás el siguiente fragmento de código:
<span style=”background-color:#33cccc; padding:5px; border-radius:5px;“><span style=”font-family:tahoma,geneva,sans-serif;”><a href=”http://ift.tt/29AKmHi; target=”_blank”><span style=”color:#FFFFFF;”><strong>Ver Descuentos</strong></span></a></span></span></span></div>
La parte que afecta al botón es la que te he marcado en negrita:
background-color: color de fondo del botón.
padding: espacio entre las letras y el borde del botón.
border-radius: el nivel de redondez de las esquinas de los botones. Si los quieres completamente cuadrados, pon un 0.
¿Y qué pasa con el color de la letra? Porque si utilizas un color de fondo claro, la letra en blanco apenas será visible.
Pues puedes cambiar el color de dos formas: como ya hemos visto antes, directamente seleccionando la palabra y modificando el color o desde la Vista Html en el mismo código de antes:
<span style=”background-color:#33cccc; padding:5px; border-radius:5px;“><span style=”font-family:tahoma,geneva,sans-serif;”><a href=”http://ift.tt/29AKmHi; target=”_blank”><span style=”color:#FFFFFF;“><strong>Ver Descuentos</strong></span></a></span></span></span></div>
Y añadir tu texto y enlace:
<span style=”background-color:#33cccc; padding:5px; border-radius:5px;“><span style=”font-family:tahoma,geneva,sans-serif;”><a href=”AQUÍ EL ENLACE” target=”_blank”><span style=”color:#FFFFFF;“><strong>AQUÍ EL TEXTO DEL BOTÓN</strong></span></a></span></span></span></div>
Las redes: Los iconos de redes sociales son imágenes de 48*48px. Solo tienes que cambiar mis imágenes y enlaces por los tuyos como haces habitualmente cuándo sustituyes una imagen por otra.
¡Y ya está! Ya tienes el Modelo Responsive Uno adaptado 100% a tu imagen corporativa.
¿Qué te parece? ¿A qué no ha sido tan complicado? Un par de toques desde el HTML y el Diseño y solucionado. Ya tienes tu plantilla responsive para tu newsletter en Mailrelay lista.
Recuerda guardar los cambios antes de salir de la pantalla.
Plantilla responsive modelo dos
Personalizar el modelo dos es igual de sencillo.
Ahora que ya sabes cambiar las imágenes, colores y tipografías, poco más puedo decirte para personalizar esta plantilla y utilizarla en tus newsletters.
El procedimiento es el mismo, no obstante, te dejo mis códigos de color para que puedas buscarlos de forma más sencilla y cambiarlos por los tuyos:
- Fondo newsletter: #CCFFF9
- Fondo footer: #33cccc
El color del footer le encontrarás repetido varias veces, ya que es mi color corporativo para las tipografías.
Para cambiar el footer, tienes que encontrar el siguiente fragmento de código:
<td bgcolor=”#33cccc” class=”footer”>
Y cambiar mi color por el código del tuyo.
Si has llegado hasta aquí y has ido siguiendo cada uno de los pasos que hemos visto, ¡enhorabuena!
Ya tienes tus dos plantillas responsive preparadas para usarlas en tus newsletter en Mailrelay.
Tus emails con dos columnas no volverán a verse con letras pequeñitas o textos muy largos desde el móvil, obligando a tus suscriptores a hacer scroll.
Tener que bajar demasiado para leer el texto completo de la primera columna te obliga a volver a subir para leer el de la segunda desde el principio, resulta un poco molesto. Y con estas plantillas eso no sucederá, ya que tu doble columna pasará a segunda fila y desde los dispositivos móviles tus suscriptores las verán de forma vertical y sin problema.
¿Y cómo empiezo a utilizar mis plantillas responsive para newsletter?
Muy sencillo. Si ya las tienes guardadas solo tienes que hacer lo siguiente:
1.- Desde tu panel de Mailrelay accede a BOLETINES — CREAR BOLETÍN
2.- Elige un título y un grupo al que enviarlo para poder continuar.
3.- Haz click en el botón de la izquierda: USAR PLANTILLA.
4.- Elige en el desplegable TIPO: MIS PLANTILLAS.
5.- Selecciona la una de las dos plantillas que acabas de personalizar.
6.- Cambia los textos modelo y las fotografías por los tuyos.
7.- Antes de enviar o programar tu plantilla a tus suscriptores, envía una prueba a tu correo para comprobar que todo es correcto y los enlaces funcionan.
Enviarte una prueba es sencillo.
Una vez hayas terminado tu plantilla, en la página del listado de plantillas, haz clic en ENVIAR con tu plantilla seleccionada, elige ENVIAR PRUEBA DEL BOLETÍN y escribe el correo dónde quieres recibir la prueba en la cajita blanca.
Te aconsejo hacer esto siempre que puedas para ofrecer una imagen cuidada y profesional en todas tus campañas de email marketing.
Creo que no me dejo nada importante en el tintero, he intentado que este tutorial sea accesible a cualquier persona interesada en tener una plantilla responsive personalizada para sus newsletter en Mailrelay. De todas formas, si tienes alguna duda o te quedas estancada en alguno de los puntos, puedes dejar un comentario aquí debajo e intentaré ayudarte en la medida de mis posibilidades.
Además, espero con ilusión que me cuentes los resultados de tu primera campaña de email marketing con tu nueva plantilla responsive, seguro que tus suscriptores notan la diferencia y ésta se ve reflejada en tu índice de conversión.
No olvides pasarte por aquí cuándo analices tus resultados y contarnos qué tal te ha ido utilizando tus nuevas plantillas responsive ¿vale?
Originally published on Blog Mailrelay, email marketing