Registrarse Login
Inicio » Blog » Cómo crear newsletters en HTML con Photoshop, InDesign y Illustrator

Cómo crear newsletters en HTML con Photoshop, InDesign y Illustrator

22/10/2016

Consejos para crear y enviar newsletters en HTML

Las newsletters se pueden diseñar con distintos programas y, a continuación, puede crearlas en HTML. Para el diseño sirve, en principio, cada herramienta de edición de imágenes o de diseño. En esta entrada le mostramos lo que debe de tener en cuenta en el diseño de su newsletter para poder crear bien y fácilmente en HTML. Además, le damos consejos para el diseño de las newsletters en HTML con las herramientas más comunes.

Antes que nada queremos decirle algo importante: diseñar su newsletter con una herramienta de gráficos y posteriormente programarla usted mismo, representa en la mayoría de los casos un esfuerzo innecesario. Por este motivo, esta entrada muestra también alternativas para diseñar newsletters para las que no se necesita tener conocimientos de programación. En un software de marketing por email como Newsletter2Go puede diseñar y enviar su newsletter directamente en un intuitivo editor de arrastrar&soltar. Cuando se realiza el envío, la newsletter se transforma automáticamente en HTML válido y llega a los suscriptores como debe. Para ello no tiene que ser un experto en diseño o programador. Más sobre la creación de newsletters en HTML lo descubre en esta página.

Consejos generales para el diseño de newsletters en HTML

Cada newsletter se debería crear con un ancho fijo. Esto evita el tener que desplazarse horizontalmente, algo que entorpece la fluidez de la lectura y, por lo tanto, motivo para que se registren abandonos. Es recomendable un ancho de aproximadamente 600px. Este es apto para la mayoría de los dispositivos.

La información más importante debería de transmitirse entre los primeros 300px y 500px. En la mayoría de las pantallas se encuentra el apartado Above the Fold y es visible sin tener que hacer scroll.

Crear newsletter en HTML con Photoshop

Para crear newsletters en HTML con Photoshop, primero debería crear un nuevo documento con un ancho un poco más grande que el de la newsletter final. De esta forma puede tener en cuenta mejor el fondo de la newsletter. Es apropiado un ancho de aproximadamente 800px an. El largo se puede seleccionar libremente, para comenzar se recomienda cerca de 1000px. Una resolución de 72dpi es suficiente para el documento de la newsletter. Para el modo de color se debería de seleccionar necesariamente RGB.

En este documento, a continuación, cree una Box con un ancho de 600px y añádala de forma centrada. Esta será su verdadera newsletter. Para una lectura óptima, el fondo de la newsletter debería ser blanco. Para destacar alguna parte utilice mejor un fondo gris claro.

Ahora puede construir su newsletter de arriba a abajo de la siguiente manera:

Arriba del todo se encuentra el resumen de los contenidos (vista previa) y el enlace para la versión web. Este debería aparecer en cada newsletter. Este sirve como seguro, en caso de que los usuarios no carguen las imágenes o prefieran ver la newsletter en el navegador por el motivo que sea.

A continuación, puede añadir su imagen principal. Adapte la imagen al formato de la newsletter fácilmente en Photoshop. También se pueden añadir textos en Photoshop.

Para crear la parte principal, añada debajo del encabezamiento un nuevo rectángulo con un ancho de 600px. Aquí puede incluir textos e imágenes como desee. Para añadir más contenidos, copie el primer bloque de contenidos y péguelo debajo. Con ayuda de las líneas de guía puede configurar cada bloque y comprobar las distancias. Preste atención a dejar suficiente distancia para proporcionar una mejor legibilidad.

Bajo la parte principal, si lo desea, puede añadir al diseño los botones para las redes sociales.

Al final de cada newsletter aparece el pie. De acuerdo con la legislación cada correo publicitario debe de incluir un aviso legal o un enlace al aviso legal, así como un enlace para poder darse de baja. Estos pueden colocarse perfectamente en el pie. Para ello, se puede tranquilamente usar un tipo de letra discreto y más pequeño, siempre que se pueda seguir leyendo y sea fácil hacer clic en ellos.

Crear newsletters en HTML con InDesign

Si quiere crear una newsletter en HTML con InDesign, primero cree un nuevo documento con un ancho lateral de 600px. El largo lo puede determinar usted mismo. Guarde la página como un formato propio y ábralo directamente.

Ahora puede usar la herramienta de rectángulos para crear tres, directamente uno detrás de otro, que ocupen todo el ancho de la página. Estos serán el encabezamiento, la parte de los contenidos y el pie de la newsletter.

Ahora, en el encabezamiento puede añadir una imagen. Coloque la imagen y añádala de forma proporcional. Tenga en cuenta que las imágenes usadas en el diseño de newsletter con InDesign tienen que estar almacenadas online para que también sean visibles para el lector.

En la parte principal debería añadir un fondo blanco para proporcionar una mejor lectura. Aquí puede introducir el texto como desee con la herramienta de textos. Preste atención a poner distancia en el margen de la página para que el texto no llegue hasta el final.

En el pie de la newsletter se pueden incluir el aviso legal y el enlace para darse de baja. De acuerdo con la legislación cada newsletter tiene que incluir un enlace para la desuscripción que funcione, de esta forma los suscriptores se pueden dar de baja de la newsletter cuando quieran.

Si ha creado una newsletter en HTML con InDesign, existe la opción de exportar la newsletter directamente desde InDesign como HTML. Sin embargo, esto no es recomendable. El HTML generado por InDesign no está optimizado para newsletters. Lo más probable es que la visualización no se corresponda a lo que espera. Si, a pesar de esto, quiere crear su newsletter en HTML en InDesign, después del diseño lo mejor es programarla en HTML válido.

Crear newsletters en HTML con Illustrator

El programa de dibujo Illustrator, en principio, también es apropiado para el diseño de páginas web y de newsletters. Con él difícilmente se pueden crear diseños completos de newsletters, pero sirve para diseñar elementos de la newsletter que se pueden utilizar más tarde en la newsletter en HTML. Por ejemplo, con Illustrator se pueden crear fondos para la newsletter.

Para la creación de la newsletter en sí se debería de recurrir mejor a otras herramientas. Para crear newsletters en HTML con Illustrator el programa es más bien inapropiado.

Cómo programa su newsletter en HTML

Programar una newsletter en HTML se diferencia fundamentalmente del diseño de una página web. En comparación con el diseño web con HTML, los estilos CSS en las newsletters son más bien problemáticos. Sin embargo, la mayoría de los clientes de correo reconocen y pueden usar Inline-CSS. Para el diseño de la newsletter a menudo se recurre a tablas de HTML.

Así funciona paso por paso la programación de una newsletter en HTML:

1º Paso: guardar las imágenes

Guarde todas las imágenes, que va a utilizar en la newsletter, por separado.

2º Paso: crear un nuevo documento HTML

Para ello puede usar bien una herramienta visual como Dreamweaver o empezar desde el principio con un editor de textos como Notepad.

3º Paso: crear el encabezamiento

Primero cree una tabla con el ancho de su newsletter. En este ejemplo usamos un ancho de 600px. Ahora puede formatear esta tabla como desee y añadir sus contenidos.
Debería de añadir necesariamente texto alternativo a todas las imágenes de su newsletter. De esta forma, se puede seguir leyendo su correo, incluso cuando no se cargan las imágenes.

4º Paso: crear contenidos

Aquí trabajará igualmente con tablas. Entre los distintos elementos del contenido debería de trabaja con relleno de celda para mejorar la lectura.

5º Paso: crear el pie

Use también tablas en el pie. Si se van a añadir varias imágenes, puede llevarlo a cabo a través de columnas.

Para enviar la newsletter puede subir y cargar su plantilla en HTML a Newsletter2Go.

¿Qué alternativas hay sin tener que programar?

La posibilidad más fácil es usar un software de newsletters con un editor WYSIWYG. Con Newsletter2Go, la creación de newsletters en HTML funciona por ejemplo de la siguiente manera:

1. Determinar asunto y remitente de la newsletter

Establezca el asunto y el encabezamiento. Ambos textos son personalizables, es decir, puede dirigirse de forma directa a los suscriptores.
Puede elegir libremente el nombre y la dirección de remitente que se les mostrará a los destinatarios.

2. Seleccionar el diseño de la plantilla o cargar uno propio

Seleccione una plantilla de entre las plantillas estándar con diferentes diseños, las plantillas especiales y las plantillas premium, que Newsletter2Go crea especialmente para usted. Todas las plantillas estándar ya vienen con diseño adaptable. Esto quiere decir que el HTML está optimizado de forma que se visualizará perfectamente en dispositivos móviles.

3. Diseñar la newsletter en el editor

Newsletter2Go le ofrece un editor visual con sistema de arrastrar&soltar. Aquí puede añadir diferentes bloques para textos e imágenes y modificarlos directamente. Dentro de los bloques puede crear sus propios contenidos copiando y pegando, usar imágenes desde su mediateca y añadir enlaces. También se pueden modificar los propios bloques. Puede modificar el orden, el formateo, los márgenes y los espacios. Mientras realiza las modificaciones puede ver los resultados en la vista previa de la newsletter.

4. Personalizar la newsletter

En su newsletter puede usar marcadores de posición que se rellenarán automáticamente con los datos de sus suscriptores cuando realice el envío. De esta forma puede añadir, por ejemplo, saludos personalizados. Además, se pueden mostrar bloques por separado a determinados destinatarios, por ejemplo, solo a mujeres.

5. Añadir enlaces para la versión web o darse de baja

Newsletter2Go genera estos enlaces automáticamente y los relaciona con su cuenta, así su lista de contactos estará siempre actualizada.

6. Añadir productos o contenidos en la newsletter

Especialmente útil, cuando se está creando una newsletter, resulta la inserción de productos o contenidos con solo un clic. Para ello, Newsletter2Go ofrece un bloque especial que puede añadir en el lugar que usted quiera. Cuando introduzca el ID, se cargará el producto o el contenido desde su sistema directamente a la newsletter – sin tener que copiar y pegar manualmente.

7. Enviar la newsletter

Para terminar buenas noticias: para el envío de su newsletter no necesita ninguna herramienta adicional. Puede enviar su newsletter directamente desde Newsletter2Go. Esto supone una gran ventaja: los servidores utilizados para el envío están incluidos en listas blancas, por lo tanto, registrados como de confianza en los proveedores de email. Así sus correos llegan directamente a los destinatarios. En comparación con esto, con el envío masivo a través de cuentas de email normales, más de la mitad de los correos enviados terminan en la carpeta de spam o bloqueados.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Newsletter2go verwendet Cookies, um Ihnen den bestmöglichen Service zu gewährleisten. Wenn Sie auf der Seite weitersurfen stimmen Sie der Cookie-Nutzung zu. Ich stimme zu.