menu

Codificando Correos Electrónicos HTML Responsive Como si Fuera 1999

Screen Grab From Micrsoft Outlook
He estado diseñando correos electrónicos en HTML por más de una decada y no termina de asombrarme lo poco que han cambiado las cosas desde que comence. ¿Donde más se puede conseguir usted gente que todavía utiliza tablas para un diseño entero? Sin embargo, no importa que tanto tiempo lleve haciendo esto y que tan poco haya cambiado el proceso, todavía se consiguen bastantes desafíos para mantenerte bien ocupado. Y ni hablar de mantener la consistencia de tal diseño. Yo no se ustedes, pero cuando consigo que un email se vea igual en todos los clientes de correo (incluyendo a los smartphones y tablets), me puedo reclinar y sentirme realizado.

Verán, aún cuando codificar correos electrónicos implique la utilización de código de más de una decada de edad, los desafíos encontrados son bastante similares a los de un desarrolador para la web. No es nada divertido tratar de diseñar una página web cuya funcionalidad es consistente con la mayoría de los browsers existentes (incluyendo IE), así como no es nada entretenido producir un correo de HTML que funcione con casi todos los clientes de correo conocidos (Por favor, dejen un comentario si odian MS Outlook 2007 y 2010 tanto como yo). Como si eso no fuera suficiente para mantenerte los pelos de punta, el diseño responsive ha llegado para quedarse como resultado de la explosión del uso de smartphones y tablets. Muchos reportes y estudios concuerdan en que hoy por hoy, un promedio del 40% de todos los correos leidos, son leidos primero en un dispósitivo móvil. Si te haces llamar une experto en email marketing y todavía te estas preguntando cuales son los méritos de los correos electrónicos responsive, creo que necesitas despertar antes de que pierdas tu trabajo.

Espero poder iniciar una serie de artículos sobre los obstáculos que me he conseguido en el camino diseñando correos electrónicos responsive, y las soluciones que he conseguido diseminadas por diferentes partes en Internet. Algunas de esas partes a las que me refiero son páginas como el blog de Litmus, el blog de Campaign Monitor y el blog de Mailchimp, para mencionar algunos. El diseño responsive para correo electrónico requiere más que CSS y simples media queries ya que cada diseño al cual somos asignados viene con su propio set de desafíos, los cuales espero poder mencionar en esta serie de artículos. Por favor sientanse libres de dejar comentarios ofreciendo mejores soluciones (o la única solución) para resolver los problemas presentados, ya que toda información compartida nos ayuda a todos a avanzar como comunidad.

Vamos a comenzar con la primera pregunta de la serie:

¿Como evitamos que las dos tablas incluidas en la siguiente sección de código se posicionen una encima de la otra (el comportamiento esperado para smartphones) cuando son vistas en MS Outlook 2007 y 2010?

El código funciona en casi todos los clientes principales de correo electrónico (la execpción son MS Outlook 2007 y 2010. Sin embargo, funciona sin problema en Outlook 2011 para Mac).


March 26, 2013
Juan Rojo

Leave A Reply