393 Shares 7812 views

Cómo crear una letra HTML: instrucción paso a paso

Las listas de correo son una parte importante de las campañas de marketing. Creación de letras para ellos de muchas maneras se asemeja al desarrollo de páginas web simples. Al mismo tiempo, deben tenerse en cuenta algunas diferencias importantes. En particular, el envío de letras HTML sólo será efectivo si se compilan correctamente en un sentido técnico, y su contenido y estilo están de acuerdo con sus objetivos. Al mismo tiempo, hay una opinión que un laico no puede hacer frente a esta tarea. En este artículo se proporciona una instrucción detallada paso a paso sobre cómo escribir y cómo enviar una letra HTML.

Características de la creación

La persona moderna diariamente recibe en promedio 5-6, ya veces hasta 10 correos electrónicos. Esto significa que usted tiene sólo menos de un segundo para llamar la atención del destinatario antes de que él continúa a leer la correspondencia siguiente. De lo contrario, su envío de cartas HTML será absolutamente ineficiente, y usted simplemente perderá tiempo en vano.

Uno de los matices que aumenta sus posibilidades de atraer la atención de clientes potenciales u otro público objetivo es la creación de correspondencia, que se adapta a dispositivos móviles. Después de todo, la mayoría de aquellos a los que se dirige a ver el correo, sin duda los utilizan mucho más a menudo que las computadoras de escritorio y portátiles.

Con este fin, puede utilizar, por ejemplo, "diseño responsivo", adaptándose fácilmente al tamaño de la pantalla.

¿Cuál debe ser la plantilla de carta?

Al hacer un documento destinado a enviar a los corresponsales, deben cumplirse los siguientes requisitos:

  • Debe hacerse lo suficientemente estrecha, es decir, en tamaño no debe exceder un rango de 500-600 píxeles, lo que garantizará la visualización correcta de texto y otros contenidos en dispositivos de cualquier tipo.
  • Es necesario utilizar una fuente bastante grande para toda la información textual, ya que en dispositivos iOS la letra HTML será inconveniente para leer si el tamaño de la fuente es menor de 13 píxeles.
  • Los elementos que se pueden hacer clic en deben ser lo suficientemente grandes y aislados de los enlaces más cercanos. En este caso, el destinatario puede activarlos fácilmente desde el primer intento.

Preparación de

Antes de desarrollar una carta basada en HTML, debe crear una nueva carpeta en uno de los discos y darle un nombre, por ejemplo, "Boletines". Además, debe descargar e instalar Dreamweaver CS3. Este producto de Adobe es una de las herramientas bastante simples para la construcción de sitios web y es muy adecuado para el desarrollo de una carta de correo electrónico en formato HTML.

Crear y guardar un documento

Antes de escribir la parte de texto de la carta, necesita:

  • Abra un programa de diseño bastante popular HTML-letters Dreamweaver CS3 (DW);
  • Cree un documento seleccionando "Transitional HTML 4.01" como el tipo;
  • Guarde el archivo con la extensión ".html";
  • En el menú superior, busque el comando de edición;
  • Para eliminar una marca de la casilla de verificación "Usar CSS en lugar de etiquetas HTML".

Instrucción paso a paso

Ahora, considere cómo crear una letra HTML. Para hacer esto:

  • Abra sucesivamente las pestañas "Insertar" y "Tabla" en el menú y establezca los parámetros de tabla necesarios. Por ejemplo, líneas – 2, columnas – 1, ancho – 700, título – desde arriba. Se pueden establecer bordes, pero puede prescindir de ellos, indicando 0.
  • Forme el título de la carta. Dado que la letra HTML está destinada a un mayor número de destinatarios, utilice el operador [first_name] sustituyendo el nombre deseado del destinatario.
  • En la ventana inferior de "Propiedades", establezca los parámetros necesarios para la fuente, el tamaño y el color del texto del encabezado, y el color de fondo.
  • "Salir" del área del encabezado. En la parte inferior de la pantalla, se establecen los parámetros para el cursor "Centro" y "En el medio".
  • Pegamos el texto acabado de la carta o "escribimos" directamente en el programa DW, seleccionando el tipo y tamaño de la fuente, así como la ubicación del texto en la página.

Creación de enlaces de hipertexto

Intentaremos que la letra HTML sea más profesional y avanzada. Con este objetivo, ocultamos los enlaces de hipertexto en el contenido. Para ello, seleccione el lugar del texto seleccionado como enlace de hipertexto. En la esquina izquierda en la parte superior de la pantalla, debe "abrir" el icono correspondiente e insertar su enlace en el cuadro desplegable. Al mismo tiempo, no olvide poner una marca en la casilla de verificación "_blank", para que el enlace se abra en una ventana nueva, y el destinatario después de verlo no ha perdido el acceso a la letra principal.

Cómo insertar imágenes

Por lo general, la carta en formato HTML termina con información de contacto, preferiblemente con la foto del autor o con una imagen temática adecuada. Puede descargarse de Internet o pre-cargarse en Internet, ya que necesitará la URL de esta imagen. La mejor manera de hacerlo es a través de uno de los servicios gratuitos.

Con el fin de diseñar un final tan agradable:

  • Insertar en la parte inferior de la letra, dentro de la tabla principal otro con 3 columnas y un parámetro para el borde de 0 píxeles;
  • Ponga el cursor en el lugar de la tabla donde quieren ver la imagen;
  • Nota en la ventana inferior "En el medio" y "En el borde superior" para cada sección;
  • Seleccione la pestaña "Insertar" en el menú superior;
  • Haga clic en la inscripción "Imagen" y en el menú desplegable pegamos la dirección copiada;
  • Pulse "Ok" 2 veces.

Mira dentro

Ahora que usted sabe cómo hacer una carta HTML, debe asegurarse de que el destinatario ve en la forma correcta. Para ello, antes de enviar, debe ver su trabajo en el explorador de Dreamweaver CS3. Para ello, haga clic en el icono con el globo en el menú superior central. Si en lugar de letras en la pantalla aparece abracedabra, entonces usted debe poner en los ajustes de su navegador de auto-codificación.

Codificación

Desde la sección "Proyecto" y vaya a la parte de código – "Código". En la ventana abierta, seleccione y copie todo lo que está entre las etiquetas y . Guarde el archivo. A continuación, pegue el código HTML.

Enviar un mensaje HTML

Para realizar el envío, abra el SmartResponder (SR). Entonces:

  • Elija o cree una nueva carta rellenando "Nombre" y "Dirección del remitente".
  • Rellene la línea "Asunto de la carta";
  • Marque en el menú superior izquierdo el código HTML;
  • Inserte el código copiado en el código DW en el campo "Source" grande;
  • Comprobar la corrección de la pantalla mediante la herramienta "Preview";
  • Suprimir la versión en texto de la carta;
  • Prueba de spam, utilizando el botón del mismo nombre, situado junto al botón "Enviar".

Algunas plantillas populares

El uso del marco de trabajo ayuda a acelerar mucho el proceso de escribir una carta y hacerla más accesible a un desarrollador que todavía está aprendiendo los conceptos básicos de la creación de documentos web. Las plantillas más populares son:

  • Cerberus . Este conjunto de plantillas de respuesta le permite crear cartas que normalmente se muestran en la aplicación móvil de Gmail y en Outlook. Le permite usar bloques de código HTML individualmente o combinándolos.
  • La tinta es la preparación de cartas, cuyos envíos son casi universales y compatibles con cualquier dispositivo y cliente.
  • Plantilla de correo electrónico HTML muy simple. La plantilla le permite crear cartas de correo muy simple y rápidamente. Es cierto que tendrán un diseño extremadamente simple en forma de una sola columna, en la que se concluye un llamado a la acción.

Cómo insertar HTML en un mensaje

Consideremos ahora un problema algo diferente. Para insertar el código HTML en un correo electrónico, por ejemplo, con gmail, como en el ejemplo siguiente, el navegador Google Chrome, debería:

  • Pulse el botón "F12" o seleccione la secuencia de comandos apropiada en el menú;
  • En la ventana abierta con el código de la página actual del cliente de Gmail, busque el lugar donde debe insertarse la letra HTML, haga clic con el botón derecho y seleccione "Editar como HTML".
  • Inserte el código HTML copiado;
  • Pulse la combinación de dos teclas "Ctrl" y "Enter".

Para el mismo propósito, puede descargar un simple programa Mozilla Thunderbird. Con él, puede crear una letra, y luego seleccione la "Pegar", y luego "HTML", e inserte el código de su correo.

Herramientas

El WordPress plug-in e-Newsletter le permite administrar profesionalmente listas de correo y suscriptores. Ambos se realizan directamente a través del panel de administración de WordPress. Esta circunstancia proporciona un control completo y es completamente libre, que no puede sino alegrarse.

Otra herramienta simple – Bulletproof imágenes de fondo, que es una herramienta simple que le permite obtener código para la imagen de fondo de las cartas creadas. Con su ayuda usted puede hacer la correspondencia mucho más hermosa. Para diseñar un mensaje, simplemente indique la URL de la imagen de fondo que desea y su color de respaldo, y si estos parámetros deben aplicarse a todo el cuerpo del mensaje HTML o están destinados sólo a una de las celdas de la tabla. Como resultado, recibirá el código ya preparado que desea copiar y pegar en su plantilla.

Ahora ya sabes cómo enviar una carta HTML. Su creación no es particularmente difícil, sobre todo si utiliza plantillas ya hechas, en las que no hay escasez en la web. Por lo tanto, incluso aquellos que no tienen conocimientos especiales pueden hacer frente fácilmente a esta tarea.