comparte el articulo 

Aspectos básicos para estructurar un email con HTML – Parte 2

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: El uso de estilos y elementos estándar de HTML en correos electrónicos suele ser complicado, por lo que te damos los siguientes consejos para facilitar tu desarrollo de plantillas.

En la parte anterior de este artículo, tuvimos la oportunidad de explicar algunos aspectos relevantes sobre de flujo de trabajo de los correos electrónicos, así como de dar sugerencias para la estructuración de éstos mediante elementos HTML. Ahora, es tiempo de enfocarnos en la elaboración de dichas estructuras y para ello debemos profundizar en el estudio de los factores que nos permiten realizar de manera más eficaz el desarrollo.

Herramientas

Para poder llevar a cabo el desarrollo de plantillas y estructuras HTML para correos, es recomendable que cuentes con un editor de texto que te proporcione las propiedades que más se adapten a tu forma de programar. En mi caso, normalmente hago uso de Netbeans porque la mayoría de los proyectos en los que trabajo están relacionados con PHP y Java, y este editor da un gran soporte para ambos lenguajes, pero como los desarrollos relacionados a correos no son tan demandantes, se puede hacer uso de un editor más ligero como Sublime, TextMate o Notepad++.

Además de un editor, es recomendable contar con una cuenta de prueba en Litmus o en Email on Acid, esto permitirá ir probando los cambios que realizamos a los correos electrónicos. Tener una cuenta de prueba ilimitada con cualquiera de estos sitios te hará la vida mucho más fácil. Si al final decides no ir por la cuenta para pruebas ilimitadas, terminarás pagando entre $3 y $5 dólares por cada prueba que realices.

Base

En mi opinión no hay nada mejor que empezar con una estructura limpia, sólida y elaborada por ti. Existen frameworks como HTML Email Boilerplate, los cuales te permiten elaborar y organizar código de manera más adecuada, además de que nos proporcionan fragmentos de código y atajos que se pueden ir implementando pieza por pieza.

Si tu plan es desarrollar una estructura no muy ostentosa, quizás el uso de este framework sale sobrando, ya que puede contener una gran cantidad de elementos que terminarás por no utilizar. Esto a menudo puede hacer que sea más difícil solucionar cualquier problema.

De ser posible, evita utilizar editores WYSIWYG para elaborar la estructura base de tu correo. Si lo haces, el resultado puede ser muy precario y esto terminará por complicarte más las cosas cuando deseemos continuar con el proyecto o dar mantenimiento.

!DOCTYPE

El primer aspecto técnico del que debemos hacer uso dentro de nuestro template en blanco, es el elemento Doctype. Un Doctype es básicamente una línea de código que informa al programa que lee el código, que clase de etiquetas HTML esperar y qué conjunto de normas aplicar.

Muchos programas clientes de correo electrónico omiten el uso de esta etiqueta removiéndola del código, algunos incluso aplican su propio Doctype. Sin embargo, el uso de éste facilita el procedimiento de desarrollo, reduciendo la posibilidad de peculiaridades y contradicciones entre documentos, todo esto al agregar un estándar para el resto de los clientes y navegadores que lo identifican.

Es recomendable utilizar un doctype de tipo XHTML 1.0 Transitional, ya que declara un tipo de documento confiable, sin ser demasiado estricto en las reglas y sin omitir aspectos relevantes. Dicha sentencia se colocará en la parte superior de nuestro documento.

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Al igual que el Doctype, es recomendable añadir dos etiquetas de tipo meta a nuestro código.

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"

El tag Content-Type meta es para decirle al motor de renderizado como procesar los textos y caracteres especiales. Mientras que la etiqueta viewport está indicando al dispositivo el área de visualización que se debe fijar, estableciendo la escala inicial a 1.

Si no se especifica esto, muchos teléfonos inteligentes pueden escalar su contenido, reduciendo el tamaño de la plantilla para que el contenido se ajuste al área visible del teléfono. Esto puede dar como resultado un correo con texto e imágenes empalmadas, agrupadas y alineadas totalmente a la derecha de la pantalla.

Uso de tablas

Si bien el uso de tablas para alinear y organizar elementos ha sido satanizado por muchos diseñadores a lo largo de los años, en el caso de las plantillas de correos no existen muchas opciones a las cuales podamos recurrir.

Debido a la falta de soporte de estándares en el correo electrónico, no es posible utilizar divs, secciones o etiquetas de artículos, en vez de eso tenemos que recurrir al uso de tablas, y es por eso que el desarrollo de templates para correos electrónicos se reduce al uso de tablas anidadas. La anidación constante es necesaria ya que atributos como colspan y rowspan no son interpretados adecuadamente.

Por esto mismo, en vez de hacer uso de párrafos para mostrar nuestro texto, debemos recurrir a las celdas. No es recomendable utilizar etiquetas estándar como h1, h2, h3 o p, ya que el resultado puede ser realmente inconsistente en los clientes de correo electrónico, causando bastantes dolores de cabeza. La mejor opción es colocar todos los bloques de texto en celdas y aplicarle estilos.

Estilo

Al aplicar el estilo a la plantilla debes recordar que no se puede aplicar múltiples clases a los elementos en el correo electrónico HTML, ya que no es soportado. Cada elemento puede tener como máximo una clase.

Además de esto, no se pueden utilizar abreviaturas en las propiedades CSS, si por ejemplo quisieras aplicar un tamaño de fuente y escoger el tipo de fuente a usar, tendrás que aplicarlo en las 2 propiedades por separado.

Publicado el 13/08/2013, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Meneame Bitacoras