Comments on: Código para el diseño de e-mails y newsletters http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/ Front-end Developer, Web Standards, Accessibility Mon, 14 May 2012 22:25:26 +0000 hourly 1 http://wordpress.org/?v=3.0.4 By: alberto http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-9184 alberto Mon, 02 Aug 2010 20:00:15 +0000 http://aurea.es/?p=4059#comment-9184 Es completamente imposible lo qu edice Rodrigo. Su newsletter sólo se vería bien en algún caso de algún gestor de correo, nuestra experiencia, y son unos cuantos cientos de mailings ya, corrobora lo que dice Javier. Hacer una newsletter bien, es hacer que se vea al menos decente en Outlook, gmail, hotmail, thunderbird, y mail de mac, y para eso el código es una caca no-estandar 100% fea y llena de tablas, nada de div y floats. Ojalá. Es completamente imposible lo qu edice Rodrigo.
Su newsletter sólo se vería bien en algún caso de algún gestor de correo, nuestra experiencia, y son unos cuantos cientos de mailings ya, corrobora lo que dice Javier.
Hacer una newsletter bien, es hacer que se vea al menos decente en Outlook, gmail, hotmail, thunderbird, y mail de mac, y para eso el código es una caca no-estandar 100% fea y llena de tablas, nada de div y floats.
Ojalá.

]]> By: javiaurea http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5404 javiaurea Sat, 20 Jun 2009 10:02:32 +0000 http://aurea.es/?p=4059#comment-5404 Marcos, como prioridad los estilos inline. Pero existen casos como a:hover que es necesario ponerlos en head. Despues de navegar y leer mucho he llegado a la conclusión de que inline es prioridad, pero si repites estilos en head tienes otro respaldo. Siento no haber respondido antes, se me había pasado :) Marcos, como prioridad los estilos inline.
Pero existen casos como a:hover que es necesario ponerlos en head.

Despues de navegar y leer mucho he llegado a la conclusión de que inline es prioridad, pero si repites estilos en head tienes otro respaldo.

Siento no haber respondido antes, se me había pasado :)

]]> By: Fireworks CS4, exportando con CSS | 2flash2furious :: diseño gráfico, web & multimedia :: por [Q] interactiva http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5402 Fireworks CS4, exportando con CSS | 2flash2furious :: diseño gráfico, web & multimedia :: por [Q] interactiva Sat, 20 Jun 2009 09:33:55 +0000 http://aurea.es/?p=4059#comment-5402 [...] Layout cortado con la herramienta slice como una tabla con imágenes. Tal y como comento en éste interesantísimo post de Javi de aurea, esto es una herramienta muy útil para tirar del viejo HTML compatible con casi todo lo [...] [...] Layout cortado con la herramienta slice como una tabla con imágenes. Tal y como comento en éste interesantísimo post de Javi de aurea, esto es una herramienta muy útil para tirar del viejo HTML compatible con casi todo lo [...]

]]> By: javiaurea http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5373 javiaurea Fri, 19 Jun 2009 12:00:26 +0000 http://aurea.es/?p=4059#comment-5373 Ojala saliesen más posts así de enriquecedores. Gracias chicos! Ojala saliesen más posts así de enriquecedores.
Gracias chicos!

]]> By: Marcos http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5372 Marcos Fri, 19 Jun 2009 11:49:06 +0000 http://aurea.es/?p=4059#comment-5372 Hola lloku, en las pruebas que yo he realizado, leyendo dichos correos con mi cuenta de hotmail, me mostraba directamente las imágenes, cosa que no ocurría si no empleaba esta técnica pero como te digo con ella hotmail no me las bloqueaba. Las pruebas las realicé hace aproximadamente 2-3 meses, no se si habrá cambiado. Saludos :) Hola lloku, en las pruebas que yo he realizado, leyendo dichos correos con mi cuenta de hotmail, me mostraba directamente las imágenes, cosa que no ocurría si no empleaba esta técnica pero como te digo con ella hotmail no me las bloqueaba. Las pruebas las realicé hace aproximadamente 2-3 meses, no se si habrá cambiado.

Saludos :)

]]> By: lloku http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5365 lloku Fri, 19 Jun 2009 08:24:26 +0000 http://aurea.es/?p=4059#comment-5365 No conocía el bloqueo de imágenes de outlook, pero lo de lograr saltarse el bloqueo de hotmail... creo que estas equivocado Marcos. Lo que se hace con lo que comentáis en ese posts es simplemente embeber las imágenes, es la técnica correcta de cualquiera de las maneras, yo siempre la he usado y muchas veces con la clase phpmailer, aún así, por experiencia propia... hotmail puede seguir bloqueandolas (casi siempre o siempre), otra cosa es lo que haga outlook (Que desconocía que bloquease imágenes, supongo que las que bloqueará será las externas - mas les vale -). Saludos. No conocía el bloqueo de imágenes de outlook, pero lo de lograr saltarse el bloqueo de hotmail… creo que estas equivocado Marcos. Lo que se hace con lo que comentáis en ese posts es simplemente embeber las imágenes, es la técnica correcta de cualquiera de las maneras, yo siempre la he usado y muchas veces con la clase phpmailer, aún así, por experiencia propia… hotmail puede seguir bloqueandolas (casi siempre o siempre), otra cosa es lo que haga outlook (Que desconocía que bloquease imágenes, supongo que las que bloqueará será las externas – mas les vale -).
Saludos.

]]> By: Marcos http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5354 Marcos Thu, 18 Jun 2009 23:56:13 +0000 http://aurea.es/?p=4059#comment-5354 Personalmente mi proceso es. Maqueta en Fireworks como bien dices pensando que es un mailing, que tengo que tratar de simplificar aunque sin dejar de lado la estética, pero si siguiendo determinados patrones al saber que por debajo va a ir una tabla. En ese diseño corto las zonas pensando ya en dicha tabla, dejando una zona normalmente más amplia donde insertaré contenidos textuales. Exporto HTML con tablas. Voy a dreamweaver y abro el html, selecciono la imagen que representa la celda donde quiero meter mis contenidos y la borro. Como Fireworks las tablas las hace con imagenes transparentes (creo que te deja elegir, en este caso conviene decir que si), te va a repsetar ese espacio. Adapto a partir de ahi. Lo que no había visto ni imaginado es si hay algun beneficio en poner los estilos tanto en el head como en linea. Yo siempre los ponía en linea solamente. Has detectado casos donde el tenerlo en los dos lados ayuda? Lo digo porque veo que te has mamao pruebas en diferentes gestores a saco ;) Gracias a ti por este blog, está lleno de buena información :) Personalmente mi proceso es. Maqueta en Fireworks como bien dices pensando que es un mailing, que tengo que tratar de simplificar aunque sin dejar de lado la estética, pero si siguiendo determinados patrones al saber que por debajo va a ir una tabla. En ese diseño corto las zonas pensando ya en dicha tabla, dejando una zona normalmente más amplia donde insertaré contenidos textuales.

Exporto HTML con tablas. Voy a dreamweaver y abro el html, selecciono la imagen que representa la celda donde quiero meter mis contenidos y la borro. Como Fireworks las tablas las hace con imagenes transparentes (creo que te deja elegir, en este caso conviene decir que si), te va a repsetar ese espacio.

Adapto a partir de ahi.

Lo que no había visto ni imaginado es si hay algun beneficio en poner los estilos tanto en el head como en linea. Yo siempre los ponía en linea solamente. Has detectado casos donde el tenerlo en los dos lados ayuda? Lo digo porque veo que te has mamao pruebas en diferentes gestores a saco ;)

Gracias a ti por este blog, está lleno de buena información :)

]]> By: javiaurea http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5350 javiaurea Thu, 18 Jun 2009 21:36:07 +0000 http://aurea.es/?p=4059#comment-5350 Ese Marcos ;) La opción de Fireworks la conocia hace años pero mira nunca se ma había ocurrido usarla para esto. Muy inteligente! Lo del tema de las imágenes, sin palabras :O Gracias por la aportación Marcos. Ese Marcos ;)

La opción de Fireworks la conocia hace años pero mira nunca se ma había ocurrido usarla para esto. Muy inteligente!

Lo del tema de las imágenes, sin palabras :O

Gracias por la aportación Marcos.

]]> By: Marcos http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5345 Marcos Thu, 18 Jun 2009 18:17:27 +0000 http://aurea.es/?p=4059#comment-5345 Por si sirve de complemento y a este infierno algún cliente os pide que las imágenes se vean en el outlook sin que tengan que dar a "permitir imágenes" (y esto es extensible a hotmail), os dejo este enlace tras arduas tareas de investigación: http://www.q-interactiva.com/blog/2009/03/evitar-el-bloqueo-de-imagenes-en-outlook/ En cuanto a las observaciones de javi totalmente de acuerdo. Si el que el texto no sea seleccionaable es algo que puede ser viable, una manera muy buena de hacer algo rápido es montar el diseño en fireworks y exportar como imágenes y tablas una vez "troceado a nuestro gusto". Suele encajar como norma general muy bien en el HTML resultante que se plantea en el post, y siempre podemos eliminar algunas partes de dicho HTML y ahi colocar ya dentro nuestro contenido. A nostoros nos ahorra mucho trabajo. Saludos! Por si sirve de complemento y a este infierno algún cliente os pide que las imágenes se vean en el outlook sin que tengan que dar a “permitir imágenes” (y esto es extensible a hotmail), os dejo este enlace tras arduas tareas de investigación:

http://www.q-interactiva.com/blog/2009/03/evitar-el-bloqueo-de-imagenes-en-outlook/

En cuanto a las observaciones de javi totalmente de acuerdo. Si el que el texto no sea seleccionaable es algo que puede ser viable, una manera muy buena de hacer algo rápido es montar el diseño en fireworks y exportar como imágenes y tablas una vez “troceado a nuestro gusto”. Suele encajar como norma general muy bien en el HTML resultante que se plantea en el post, y siempre podemos eliminar algunas partes de dicho HTML y ahi colocar ya dentro nuestro contenido. A nostoros nos ahorra mucho trabajo.

Saludos!

]]> By: lloku http://aurea.es/2009/05/27/codigo-para-el-diseno-de-e-mails-y-newsletters/comment-page-1/#comment-5102 lloku Mon, 08 Jun 2009 08:11:20 +0000 http://aurea.es/?p=4059#comment-5102 Muchas veces no es solo el que interprete algo, sino como lo interpreta, ya no es cuestión ni tan siquiera de probar, hay decenas de miles de artículos referidos a la recomendación de maquetación en e-mails y todos ellos hablan de lo mismo, Tablas. Lo cierto es que el e-mail no se creo para lo que lo estamos usando, se creo para enviar y recibir texto, nada mas, otra cosa es el giro que ha dado y la interpretación de html por parte de los gestores, pero no podemos pensar en xhtml cuando hablamos de mails, los standars no son extraporables, simplemente por que si hubiera un standard para los e-mails sería tan simple como: "Solo texto plano". En cuanto a las imágenes Rodrigo... es una medida antispam lógica, de todas maneras lo único recomendable respecto a esto es embeber las imágenes, el que de primeras no carguen las imágenes no tiene solución, pero los usuarios ya están acostumbrados. Muchas veces no es solo el que interprete algo, sino como lo interpreta, ya no es cuestión ni tan siquiera de probar, hay decenas de miles de artículos referidos a la recomendación de maquetación en e-mails y todos ellos hablan de lo mismo, Tablas.
Lo cierto es que el e-mail no se creo para lo que lo estamos usando, se creo para enviar y recibir texto, nada mas, otra cosa es el giro que ha dado y la interpretación de html por parte de los gestores, pero no podemos pensar en xhtml cuando hablamos de mails, los standars no son extraporables, simplemente por que si hubiera un standard para los e-mails sería tan simple como: “Solo texto plano”.
En cuanto a las imágenes Rodrigo… es una medida antispam lógica, de todas maneras lo único recomendable respecto a esto es embeber las imágenes, el que de primeras no carguen las imágenes no tiene solución, pero los usuarios ya están acostumbrados.

]]>