Cómo crear consistencia de marca online (para correo electrónico y la web)

En una economía que está más digitalizada que nunca, un enunciado cobra relevancia particular:

"La consistencia de marca es la clave para la supervivencia en la economía digital de hoy" - Marketing Week

La consistencia de marca conduce al reconocimiento de marca y el reconocimiento de marca conduce a la confianza en la marca. ¿Alguna vez has confiado en una marca que no reconoces?

El desafío de la consistencia de marca online

Una marca online es más que la suma de sus partes. Logras la consistencia de marca cuando todos los elementos que aparecen en todos los canales que utiliza una marca, como correo electrónico, web y aplicaciones son, en efecto ¡consistentes!

El desafío de lograr la consistencia de marca online viene con la manera inconsistente en la que tienes que crear los elementos para esos canales, resultando en inconsistencias de cómo esos elementos lucen y cómo se comportan.

Cómo crear una consistencia de marca online

Prestar atención a esos elementos te ayuda a asegurar consistencia de marca online en todos tus canales. Algunos de ellos son de importancia primaria para la consistencia de marca online. Incluyen logos, colores y fuentes.

• 
  Placeit
  Cómo diseñar un logo de monograma (usando un generador online)
  Laura Keung
• 
  Placeit
  Cómo crear un logo animado
  Abbey Esparza

Algunos de ellos son de importancia secundaria para la consistencia de marca, pues realzan el reconocimiento de la marca, pero no son clave para ella. Incluyen cosas como botones, enlaces y formas. En este tutorial, me enfocaré en los elementos primarios y secundarios, en dos de esos canales, correo electrónico y la web.

Diseñar elementos primarios de marca online

Logos

Los logos (o logotipos) probablemente son los elementos más reconocibles de la marca online, pues son únicos para cada marca. Por lo tanto, necesitan ser consistentes en todos los recursos de la marca, online, offline, impresos, correo electrónico, web y aplicaciones. Para alcanzar esta consistencia, deberías:

• Usar la misma versión o versiones de tu logo. Podrías tener una versión de tu logo que usas para teléfonos celulares, tabletas y computadoras de escritorio. Podrías tener dos versiones de tu logo, una para teléfonos celulares, que podría pesar menos y ser más ancho (en formato apaisado) y una para tabletas y computadoras de escritorio, que podría tener más altura y menos anchura (en formato de retrato).
• Muestra tu logo en un tamaño y proporción consistente en todos los recursos.
• Asegúrate de que ambas versiones de tu logo sean de alta resolución, para que se vean nítidos en pantallas de alta definición, como en la pantalla de retina de Apple. Los logos desenfocados no representan a las marcas muy bien y el destinatario podría pensar que el correo electrónico o el sitio web en el que están no son auténticos.

Puedes asegurar que tus logos sean de alta resolución creándolos en una anchura mayor (en pixeles) y en una altura mayor (en pixeles) y en un adecuado formato de imagen. Los formatos GIF y PNG-8 son adecuados para logos con colores sólidos o uniformes, los formatos JPEG y PNG-24 son óptimos para logos con colores graduados o fotografías. El formato SVG es propio para logos con colores sólidos y graduados.

Implementación: correo electrónico

1. Crea tu logo a 200% de su tamaño requerido. Crear tu logo en este tamaño asegurará que luzca nítido en pantallas de alta definición, como la pantalla de retina de Apple cuando se reduzca a su tamaño requerido.
2. Guarda tu logo en un formato de imagen adecuado (GIF o PNG-8 para logos con colores sólidos, JPEG o PNG-24 para logos con colores graduados o fotografías).
3. Especifica el tamaño requerido de tu logo en tus archivos HTML y CSS. En el atributo imagen del archivo HTML, la anchura y la altura (por ejemplo img width="200" height="100"). En la declaración CSS directa respecto a la imagen, la anchura como 100%, la anchura máxima (su anchura requerida), y la altura como auto (por ejemplo style="width:100%; max-width:200px; height:auto;"). Especificar el CSS de esta manera asegura que el logo se mostrará en su tamaño requerido, pero luego reducirá su tamaño para encajar en la anchura de pantallas más pequeñas si son demasiado pequeñas para mostrarse en su tamaño requerido.

Implementación: web

1. Guarda tu logo en el formato de imagen SVG
2. Especifica el tamaño requerido de tu logo en tus archivos HTML y CSS. En el atributo imagen del archivo HTML, la anchura y la altura (por ejemplo img width="200" height="100"). En el estilo interno de la imagen, la anchura como 100%, la anchura máxima (su anchura requerida), y la altura como auto (por ejemplo, .logo{width:100%; max-width:200px; height:auto;}). Especificar el CSS de esta manera asegura que el logo se mostrará en su tamaño requerido, pero luego reducirá su tamaño para que encaje en la anchura de las pantallas más pequeñas si son demasiado pequeñas para mostrarse en su tamaño requerido. Como el formato de imagen SVG es vectorial, mientras la imagen original sea de calidad suficiente, seguirá siendo nítida cuando aumente o disminuya su tamaño.

Si alguna vez examinas tu logo nuevamente para hacer modificaciones, asegúrate de actualizar cada versión en el correo electrónico y la web. Crear versiones maestras y colocarlas en un fragmento de código maestro te permitirá actualizar una sola vez y que se aplique en todos lados.

Colores

Asegurar que los colores sean consistentes es razonablemente sencillo, mientras uses código hexadecimal, el formato de código de color soportado para correo electrónico y la web, y lo apliques usando los seis caracteres. En la web, para algunos colores, es posible abreviarlo a tres caracteres, usando un atajo cuando los primeros tres caracteres y los últimos tres son los mismos (por ejemplo, #ffffff; a #fff; o #ff0ff0; a #ff0;).

En el correo electrónico, el CSS debería aplicarse directamente, especialmente en el texto y los enlaces, pues hay algunos clientes de correo electrónico, clientes basados en la web y aplicaciones que no soportan CSS interno. La excepción a esto es cuando aplicas estilo a elementos y lo tienes que hacer forzosamente con CSS interno, como tablas fantasma y elementos a los que se aplicaron estilo o dependientes de @media queries, como web fonts o fuentes web. En la web, puedes aplicar CSS directamente, aunque es mejor aplicarlo interna o externamente.

Implementación: correo electrónico

• Código hexadecimal de seis caracteres (por ejemplo, #000000;)
• CSS inline o directo. Css interno para aplicar estilo a elementos con tablas fantasma y elementos dependientes de @media queries.

Implementación: web

• Código hexadecimal de seis caracteres (por ejemplo, #000000;). Código hexadecimal de tres caracteres usando un atajo (por ejemplo, #000;) donde sea posible.
• Css interno. CSS externo.

Es importante ser consciente de cómo los colores de elementos de marca online aparecerán en 'Modo oscuro' en dispositivos de Apple o 'Tema oscuro' en dispositivos Android. Las imágenes oscuras en fondos transparentes podrían desaparecer e imágenes recortadas muy justamente en fondos blancos ¡podrían parecer ejecutadas de manera defectuosa e incompletas!

Para consistencia, recomiendo diseñar elementos de marca online para que se muestren en Modo oscuro y Tema oscuro, sin tener en cuenta el código, pues, al momento de escribir este artículo, tanto el Modo oscuro como el Tema oscuro son relativamente nuevos, así que probablemente veas resultados diferentes en todos los canales.

Fuentes

El método más fácil de lograr consistencia con las fuentes es usar fuentes seguras para la web, como Arial y Georgia. Las fuentes seguras para la web están preinstaladas en la mayoría de los sistemas operativos, así que podemos asumir (de ahí su nombre) que se mostrarán en ellos.

Sin embargo, si tienes fuentes seguras para la web en tus correos electrónicos, y web fonts en tu sitio web, la experiencia de marca online será inconsistente. Al momento de escribir este artículo, las web fonts pueden implementarse en correo electrónico con CSS, usando fuentes web WOFF (Web Open Font Formato). Se mostrarán en múltiples sistemas operativos de Apple, incluyendo iOS, iPadOS y MacOS, que en Diciembre de 2020, representaba el 53% de la cuota de mercado global del correo electrónico, más que Gmail, Outlook, Yahoo! Mail, Samsung Mail, Google Android y Outlook.com combinados.

Web Fonts en Envato Elements

Una suscripción a Envato Elements te dará acceso a miles de las mejores web fonts. Si eres un fanático de la tipografía, necesitas echar un vistazo a nuestra selección.

Sin embargo, tu marca podría tener más o menos del 53% de tus destinatarios usando estos sistemas operativos, así que tendrás que especificar una adecuada fuente alternativa segura para la web en la pila de fuentes para cuando no se puedan mostrar. Claro, puedes implementar web fonts más ampliamente en la web, aunque necesitarás asegurarte de que se muestren en los navegadores soportados por tu marca.

Implementación: Correo electrónico

• Fuentes seguras para la web.
• Las web fonts (únicamente WOFF) (limitadas a iOS, iPadOS y MacOS) aplicadas con CSS.

Implementación: Web

• Fuentes seguras para la web.
• Las web fonts (selecciona una web font disponible como WOFF para asegurar consistencia con el correo electrónico) en navegadores soportados por la marca. Elementos secundarios de marca online.

Botones

Aunque no son en sí elementos de marca, necesitas diseñar botones, para que el destinatario los reconozca y sepa qué hacer con ellos, en cualquier lugar que estén de su viaje online, correo electrónico o la web. Considera su forma (algo que abordo más adelante en este tutorial) y sus símbolos, como sus chevrones y flechas.

• 
  Teoría del diseño
  Los principios para un exitoso diseño de botones
  Pete Orme

Es desafiante implementar símbolos como imágenes en botones de correo electrónico, así que aconsejaría mejor usar entidades, como la flecha hacia la derecha (→). Como los botones son elementos interactivos, sé consciente de cómo se verán y se comportarán, cuando un usuario interactúa con él o lo selecciona. Implementar el estilo para el botón se logra con CSS en correo electrónico y CSS junto con JavaScript en la web.

Implementación: Correo electrónico

• HTML, CSS (incluyendo animación CSS donde sea soportada).

Implementación: Web

• HTML, CSS, JavaScript

Enlaces

De muchas maneras, los enlaces son como botones, así que siguen las mismas "reglas" para consistencia. La diferencia es cómo algunos clientes de correo electrónico, clientes de correo basados en la web y aplicaciones forzan la aplicación de estilo en ellos, haciéndolos inconsistentes.

Los enlaces azules como se conocen pueden presentarse cuando clientes de correo electrónico, clientes de correo basados en la web y aplicaciones, sobrescriben cualquier CSS interno con la aplicación de estilo predeterminado en color azul, ¡lo cual indudablemente no estará en la marca! Puedes resolver esto, aunque requiere diferentes técnicas para diferentes clientes de correo electrónico, clientes de correo electrónico basados en la web, aplicaciones y dispositivos. ¡Un tutorial por sí mismo! Sin embargo, estos son algunos consejos para que inicies.

Apple Mail

1. Inserta el siguiente CSS interno: a[x-apple-data-detectors] {color:inherit !important;}

Gmail

1. Inserta un ID de body en la etiqueta body <body id="body">
2. Inserta el siguiente CSS interno: u + #body a {color:inherit !important;}

Samsung Mail

1. Inserta el siguiente CSS interno: #MessageViewBody a {color:inherit !important;}

Otros casos

1. Inserta una class de blueLink en la etiqueta afectada: <p class="blueLink">01234 56789</p>
2. Inserta el siguiente CSS interno: .blueLinks a {color:inherit !important;}

Formas

Las formas desempeñan un papel en la marca, aunque lograr consistencia puede ser desafiante usando HTML y CSS. Crear cualquier cosa distinta a un rectángulo en correo electrónico, dentro de una cuadrícula de rectángulos presenta complejidades. Es posible crear rectángulos redondeados e incluso encimar un rectángulo sobre otro, pero estas técnicas exigen mucho tiempo y ensayos.

Puedes crear rectángulos redondeados de manera consistente en botones si estás dispuesto a invertir tiempo para desarrollar un botón de Microsoft Vector Markup Language (VML). Microsoft Outlook no soporta la propiedad CSS border-radius, así que usar border-radius resultará en que se aplique border-radius a cualquier elemento, incluyendo botones, siendo rectangulares en Microsoft Outlook sin usar VML.

Afortunadamente Campaign Monitor tiene una herramienta útil para crear botones VML. Sin embargo, dependiendo de cuántos destinatarios de tu marca utilicen Microsoft Outlook y de tu diseño y estrategia de desarrollo de correo electrónico, podrías decidir aceptar que no vean rectángulos redondeados, ¡sino únicamente rectángulos habituales! Todo depende de qué tan crucial es esa forma para tu marca.

Implementación: Correo electrónico

• CSS: Esquinas redondeadas con border-radius (sin soporte en algunos clientes de correo electrónico incluido Microsoft Outlook).
• VML: Esquinas redondeadas en botones pueden crearse fácilmente con VML y border-radius, usando la herramienta 'Bulletproof email buttons' de Campaign Monitor.

Implementación: Web

• CSS: Esquinas redondeadas con border-radius. Hacer concesiones respecto a la consistencia

Como hemos visto, hay ocasiones donde puede ser necesario hacer concesiones respecto a la consistencia, donde el costo de ella es alta en términos de tiempo y esfuerzo. La pregunta es ¿aceptas o no aceptas la concesión? Es una cuestión de qué tanto la concesión impacta la integridad de tu marca.

Si tus destinatarios utilizan primordialmente Microsoft Outlook y tu marca usa muchos rectángulos redondeados, puede valer la pena invertir tiempo para crear rectángulos redondeados usando VML.

Si tus destinatarios utilizan principalmente iOS, entonces no valdrá la pena y podrías tener que aceptar la concesión de tener rectángulos habituales para cualquier destinatario que use Microsoft Outlook. 

Finalmente: Plantea un diseño y estrategia de desarrollo de correo electrónico

Comprender el soporte de HTML y de CSS en todos los clientes de correo electrónico, clientes de correo basados en la web y aplicaciones te ayudará a lograr una consistencia mayor en el correo electrónico y la web y te ayudará en cualquier decisión que necesites tomar respecto a las concesiones. Plantea un diseño y estrategia de desarrollo de correo electrónico.

Plantear un diseño y una estrategia de desarrollo de correo electrónico te ayudará a entender los clientes de correo electrónico, los clientes de correo basados en la web y las aplicaciones que están utilizando tus destinatarios, y así puedas concentrar tus esfuerzos donde más importa. Esa percepción conducirá a una experiencia de marca online consistente para tus destinatarios, cuando salen de tu correo electrónico y llegan a tu sitio web.

Desarrollo de correo electrónico para principiantes

Aprende más de las estrategias de desarrollo de correo electrónico con nuestra serie de tutoriales:

• 
  Correo electrónico
  La guía completa de diseñar para el correo electrónico
  Nicole Merlin
• 
  Correo electrónico
  Lo que deberías saber de HTML para correo electrónico
  Nicole Merlin
• 
  Diseño de correo electrónico
  Cómo plantear un diseño y una estrategia de desarrollo del correo electrónico
  Paul Airy
• 
  Diseño de correo electrónico
  Consideraciones del diseño para múltiples clientes de correo electrónico y dispositivos
  Jaina Mistry