¿Cómo diseñar un correo electrónico HTML responsivo?
Hay algunas plantillas de correo electrónico disponibles. Recomiendo utilizar el texto estándar de correo electrónico HTML de Sean Powell como punto de partida, pero a modo de demostración, comencemos desde el principio.
Para obtener una introducción en chino a las plantillas de correo electrónico HTML, puede hacer clic en el código fuente de la plantilla de correo electrónico HTML para leer y en el panel de calderas de correo electrónico HTML-Desert.
Si te gusta aprender a codificar, puedes descargar la plantilla para este artículo aquí.
Descarga de demodulación
Tipo de documento (Doctype)
Hotmail y Gmail insertan automáticamente el tipo de documento estricto XHTML 1.0. Si bien esto no es una mala idea, es importante usarlo para probar minuciosamente sus correos electrónicos y no tener los tipos de documentos que su cliente de correo electrónico puede generar automáticamente.
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "
E-Email Acid ha realizado una extensa investigación sobre los tipos de documentos de correo electrónico. Aquellos que estén interesados pueden hacer clic aquí.
Consultas de medios (Media Queries)
Ahora podemos insertar una metaetiqueta de ventana para garantizar que nuestros correos electrónicos se muestren correctamente en dispositivos móviles. También es una buena idea especificar el tipo de contenido y las etiquetas de título. Si va a proporcionar un enlace a una "vista del navegador" en su correo electrónico, es una buena idea, pero pasa por alto el punto que muchos clientes de correo electrónico ignoran.
Debido a que el "tipo de contenido" puede ignorarse en los correos electrónicos, es aconsejable codificar todos los caracteres especiales en los correos electrónicos utilizando caracteres de entidad HTML.
Hay varios otros para garantizar que nuestros correos electrónicos puedan ser multiplataforma, y es necesario establecer varios otros estilos de tarifas de gestión.
& lthead & gt
& ltmeta nombre = " viewport " contenido = " ancho = ancho del dispositivo, escala inicial = 1,0"/>
& ltmeta http-equiv = " Tipo de contenido " Contenido = " texto/html; charset=iso-8859-1 "
<title>Asunto o título del correo electrónico</title>
p>& ltstyle tipo="texto/css "
. clase externa {ancho:100%;}
img {display:block;}
& lt/style & gt;
& lt/head & gt ;
Nota: Las metaetiquetas de ventana tienen un impacto negativo en BlackBerry.
Ahora podremos insertar media queries, dependiendo de las necesidades de cada funcionalidad del dispositivo. En este ejemplo, solo usaremos una consulta de medios: la mayoría de los dispositivos tienen tamaños de pantalla que no superan los 600 px, razón por la cual los teléfonos y pantallas táctiles modernos están diseñados para optimizar el estilo de los dispositivos móviles. Además, asumimos que estamos siguiendo las mejores prácticas comunes para dispositivos móviles; como dije anteriormente, los usuarios de dispositivos móviles que navegan por diseños más grandes pueden causar importantes problemas de usabilidad.
Cuando utilizamos consultas de medios para crear un sitio web de forma similar a una máquina, si el tamaño de la ventana cumple con las condiciones de la consulta de medios, aplicaremos el estilo en la consulta de medios.
@Pantalla específica del medio y (ancho máximo: 600 píxeles){
table[class="hide"], img[class="hide"], td[class= " ocultar"] {
Pantalla: ¡Ninguna! Importante;
}
}
En el ejemplo anterior, cuando la pantalla tiene menos de 600 px, configurando display:none para el elemento con la clase oculta nombre Elementos ocultos. ! Nota importante para garantizar que se anule cualquier estilo en línea. Este es el principio básico del diseño de correo electrónico responsivo.
Vale la pena señalar que utilizamos selectores de atributos CSS para elementos HTML para superar los problemas de representación de Yahoo Mail.
Así que podemos ver que las consultas de medios son una herramienta útil para mostrar contenido de forma selectiva, pero también podemos usarlas para permitirme condicionar otras características del diseño. Quizás lo más importante es que podemos limitar el ancho de las columnas de los correos electrónicos, la clave más importante para la experiencia móvil.
@Pantalla específica de medios y (ancho máximo: 600 píxeles) {
Tabla[class="content_block"] {
Ancho: ¡92%! Importante;
}
}
Hemos establecido en nuestra consulta de medios el ancho de todos los elementos content_block del nombre de clase cuando el ancho de la pantalla es inferior a 600 px. Ajustado a 92%. Ahora todo lo que tenemos que hacer es especificar el ancho del atributo en línea (600 px) y definir cualquier tabla de clase content_block. Tenemos un contenedor de ancho fijo y luego especificamos una relación de ancho en dispositivos móviles.
Los atributos de ancho de los elementos secundarios de este contenedor se especifican como porcentajes. Esta es una plantilla de correo electrónico responsiva básica.
Como regla general, para encargarse del ajuste automático de Webkit
botones
Las llamadas a la acción suelen ser la parte más importante de un correo electrónico de marketing. Deben ser llamativos, de buena calidad y, lo más importante, útiles. Un estándar CAT sólido es tener diferentes cursores o dedos para diferentes acciones. El poder del correo electrónico responsivo es proporcionar un botón que se puede operar con el dedo en dispositivos de pantalla táctil pequeños para que la imagen no obstaculice la operación con el dedo.
Desafortunadamente, estos botones no se muestran comúnmente porque dependen de propiedades de relleno, pero no son compatibles con algunos clientes de correo electrónico de escritorio.
Solo pantalla @Media y (ancho máximo: 600) {
un [class="button"]{
display:block;
Relleno: 7px 8px 6px 8px
-WebKit-border-radius:5px;
-moz-border-radius:5px;
Borde radio: 5px
Color: #fff! Importante;
Fondo: # f46f62
Alineación del texto: Centrado;
Decoración del texto: ¡Ninguna! Importante;
}
}
La declaración de estilo anterior utilizará el botón de nombre de clase para cambiar la etiqueta siempre que el ancho de la pantalla no sea mayor. 600px, el botón se hará más grande. Hazlo hermoso, colorido y abarcará todo el ancho de tu área de contenido. La compatibilidad con CSS3 no debería ser un problema, podemos escribir nuestro objetivo para que sean tecnologías móviles razonablemente modernas.
& lta href = " # " estilo = " color: # f46f 62; peso de fuente: negrita; decoración del texto: subrayado; "& gt¡Haz clic en mí! </a>
Los estilos en línea permiten a los usuarios del mouse hacer clic y sobrescribir enlaces con mayor precisión, de modo que los usuarios de la pantalla táctil pueden reducir los errores de interacción. Es importante destacar que este enfoque no se basa en imágenes y, por lo tanto, evita los problemas de usabilidad de los bloques de carga de imágenes.
Conclusión
El diseño de respuesta a correos electrónicos sigue siendo un compromiso. Con una confusa variedad de dispositivos diferentes, los motores de renderizado de los clientes de correo electrónico presentan a los diseñadores y desarrolladores una tarea difícil.
Pero con el avance de la tecnología, se ha vuelto más fácil brindar a los usuarios un diseño adecuado y pueden brindar interacciones efectivas sin esfuerzo. Cada vez más clientes de correo electrónico admiten consultas de medios, lo que cambia el aspecto y la optimización del correo electrónico móvil y nos proporciona una plataforma que mejora enormemente la experiencia para más usuarios. Ahora es el momento de que nosotros, los diseñadores y desarrolladores, probemos formas creativas de brindar a más usuarios de dispositivos móviles una mejor experiencia.