Hemos profundizado en los conceptos básicos de Codificación de correos electrónicos HTML desde cero y pesó el Diferencias entre el diseño web y el diseño de correo electrónico Sin embargo, ahora vamos a sumergirnos aún más en el mundo del desarrollo de correo electrónico con MJML.

Quizás ya hayas oído hablar de MJML o quizás te resulte completamente desconocido, pero se ha convertido en un elemento básico en el desarrollo de correo electrónico y podría ser la solución a muchos de los problemas comunes de diseño que te surgen. En esta publicación, aprenderás qué es MJML, cómo puede mejorar tus procesos de diseño e incluso podrás programar tu propio correo electrónico con MJML. ¡Comencemos!

¿Qué es MJML?

Ya hemos discutido antes cómo El caótico mundo del diseño de correo electrónico Puede ser. A diferencia del desarrollo web, que se ha moldeado a lo largo de los años según estándares y directrices de uso casi universal, el desarrollo del correo electrónico se ha dejado a merced de los clientes. Esto ha generado inconsistencias generalizadas en la representación y menor flexibilidad para la capacidad de respuesta del correo electrónico, especialmente al crear correos electrónicos desde cero.

Pero aquí es donde MJML viene al rescate.

MJML significa Lenguaje de marcado de Mailjet y fue creado originalmente por un equipo de desarrolladores en Mailjet En 2015, se creó para simplificar el proceso de diseño de correos electrónicos adaptables. Desde entonces, el framework MJML se ha convertido en una herramienta popular para crear correos electrónicos de forma eficiente y sencilla. Si te preocupa tener que aprender un lenguaje de programación completamente nuevo para usar MJML, no te preocupes. MJML es bastante similar a HTML y será muy fácil de aprender para quienes ya estén familiarizados con el desarrollo web.

¿Cuáles son las ventajas de utilizar MJML?

• MJML tiene componentes bien documentados que están relacionados o son idénticos a los de HTML, como imágenes y botones, pero también tienes la posibilidad de crear tus propios componentes dentro del marco para adaptarlos a tus necesidades.

• MJML combina una sintaxis sencilla con un comportamiento responsivo, lo que significa que no tendrá que arriesgarse a perderse en un laberinto de anidación de tablas ni a implementar una gran cantidad de CSS para adaptarse a diversos clientes de correo electrónico. Esto ahorra mucho tiempo y espacio de código.

• MJML es de código abierto, lo que significa que la comunidad más amplia de usuarios de MJML puede contribuir a mejorar el marco y encontrar más soluciones para cualquier actualización que introduzcan los clientes de correo electrónico.

Cómo instalar MJML

Tiene varias opciones disponibles para instalar y usar MJML. Aquí tiene algunas:

En el sitio web de MJML, puedes codificar directamente dentro de tu navegador: https://mjml.io/pruébalo-en-vivo Esta también es una buena opción para probar MJML si eres principiante.

• Descargue la aplicación MJML – Podrás usarlo sin acceso a Internet y viene con una función de vista previa en vivo.

• Complemento Atom – Contiene un conjunto de paquetes que incluyen detección de errores y una función de vista previa en vivo como la aplicación MJML.

• Complemento de Visual Studio Code – Este complemento tiene todas las características de las opciones anteriores, incluida la capacidad de enviar correos electrónicos con Nodemailer o Mailjet.

• Complemento de texto sublime – Simplemente resalta el código MJML.

• Node.js – Para aquellos con un poco más de experiencia con el desarrollo web, pueden instalar MJML usando npm.

• La plataforma de Scalero También es compatible con MJML para que nuestros usuarios tengan la flexibilidad de usarlo al crear plantillas.

Cómo empezar

It helps to already have basic knowledge of HTML and CSS, but it’s a fairly smooth process to learn MJML with practice. So, let’s try our hand at coding a basic email.Start with the , , and tags:

<mjml><cabeza de mj>cabeza de mj><cuerpo mj>cuerpo mj>mjml>

De forma predeterminada, todos los componentes MJML tienen relleno, por lo que es recomendable establecerlo en 0 en el encabezado para cada componente. Esto le permite agregar posteriormente relleno personalizado a cada componente dentro del cuerpo.

< cabeza de mj >
< atributos mj >
< mj-image padding = "0" />
< mj-button padding = "0" />
< mj-table padding = "0" />
< relleno de columna mj = "0" />
< mj-section padding = "0" />
< mj-wrapper relleno = "0" />

There are a couple of other useful components we’re going to use in the head. One is , which enables you to set the preview text that will be displayed in your recipient’s inbox. The other is and it’s used to control the point at which the email layout should change from desktop to mobile.

< cabeza de mj >
< atributos mj >
< mj-image padding = "0" />
< mj-button padding = "0" />
< mj-table padding = "0" />
< relleno de columna mj = "0" />
< mj-section padding = "0" />
< mj-wrapper relleno = "0" />

< vista previa de mj >
Hola, persona
 vista previa de mj >
< mj-breakpoint ancho = "420px" >

Let’s now introduce the two main building blocks that will be used to create a responsive email, which are and .

creates horizontal sections within emails.

sits within tags and allows you to split your section into multiple columns.

Sigamos adelante y agreguemos estos dos componentes:

< mjml >
< mj-cabeza 
 >
Hola, persona 
 vista previa de mj >
  cabeza mj >
 < cuerpo mj >
 < sección mj >
 < columna mj >
  columna mj >
  sección mj >
  cuerpo mj >
 mjml >

Verás que tenemos todas estas etiquetas, pero aún no hay contenido visible, así que vamos a añadir un logotipo. La etiqueta que usamos para las imágenes es, como ya habrás adivinado, Como se trata de un correo electrónico, queremos que el logotipo sea lo primero que vean los suscriptores. Para colocar el logotipo en la parte superior, crea otra sección y una columna encima de las secciones con texto e inserta la URL de tu imagen dentro de la etiqueta de imagen.

Depending on the original size of your image, it may appear too big or small initially, so let’s also add some styling. Similar to HTML, you can change an image’s size using the width attribute, and if you use the “href” attribute with an tag, you can make the image clickable.

También notarás que, de forma predeterminada, la imagen está alineada al centro, que es donde la mantendremos para este correo electrónico, pero también puedes alinearla a la izquierda o a la derecha.

< mjml >
  < cabeza >
   cabeza >
  < cuerpo mj >
    < sección mj >
      < columna mj >
        < mj-image width = "100px" src = "https://pbs.twimg.com/profile_images/1063925348205821958/DlGcxdOl.jpg" >  imagen mj >
       columna mj > 
     sección mj >
    < sección mj >
     < columna mj >
         < mj-text >
           < h1 > Hola persona!  h1 >
          mj-texto >

Now it’s time to add some words. To do this, we’ll use the tag. Within this tag, you can use various headings like the usual

through

tags as well as the

tag for longer text. For this email, let’s use an

tag for the greeting and the

tag for our main message.

< sección mj >
    < columna mj >
        < mj-text >
          < h1 > Hola persona!  h1 >
         mj-texto >
        < mj-text >
          < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            < br >  es >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           p >
         mj-texto >
       columna mj >
     sección mj >
   cuerpo mj >
 mjml >

Notarás que el tamaño predeterminado del texto del párrafo no es ideal porque es demasiado pequeño, pero podemos cambiarlo con el atributo font-size. Ya hemos hablado de... Importancia de utilizar fuentes seguras para el correo electrónico Ya lo hemos mencionado en nuestro blog varias veces, y las fuentes compatibles con correos electrónicos son igual de necesarias en MJML, así que usaremos Tahoma. Para este correo electrónico, queremos mantener la misma fuente en todo el texto, así que, en lugar de añadir estilos de fuente a cada componente del cuerpo, simplemente añadiremos las especificaciones generales en el encabezado.

Depending on the original size of your image, it may appear too big or small initially, so let’s also add some styling. Similar to HTML, you can change an image’s size using the width attribute, and if you use the “href” attribute with an tag, you can make the image clickable.

< cabeza de mj >
< atributos mj >
< mj-image padding = "0" />
< mj-button padding = "0" />
< mj-table padding = "0" />
< relleno de columna mj = "0" />
< mj-section padding = "0" />
< mj-wrapper relleno = "0" />
< mj-all font-family = "Tahoma, sans-serif" />

< vista previa de mj >
Hola, persona
 vista previa de mj >
< mj-breakpoint ancho = "420px" >

Experimentemos ahora con el saludo H1. Para cambiar el color del texto, usaremos el atributo "color" y, para que destaque más, lo pondremos en negrita con "font-weight". Si estás familiarizado con HTML, notarás que todos estos atributos de estilo son idénticos a los que se ven normalmente en desarrollo web.

< sección mj >
     < columna mj >
        < mj-text font-family = "tahoma" color = "#1E5FD1" font-weight = "bold" align = "center" >
          < h1 > Hola persona!  h1 >
         mj-texto >
        < mj-text tamaño de fuente = "20px" familia de fuentes = "tahoma" >
          < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            < br >  es >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           p >
         mj-texto >

Finally, for the call-to-action, let’s create a button. For this step, we’ll use the tag and insert our CTA phrase. To decorate the button, you can change the color using the background-color attribute and use a hex code of your choice. To manipulate the size of the button, we’ll use the width attribute. In our example, we used a percentage to keep the button responsive according to the viewport, but you can also use other sizing units, such as pixels. As for the actual text, changing the font size, font color, and font weight are all the same as before.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           p >
         mj-texto >
        Empieza ahora​​​​​​​​​  botón mj >
      columna mj >
     sección mj >
   cuerpo mj >
 mjml >

Una vez que hayas terminado, deberías tener algo como esto: