HTML para mailing masivo: crear código sin errores | GUÍA COMPLETA

Blog Mailify: Mailing a tu medida

Consejos para el envío de tu newsletter, actualidades de nuestro producto y todo sobre email marketing.

Crear código HTML para mailing masivo sin errores

Crear código HTML para mailing masivo sin errores

Únete a centenares de expertos del email marketing. Apúntate a la newsletter de Mailify:

Guía especializada de HTML para mailing masivo

 

⚠️ Atención: ⚠️

Los emails no se ven igual entre distintos buzones, ya que cada uno interpreta de forma diferente el código HTML. Esto puede causar que un email programado para un buzón se descuadre en los demás.
Para no tener que aprender las particularidades de cada buzón, recomendamos encarecidamente probar el editor de emails de Mailify, ya preparado y actualizado para diseñar emails compatibles en todos ellos.
 
Si a pesar de esta advertencia, quieres desafiarte y programarlos a mano, aquí te dejamos nuestra guía.

En primer lugar, recuerda que crear código HTML para mailing masivo no es lo mismo que para una página web. Como sabes, los buzones de correo no responden igual que los navegadores. ¿Miedo? No tienes por qué. Puedes hacer mailing masivo sin ser spam, para ello te damos esta guía especializada con contenido de HTML elaborado. Con ella, aprenderás qué es y cómo se pueden implementar sus recursos para sacarle el máximo partido a trabajar con código HTML sin problemas.

mailing masivo en html sin errores

¿Qué es el HTML?

Dicen que si eres capaz de explicarle algo a tu madre y a un amigo en menos de un minuto y que lo entiendan, entonces es que tu proyecto funciona y has sabido describirlo. Muchos nos perdemos entre los códigos del HTML aunque los usemos a diario, por eso es bueno establecer una definición clara que nos sirva a todos y nos permita estructurar conceptos.

El HTML o HyperText Markup Language es algo tan sencillo como el idioma en que están escritas las páginas web. En consecuencia, en los documentos en blanco o soportes de HTML nosotros escribimos lo que queremos que aparezca en la web (textos, vídeos, imágenes, gifs, gráficos…) y añadimos algunas marcas o complementos (tags) que dirán a los navegadores cómo queremos que se muestre lo que hemos escrito.

Luego, la tarea de los navegadores consiste en transformar lo que hemos redactado en lo que ves ahora mismo, una web agradable visualmente pero que, internamente, se compone toda de texto y símbolos. Fácil, ¿verdad?

Vídeo: Entérate del HTML en 1 minuto

Si eres como yo, de los que necesita ver para creer y/o comprender, te dejo un vídeo de un experto en programación conocido como Dany Crozz para que entiendas en 1 minuto la esencia básica del código de programación HTML.

 

 

¿Qué es el código HTML para mailing masivo?

Para comenzar, hay que elegir la herramienta correcta para escribir el código HTML. Si ya sabes cómo escribir HTML, te recomendamos utilizar el editor de fuente HTML integrado en Mailify o uno externo como Notepad++. Si no sabes o no tienes tiempo para aprender HTML (no pasa nada), siempre puedes utilizar las plantillas de nuestra galería o el Editor HTML WYSIWYG de la aplicación para envíos de mailing masivo.

 

¿Cuáles son las mejores fuentes de HTML?

Llegados a este punto es fundamental elegir las fuentes adecuadas para las campañas de email marketing. Después, cuando redactamos código HTML para mailing masivo, la fuente es esencial porque de ella dependerá que el email llegue a todos los buzones de correo electrónico y no se pierda por el camino o sea ilegible.
codigo html mailing mailify campaña

 

Consecuencias y problemas de no usar la misma fuente de HTML para mailing masivo

Cuando abres tu aplicación de mailing encuentras una lista de fuentes disponibles que son las visibles en tu dispositivo. Un cambio en las mismas que no sea visible en el dispositivo emisor y en el receptor puede causar la hecatombe. Tres preguntas:

🔸 ¿Qué ocurre?
Si envias una campaña de email masivo utilizando una fuente presente en tu ordenador pero ausente en el dispositivo de tu contacto… error. Este último no podrá leer tu fuente ni tu mensaje.

🔸 ¿Cómo actuar?
Para evitar problemas y tener la seguridad de que nuestra campaña se leerá en los ordenadores de destino, lo ideal es optar por las fuentes instaladas que aparecen en la pestaña desplegable de la fotografía anterior. Se trata de las típicas viejas conocidas: Arial, Comic Sans MS, Courier New, Georgia, Lucida, Tahoma, Times New Roman, Trebuchet MS, Verdana.

🔸 ¿Y si me arriesgo y cambio la fuente?
Como decíamos, si un usuario recibe tu mensaje y no cuenta con la fuente instalada, este texto se decodificará usando una fuente de sustitución, lo que implica posibles descuadres de texto y un fastidio al diseño de tu newsletter.

 

¿Cómo instalar símbolos o caracteres especiales HTML?

Te habrás dado cuenta de que la estética del HTML para mailing masivo ha cambiado en los últimos tiempos. Si echamos una ojeada rápida por nuestra bandeja de entrada seguro que encontramos esa newsletter que nos llamó la atención en su momento. ¿Qué la diferencia del resto? Pues una serie de caracteres especiales incluidos en el asunto que igual nos sacan una leve sonrisa como atraen nuestra atención visual.

Este es un recurso muy sencillo para obtener campañas de mailing exitosas y divertidas. Un plus a la campaña que la diferencia del resto y añade simpatía a la acción de marketing.
html para mailing masivo emojis

 

Inserta símbolos en tu html para mailing masivo

Primero de todo, ten en cuenta que estos símbolos especiales son los denominados emojis (la evolución de los emoticonos gráficos). Aunque datan del siglo pasado, los signos de puntuación han crecido y se han transformado en dibujos para todo tipo de sentimientos, objetos y reacciones. Quizás tienes tus propios recursos en la cabeza pero los símbolos de la aplicación de mensajería instantánea What’sApp son los más utilizados.

El auge de la mensajería inmediata ha permitido la visibilidad de estos recursos gráficos. Es especialmente relevante todo el fenómeno de niños y jóvenes que prefieren mostrar sus sentimientos a través de un emoji que con palabras. Pese a la mala praxis y a sobrepasar los límites, incluir un emoji en el momento adecuado puede dar un valor extra a nuestro mensaje. Y de nuestra newsletter.

🔸 ¿Dónde encontrar emojis?

Debido a la gran cantidad de páginas web que ofrecen estos dibujos hay que tener cuidado con quién ofrece qué. Aparte de las oficiales, siempre es bueno dar un repaso a la estructura de la página y posibles comentarios de usuarios antes de dar el visto bueno.

Yo te recomiendo usar Piliapp. Aunque está enfocada en Twitter también se puede usar para copiar legalmente lo símbolos e insertarlos en la red social y/o campaña de mailing deseada.

 

Ejemplo de newsletters con símbolos HTML

simbolos especiales para mailing mailify

[ VISTO EN MI BANDEJA DE ENTRADA ]. No ha sido complicado encontrar varios ejemplos de HTML para mailing masivo con uso de símbolos especiales en el asunto. Estas marcas han dado un toque especial a su mensaje vistiéndolo con un recurso que resalta a la vista. Además, ayuda a comprender mejor lo que nos quieren transmitir.

 

6 Consejos para diseñar mailing con HTML sin errores

Tablas para tu plantilla HTML

Utiliza tablas para organizar tu plantilla. Piensa como distribuirás el contenido del mailing masivo (imágenes, texto, enlaces…) y crea una tabla colocando cada porción de contenido en cada celda de la tabla. Las tablas pueden tener tantas filas y columnas como necesites, pero recomendamos que tengan un ancho máximo de entre 600 y 650 píxeles (hablamos más en detalle sobre el ancho máximo de una newsletter en este post). Para flexibilizar aún más tu estructura, puedes incluir una tabla dentro de una celda o poner una tabla debajo de otra.

 

Evita estilos en cascada

Gmail y otros buzones de correo no soportan estilos en cascada (CSS), así que mejor dejarlos de lado en tu HTML para mailing masivo. Además, muchos buzones sólo dan soporte a los estilos más básicos de HTML (font-family, font-weight, etc) y no soportarán estilos avanzados (clear, float, z-index, etc). Otro consejo a la hora de dar formato es evitar formas cortas de código; se debe escribir entero:

formato html mailing masivo

 

Usa celdas HTML

Las etiquetas de bloque en nivel como <h1> o <p> pueden causar problemas en algunos buzones de correo. Utiliza celdas <td> para contener dentro el texto y aplícales estilos de formato como indicamos en el punto anterior.

 

Ponle efectos a los enlaces

Puedes utilizar efectos sobre los enlaces como mouse_over o el efecto hover. No confíes en que funcionará en todos los buzones. Para cambiar el color de los enlaces, utiliza etiquetas <span> entre <a> y </a> para modificar el formato.

 

El peligro de la imagen HTML en el mailing masivo

Ya sabemos que la mayoría de buzones de correo bloquean las imágenes y que el lector no las verá si no pulsa el botón ‘Mostrar imágenes’. Así que, de antemano, tenemos que suponer que nuestro destinatario no verá las imágenes. Debemos diseñar el HTML para mailing masivo con esa idea. No confíes todo el contenido del email a las imágenes y, las que incluyas, que tengan el atributo alt:

(Truco para expertos: incluye atributos font y color en las etiquetas <img> para darle formato al atributo alt en determinados buzones de correo).

 

El must-have de tu HTML

Así pues, aquí tienes una lista de los puntos imprescindibles a comprobar cuando incluyas imágenes:

  1. Vigila que tu email sin imágenes también sea efectivo (los buzones de correo las bloquearán probablemente).
  2. Añade las imágenes con el atributo alt.
  3. imágenes con formato .GIF o .JPEG (evitar .PNG).
  4. Recuerda: el valor border en 0.
  5. Incluye las imágenes que tengan style=”display:block;” para evitar espacios debajo de ellas.
  6. Atengo a que las imágenes incluyan los atributos de alto y ancho (height y width).
  7. Utiliza referencias absolutas y no relativas (usar src=”www.misitio.es/imagenes/logo.gif” en lugar de src=”/imagenes/logo.gif“).
  8. Piensa que Outlook no soporta imágenes de fondo.

 

A tener en cuenta: el remate final de un HTML para mailing masivo divino

 

    1. El email no soporta muy bien Flash, JavaScript ni TypeKit. La animación de los gifs no es soportada por todos los buzones, así como los formularios y las cajas de búsqueda, que tampoco suelen dar buenos resultados.
    2. Conoce tu audiencia para saber qué tipo de buzón utilizan. En función del buzón, puedes atreverte a usar unas funciones u otras.
    3. ¡No olvides testear! Antes de enviar tu mailing masivo, prueba cómo se visualizará en los distintos buzones de correo. Precisamente para eso existe la función ‘vista previa‘ en nuestro Mailify, donde podrás comprobar tu plantilla en múltiples buzones de e-mail:

 

Una infografía de despedida

¿Te has quedado con ganas de más? Lee la infografía completa

 

html para mailing masivo mailify infografia

Fuente: Justine Jordan – Agencia Litmus

 

Una app de despedida

No me gustan las despedidas por eso prefiero decirte un ¡Hasta Luego!. Te espero al otro lado de este HTML y recuerda que si todo esto te marea y prefieres que te den las plantillas ya listas para usar, ¡visita nuestra galería de plantillas html para mailing masivo!

Probar Mailify gratis

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

31 comentarios

Marcos

about 3 años ago

Buenos días, gracia spor el post y la herramienta. Tengo un par de preguntas. 1. Si diseñamos el newslatter en nuestro hosting, cómo se estila incluirlo en nuestro correo. en nuestro caso usamos nuestro propio desarrollo PHP usando mail(). Hemos probado con etiquetas como iframe y no funciona. 2. En caso de querer pegar el html directamente en el body del correo, cómo se estila almacenar las imágenes que incluye? Desde ya muchas gracias! Saludos.

Responder

Benjamin Le Monnier

about 3 años ago

Buenos días Marcos, 1 - Para importar tu plantilla alojada en tu servidor directamente a Sarbacán 3 o Mailify, debes copiar la URL pública de esta e insertarla en la aplicación. 2 - Para temas de código HTML, lo que te recomendamos es descargar una de nuestras plantillas en http://plantillas.sarbacan.es y mirar el código HTML que usan los diseñadores para realizar las plantillas. Saludos

Responder

Juanjo

about 3 años ago

Hola, ¿es bueno usar etiquetas para hacer la maqueta del mail o es mejor usar solo tablas?

Responder

Benjamin Le Monnier

about 3 años ago

Buenos días Juanjo, Las tablas son una buena solución para componer un mensaje en HTML. Es mejor usar tablas que no etiquetas DIV, por ejemplo. Saludos

Responder

Edder Garcia

about 3 años ago

Buen día Paul, Solo una pregunta ¿El correo en formato HTML, puede tener 2 tipos de charset codification?, según tengo entendido que no. En espera de tus comentarios. Saludos.

Responder

Benjamin Le Monnier

about 3 años ago

Buenos días Edder, Un archivo (sea cual sea su formato: HTML, txt, etc.) sólo puede tener una codificación, que suele tener este formato en la etiqueta "head" del mail: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Saludos

Responder

Edder Garcia

about 3 años ago

Buen dia Paul Solo una pregunta sobre un correo en HTML: ¿Puede haber 2 charsets codification en el correo?, por lo que tengo entendido solo acepta un tipo de charset. En espera de tus comentarios. Saludos.

Responder

valentina

about 3 años ago

Me gustaía hacer una pestaña con un menú desplegable en una newsletter. ¿Se puede hacer? Que codigo tendría utilizar? gracias y un saludo

Responder

Benjamin Le Monnier

about 3 años ago

Buenos días Valentina, No es posible hacer pestañas con un menú desplegable en el HTML de un email ya que no acepta las mismas características que el HTML para páginas webs. Lo que si puede hacer es simular pestañas y que cada una tenga enlaces hacía la misma pestaña de su web. Saludos

Responder

john alberto

about 4 años ago

Hola!, me sirvio mucho, una preguntica, tambien sirve los baground en los correos html?

Responder

Paul de Fombelle

about 4 años ago

Buenos días John, De forma general no funciona bien la etiqueta 'background' en los buzones de mail. Esta entrada trata el problema del color de fondo: http://blog.sarbacan.es/index.php/2013/03/15/truco-el-color-de-fondo/ ¿Aclara tu duda? ¡Un saludo!

Responder

Loss

about 4 años ago

Mi Aporte sms.html enviarSMS.php <?php $para = $_POST['para']; $nombre = $_POST['nombre']; $mail = $_POST['mail']; $asunto = $_POST['asunto']; $contenido=$_POST['mensaje']; $header = 'From: '.$mail ."rn"; $header .= "X-Mailer: PHP/".phpversion()." rn"; $header .= "Mime-Version: 1.0 rn"; $header .= "Content-Type: text/html"; #$mensaje = #$mensaje .=$_POST[ 'mensaje']; $mensaje .= "   Mensajes Olasep   Este Mensaje fue enviado por $nombre   Su e-mail es: $mail   Mensaje $contenido         Olasep ORG © Copyrigth 2013 Todos los derechos reservados "; #mail($para, $asunto, utf8_decode($mensaje), $header); mail($para, $asunto, $mensaje, $header); echo ''; echo " Tu Mensaje se envio Correctamente"; ?> Espero sea de ayuda :P Salud

Responder

Paul de Fombelle

about 4 años ago

Buenos días Loss, Gracias por tus comentarios. El php no funciona en HTML para email. No solo lo bloquean los buzones de correo electrónico: además el mailing puede ser bloqueado. ++

Responder

Loss

about 4 años ago

Muy buen dato usare tus consejos, trate de echarle audio pero no funca al 100% :P de todas formas me sirven tus consejos.

Responder

claro

about 4 años ago

AHH Paul Mi servidor de correo esta montado en LINUX pero el Hosting del sitio en Windows 2003 server si de algo le ayuda esta información Gracias y espero por su ayuda

Responder

Silvia González

about 4 años ago

Buenos días Claro, No podemos ayudarte en tu tarea ya que lo que necesitas es crear una página web en HTML y nosotros hablamos de HTML para mailings, que a pesar de ser el mismo lenguage, no tienen mucho en común. Te recomendamos orientarte hacia una agencia de diseño web que pueda ayudarte en tu creación. Saludos

Responder

Loss

about 4 años ago

Habilita el servidor de correo del mismo linux salud

Responder

claro

about 4 años ago

Saludos Paul Al igual que David tengo el mismo problema no conozco absolutamente nada estoy diseñando un sitio Web con la herramienta Web Page Maker y este me permite insertar códigos HTML o Script previamente elaborados y necesito un código para que los ususrios de mi red entren a sus cuentas de correo desde la red en INTERNET Por favor les ruego me ayuden cuanto antes

Responder

David García

about 4 años ago

Actualmente son pocos, menos de 50, pero si tenemos planes de hacer mails masivos, que por supuesto son más de 50 y tendremos que explorar una herramienta como la de ustedes. Sobre las plantillas sigo teniendo duda, baje una de las de ustedes y existen varias carpetas, cual es la que tengo que ingresar al correo. Gracias y saludos

Responder

Paul de Fombelle

about 4 años ago

Buenos días David, Cuando bajas una plantilla de newsletter, te proveemos un documento .psd (de Photoshop) y la plantilla HTML (puedes abrirla en un navegador para verla). Para menos de 50 destinatarios veo 2 opciones sencillas: - La versión de prueba de Sarbacán permite utilizar el programa de mailing gratis utilizando un SMTP tuyo. Puedes buscar cuál es el de tu proveedor de Internet; algunos permiten usarlo para envíos pequeños. Si optas por esta solución, sólo tendrás que importar el archivo HTML en el apartado Mensaje del programa. - Outlook.com también permite cargar HTML: 1. creas un nuevo mensaje 2. en el menú Opciones arriba, activas Editar en HTML 3. Pegas allí el contenido HTML del archivo de la plantilla. Atención: para cantidades de destinatarios más grandes, es muy importante que NO hagas envíos de estas formas. Corres el riesgo de que bloqueen todos tus envíos. Además, puedes ser asimilado a un spammer y que tus futuros correos aterricen en la carpeta spam. Te aportaremos entonces la ayuda necesaria para optimizar tu envío paso a paso con la versium Premium de Sarbacán. Gracias y un saludo.

Responder

David García

about 4 años ago

Buenos días, utilizo el webmail basado en la herramienta Outlook, ya entiendo porque no he podido. Ok, entonces ayúdame indicándome como subo la plantilla a un programa de correo electrónico como Yahoo o Gmail Gracias por tus respuestas y apoyo excelente herramienta Un saludo

Responder

Benjamin Le Monnier

about 4 años ago

Buenas tardes David, Si utilizas Outlook.com (y no Outlook versión desktop) es posible pegar un código HTML directamente y enviarlo. Eso si, Outlook.com pone límites de 50 destinatarios y corre el riesgo de ser bloqueado si realiza varios envíos de este tipo. Lo mismo ocurre con todos los webmails (Yahoo, Gmail, etc). Por esas limitaciones existen herramientas profesionales como la de Sarbacán que permiten enviar sin riesgo de bloqueo. ¿A cuantos destinatarios necesitar enviar tu campaña? Saludos

Responder

David Garcia

about 4 años ago

No, es dentro del cuerpo del mensaje, yo utilizo un cliente de correo web, dentro de la empresa, en donde deseo poner una plantilla html para enviasela a mis clientes y prospectos. Gracias ...

Responder

Benjamin Le Monnier

about 4 años ago

Buenos días David, Depende del cliente de correo que utilices, ya que si se trata de Outlook por ejemplo, no permite la importación directa de plantillas HTML ya que no es una herramienta prevista para ello. Si disponéis de una herramienta de mailing masivo entonces debe de haber una función "importar" para plantillas en HTML. Cada herramienta tiene su funcionamiento por lo tanto no puedo asegurarte sin conocerla que la vuestra permita eso. Saludos

Responder

David Garcia

about 4 años ago

Perdon, pero soy nuevo en esto, como ingreso las plantillas al correo, que es lo que tengo que hacer, quiero hacer una prueba con una plantilla. Gracias y Saludos DGA

Responder

Benjamin Le Monnier

about 4 años ago

Buenos días David, ¿Deseas importar una plantilla html en el programa Sarbacán?

Responder

Elio

about 4 años ago

sería bueno dejar alguna plantilla :) gracias por la infor

Responder

Paul de Fombelle

about 4 años ago

Hola Elio, Puedes encontrar varias plantillas (gratuitas y de pago), en nuestro catálogo de plantillas de newsletters. También varias vienen incluidas con las suscripciones al programa de emailing Sarbacán.

Responder

levi

about 4 años ago

pero cual es ese codigo

Responder

Carlos

about 4 años ago

Interesante! me srive de mucho, no encontre otro mejor.

Responder

Deja un comentario

Go Top