¿Como diseñar una newsletter responsive?
Hola.
A través de un portal de empleo freelance, me he comprometido a realizar un newsletter a un cliente, que me aporta unas frases a incluir y me pide que tenga “una fuerte carga de html y sea responsive y mobile”.
Soy diseñador gráfico y conozco los lenguajes html y css (incluidos media-queries), por lo que supuse que sería fácil aprender a realizar este trabajo. Me he documentado con blogs y webs que ofrecen consejos sobre cómo diseñar newsletter, pero no comprendo bien el proceso para hacerlo y me surgen dudas.
- Tras realizar un boceto en Photoshop y que el cliente de su visto bueno, ¿debo entregarle el producto final en formato html, utilizando para ello un editor de código como Netbeans?
- Leo en muchos sitios que debo utilizar tablas, no debo usar estilos css, y que debo utilizar medida en pixeles fijos. ¿Cómo hacer el diseño responsive-mobile si no puedo utilizar porcentajes y debo usar medidas fijas? ¿Existe alguna medida estándar para utilizar en los newsletter?
- Leo que las imágenes deben incluirse con una ruta absoluta. También debo incluir “si no ve el newsletter pulse aquí” para que vea la información a través de su navegador.
¿Cómo incluir la ruta absoluta si no manejo el servidor del cliente que me encarga el trabajo? ¿Cómo añadir entonces imágenes?
Por favor, agradezco todo cuanto puedan aclararme como diseñar un newsletter.
Quiero cumplir con el cliente por lo que, por el momento, aconséjenme de manera segura, de modo que lo que envíe sirva para todos los gestores de correo, sea responsive-mobile y no presente ningún problema.
Sé que no debería ofertar trabajos de cuanto no estoy seguro de hacer, pero pense que no resultaria dificil y, sobretodo, pense que podria encargarse una tercera persona que colabora conmigo en caso de no poder, y finalmente me ha fallado.
Gracias y Un saludo.
Usuario desconocido
• Las tablas en html para mail normalmente aceptan porcentajes, y estilos sencillos css inline, pero deberias probar primero el newletter en 3 o 4 gestores de correo para asegurarte.
• El tema del responsive se puede simular anidando tablas y combinando porcentajes y pixels, por ejemplo, dos tablas de 200px de ancho en una tabla al 100%, se mostraran una al lado de la otra en escritorio y una debajo de otra si la ventana es menor de 400px.
• Respecto al alojamiento de las imagenes, cuando a mi me encargan uno, pido acceso ftp a algun sitio del server del cliente tanto para alojar las imagenes como para alojar la version web, a donde se llega pulsando lo de "Si no ve este newsletter pulse aqui"
• Yo entrego el html.
sabrinacamara
¡Buenas tardes! En lo personal utilizo HTML con tablas siempre que es posible, aunque la interfaz de mailchimp te permite exportar archivos a html (y su responsive es bastante bueno para adaptarse a otras plataformas), lo único que esto último limita bastante las posibilidades porque te tienes que ajustar a sus disposiciones / estructuras de diseño.
Yo utilizo Brackets (PHPStorm para esto a lo mejor es demasiado), y brackets es una joyita. Muy cómodo de usar y tiene live-preview. Lo que te comentan de que tienes que usar estilos fijos es que realmente en newsletters html se utilizan tablas con heights / widths fijos y etiquetas style, pero sí se utilizan media-queries. Te adjunto una imagen para que veas a qué me refiero.
Efectivamente las imágenes requieren una ruta absoluta. Te recomendaría hablarlo con el cliente para que las suba a su servidor y te de la ruta.
Por lo demás, si te atreves, me han recomendado MJML. Tiene muy buena pinta y parece fácil de usar si tienes conocimientos de lenguajes de etiquetas. Aunque no tengo demasiada experiencia con este como para recomendártelo al 100%.
Espero que te sirva de ayuda y mucho ánimo con ello.