![\"Maqueta](\"https:\/\/fromdoppler.com\/blog\/wp-content\/uploads\/20180726-TipsHTML_Main-2.png\")
<\/p>\n<\/p>\n
\u00bfTe atreves a explorar la infinidad de posibilidades que ofrece esta t\u00e9cnica y crear Emails que expresen todo el valor de tu marca<\/strong>? Esto no ser\u00e1 misi\u00f3n imposible si cuentas con los conocimientos y las precauciones b\u00e1sicas antes de comenzar.<\/p>\n En este post te contamos qu\u00e9 es HTML, cu\u00e1les son sus principales elementos y qu\u00e9 debes tener en cuenta al momento de poner manos a la obra con tu primer Email. Luego de leerlo, seguramente se disparar\u00e1n muchas ideas y estrategias para poner en pr\u00e1ctica. \u00a1No te quedes con las ganas de intentarlo!<\/p>\n HTML (Hyper Text Markup Language)<\/strong> es un lenguaje que nos permite escribir texto de forma estructurada<\/strong>, el cual est\u00e1 compuesto por etiquetas<\/strong>, que marcan el inicio <><\/strong> y el fin <\/><\/strong> de cada elemento y le dan la informaci\u00f3n al navegador de qu\u00e9 mostrar en cada cliente de correo<\/strong>.<\/p>\n Siguiendo este razonamiento, un Email<\/strong> no es otra cosa que un documento HTML<\/strong><\/a> que puede contener texto, im\u00e1genes y hasta videos (si el cliente de correo te lo permite), por lo que el resultado es un documento multimedia<\/strong>. Estos deben tener la extensi\u00f3n .html para que los clientes de correo, los navegadores y el Editor de Campa\u00f1as de Doppler<\/strong> puedan interpretar el c\u00f3digo y mostrar de forma correcta el resultado final. \u00bfAlguna vez intentaste subir alg\u00fan archivo con otro formato y nuestro Editor no te lo ha permitido? Ahora ya conoces el por qu\u00e9 \ud83d\ude42<\/p>\n El c\u00f3digo HTML comienza con la etiqueta <html><\/b>, y termina con <\/html><\/b>. Dentro del documento (entre ambas etiquetas), hay dos zonas bien diferenciadas:<\/p>\n Para comenzar a trabajar en tu Email deber\u00e1s incluir DOCTYPE<\/strong>; esta l\u00ednea de c\u00f3digo informa al cliente de correo acerca de la correcta lectura de las etiquetas y cu\u00e1l es el conjunto de reglas HTML y CSS<\/strong><\/a> que deben aplicarse.<\/p>\n Luego, la etiqueta Content-type<\/strong> le informar\u00e1 acerca del modo de procesar el texto y los caracteres especiales.<\/p>\n Por \u00faltimo, la etiqueta viewport<\/strong> indicar\u00e1 que el texto debe ajustarse al \u00e1rea visible para el usuario (que es el ancho de la pantalla del dispositivo) y establece la escala inicial.<\/p>\n A continuaci\u00f3n te presentamos los elementos b\u00e1sicos para maquetar tu HTML<\/strong>, los cuales se introducen en el c\u00f3digo mediante distintas etiquetas.<\/p>\n La estructura b\u00e1sica de un HTML se ver\u00eda as\u00ed:<\/p>\n Si quieres crear tu pieza desde cero, Doppler<\/strong><\/a> te ayudar\u00e1 a terminar de configurar tu Campa\u00f1a y llevarla sin escalas a tus Suscriptores. \u00a1Ser\u00e1n una dupla imbatible! Crea tu cuenta gratis<\/a><\/strong>, importa tus HTML f\u00e1cilmente en nuestro Editor y asegura su pronta entrega.<\/p>\n En un primer art\u00edculo te hemos presentado 6 Tips para maquetar tu HTML<\/a>\u00a0<\/strong>y optimizar tus piezas. Lleg\u00f3 el momento de sumar otros 6 secretos y recomendaciones para que tus correos alcancen su mejor versi\u00f3n.<\/p>\n Es clave comenzar a maquetar tu HTML desde la estructura; esto te ayudar\u00e1 a evitar errores comunes en los diferentes clientes de correo. Empieza por la estructura base<\/strong> (como la que te mostramos anteriormente), sigue por una secci\u00f3n y luego pasa la siguiente. \u00a1Para lograr un trabajo de calidad es esencial realizarlo paso a paso y no avanzar hasta resolver lo anterior!<\/p>\n A medida que progreses en la maquetaci\u00f3n de tu pieza podr\u00edas ir enviando Tests<\/strong><\/a> para comprobar si vas por el camino correcto. Otra buena pr\u00e1ctica es dejar activados los bordes de las tablas<\/strong>, desde los cuales podr\u00e1s visualizar la construcci\u00f3n de la estructura y eliminarlos al finalizar.<\/strong><\/p>\n Al momento de dise\u00f1ar un HTML debes comenzar por desechar la falsa creencia<\/strong> de que se ver\u00e1 igual de bien en todos los clientes de correo. \u00bfHas pensando que actualmente la mayor\u00eda de tus Suscriptores ven tus Emails desde un tel\u00e9fono inteligente<\/strong>? En ese caso, la visualizaci\u00f3n no ser\u00e1 la misma que desde un ordenador de escritorio.<\/p>\n Por ejemplo, si has dise\u00f1ado una HTML con 3 columnas, esta se ver\u00e1 muy bien en pantallas grandes, pero para que se visualice correctamente en una tablet o tel\u00e9fono m\u00f3vil deber\u00e1s utilizar la propiedad de media query desde el CSS<\/strong><\/a>, para que las columnas de la Plantilla se adapten al tama\u00f1o correspondiente.<\/p>\n Este tipo de consideraciones y diferenciaciones actualmente resultan indispensables para el \u00e9xito de tu Campa\u00f1a: se trata de crear Emails Responsive<\/strong><\/a> 100% adaptables a cualquier pantalla y dispositivo.<\/p>\n Un dise\u00f1o confuso o con elementos amontonados y demasiada informaci\u00f3n, en vez de comunicar de forma eficaz desviar\u00e1 la atenci\u00f3n de tus Suscriptores. Sin embargo, un dise\u00f1o con colores brillantes y demasiados espacios en blanco los aburrir\u00e1 y los alejar\u00e1 de la llamada a la acci\u00f3n que planteaste desde el contenido para incitarlos a comprar, inscribirse o participar.<\/p>\n \u00bfCu\u00e1nto tiempo crees que una persona destina en promedio a leer los Emails que diariamente recibe en su Bandeja de Entrada? Estudios recientes demuestran que los usuarios tienden a revisar superficialmente cada Correo Electr\u00f3nico<\/strong> y pasan un promedio de siete segundos<\/strong> en cada uno de ellos.<\/p>\n Frente a este panorama, \u00bfqu\u00e9 podr\u00edas hacer para que tus Campa\u00f1as llamen la atenci\u00f3n y se destaquen entre la multitud?<\/p>\n Recuerda que tienes unos pocos segundos de la atenci\u00f3n de tus Suscriptores, \u00a1no los desperdicies! Apuesta por dise\u00f1os simples, arm\u00f3nicos y complementarios del contenido de tu Email.<\/p>\n Tanto por cuestiones de Entregabilidad como para que se visualice correctamente el contenido, al momento de maquetar tu Email es necesario \u201cescapar\u201d los caracteres especiales<\/strong>, es decir, transformarlos en formato HTML (por ejemplo \u00e1 deber\u00eda ser á<\/span>). Para esto pueden facilitarte mucho el trabajo herramientas como Textfixer<\/strong><\/a>.<\/p>\n Uno de los recursos m\u00e1s atractivos son las im\u00e1genes GIF animadas<\/strong><\/a>, y la buena noticia es que con Editor de Doppler puedes insertarlos sin problemas. Sin embargo, ten en cuenta que pueden no funcionar y visualizarse correctamente en todos los clientes de correo.<\/p>\n Las distintas versiones de Outlook son las que m\u00e1s limitaciones presentan para visualizar un GIF. Esto lo podr\u00e1s solucionar si adaptas el dise\u00f1o y contenido m\u00e1s relevante de la animaci\u00f3n en el primer marco o fotograma.<\/strong> De esta manera estar\u00e1s minimizando el impacto que una falla pueda generar en tu Suscriptor y mejorando la Experiencia de Usuario<\/strong><\/a>.<\/p>\n Una vez que hayas maquetado tu HTML por completo, es indispensable realizar env\u00edos finales<\/strong> antes de distribuirlo entre todos tus Suscriptores. Esto te dar\u00e1 una visi\u00f3n general y particular de tu pieza en diferentes clientes de correo y te ayudar\u00e1 a anticipar los posibles resultados finales de tu Campa\u00f1a. Para esto, herramientas como Litmus<\/strong><\/a> te ser\u00e1n muy \u00fatiles.<\/p>\n\u00bfQu\u00e9 es HTML?<\/h2>\n
\n
\n
\nHeadings:<\/strong> Definen el tama\u00f1o de un t\u00edtulo o cabecera.<\/li>\n![\"estructura](\"https:\/\/fromdoppler.com\/blog\/wp-content\/uploads\/20180726-TipsHTML_Internas-2-1.png\")
<\/p>\nLuego de la teor\u00eda, la pr\u00e1ctica: Tips para maquetar correctamente tus Emails en HTML<\/h2>\n
![\"crea](\"https:\/\/fromdoppler.com\/blog\/wp-content\/uploads\/20180726-TipsHTML_Zocalo-2.png\")
<\/a><\/p>\n1. Para comenzar, opta por las estructuras simples de columnas y filas<\/h3>\n
2. Maqueta piezas Responsive<\/h3>\n
3. Optimiza el Dise\u00f1o de tus Emails para favorecer su lectura<\/h3>\n
\n
4. Ten en cuenta los caracteres especiales<\/h3>\n
5. Incluye GIFs en tus Campa\u00f1as… \u00a1tomando estas precauciones!<\/h3>\n
6. Por \u00faltimo, haz env\u00edos finales<\/h3>\n
![\"formas](\"https:\/\/fromdoppler.com\/blog\/wp-content\/uploads\/20180726-TipsHTML-Internas_Internas-1-1.png\")
<\/p>\n