Cómo maquetar una newsletter

hola puedes revizar este link.
tiene muy buenos consejos.

http://www.simultanews.com/articulos/disenar-y-enviar-newsletters-mejores-practicas-2.htm

@almostDesign: las etiquetas img las tienes que cerrar, no hacerlo no hace que se vea "mejor" en los distintos gestores de emails... respecto a las tablas nunca pongas en la etiqueta "table / tr" ni el atributo height ni el weight, eso déjalo para añadírselo a la etiqueta "td".

Respecto a algún otro "problema" de validación y correcta visualización, si tienes alguna duda consúltalo por aquí.

Un saludo,
Alejandro Arco

Hola, Gracias por las respuestas, he estado fuera unos días y no he consultado este post desde entonces.

Yo estoy justamente creando una aplicación para el envío de newsletter y tengo esa duda. Creo 2 versiones, una con dtd, head y body para el navegador y otra pelada para enviar.
El problema es que, siguiendo las indicaciones que he recibido de unos y otros lados, la versión newsletter no me valida ni de lejos. Hay un montón de cosas como etiquetas img sin cerrar, atributos height en las tablas, celdas y tablas con weight, etc...
¿Cómo solucionas ese tema?
Gracias

@almostDesign: yo valido como si fuera un apartado más de la web, pero maquetándolo de forma distinta (obviamente)... en mi caso siempre uso el DTD XHTML 1.0 Transitional para validar las páginas web de mis clientes.

Lo que yo suelo hacer es crear una plantilla (por ejemplo para un boletín de noticias), para posteriormente obtener la información a rellenar de una base de datos (o XML), una vez rellenada la plantilla la envío, y después la guardo en un fichero físico accesible a través del navegador, por si algún gestor de correo no permite visualizar código HTML.

Evidentemente, entre medias de todas estas "operaciones" uso algún lenguaje de programación.

Un saludo a tod@s.

Una pregunta.
Cuando diseñáis una newsletter, ¿os preocupáis de que valide? Y, en tal caso, ¿que DTD usáis? Porque si no hay DTD no hay validación.

Vaya, lo siento, le puse espacio para que el foro no me modificase el código. :-S

Para maximizar la compatibilidad con los distintos gestores de correo hay que seguir las siguientes pautas (algunas ya comentadas):
- Realizar maquetación mediante tablas (NO usar capas).
- Medidas en píxeles.
- No poner medidas en la etiqueta TABLE.
- Poner las medidas en los TD.
- Añadir a todos los TD el ancho que le corresponda.
- No externalizar la hoja de estilos CSS, ni embeberla dentro de la etiqueta HEAD.
- Embeber los estilos en las propias sentencias de maquetación usando el atributo style="".
- No añadir background:url(), todas las imágenes tendrán que estar maquetadas mediante tablas y visualizadas con la etiqueta IMG.
- En la etiqueta IMG usar el atributo border="0", no formatearlo mediante estilos.
- No usar estilos incompatibles, normalmente son todos aquellos que se usan para "posicionar" y/o "mover" capas: float, display, overflow, ...

Con estas prácticas se puede hacer una newsletter que cumpla los estándares web del W3C y que se visualice correctamente en la mayoría de los gestores de correo: Gmail, Outlook 2007, Thunderbird, etc.

Un saludo a tod@s.

Ufff ya esta!

Es que lo meti con las etiquetas q tu ponias, pero me he dado cuenta que no funcionaba por que habia espacios entre < y style >, por eso no funcionaba, pero ya si.

Gracias

Prueba lo que sugiere mamuso.

Mete los estilos dentro del body con comentarios entre las etiquetas < style > y </ style >. Si continúan sin funcionarte, probablemente sean propiedades no soportadas por tu cliente de correo o que no se están heredando bien los estilos (entre tablas anidadas suele pasar) y tendrás que poner los estilos en línea.

Hola de nuevo!

Estoy haciendo una newsletter con una plantilla de esas que puso psycho, pero el problema es que el archivo css, es externo y al enviarlo, pues no me da formato.

Estaba intentando meterlo en bloque, pero no funciona... alguna idea?

gracias por la info, me viene de perlas!!

:D

Al pegar el código en el mensaje sin más Mail lo interpreta como si fuera texto plano.

Lo más fácil es abrir el html en safari y usar Archivo > Enviar contenido de esta página por correo.

Aporto de paso un recurso más. Para que se vea bien la newsletter en la mayoría de clientes de correo muchas veces hay que usar estilos inline que son bastante engorrosos de mantener. Para eso inline styler va estupendo.

Gracias Kemie, pero debo ser un poco zote, abro Mail (Mac) creo un mensaje nuevo, pego dentro del cuerpo del mensaje el código HTML con el estilo CSS dentro del <body> con las rutas de las imágenes tal y como tú dices y Mail no interpreta las etiquetas HTML, lo pega todo como texto.

¿Qué hago mal?

hostia estava ahora mismo me preguntando esto:)

haz el html, sube las imagenes a tu servidor, y luego cambia todas las rutas de tus imagenes a urls en tu servidor:
http://www.tudominio.com/imagenes/fulana.jpg
asi el destinatario recibe solamente el html, y las imagenes se bajan cuando abra el correo.

Hola a todos, gracias a este post ya sé cómo maquetar una News Letter, ahora sólo me falta que me digáis, una vez maquetada, cómo la envío, ¿inserto el código en un e-mail y adjunto las imágenes?, ¿adjunto el archivo html más las imágenes?, ¿guardo todo en un servidor y sólo mando el link?

Si sois tan amables de decírmelo os quedaría muy agradecido, sería muy práctico para mandar algún mensaje a mis clientes.

Gracias de antemano.

Me escribo esto a modo de recordatorio y por si a alguien puede servirle:

1.- Cuidado con el DOCTYPE. Si es necesario quitar la linea entera...
2.- Ojo con saltar un espacio de linea después de los "<td>". Puede crear un espacio vacío innecesario.
Ejemplo MAL:
<td>
<p>aiojaopisdjpoiajspdioj</p>
</td>
Ejemplo BIEN:
<td><p>asdpiojpiojaposdij</p></td>

Espero que tb os sirva a alguno. Ciao!

Confirmo lo de MailChimp, fácil e intuitivo. Gran aplicación online !

hola, tenía la misma duda y opté por http://www.mailchimp.com/
sencillo e insultantemente fácil. hay otros servicios similares, google will make you wise :)
espero ayude, saludos,
p

Cojonudos los links, muchas gracias psycho!!

Hola, en recursos tienes un par de enlaces que te pueden servir:
http://www.domestika.org/recursos/139-plantillas_para_emails_con_html
http://www.domestika.org/recursos/151-css_soportado_en_lectores_de_e_mail_y_browsers

Muchas gracias, son muy utiles vuestros consejos.

Es todo un mundo esto de las newsletters, y yo que sólo conocía los divs... Probablemente postee más adelante algunas dudas, porque me están apareciendo un montón de problemas, aunque creo que podré solucionarlos.

En fin, a pegarme con las tablas!! Gracias!!!

Merci, maese Joshua. ;-)
Secundo la moción de no depender de las imágenes.

Veo que el editor no me deja meter algunas etiquetas de código, así que repito.

En la parte de css en bloque quería decir que el css debe ir dentro del "body", porque muchos servidores le arrancan el "head" (más la etiqueta body) al email, y debe ir comentado así:

<!--
(aquí van los estilos)
-->
style &gt;

Muy buenos consejos, Public ;)

Yo doy otro más, pero es simple sentido común: No hagas depender tu diseño de las imágenes, ten en mente siempre que casi todos los clientes de correo y webmails bloquean las imágenes como prevención, de modo que diseña de tal manera que, solo viendo el texto, tu newsletter tenga sentido.

Busca por el foro porque yo creo que ya se ha hablado del tema por aquí. Pero yo te podría recomendar:

- Haz un diseño sencillo, no te compliques, que no tenga que ir ajustado el milímetro
- NO abuses de las imágenes y menos aún hagas un email que sea todo una imagen (puedes ser etiquetado como spam)
- Usar tablas para la estructura.
- Ancho: entre 500 y 600px (para que entre bien en los webmails)
- Para estilos de texto, lo más seguro es el css en línea, y si quieres achuchar, hasta la etiqueta font.
- Si quieres meter CSS en bloque mételo dentro del y comentado así:

<!--
(aquí van los estilos)
-->

Pero ojo, porque la herencia dentro de las tablas muchas veces no funciona.

- No uses imágenes de fondo, o al menos no imágenes que puedan comprometer el mensaje del email si no se muestran (¡gracias Outlook 2007!). Usa un color de fondo que te haga función parecida cuando no se muestren las imágenes de fondo.
- No usar javascript, flash, ni ningún tipo de video incrustado, ni formularios, ni nada que no sea html.
- Ten en cuenta que los gifs animados se quedan parados en el primer frame en Outlook 2007.
- No anidar más de 9 niveles de tablas.

Y eso es lo principal, así de memoria. Luego te pueden surgir problemillas menores puntuales.