Cómo crear correos responsive fácilmente

Uno de los principales problemas que encontramos actualmente en el mundo de la informática es la cantidad de dispositivos que existen en el mercado. El principal problema que acarrea esto es la necesidad de adaptar el contenido a cualquier resolución, lo que se conoce como diseño responsive. Este diseño es muy utilizado en el mundo del desarrollo web, pero es un término que también se puede aplicar a otros aspectos, como los correos electrónicos.

MJML el framework para crear correos responsive

Si bien podríamos crear correos responsive haciendo uso de HTML, esto plantea multitud de dificultades. Por esta razón la comunidad ha creado este framework que nos ayuda a crear cualquier tipo de correo de manera responsive.

El framework se basa en un lenguaje de marcado (MJML), muy similar a HTML pero con sus propias etiquetas. Esto conjunto de etiquetas define un comportamiento, por ejemplo <mj-image> sirve para insertar una imagen.

Una vez que hemos codificado nuestro correo, se realiza una traducción de MJML a HTML, ya que si mandásemos nuestro correo con el código MJML este no se visualizaría correctamente. Este proceso es el que hace la magia (vuelve responsive) nuestro correo, ya que cada componente tiene un estilo definido que le permite adaptarse a cualquier resolución.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-image width="100" src="https://www.somosbinarios.es/wp-content/themes/roots/assets/img/logo.png"></mj-image>
          <mj-divider border-color="#2196F3"></mj-divider>
          <mj-text>Estas son las últimas publicaciones de <b>Somos Binarios</b>:</mj-text>
          <mj-list>
            <li>
              <a href="https://www.somosbinarios.es/guia-aumentar-impacto-social-web/">Guia para aumentar el impacto social</a>
            </li>
            <li>
              <a href="https://www.somosbinarios.es/los-tres-mejores-temas-para-ubuntu/">Los tres mejores temas para Ubuntu</a>
            </li>
          </mj-list>
          <mj-button background-color="#2196F3" href="https://www.somosbinarios.es/">Visitar</mj-button>
          <mj-divider border-color="#2196F3"></mj-divider>
          <mj-social mode="horizontal" display=" twitter" twitter-icon-color="#2196F3" twitter-href="Con MJML es fácil crear correos responsive. @somosbinarios" container-background-color="#2E3539" padding="5px" color="#FFF" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Pegando el código en el editor online, podéis ver cómo funcionan algunos de los componentes principales:

• Texto
• Imágenes
• Separadores
• Listas
• Enlaces
• Columnas
• Compartición social
• Botones

En las siguientes capturas podéis ver el comportamiento tanto en móviles como en ordenadores de escritorio.

Correo responsive en móvil

Correo responsive en PC

Espero que os haya parecido interesante este artículo, dejamos abiertos los comentarios para cualquier duda o aporte, un saludo.