Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Crear una estructura HTML simple y adaptable para Email

by
Length:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

En este tutorial, le mostraré cómo crear un correo electrónico HTML simple y sensible que funcione en todos los clientes de correo electrónico, incluidos todos los nuevos clientes y aplicaciones de correo para teléfonos inteligentes. Utiliza consultas de medios mínimas y un enfoque de ancho fluido para garantizar la máxima compatibilidad.

Consultas de medios: sólo la mitad de la solución

Hubo un momento en que las consultas de medios eran suficientes para que los correos electrónicos de respuesta funcionaran en las aplicaciones de correo de iOS y Android, ambas de las cuales son compatibles con las consultas de medios.

Desde entonces, ha habido una proliferación de aplicaciones de correo creadas para plataformas iOS y Android, con diversos grados de soporte para métodos de desarrollo de correo electrónico receptivo.

Lo más notable es la última actualización de la aplicación Gmail para Android, que es dos veces más popular que la aplicación de correo predeterminada para los usuarios de Android (que ahora comprende el 11% del total abierto ). Nunca ha admitido consultas de medios, y aún no lo hace, sin embargo, ahora reduce sus correos electrónicos al comprimir el tamaño de la tabla exterior para que se ajuste al área visible de la pantalla. Es difícil de controlar y, cuando su correo electrónico completo se basa en consultas de medios para mostrar correctamente en el móvil, genera algunos resultados muy desagradables.

¿Por qué el fluido es el nuevo negro?

La buena noticia es que puede diseñar y crear un correo electrónico que se verá excelente en todas las aplicaciones de correo electrónico, incluidas aquellas que no admiten consultas de medios. Puedes hacer esto usando un diseño fluido.

Hay, sin embargo, algunos compromisos de diseño que tiene que hacer. Esos hermosos diseños de columnas iguales que se apilan en una sola columna no funcionan tan bien con este método. Si puedes aprender a vivir sin ellos, hay algunos diseños muy funcionales que pueden funcionar extremadamente bien.

Esto es lo que vamos a crear hoy:

Empezando

Ok, vamos a empezar con nuestro lienzo en blanco.

Lo que estamos creando aquí es nuestra página básica con su encabezado , doctype y tabla de contenedor con un color de fondo aplicado (tanto para el cuerpo como para una gran tabla de envoltura, ya que el estilo de la etiqueta del cuerpo no es totalmente compatible). Para obtener más información sobre esta configuración básica, consulte Crear una plantilla de correo electrónico HTML desde cero .

Luego, agregué nuestra tabla de contenido principal al centro con una clase de 'contenido'.

Presta atención

Nota: Notarás que en este tutorial colocaré CSS en el encabezado de nuestro documento. Por lo general, coloco estilos en la cabeza cuando los voy a reutilizar y mantengo los estilos únicos en línea.

Importante: siempre que use reglas CSS en la parte superior de su documento, debe usar una herramienta para ponerlo todo en línea al final del proceso. Si utilizas un servicio como MailChimp o Campaign Monitor , se ofrecerán automáticamente para que tus estilos queden en línea cuando importes tu diseño. Debe hacer esto porque algunos clientes, como Gmail, ignorarán o eliminarán el contenido de su etiqueta  o los ignorarán. También puede usar una herramienta como Premailer para poner su CSS en línea. Si usa Premailer o una herramienta similar, recuerde sacar sus consultas de medios antes de procesar (ya que queremos que permanezcan intactas), luego reinsértelos al final. MailChimp y Campaign Monitor automáticamente se encargan de esto por ti.

Ocultar estilos móviles de Yahoo!

Notarás que la etiqueta del cuerpo tiene un atributo extra. A Yahoo Mail le encanta interpretar tus consultas de medios como un evangelio, por lo que para evitar esto, debes usar selectores de atributos. Encuentro que la forma más fácil de hacer esto (como lo sugiere el Correo electrónico en ácido ) es simplemente agregar un atributo arbitrario a la etiqueta del cuerpo. Uso el 'yahoo' sugerido pero podría ser lo que quieras:

Luego puede apuntar a clases específicas usando el selector de atributos para su etiqueta de cuerpo en el CSS.

Dos trucos para dominar el método fluido

Como puede ver, nuestra tabla de 'contenido' está configurada para ser 100% ancha para que sea fluida y ocupe todo el ancho de las pantallas de teléfonos inteligentes y tabletas. También estableceremos un ancho máximo de 600 px para evitar que el correo electrónico ocupe toda la pantalla en dispositivos más grandes.

Ahora hay dos cosas ligeramente complicadas que debemos abordar para asegurarnos de que todo se muestre según lo planificado en todos los clientes de correo electrónico. Estas dos correcciones son gracias al excelente tutorial de Tina Ye sobre este método que está disponible en el blog de FogCreek .

1. Superar la falta de soporte de ancho máximo

Desafortunadamente, el ancho máximo no es compatible con todos los clientes de correo electrónico. Para que nuestro correo electrónico se muestre correctamente en Outlook y Lotus Notes 8 y 8.5, necesitamos envolver cada tabla en un código condicional que crea una tabla con un ancho establecido para contener todo. Se dirige a IE (que es el motor de renderizado utilizado por Lotus Notes) y Microsoft Outlook.

Vamos a envolver nuestra tabla en algún código condicional:

2. Una solución para Apple Mail

Extrañamente, Apple Mail (normalmente un cliente de correo electrónico muy progresivo) tampoco admite la propiedad de ancho máximo. Sin embargo, sí admite consultas de medios, por lo que podemos agregar una que le indique que establezca un ancho en nuestra tabla de clase de 'contenido', siempre que la ventana pueda mostrar el 600px completo.

Creando el encabezado

Ahora agregaremos la primera fila de nuestra tabla: el encabezado. Agregue lo siguiente al estilo a la fila que ya hemos creado:

Y luego en su CSS, agregue el relleno para el encabezado:

Añadiendo la primera fila responsiva

Ahora vamos a crear nuestra primera fila de respuesta. La forma en que hacemos esto es crear dos tablas que 'flotan' una al lado de la otra usando la propiedad HTML 'alinear'.

Columna izquierda

Reemplaza nuestro pequeño "¡Hola!" Saludo con lo siguiente:

Creamos nuestra tabla de 70px y también agregamos algo de relleno que actuará como nuestro canal entre las dos columnas. El relleno en la parte inferior agregará espacio de respiración vertical cuando las dos columnas se apilen en el móvil.

Columna derecha

Crearemos la columna de la derecha alineando de nuevo una tabla a la izquierda. Esta tabla tendrá un ancho de 445 px, lo que nos dejará 25px de repuesto en el lado derecho. Esto es muy importante porque Outlook apilará automáticamente sus tablas si no hay al menos 25px de sobra en una fila determinada.

Responsive-AlignedTables

Siempre que permita al menos 25 px de espacio para respirar, sus mesas se comportarán como se espera.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Permita que al menos 25px de espacio para respirar impida que Outlook apile sus mesas

¡Detener! Sugerencia alternativa para engañar a Outlook

Para evitar este capricho, también puede usar un código condicional para hacer que Outlook piense que ha cerrado una celda y ha abierto una nueva. Después de la etiqueta de cierre de la primera tabla y antes de la etiqueta de la tabla de apertura de la segunda, simplemente agregue:


Continua..

En la mesa más amplia, a la derecha, usaremos el mismo enfoque que usamos en nuestra tabla de contenedores, lo que implica crear una clase y agregar el código del contenedor condicional también. Queremos que esta tabla sea 100% ancha en el móvil, donde aparecerá debajo de la tabla de la izquierda.

Aquí puede ver que he creado una clase llamada 'col425' para esta tabla, nuestra columna ancha de 425px. Envolví la tabla con el código condicional que la encerrará en una tabla ancha de 425px. Luego, agregamos nuestra clase a la Consulta de medios que también creamos para Apple Mail.

Ahora dentro de nuestra celda agregaremos el encabezado de estilo.

He agregado algunas clases a cada celda para el estilo, así como algunos estilos que usaré para otros tipos de texto más adelante:

Nuestro encabezado ahora está completo y, a continuación, puede ver cómo se apilarán las dos columnas en el móvil. (Para obtener una vista previa de esto mientras trabaja, deberá comentar temporalmente las consultas de medios de ancho de dispositivo mínimo, ya que están aplicando un ancho fijo en el escritorio).

01-header

Creando la fila de texto de una sola columna

Para crear una fila de texto de una sola columna, simplemente agregamos una nueva fila a nuestro '.content' mesa. Agregaremos una clase 'innerpadding' a estas filas con algunos valores de relleno reutilizables. También agregaremos una clase de 'borde inferior' para aplicar un borde a cada fila.

Nuestro CSS para esta sección:

Creación del artículo de doble columna

Ahora crearemos una fila de respuesta exactamente igual a nuestro encabezado, pero con dimensiones ligeramente diferentes para que podamos tener una imagen más grande.

Hemos añadido un botón aquí con la clase 'buttonwrapper'. Contiene una celda acolchada con un conjunto de colores de fondo y luego un enlace de texto dentro. Prefiero usar este método, ya que le permite tener botones de ancho fluido, lo cual es muy útil al crear una plantilla reutilizable, donde el ancho de cada botón será diferente cada vez que se use. Si tiene un ancho fijo para sus botones, puede preferir usar el Generador de botones a prueba de balas en Campaign Monitor.

Nuestros estilos para el botón:

Además de nuestro ancho de conjunto para esta nueva clase 'col380', agregaremos nuestro tamaño a nuestra lista de estilos para cuidar de Apple Mail. Ahora se ve así:

Email-TwoCol

Creando la imagen de una sola columna

Esta es una fila muy simple; simplemente configuraremos una imagen para que sea 100% del ancho del correo electrónico y nos aseguraremos de que su altura esté configurada para ser automática utilizando CSS.

En nuestro CSS:

Creando la última fila de texto sin formato

Finalmente agregaremos una fila de texto sin el borde en la parte inferior:

Creando el pie de página

Para crear el pie de página, agregaremos una nueva fila con una tabla dentro. Una de las filas contendrá otra tabla para nuestros iconos de redes sociales.

Agregaremos los estilos necesarios para nuestro pie de página al CSS:

Botones de optimización para móvil

En dispositivos móviles, es ideal si todo el botón es un enlace, no solo el texto, porque es mucho más difícil apuntar un enlace de texto pequeño con el dedo. Debido a que no es posible tener este trabajo en todos los clientes de escritorio (el relleno no es totalmente compatible con las etiquetas  ), es algo que agrego a la versión móvil mediante consultas de medios.

 al que se aplica actualmente, y luego aplicarlo de nuevo a la etiqueta  junto con un montón de relleno.

Usaré tanto el ancho máximo como el ancho máximo del dispositivo en esta consulta de medios para intentar evitar un error en Outlook.com en IE9 .

Ahora, cuando tocas en cualquier parte del botón de color en el móvil, ¡es un enlace!

Más mejoras con consultas de medios

Si lo desea, ahora puede comenzar a realizar mejoras en su diseño aplicando nombres de clase a los elementos que desea controlar, y luego creando las nuevas reglas dentro de la consulta de medios que acabamos de crear.

Como ejemplo, convertiremos nuestro enlace de cancelación de suscripción en un botón, agregando una clase al enlace:

y agregando el siguiente CSS a la consulta de medios:

Email-Footer-MQs

También puede apuntar a las clases .innerpadding, .header y .footer para reducir la cantidad de relleno en los clientes que admiten consultas de medios.


Prueba y ve!

Finalmente, como siempre, asegúrese de validar (usando el validador W3C - solo debe obtener un error para el atributo de propiedad 'yahoo' en la etiqueta del cuerpo) y pruebe realmente bien usando dispositivos en vivo y un servicio de vista previa en la web como Litmus o Email en ácido .

¡Disfruta creando correos electrónicos receptivos que se ven geniales en cada cliente de correo electrónico!

Para llevar lo que has aprendido al siguiente nivel, echa un vistazo a los siguientes tutoriales:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.