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

• Utilice un tamaño de fuente más pequeño para que quepa el contenido en pantallas más pequeñas,
• Utilice una familia de fuentes segura para una mejor legibilidad, y
• Ajuste 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 para dispositivos móviles, deberá establecer los estilos de fuente tanto para dispositivos móviles como para equipos de escritorio: 

1. Diseñe su emai.l 
2. Acceda al modo desarrollador. 
3. Busque el contenido para el que desea cambiar los estilos de fuente. La configuración de content está justo encima en el código. 
4. Copie los códigos correspondientes al tipo de estilo que desea cambiar en dispositivos móviles: 
   • Fuente del texto: font-family: 'font family name'
   • Tamaño del texto: font-size: SIZEpx
   • Color del texto: color: 'HEX' 
5. Bajo la cadena layout y el valor 320px, pegue los códigos copiados anteriormente para editar los estilos de fuente móviles y reemplace su valor con el que necesite:
   
   • 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 quiere darle al contenido en px. 
   • color: 'HEX' donde HEX es el código HEX correspondiente al color que quiere darle al contenido. 
     
6. From the content string, in our example 3 tips to practice safe yoga, remove any style, span, or class attributes between the single quotes '' to only keep your content.
   ➡️  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>'

   Elimine cualquier atributo de estilo o clase para conservar solo su contenido, como: 

   content: 'Our 3 tips to practice safe yoga 🧘'
7. Cambie entre los modos escritorio  (⇧ + D) y móvil (⇧ + M) usando los iconos correspondientes en la parte superior derecha del editor de email. Esto le permitirá asegurarse de que sus estilos de fuente cambien según el tipo de dispositivo en el que se lean:
   
8. Realice otros cambios en el modo desarrollador si es necesario.  
9. Haga clic en el icono de la 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 sus 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 se destaquen al añadir funcionalidades como:

Para mostrar anotaciones de Gmail a sus destinatarios: 

1. Diseñe su emai.l 
2. Acceda al modo desarrollador. 
3. Copie el código de la pestaña a continuación que corresponde al tipo de anotación que desea mostrar a sus destinatarios de Gmail: 
   
   Anotaciones de oportunidades Carruseles de productos Vista 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ñada 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 previsualizada. (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, en el valor de fuentes y en el primer nivel, pegue el código copiado en una de las pestañas anteriores.
5. Realice otros cambios en el modo desarrollador si es necesario.
6. Haga clic en el icono de la cruz para cerrar el modo desarrollador.
7. (Opcional) Envíe un email de prueba a una dirección de email de prueba usando Gmail y con la pestaña Promociones activa, para garantizar que la anotación de Gmail se muestre correctamente.

Como alternativa, puede usar nuestro editor HTML para mostrar anotaciones de Gmail. Para obtener más información, consulte 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. Cree una lista de elementos con viñetas o números. 
2. Acceda al modo desarrollador. 
3. Busque la lista que acaba de crear en el modo desarrollador y localice el valor de content correspondiente. La configuración de content está justo encima en el código. 
4. Debajo del valor default, pegue el siguiente código donde HEX es el código HEX correspondiente al color que desea darle a su lista: color: '#HEX'
   
5. Revise el diseño del email a la derecha de la pantalla para ver si su 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. Realice otros cambios en el modo desarrollador si es necesario. 
7. Haga clic en el icono de la cruz para cerrar el modo desarrollador.
8. Para cambiar el color del texto manteniendo el color de las viñetas o números:
   1. Seleccione el texto al que desea cambiar el color. 
   2. En la barra de herramientas situada encima del texto, haga clic en el icono de color de fuente.
      
   3. En el campo HEX, pegue el código de color HEX que desea dar al texto. En nuestro ejemplo, #
      3B3F44. 

¡Enhorabuena! Ha cambiado el color de sus 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. Consulte 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ñe su emai.l 
2. Acceda al modo desarrollador. 
3. Busque el contenido al que desea añadir un espacio o guión de no separación. La configuración del contenido está justo encima en el código. 
4. Copie el código correspondiente al tipo de carácter de no separación que desea incluir:
   • Espacio de no separación:  
   • Guión de no separación: ‑
5. Pegue el código copiado anteriormente en lugar del espacio o guión que desea que no se separe.
   
6. Revise el diseño del email a la derecha de la pantalla para ver si su lista de artículos ha cambiado de color. 
7. Realice otros cambios en el modo desarrollador si es necesario. 
8. Haga clic en el icono de la cruz para cerrar el modo desarrollador.

¡Enhorabuena! Ha 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 asegurarse de que las imágenes de fondo y los bloques de texto se representan correctamente en Outlook, use la siguiente solución alternativa:

1. Diseñe su emai.l 
2. Recupere el tamaño de la altura en px de la imagen de fondo. En nuestro ejemplo, 265px. 
3. Acceda al modo desarrollador. 
4. Haga clic en la pestaña correspondiente al problema de renderizado que desea resolver:
   
   Imagen de fondo Bloque 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. Tenga en cuenta que un valor de grid-row no debe contener ningún botón.

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

   1. Busque el contenido para el que desea corregir los problemas de visualización. Busque el valor de line-height que corresponda al lugar en el que se muestra el texto. Si no hay ningún valor line-height para este contenido, añada uno.
   2. Sustituya el tamaño predeterminado del valor de line-height o introduzca un tamaño en px, ya que son los únicos valores que son compatibles con clientes de email de Outlook. En nuestro ejemplo, introduciremos 30px.
      
5. Realice otros cambios en el modo desarrollador si es necesario. 
6. Haga clic en el icono de la cruz para cerrar el modo desarrollador.
7. (Opcional) Envíe 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 asegurarse de que se muestre correctamente.

Añada texto alternativo a los iconos de sus redes sociales en sus 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ñe el email e incluya sus iconos de redes sociales.
2. Acceda al modo desarrollador. 
3. Busque los valores type: social-media. Debe haber uno por cada icono de redes sociales. La configuración del contenido está justo encima en el código. 
4. Debajo de cada valor de type: social-media, busque el valor alt: null.
5. Sustituya 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. Realice otros cambios en el modo desarrollador si es necesario.  
7. Haga clic en el icono de la cruz para cerrar el modo desarrollador.
8. (Opcional) Envíe 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 pueda haber pensado, no puede escribir directamente HTML en el modo Desarrollador. En su lugar, debe usar YAML, que es una representación fácil de una estructura de árbol similar a JSON.

Con este lenguaje, utilizará 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á, 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 sus emails funcionen como se espera en todas partes, con el mínimo esfuerzo por su parte. Hemos creado una forma abstracta de alto nivel para que usted defina su HTML y nosotros hacemos la magia entre bastidores. 

En el 99 % de los casos de uso, rara vez encontrará 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. ¡Descubra nuestros casos de uso más frecuentes del modo desarrollador para la personalización avanzada del email!