{"id":11471,"date":"2014-11-20T16:00:57","date_gmt":"2014-11-20T19:00:57","guid":{"rendered":"https:\/\/blog.fromdoppler.com\/?p=11471"},"modified":"2014-11-20T17:48:14","modified_gmt":"2014-11-20T20:48:14","slug":"como-disenar-una-campana-de-email-responsive","status":"publish","type":"post","link":"https:\/\/www.fromdoppler.com\/blog\/como-disenar-una-campana-de-email-responsive\/","title":{"rendered":"\u00bfC\u00f3mo dise\u00f1ar una Campa\u00f1a de Email Responsive?"},"content":{"rendered":"

\"email<\/a><\/p>\n

\u00bfTienes problemas al dise\u00f1ar Campa\u00f1as de Email Responsive<\/a>? Descubre en este completo art\u00edculo los consejos y trucos para crear piezas adaptables a distintas pantallas<\/strong>. \u00a1Prep\u00e1rate!<\/p>\n

El primer gran error<\/strong> que cometes\u00a0al dise\u00f1ar Campa\u00f1as Responsive<\/a> es pensarlas como piezas gr\u00e1ficas. Antes de aprender a dise\u00f1ar piezas adaptables, necesitas deshacerte de la perspectiva de imprenta<\/strong>.<\/p>\n

Aqu\u00ed no hay un lienzo que te restrinja. No hay puntos ni dimensiones fijas ni elementos que convivan en un \u00fanico contexto inalterable<\/strong>. Lo m\u00e1s dif\u00edcil ser\u00e1 entonces olvidar lo aprendido.<\/strong><\/p>\n

\u00bfQu\u00e9 debes tener en cuenta?<\/h2>\n

A diferencia de un impreso, un Email se reproduce tantas veces como el usuario lo abre.<\/strong>\u00a0Y cada vez ser\u00e1 diferente, porque una de las particularidades que lo definen es la diversidad de entornos en los que convive: existen m\u00e1s de 10 clientes de correo<\/strong>, cada uno con interfaces y limitaciones t\u00e9cnicas diferentes.<\/p>\n

Ahora, como si esto no fuera lo suficientemente impredecible, s\u00famale la variable dispositivo y resoluci\u00f3n de pantalla.<\/strong><\/em>\u00a0No solo debes considerar\u00a0que el usuario abrir\u00e1 ese Email rodeado de elementos y contrastes que generan\u00a0ruido a su alrededor. Sino que adem\u00e1s,\u00a0deber\u00e1s tener en cuenta\u00a0en qu\u00e9 tama\u00f1o ver\u00e1\u00a0esa pieza.<\/strong><\/p>\n

Frente a este escenario, te encontrar\u00e1s\u00a0con la primer premisa<\/strong> a internalizar:<\/p>\n

\n

Mant\u00e9n tu dise\u00f1o lo m\u00e1s simple, limpio y jerarquizado posible.<\/p>\n<\/blockquote>\n

As\u00ed,\u00a0estos<\/strong> elementos se reordenar\u00e1n<\/strong> constantemente<\/strong> dependiendo del espacio que tengan para hacerlo. Cuantos m\u00e1s elementos haya, m\u00e1s ca\u00f3tico ser\u00e1 ordenarlos<\/strong> sin perder el sentido de la comunicaci\u00f3n.<\/p>\n

\u00a0Si tuvieras que acomodar\u00a0tu armario, \u00bfpreferir\u00edas tener muchas o pocas prendas de vestir? \u00bfGuardar\u00edas los zapatos junto con las blusas? \u00bfPondr\u00edas las prendas de verano junto a las de\u00a0invierno?<\/strong> \u00a1Claro que no!<\/p>\n

Si\u00a0han llegado los meses c\u00e1lidos, seguramente tus\u00a0abrigos invernales\u00a0no estar\u00e1n en el mismo lugar<\/strong> que las prendas veraniegas y viceversa. \u00a1Pues con el dise\u00f1o ocurre lo mismo! Todo aquello que no sea necesario mostrar en una comunicaci\u00f3n<\/strong> no deber\u00eda estar en ella<\/strong>. Recuerda, \u00a1mantenlo simple!<\/p>\n

Es hora de tomar decisiones<\/h3>\n

Ahora bien, si la\u00a0primer premisa era mantenerlo simple \u00bfcu\u00e1l es la siguiente? Elegir cuidadosamente aquellos elementos que son el coraz\u00f3n de tu pieza<\/strong> de Email Marketing<\/a>.<\/p>\n

Pues son ellos quienes te asegurar\u00e1n una comunicaci\u00f3n efectiva. En definitiva, que tu usuario no cierre el Email\u00a0sin siquiera leer la segunda l\u00ednea<\/strong>.<\/p>\n

\u00bfYa tienes tus elementos? \u00a1Bien! Lleg\u00f3 la hora de ordenarlos<\/h2>\n

\u00a0\"Modulos<\/a><\/p>\n

Antes de ubicar tus elementos debes comprender una regla muy sencilla: estos\u00a0se ordenan naturalmente de izquierda a derecha y de abajo hacia arriba<\/strong>. A medida que reduzcas su espacio horizontal, buscar\u00e1n recuperar ese espacio perdido<\/strong> en la verticalidad del mismo.<\/p>\n

Para que esto ocurra de manera ordenada<\/strong>, lo apropiado es ubicar tus\u00a0elementos sobre espacios modulares<\/a>. \u00bfPor qu\u00e9? De esta manera dejar\u00e1n de comportarse como elementos individuales <\/strong>para moverse en grupo. As\u00ed, la primer premisa vuelve a tomar protagonismo.<\/p>\n

Pero \u00bfcu\u00e1l es la forma indicada de trabajar o conseguir estos m\u00f3dulos? \u00a1A trav\u00e9s del uso de grillas modulares y porcentuales<\/strong>! Recuerda: ahora tus\u00a0elementos a ordenar son m\u00f3dulos. Cuantos menos poseas,\u00a0m\u00e1s sencilla ser\u00e1 la tarea<\/strong>.<\/p>\n

Tambi\u00e9n ten en cuenta\u00a0que los m\u00f3dulos necesitan reordenarse desde su horizontalidad a su verticalidad, entonces cuantas menos columnas utilices\u00a0m\u00e1s f\u00e1cil\u00a0ser\u00e1 controlar o prever su comportamiento<\/strong>.<\/p>\n

\u00a1Repasa algunos tips!<\/h2>\n