{"id":23379,"date":"2023-07-14T07:59:00","date_gmt":"2023-07-14T07:59:00","guid":{"rendered":"https:\/\/vibetrace.com\/?p=23379"},"modified":"2023-08-30T21:24:04","modified_gmt":"2023-08-30T21:24:04","slug":"ultimate-guide-email-design-best-practices","status":"publish","type":"post","link":"https:\/\/vibetrace.com\/es\/guia-definitiva-de-mejores-practicas-de-diseno-de-correo-electronico\/","title":{"rendered":"La gu\u00eda definitiva para el dise\u00f1o de correo electr\u00f3nico: tama\u00f1os de fuente y dimensiones de imagen, mejores pr\u00e1cticas"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p><\/p>\n\n\n\n<p><strong>Por qu\u00e9 es importante el dise\u00f1o del correo electr\u00f3nico<\/strong>: Importancia en el comercio electr\u00f3nico y el marketing.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id23379_274ff3-68 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Fuente y tipograf\u00eda<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tama\u00f1os de fuente: <\/h3>\n\n\n\n<p>Tama\u00f1os recomendados para correos electr\u00f3nicos m\u00f3viles y de escritorio<\/p>\n\n\n\n<p>Para facilitar la lectura del correo electr\u00f3nico m\u00f3vil, generalmente querr\u00e1s ce\u00f1irte a los siguientes tama\u00f1os de fuente:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Cuerpo de texto<\/strong>: 14-16px es un buen rango. F\u00e1cil de leer sin hacer zoom.<\/li>\n\n\n\n<li><strong>Encabezamientos<\/strong>: 22-27px funciona bien para encabezados. Quieres que se destaquen pero no sean abrumadores.<\/li>\n\n\n\n<li><strong>Subt\u00edtulos<\/strong>: Alrededor de 18-22 px. Deben ser m\u00e1s grandes que el cuerpo del texto pero m\u00e1s peque\u00f1os que los t\u00edtulos principales.<\/li>\n\n\n\n<li><strong>Botones de acci\u00f3n<\/strong>: El texto dentro de los botones debe tener al menos 14 p\u00edxeles para poder tocarlos f\u00e1cilmente.<\/li>\n\n\n\n<li><strong>Letra peque\u00f1a<\/strong>: Mant\u00e9ngalo al menos 12 p\u00edxeles para que sea legible pero claramente secundario.<\/li>\n<\/ol>\n\n\n\n<p>La legibilidad es clave, especialmente para el comercio electr\u00f3nico donde desea guiar al lector para que act\u00fae. \u00a1Pruebe siempre sus correos electr\u00f3nicos en varios dispositivos para asegurarse de que se vean bien!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tipos de fuentes<\/h3>\n\n\n\n<p>Serif frente a sans-serif.<\/p>\n\n\n\n<p>Cuando se trata de dise\u00f1o de correo electr\u00f3nico, la elecci\u00f3n entre fuentes Serif y Sans-Serif puede marcar una verdadera diferencia. Aqu\u00ed est\u00e1 la verdad:<\/p>\n\n\n\n<p><strong>Fuentes Serif<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ejemplos<\/strong>: Times New Roman, Georgia<\/li>\n\n\n\n<li><strong>Onda<\/strong>: M\u00e1s tradicional, a menudo visto como formal o acad\u00e9mico.<\/li>\n\n\n\n<li><strong>Mejor para<\/strong>: Contenido de formato largo donde la legibilidad es clave.<\/li>\n\n\n\n<li><strong>Pero<\/strong>: Puede verse desordenado en pantallas peque\u00f1as, as\u00ed que util\u00edcelo con precauci\u00f3n en correos electr\u00f3nicos m\u00f3viles.<\/li>\n<\/ul>\n\n\n\n<p><strong>Fuentes Sans-Serif<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ejemplos<\/strong>: Arial, Helv\u00e9tica, Verdana<\/li>\n\n\n\n<li><strong>Onda<\/strong>: Moderno, limpio e informal.<\/li>\n\n\n\n<li><strong>Mejor para<\/strong>: Contenido breve, \u00e1gil y legible en dispositivos m\u00f3viles.<\/li>\n\n\n\n<li><strong>Por qu\u00e9<\/strong>: M\u00e1s f\u00e1cil de leer en pantallas peque\u00f1as y da una sensaci\u00f3n contempor\u00e1nea.<\/li>\n<\/ul>\n\n\n\n<p><strong>Consejos para el dise\u00f1o de correo electr\u00f3nico<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consistencia<\/strong>: C\u00ed\u00f1ete a una o dos fuentes para mantener el dise\u00f1o coherente.<\/li>\n\n\n\n<li><strong>Fuentes seguras para la Web<\/strong>: utilice fuentes que se muestren bien en todos los clientes de correo electr\u00f3nico.<\/li>\n\n\n\n<li><strong>Jerarqu\u00eda<\/strong>: utilice diferentes fuentes o estilos para los t\u00edtulos y el cuerpo del texto para crear una jerarqu\u00eda visual.<\/li>\n\n\n\n<li><strong>Prueba<\/strong>: Pruebe siempre c\u00f3mo se representan las fuentes en diferentes dispositivos y clientes de correo electr\u00f3nico.<\/li>\n<\/ol>\n\n\n\n<p>Dado nuestro enfoque en el comercio electr\u00f3nico, es posible que se incline por Sans-Serif por su estilo moderno y legibilidad m\u00f3vil. <\/p>\n\n\n\n<p>Pero si env\u00edas contenido educativo, una fuente Serif podr\u00eda a\u00f1adir un toque de autoridad. \u00a1Elige seg\u00fan tu marca y mensaje!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Espaciado entre l\u00edneas<\/h3>\n\n\n\n<p>El espaciado \u00f3ptimo es importante para la legibilidad del correo electr\u00f3nico.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cuerpo de texto<\/strong>: Apunte a un tama\u00f1o de fuente de 1,4 a 1,6 veces mayor. Entonces, si el tama\u00f1o de fuente es de 16 px, el interlineado ser\u00eda de alrededor de 22 px a 26 px.<\/li>\n<\/ul>\n\n\n\n<p><strong>Por qu\u00e9 es importante el interlineado<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Legibilidad<\/strong>: El interlineado adecuado evita que el texto se sienta apretado, lo que facilita su lectura.<\/li>\n\n\n\n<li><strong>Desnatabilidad<\/strong>: Un buen espaciado ayuda a los lectores a hojear el contenido, que es como la mayor\u00eda de la gente lee los correos electr\u00f3nicos.<\/li>\n<\/ol>\n\n\n\n<p>Consejos para el interlineado<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Consistencia<\/strong>: Mantenga el interlineado constante en todo el correo electr\u00f3nico para lograr una apariencia coherente.<\/li>\n\n\n\n<li><strong>T\u00edtulos y subt\u00edtulos<\/strong>: Estos pueden tener un espacio un poco m\u00e1s ajustado ya que normalmente son m\u00e1s grandes y m\u00e1s audaces.<\/li>\n\n\n\n<li><strong>M\u00f3vil<\/strong>: Pruebe en diferentes dispositivos para garantizar que el espaciado se vea bien en todos los \u00e1mbitos.<\/li>\n<\/ol>\n\n\n\n<p>Para sus campa\u00f1as de correo electr\u00f3nico de comercio electr\u00f3nico, el interlineado puede ayudar a guiar la atenci\u00f3n del lector hacia las llamadas a la acci\u00f3n y la informaci\u00f3n clave. As\u00ed que \u00a1no lo pases por alto!<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Im\u00e1genes y medios<\/h2>\n\n\n\n<p><strong>Tama\u00f1os recomendados<\/strong> para im\u00e1genes de correo electr\u00f3nico<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Im\u00e1genes de ancho completo<\/strong>: 600-800px de ancho. Esto se ajusta a los anchos predeterminados de la mayor\u00eda de los clientes de correo electr\u00f3nico.<\/li>\n\n\n\n<li><strong>Im\u00e1genes en l\u00ednea o flotantes<\/strong>: 200-300 px de ancho. Estas son im\u00e1genes que se encuentran junto al texto.<\/li>\n\n\n\n<li><strong>Im\u00e1genes de h\u00e9roe<\/strong>: 800-1200px de ancho. Estas son las im\u00e1genes grandes y llamativas de la parte superior.<\/li>\n\n\n\n<li><strong>Botones de acci\u00f3n<\/strong>: Al menos 44x44px para tocar f\u00e1cilmente en el m\u00f3vil.<\/li>\n<\/ol>\n\n\n\n<p><strong>Otros consejos<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Relaci\u00f3n de aspecto<\/strong>: Lim\u00edtese a proporciones comunes como 16:9 o 4:3 para garantizar que las im\u00e1genes se escale bien.<\/li>\n\n\n\n<li><strong>Tama\u00f1o del archivo<\/strong>: Mant\u00e9ngalo por debajo de 100 KB si es posible para una carga m\u00e1s r\u00e1pida.<\/li>\n\n\n\n<li><strong>Pantallas de alto DPI<\/strong>: Considere las pantallas Retina y utilice im\u00e1genes de mayor resoluci\u00f3n, pero compr\u00edmalas para mantener el tama\u00f1o de los archivos bajos.<\/li>\n<\/ol>\n\n\n\n<p><strong>Formatos de imagen<\/strong> en correo electr\u00f3nico<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JPEG<\/strong>: Bueno para im\u00e1genes complejas con muchos colores.<\/li>\n\n\n\n<li><strong>PNG<\/strong>: Ideal para im\u00e1genes, textos y logotipos simples.<\/li>\n\n\n\n<li><strong>GIF<\/strong>: Para animaciones simples.<\/li>\n<\/ul>\n\n\n\n<p>Dado su enfoque en el comercio electr\u00f3nico, las im\u00e1genes n\u00edtidas y de carga r\u00e1pida pueden hacer que sus productos parezcan atractivos y mantener al usuario interesado. Pruebe siempre en varios dispositivos para asegurarse de que todo se vea bien.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Texto alternativo para im\u00e1genes en correo electr\u00f3nico<\/h3>\n\n\n\n<p>Accesibilidad<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Discapacitados Visuales<\/strong>: Los lectores de pantalla utilizan texto alternativo para describir im\u00e1genes.<\/li>\n\n\n\n<li><strong>C\u00f3mplice legal<\/strong>: Le ayuda a cumplir con est\u00e1ndares de accesibilidad como ADA.<\/li>\n\n\n\n<li><strong>Bloqueo de im\u00e1genes en clientes de correo electr\u00f3nico<\/strong>: Algunos clientes bloquean im\u00e1genes de forma predeterminada. El texto alternativo proporciona contexto.<\/li>\n<\/ol>\n\n\n\n<p>Beneficios de SEO<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Clasificaci\u00f3n de b\u00fasqueda<\/strong>: Si bien no afectan directamente al correo electr\u00f3nico, las buenas pr\u00e1cticas de texto alternativo pueden ayudar en la estrategia general de SEO.<\/li>\n\n\n\n<li>Esto sucede cuando tiene una p\u00e1gina de archivo p\u00fablica para los boletines salientes.<\/li>\n<\/ol>\n\n\n\n<p>Experiencia de usuario<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Internet lento<\/strong>: si las im\u00e1genes no se cargan, el texto alternativo proporciona contexto.<\/li>\n\n\n\n<li><strong>Aclaraci\u00f3n<\/strong>: describe la imagen si es compleja o contiene informaci\u00f3n importante.<\/li>\n<\/ol>\n\n\n\n<p>Mejores pr\u00e1cticas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Descriptivo<\/strong>: \u201cZapatillas deportivas azules para mujer\u201d es mejor que solo \u201czapatos\u201d.<\/li>\n\n\n\n<li><strong>Conciso<\/strong>: Sea breve pero informativo.<\/li>\n\n\n\n<li><strong>Palabras clave<\/strong>: Utilice palabras clave relevantes pero evite el exceso de palabras clave.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">V\u00eddeo incrustado en correo electr\u00f3nico<\/h3>\n\n\n\n<p>Agregar videos en el correo electr\u00f3nico puede aumentar la participaci\u00f3n, pero conlleva algunas advertencias. Esto es lo que podr\u00edas cubrir:<\/p>\n\n\n\n<p>Los profesionales<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Compromiso<\/strong>: Los v\u00eddeos pueden aumentar las tasas de clics.<\/li>\n\n\n\n<li><strong>Informaci\u00f3n<\/strong>: Es m\u00e1s f\u00e1cil transmitir informaci\u00f3n compleja o mostrar un producto.<\/li>\n<\/ol>\n\n\n\n<p>Los contras<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Compatibilidad<\/strong>: No todos los clientes de correo electr\u00f3nico admiten v\u00eddeos incrustados.<\/li>\n\n\n\n<li><strong>Tiempo de carga<\/strong>: Los v\u00eddeos pesados pueden ralentizar la carga del correo electr\u00f3nico.<\/li>\n<\/ol>\n\n\n\n<p>Mejores pr\u00e1cticas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Imagen alternativa<\/strong>: Utilice una imagen en miniatura que enlace al v\u00eddeo, en caso de que la inserci\u00f3n no funcione.<\/li>\n\n\n\n<li><strong>llamada a la acci\u00f3n<\/strong>: agregue un bot\u00f3n de reproducci\u00f3n superpuesto para fomentar los clics.<\/li>\n\n\n\n<li><strong>Corto y dulce<\/strong>: Mantenga los videos breves, idealmente menos de 2 minutos.<\/li>\n\n\n\n<li><strong>Auto-reproducci\u00f3n<\/strong>: Generalmente ev\u00edtelo; permitir a los usuarios elegir reproducir el v\u00eddeo.<\/li>\n<\/ol>\n\n\n\n<p>C\u00f3mo<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>HTML5<\/strong>: Para clientes de correo electr\u00f3nico que lo admitan, puede utilizar etiquetas HTML5 para incrustar.<\/li>\n\n\n\n<li><strong>Servicios de terceros<\/strong>: Plataformas como Vibetrace y Mailchimp suelen tener opciones integradas para v\u00eddeo.<\/li>\n<\/ol>\n\n\n\n<p>Alternativas a la inserci\u00f3n de v\u00eddeo en correos electr\u00f3nicos<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>GIF<\/strong>: Los GIF cortos y en bucle pueden brindar una experiencia similar a la de un video.<\/li>\n\n\n\n<li><strong>Miniatura vinculada<\/strong>: una imagen est\u00e1tica que enlaza con un v\u00eddeo alojado en otro lugar.<\/li>\n<\/ol>\n\n\n\n<p>Pruebas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>M\u00faltiples clientes<\/strong>: Pruebe c\u00f3mo aparece el v\u00eddeo en diferentes clientes de correo electr\u00f3nico.<\/li>\n\n\n\n<li><strong>M\u00f3vil<\/strong>: aseg\u00farese de que sea compatible con dispositivos m\u00f3viles.<\/li>\n<\/ol>\n\n\n<div class=\"gb-container gb-container-7b568b8d\"><div class=\"gb-inside-container\">\n\n<div class=\"gb-headline gb-headline-88b6c416 gb-headline-text\">\u00bfNecesitas ayuda con tu Email Marketing?<\/div>\n\n\n\n<div class=\"gb-headline gb-headline-01d03e37 gb-headline-text\">Ofrecemos servicios gestionados desde la estrategia hasta la implementaci\u00f3n y el seguimiento. Por lo general, obtiene un aumento de 15-25% en los resultados. \u00a1Veamos c\u00f3mo podemos ayudarte!<\/div>\n\n\n<div class=\"gb-button-wrapper gb-button-wrapper-b6496486\">\n\n<a class=\"gb-button gb-button-4f70dbbd gb-button-text vt-register vt-track-click\" href=\"https:\/\/vibetrace.com\/es\/servicios-de-automatizacion-de-marketing\/\">Aprende m\u00e1s<\/a>\n\n<\/div>\n<\/div><\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Dise\u00f1o y estructura para el dise\u00f1o de correo electr\u00f3nico<\/h2>\n\n\n\n<p><strong>Dise\u00f1os de una o varias columnas<\/strong>: Pros y contras.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dise\u00f1o de una sola columna<\/h3>\n\n\n\n<p>ventajas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Compatible con dispositivos m\u00f3viles<\/strong>: Es m\u00e1s f\u00e1cil reducir la escala en pantallas m\u00e1s peque\u00f1as.<\/li>\n\n\n\n<li><strong>enfocado<\/strong>: Gu\u00eda al lector de forma lineal y directa.<\/li>\n\n\n\n<li><strong>Sencillez<\/strong>: M\u00e1s f\u00e1cil de dise\u00f1ar y m\u00e1s r\u00e1pido de cargar.<\/li>\n<\/ol>\n\n\n\n<p>Contras<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Contenido limitado<\/strong>: No es ideal para mensajes complejos con varias secciones.<\/li>\n\n\n\n<li><strong>Menos din\u00e1mico<\/strong>: Es posible que no capten la atenci\u00f3n con tanta eficacia como los dise\u00f1os de varias columnas.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Dise\u00f1o de varias columnas<\/h3>\n\n\n\n<p>ventajas<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Rico en contenido<\/strong>: Excelente para exhibir una variedad de productos o temas.<\/li>\n\n\n\n<li><strong>Atractivo visual<\/strong>: M\u00e1s din\u00e1mico y atractivo.<\/li>\n\n\n\n<li><strong>Jer\u00e1rquico<\/strong>: Permite una estructura de informaci\u00f3n m\u00e1s compleja.<\/li>\n<\/ol>\n\n\n\n<p>Contras<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Complejidad<\/strong>: Es m\u00e1s dif\u00edcil de dise\u00f1ar y es posible que no se reproduzca bien en todos los dispositivos.<\/li>\n\n\n\n<li><strong>Abrumador<\/strong>: Riesgo de desorden o sobrecarga de informaci\u00f3n.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Consejos para centrarse en el comercio electr\u00f3nico<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Una sola columna<\/strong>: Ideal para campa\u00f1as enfocadas, como lanzamientos de productos u ofertas especiales.<\/li>\n\n\n\n<li><strong>Varias columnas<\/strong>: Ideal para boletines informativos o para mostrar una gama de productos.<\/li>\n<\/ul>\n\n\n\n<p>La elecci\u00f3n entre una o varias columnas debe alinearse con su estrategia de contenido, la complejidad de su mensaje y las preferencias de su p\u00fablico objetivo. Pruebe siempre ambos dise\u00f1os para ver cu\u00e1l resuena mejor con su audiencia de comercio electr\u00f3nico.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importancia de los espacios en blanco en el dise\u00f1o de correo electr\u00f3nico<\/h3>\n\n\n\n<p>En el dise\u00f1o los espacios en blanco tienen una especial importancia. Hay muchas ventajas de utilizar espacios en blanco, pero para el correo electr\u00f3nico las m\u00e1s importantes son:<\/p>\n\n\n\n<p><strong>Legibilidad y espacio para respirar:<\/strong> El espacio entre el texto y los elementos hace que el contenido sea m\u00e1s f\u00e1cil de digerir.<\/p>\n\n\n\n<p><strong>Enfoque y atenci\u00f3n<\/strong>: Los espacios en blanco pueden dirigir la atenci\u00f3n del lector a elementos importantes como las llamadas a la acci\u00f3n.<\/p>\n\n\n\n<p><strong>Profesionalismo y apariencia limpia<\/strong>: Un dise\u00f1o ordenado parece m\u00e1s profesional y confiable.<\/p>\n\n\n\n<p><strong>Experiencia de usuario y skimmable<\/strong>: ayuda a los lectores a hojear el contenido, que es como la mayor\u00eda de la gente lee los correos electr\u00f3nicos.<\/p>\n\n\n\n<p><strong>Experiencia m\u00f3vil y f\u00e1cil de tocar<\/strong>: El espacio adicional hace que sea m\u00e1s f\u00e1cil tocar botones en dispositivos m\u00f3viles.<\/p>\n\n\n\n<p>Para sus correos electr\u00f3nicos de comercio electr\u00f3nico, los espacios en blanco pueden ayudar a guiar al lector hacia acciones clave, como realizar una compra o comprobar un nuevo producto. No es s\u00f3lo un espacio vac\u00edo; \u00a1Es un elemento de dise\u00f1o funcional!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Capacidad de respuesta m\u00f3vil<\/h2>\n\n\n\n<p>Asegur\u00e1ndose de que se vea bien en todos los dispositivos. Hay una mayor certeza de que <a href=\"https:\/\/vibetrace.com\/es\/email-clientes-uso-estadisticas-2023\/\" data-type=\"post\" data-id=\"17536\">dispositivos m\u00f3viles<\/a> se utilizan m\u00e1s que el escritorio para leer correos electr\u00f3nicos.<\/p>\n\n\n\n<p>Asegurarse de que su correo electr\u00f3nico responda y pueda adaptarse a las pantallas de los m\u00f3viles no es una opci\u00f3n, sino la forma de empezar a dise\u00f1ar un correo electr\u00f3nico.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Llamados a la acci\u00f3n (CTA) en correo electr\u00f3nico<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Colocaci\u00f3n de CTA<\/strong>: D\u00f3nde colocarlos para lograr el m\u00e1ximo impacto.<\/li>\n\n\n\n<li><strong>Dise\u00f1o de botones CTA<\/strong>: Tama\u00f1o, color, texto.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Experiencia de usuario (UX)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tiempo de carga<\/h3>\n\n\n\n<p>Importancia del tiempo de carga del correo electr\u00f3nico (seg\u00fan tama\u00f1o y n\u00famero de im\u00e1genes)<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Experiencia de usuario<\/strong>: Los correos electr\u00f3nicos de carga lenta pueden frustrar a los usuarios y generar una menor participaci\u00f3n.<\/li>\n\n\n\n<li><strong>Usuarios m\u00f3viles<\/strong>: A menudo est\u00e1n en movimiento y no esperan contenido lento.<\/li>\n\n\n\n<li><strong>Optimizar im\u00e1genes<\/strong>: Mantenga los tama\u00f1os de archivo peque\u00f1os pero la calidad alta.<\/li>\n\n\n\n<li><strong>Minimizar c\u00f3digo<\/strong>: HTML\/CSS limpio y simple se carga m\u00e1s r\u00e1pido.<\/li>\n\n\n\n<li><strong>Correos electr\u00f3nicos m\u00e1s cortos<\/strong>: Si bien puede ser m\u00e1s f\u00e1cil intentar agregar mucho a los correos electr\u00f3nicos, en realidad es mejor mantenerlos m\u00e1s breves.<\/li>\n\n\n\n<li><strong>Recorte de correo electr\u00f3nico:<\/strong> Ciertos clientes de correo electr\u00f3nico (como Gmail) recortan los correos electr\u00f3nicos si superan un tama\u00f1o determinado.<\/li>\n\n\n\n<li><strong>Prueba<\/strong>: Pruebe siempre los tiempos de carga en varios dispositivos, clientes de correo electr\u00f3nico y resoluciones.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Navegaci\u00f3n<\/h3>\n\n\n\n<p>Navegaci\u00f3n por correo electr\u00f3nico<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Descubrimiento de contenido<\/strong>: para correos electr\u00f3nicos m\u00e1s largos, como boletines informativos, la navegaci\u00f3n ayuda a los usuarios a encontrar lo que les interesa.<\/li>\n\n\n\n<li><strong>CTA<\/strong>: una navegaci\u00f3n clara puede guiar a los usuarios a tomar medidas.<\/li>\n\n\n\n<li><strong>Men\u00fa<\/strong>: Para correos electr\u00f3nicos con mucho contenido, un peque\u00f1o men\u00fa en la parte superior puede resultar \u00fatil.<\/li>\n\n\n\n<li><strong>Jerarqu\u00eda<\/strong>: Utilice t\u00edtulos y subt\u00edtulos para dividir el contenido y guiar al lector.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Accesibilidad<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Elecci\u00f3n de fuentes en el correo electr\u00f3nico<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Elecci\u00f3n de fuente<\/strong>: Las fuentes simples y limpias son m\u00e1s f\u00e1ciles de leer.<\/li>\n\n\n\n<li><strong>Tama\u00f1o de fuente<\/strong>: Lim\u00edtese a un tama\u00f1o legible, generalmente entre 14 y 16 p\u00edxeles para el cuerpo del texto.<\/li>\n\n\n\n<li><strong>Lectores de pantalla<\/strong>: Pruebe su correo electr\u00f3nico con un software de lectura de pantalla para asegurarse de que sea accesible.<\/li>\n\n\n\n<li><strong>Disponibilidad de fuentes<\/strong>:<strong> <\/strong>Cuando utilice fuentes personalizadas (que no est\u00e1n instaladas de forma predeterminada en los dispositivos), aseg\u00farese de que los archivos de fuentes se carguen correctamente.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Contraste de color<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Legibilidad<\/strong>: El alto contraste entre el texto y el fondo mejora la legibilidad.<\/li>\n\n\n\n<li><strong>Accesibilidad<\/strong>: Ayuda a las personas con problemas de visi\u00f3n o daltonismo.<\/li>\n\n\n\n<li><strong>Texto versus fondo<\/strong>: Apunte a texto oscuro sobre un fondo claro o viceversa.<\/li>\n\n\n\n<li><strong>CTA<\/strong>: Aseg\u00farese de que los botones se destaquen pero tambi\u00e9n sean legibles.<\/li>\n\n\n\n<li><strong>Herramientas<\/strong>: Utilice fichas de contraste para probar sus opciones de color.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Por qu\u00e9 es importante el dise\u00f1o del correo electr\u00f3nico: importancia en el comercio electr\u00f3nico y el marketing. Tama\u00f1os de fuente y tipograf\u00eda: recomendado... <a title=\"La gu\u00eda definitiva para el dise\u00f1o de correo electr\u00f3nico: tama\u00f1os de fuente y dimensiones de imagen, mejores pr\u00e1cticas\" class=\"read-more\" href=\"https:\/\/vibetrace.com\/es\/guia-definitiva-de-mejores-practicas-de-diseno-de-correo-electronico\/\" aria-label=\"Leer m\u00e1s sobre La gu\u00eda definitiva para el dise\u00f1o de correos electr\u00f3nicos: tama\u00f1os de fuente y dimensiones de imagen, mejores pr\u00e1cticas\"> <\/a><\/p>","protected":false},"author":9,"featured_media":23395,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[101,51],"class_list":["post-23379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecommerce-email-marketing","tag-email-design","tag-guide","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/posts\/23379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/comments?post=23379"}],"version-history":[{"count":16,"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/posts\/23379\/revisions"}],"predecessor-version":[{"id":23429,"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/posts\/23379\/revisions\/23429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/media\/23395"}],"wp:attachment":[{"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/media?parent=23379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/categories?post=23379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vibetrace.com\/es\/wp-json\/wp\/v2\/tags?post=23379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}