Establece diferentes estilos de fuente para dispositivos móviles con el fin de garantizar la legibilidad y el atractivo visual:

• Utiliza un tamaño de fuente más pequeño para que quepa el contenido en pantallas más pequeñas;
• Utiliza una familia de fuentes segura para una mejor legibilidad; y
• Ajusta el color de la fuente para garantizar un buen contraste en diversas condiciones de iluminación o para la configuración del modo oscuro.

Email en los equipos de escritorio	Email en dispositivos móviles

Para cambiar el tamaño, el color o la familia de la fuente en los dispositivos móviles, deberás establecer los estilos de fuente tanto para dispositivos móviles como para equipos de escritorio: 

1. Diseña tu email. 
2. Accede al modo desarrollador. 
3. Busca el contenido cuyo estilo de fuente quieras cambiar. La configuración de ese contenido está justo encima, en el código. 
4. Copia los códigos correspondientes al tipo de estilo que quieras cambiar en los dispositivos móviles: 
   • Fuente del texto:font-family: 'font family name'
   • Tamaño del texto:font-size: SIZEpx
   • Color del texto: color: 'HEX' 
5. Debajo de la cadena layout y el valor de 320px, pega los códigos copiados anteriormente para editar los estilos de fuente móviles y reemplaza tu valor con el que necesites:
   
   • font-family: 'font family name' donde font family name es el nombre de la fuente tal y como aparece en la lista de fuentes disponibles del editor. 
   • font-size: SIZEpx donde SIZE es el tamaño que quieres darle al contenido en px. 
   • color: 'HEX' donde HEX es el código HEX correspondiente al color que quieras darle al contenido. 
     
6. De la cadena de contenido, en nuestro ejemplo Warm-up wit Sun Salutations (Calentar con saludos al sol), elimina cualquier atributo de estilo, span o clase entre las comillas simples '' para quedarte solo con tu contenido.
   ➡️  Por ejemplo

   Si la cadena de contenido es: 

   content: '<h2 class="default-heading2"><span style="color:#116b6b;">Our 3 tips to practice safe yoga 🧘</span></h2>'

   Elimina cualquier atributo de estilo o clase para conservar solo el contenido, como: 

   content: 'Our 3 tips to practice safe yoga 🧘'
7. Cambia entre los modos escritorio (⇧ + D) y móvil (⇧ + M) utilizando los iconos correspondientes en la parte superior derecha del editor de email. Esto te permitirá asegurarte de que tus estilos de fuente cambien según el tipo de dispositivo en el que se lean.
8. Realiza otros cambios en el modo desarrollador si es necesario.  
9. Haz clic en el icono de cruz  para cerrar el modo desarrollador.

¡Enhorabuena! Los estilos de fuente ahora cambian según el dispositivo en el que se lean. 

Las anotaciones de Gmail permiten a los usuarios de Gmail ver e interactuar con tus promociones directamente desde su bandeja de entrada haciendo clic en la imagen o el texto anotado sin abrir el email. Estas anotaciones permiten que los mensajes recibidos en la pestaña Promociones de Gmail destaquen al añadir funcionalidades como:

Para mostrar anotaciones de Gmail a tus destinatarios: 

1. Diseña tu email. 
2. Accede al modo desarrollador. 
3. Copia el código de la pestaña a continuación que corresponde al tipo de anotación que quieres mostrar a tus destinatarios de Gmail: 
   
   Anotaciones de oportunidadesCarruseles de productosVista previa de una sola imagen

   Código que copiar

   Valores que se van a sustituir

   promo: - @context: 'http://schema.org/' @type: DiscountOffer description: DESCRIPTION discountCode: DISCOUNT_CODE availabilityStarts: START_DATE_TIME availabilityEnds: END_DATE_TIME

   (Opcional) DESCRIPTION es el texto que se muestra con el distintivo de oportunidad, como 20 % de descuento.  (Opcional) DISCOUNT_CODE es el código de descuento o promoción de la oferta, como 20TODAY.  (Opcional) START_DATE_TIME es la fecha y hora en que comienza la oferta en formato ISO 8601, como 2023-09-25T18:44:37-07:00. (Opcional) END_DATE_TIME es la fecha y hora de finalización de la promoción en formato ISO 8601, como 2023-09-25T18:44:37-07:00.

   ❗️ Importante

   Por cada imagen del carrusel de productos, añade un tipo PromotionCard. 

   Código que copiar

   Valores que se van a sustituir

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1 position: POSITION - context: 'http://schema.org/' type: PromotionCard image: IMAGE_URL2 url: PROMO_URL2 headline: HEADLINE2 price: PRICE2 priceCurrency: PRICE_CURRENCY2 discountValue: DISCOUNT_VALUE2 position: POSITION

   IMAGE_URL es la URL de la imagen en formato PNG o JPEG, como https://www.example.com/image.png. Las relaciones de aspecto admitidas son 4:5, 1:1, 1,91:1. En el caso de los carruseles de productos, cada imagen debe tener una URL única y utilizar la misma relación de aspecto. PROMO_URL es la URL de la promoción. Cuando los usuarios hacen clic en la imagen desde la pestaña Promociones, visitan esta URL. (Opcional)HEADLINE es una descripción de 1 a 2 líneas de la promoción que se muestra debajo de la imagen de vista previa. (Opcional) PRICE es el precio de la promoción. (Opcional) PRICE_CURRENCY es la moneda del precio en formato ISO 4217 de 3 letras, como USD. Determina el símbolo de moneda que se muestra con el precio. (Opcional) DISCOUNT_VALUE es la cantidad que se resta del precio para mostrar un precio ajustado. El precio ajustado se muestra junto al precio original. Por ejemplo, si discountValue es 25, el precio es 100 y priceCurrency es USD, el precio ajustado se muestra como $75. (Opcional) POSITION es la posición de la tarjeta en el carrusel.

   Código que copiar

   Valores que se van a sustituir

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1

   IMAGE_URL es la URL de la imagen en formato PNG o JPEG, como https://www.example.com/image.png. Las relaciones de aspecto admitidas son 4:5, 1:1, 1,91:1. En el caso de los carruseles de productos, cada imagen debe tener una URL única y utilizar la misma relación de aspecto. PROMO_URL es la URL de la promoción. Cuando los usuarios hacen clic en la imagen desde la pestaña Promociones, visitan esta URL. (Opcional) HEADLINE es una descripción de 1 a 2 líneas de la promoción que se muestra debajo de la imagen de vista previa. (Opcional) PRICE es el precio de la promoción. (Opcional) PRICE_CURRENCY es la moneda del precio en formato ISO 4217 de 3 letras, como USD. Determina el símbolo de moneda que se muestra con el precio. (Opcional) DISCOUNT_VALUE es la cantidad que se resta del precio para mostrar un precio ajustado. El precio ajustado se muestra junto al precio original. Por ejemplo, si discountValue es 25, el precio es 100 y priceCurrency es USD, el precio ajustado se muestra como $75.

4. En la parte superior del modo desarrollador, debajo del valor de fuentes y en el primer nivel, pega el código copiado de una de las pestañas anteriores.
5. Realiza otros cambios en el modo desarrollador si es necesario.
6. Haz clic en el icono de cruz para cerrar el modo desarrollador.
7. (Opcional) Envía un email de prueba a una dirección de email de prueba utilizando Gmail y con la pestaña Promociones activa, para garantizar que la anotación de Gmail se muestre correctamente.

Como alternativa, puedes utilizar nuestro editor HTML para mostrar anotaciones de Gmail. Para obtener más información, consulta la documentación oficial de Google. 

Cambiar el color de las viñetas o los números puede ser útil para enfatizar los puntos clave, agrupar ideas o para que esté en consonancia con la marca. A continuación se muestra un ejemplo de cómo se ve una lista con viñetas de colores: 

Para cambiar el color de las listas numeradas y con viñetas:

1. Crea una lista de elementos con viñetas o números. 
2. Accede al modo desarrollador. 
3. Busca la lista que acabas de crear en el modo desarrollador y localiza el valor de content correspondiente. La configuración de ese contenido está justo encima, en el código. 
4. Debajo del valor de default, pega el siguiente código donde HEX es el código HEX correspondiente al color que quieras darle a tu lista: color: '#HEX'
   
5. Revisa el diseño del email a la derecha de la pantalla para ver si tu lista de artículos ha cambiado de color. Las viñetas o números y el texto asociado deben aparecer en el color que corresponda al código HEX introducido en el modo desarrollador. 
6. Realiza otros cambios en el modo desarrollador si es necesario. 
7. Haz clic en el icono de cruz para cerrar el modo desarrollador.
8. Para cambiar el color del texto manteniendo el color de las viñetas o números:
   1. Selecciona el texto al que deseas cambiar el color. 
   2. En la barra de herramientas situada encima del texto, haz clic en el icono de Color de fuente.
      
   3. Selecciona un color de tu marca o uno que hayas utilizado anteriormente, o pega el código de color HEX que quieras aplicar a tu texto en el campo HEX. En nuestro ejemplo, #
      3B3F44.

¡Enhorabuena! Has cambiado el color de tus viñetas o números. 

Los espacios y guiones de no separación garantizan un formato adecuado en los diseños de email, ya que evitan saltos de línea no deseados, como un nombre compuesto o la división del precio de un artículo, y mantienen la legibilidad en todos los dispositivos. Consulta nuestro ejemplo a continuación para comprender la importancia de los espacios y guiones de no separación:

Sin caracteres de no separación	Con caracteres de no separación

Para insertar espacios y guiones de no separación en el diseño del email: 

1. Diseña tu email. 
2. Accede al modo desarrollador. 
3. Busca el contenido al que quieras añadir un espacio o guión de no separación. La configuración de content está justo encima, en el código. 
4. Copia el código correspondiente al tipo de carácter de no separación que quieras incluir:
   • Espacio de no separación:  
   • Guión de no separación: ‑
5. Pega el código copiado anteriormente en lugar del espacio o guión que quieras que no se separe.
   
6. Revisa el diseño del email a la derecha de la pantalla para ver si tu lista de artículos ha cambiado de color. 
7. Realiza otros cambios en el modo desarrollador si es necesario. 
8. Haz clic en el icono de cruz para cerrar el modo desarrollador.

¡Enhorabuena! Has añadido caracteres de no separación al diseño del email. 

Las versiones de escritorio de Outlook que utilizan el motor de renderizado de Microsoft Word tienen una compatibilidad limitada con CSS (por ejemplo, las versiones de escritorio de Outlook 2007, 2010, 2013, 2016 y Office 365). Las imágenes de fondo y el formato de texto a menudo aparecen incorrectamente, mostrando fondos blancos en lugar de imágenes y texto desalineado debido a una mala gestión de propiedades como background-image y line-height.

Para asegurarte de que las imágenes de fondo y los bloques de texto se representan correctamente en Outlook, utiliza la siguiente solución alternativa:

1. Diseña tu email. 
2. Recupera el tamaño de la altura en px de la imagen de fondo. En nuestro ejemplo, 265px. 
3. Accede al modo desarrollador. 
4. Haz clic en la pestaña correspondiente al problema de renderizado que quieras resolver:
   
   Imagen de fondoBloque de texto

   ❗️ Importante

   Esta solución alternativa solo funciona para imágenes de fondo aplicadas en la anchura del cuerpo, no en la anchura completa y por debajo de un valor de grid-row. Ten en cuenta que un valor de grid-row no debe contener ningún botón.

   1. Busca el valor de grid-row que corresponda al lugar en el que se muestra tu background-image.
   2. Debajo del valor de background-image, introduce height: seguido del tamaño de la altura en px de la imagen de fondo. En nuestro ejemplo, introduciremos height: 265px.
      
      

   1. Busca el contenido para el que quieras corregir los problemas de visualización. Busca el valor de line-height que corresponda al lugar en el que se muestra el texto. Si este contenido no tiene un valor de line-height, añádelo.
   2. Sustituye el tamaño predeterminado del valor de line-height o introduce un tamaño en px, ya que son los únicos valores compatibles con clientes de email de Outlook. En nuestro ejemplo, introduciremos 30px.
      
5. Realiza otros cambios en el modo desarrollador si es necesario. 
6. Haz clic en el icono de cruz para cerrar el modo desarrollador.
7. (Opcional) Envía un email de prueba a una dirección de email de prueba utilizando una de las versiones de Outlook que no admiten imágenes de fondo para asegurarte de que se muestre correctamente.

Añade texto alternativo a los iconos de las redes sociales en tus diseños de email para mejorar la accesibilidad de las personas con discapacidad visual que utilizan lectores de pantalla, mejorar la experiencia del usuario y garantizar que el contexto sea claro si las imágenes no se cargan.

Para añadir texto alternativo en el diseño del email: 

1. Diseña el email e incluye tus iconos de redes sociales.
2. Accede al modo desarrollador. 
3. Busca los valores de type: social-media. Debe haber uno por cada icono de redes sociales. La configuración de content está justo encima, en el código. 
4. Debajo de cada valor de src correspondiente a tus iconos de redes sociales, busca el valor de 'alt: null' o añade uno.
5. Sustituye null por su texto alternativo. En nuestro ejemplo, el texto alternativo del icono de nuestro sitio web será The Green Yoga website, y el texto alternativo del icono de Instagram será Instagram account. 
   
6. Realiza otros cambios en el modo desarrollador si es necesario.  
7. Haz clic en el icono de cruz para cerrar el modo desarrollador.
8. (Opcional) Envía un email de prueba para comprobar que el texto alternativo se muestra correctamente para cada uno de los iconos de las redes sociales.

Al contrario de lo que puedas haber pensado, no puedes escribir directamente HTML en el modo Desarrollador. En tu lugar, debes usar YAML, que es una representación fácil de una estructura de árbol similar a JSON.

Con este lenguaje, utilizarás definiciones abstractas creadas por nuestro equipo para facilitar el desarrollo de plantillas, y para garantizar que el HTML generado y enviado al cliente sea gestionado por nuestras herramientas. Esto permite obtener la mejor calidad y un amplio soporte para el cliente de email.

Como ya sabrás, los clientes de email no son todos iguales y puede resultar difícil crear newsletters de aspecto profesional que funcionen en todas partes, incluidos los teléfonos móviles y Outlook.

Este es también un trabajo estándar continuado a medida que llegan nuevos clientes de email y los clientes antiguos cambian la forma en que representan el email.

Por eso nos esforzamos para asegurarnos de que tus emails funcionen como se espera en todas partes, con el mínimo esfuerzo por tu parte. Hemos creado una forma abstracta de alto nivel para que tú definas tu HTML y nosotros hacemos la magia entre bastidores. 

En el 99 % de los casos de uso, rara vez encontrarás limitaciones con nuestro lenguaje de plantillas, ya que trabajamos constantemente en actualizarlo, pero, por supuesto, puede haber algunas peculiaridades o funcionalidades específicas del cliente que hayamos pasado por alto. Esto abre un nuevo mundo de posibilidades más allá de lo que ofrecemos en la interfaz. ¡Descubre nuestros casos de uso más frecuentes del modo desarrollador para la personalización avanzada del email!