HTML y CSS: conceptos de codificación de correo electrónico

Sumergirse en el mundo de la codificación puede parecer desalentador si nunca lo ha hecho antes. La codificación de correo electrónico, en particular, tiene su propio conjunto de reglas. Si es nuevo en la codificación, aquí hay algunas cosas que debe considerar antes de sumergirse directamente en HTML y CSS para el correo electrónico.

¿Necesito codificar mi correo electrónico?

Si no tiene experiencia en codificación, codificar un correo electrónico desde cero puede no ser una solución práctica para usted, y ciertamente no es obligatorio. VerticalResponse proporciona una amplia selección de plantillas compatibles con dispositivos móviles y ofrece un editor fácil de usar para que pueda personalizar nuestras plantillas listas para usar con su propio contenido.

Si tiene experiencia y cierto nivel de comodidad usando o aprendiendo HTML, codificar una plantilla de correo electrónico personalizada podría ser una excelente opción. Al igual que con la codificación de una página web, aún debe considerar los comportamientos del navegador y del dispositivo. Además, considere los valores predeterminados de estilo únicos de docenas de clientes de correo electrónico como Gmail, Yahoo, Outlook y más. Si está acostumbrado a codificar una página web en HTML y aplicar una hoja de estilo CSS externa, deberá acostumbrarse a trabajar con CSS internamente y en línea para que estos valores predeterminados del cliente de correo electrónico no sobrescriban sus estilos.

Vocabulario para saber

Si eres completamente nuevo en la codificación, esto es lo que necesitas saber sobre HTML y CSS:

HTML es un lenguaje que utilizará para estructurar y describir su contenido. HTML significa lenguaje de marcado de hipertexto. Cuando codifica en HTML, está marcando su contenido con etiquetas que le indican al navegador web cómo mostrar información como imágenes y palabras en una página web.

CSS es un lenguaje que afecta la presentación de su contenido. Usando CSS, puede asignar estilos a elementos HTML. CSS significa hoja de estilo en cascada. La palabra cascada es significativa porque las declaraciones de estilo, o reglas, se respetarán por orden de aparición. Si realiza dos declaraciones para el mismo elemento, la última se respetará porque sobrescribe lo que viene antes.

Estas son las formas de vincular su CSS a su HTML:

CSS externo: usando una hoja de estilo externa (un archivo comúnmente llamado style.css) al que se hace referencia dentro de su archivo HTML. Esto es excelente para sitios web porque si tiene 100 elementos comunes que abarcan más de 100 páginas, puede cambiarlos todos a la vez con una sola declaración de CSS.

CSS interno, también conocido como CSS incrustado: incluye su código CSS dentro de las etiquetas <style> en la parte superior de su archivo HTML. Al codificar un correo electrónico, esto puede ser excelente para asignar estilos generales que se aplican a elementos comunes. Sin embargo, este método no siempre es compatible con el correo electrónico.

CSS en línea: adjuntar código CSS a un solo elemento HTML directamente dentro del código HTML. En la codificación de correo electrónico, este método garantiza que los valores predeterminados del navegador y del cliente de correo electrónico no sobrescriban determinados estilos.

Si está acostumbrado a configurar su CSS de forma externa o interna, puede crearlo de esa manera y luego usar una herramienta integrada como esta de PutsMail para convertir sus estilos en CSS integrado.

La relación entre HTML y CSS

Para tener una mejor idea de cómo se relacionan HTML y CSS y cómo separar CSS de HTML puede liberar la presentación de su HTML, visite el fantástico y célebre sitio web CSS Zen Garden, donde puede ver el mismo marcado HTML con CSS drásticamente diferente. , codificado por destacados diseñadores.

Acercándose a la codificación de correo electrónico

Cuando codifique un correo electrónico desde cero, manténgalo lo más simple posible. Utilice un editor de texto sin formato, como TextWrangler, Notepad o Sublime, y manténgase alejado de los editores visuales como Dreamweaver porque pueden agregar elementos innecesarios a su código.

Para el diseño, intente adoptar un enfoque móvil primero. Esto significa diseñar para pantallas pequeñas y avanzar. Con la visualización móvil continuamente en aumento, asegurarse de que su correo electrónico se vea bien en teléfonos y tabletas es más importante que nunca; no hay motivo para crear un diseño complicado que solo se vea bien en un escritorio. Mantener su mensaje y diseño lo suficientemente simple para los dispositivos más pequeños también será más fácil de codificar, será accesible para los usuarios de todos los dispositivos y mantendrá la atención de su lector enfocada en la llamada a la acción principal.

Una vez que su diseño y codificación estén completos, asegúrese de usar una herramienta como Litmus o Inbox Preview for HTML editor de VerticalResponse para obtener una vista previa de cómo se ve su correo electrónico en varios navegadores y clientes de correo electrónico para que pueda solucionar cualquier problema antes de presionar enviar.

Dónde empezar a aprender

Hay muchos tutoriales en línea donde puede aprender de forma práctica y detallada cómo codificar un correo electrónico. Una buena manera de sumergirse en la codificación de correo electrónico es encontrar una plantilla simple que le guste y dedicar un tiempo a examinar el código. Primero familiarícese con las etiquetas principales como <body>, <head> y <div> y luego observe cómo las etiquetas a veces se definen más en ID o clases, como <div class=”half-column”>. Tenga en cuenta que los nombres en una plantilla HTML de calidad serán claros y lógicos para que sea más fácil saber qué sucede cuando aparece en el CSS.

Si está listo para una lección paso a paso, busque tutoriales recientes (del año pasado). El enfoque de la codificación se reconsidera constantemente. Un método optimizado para dispositivos móviles que ha ganado popularidad en los últimos dos años, por ejemplo, es el enfoque fluido/híbrido. Este tutorial fluido/híbrido de Envato Tuts+ es excelente para aquellos que ya tienen algún conocimiento de HTML. Para los principiantes, Lynda.com ofrece muchos cursos de codificación específicos para correo electrónico. Un buen curso lo guiará a través de un ejercicio de codificación y le proporcionará un archivo de proyecto de ejemplo descargable que puede usar como referencia.

Dedique menos tiempo a llegar a más clientes

PRUEBA VERTICALRESPONSE HOY

(¡Es gratis!)

Nota del editor: esta publicación de blog se publicó originalmente en marzo de 2016 y se ha renovado y actualizado para mayor precisión y relevancia.