Transforme sus diseños en correos electrónicos HTML codificados con Mailrox

Codificar correos electrónicos HTML apesta. En un momento en el que nos hemos vuelto tan arraigados con los estándares web y el diseño basado en CSS, saltar en el tiempo y codificar los diseños basados ​​en tablas con un estilo en línea se siente francamente complicado. De hecho, hay miles de diseñadores web que ni siquiera han estado ahí el tiempo suficiente para estar familiarizados con cómo codificar de esta manera.

Hoy vamos a echar un vistazo a una nueva herramienta que promete hacer la vida mucho más fácil para los diseñadores de correo electrónico HTML. Con Mailrox, usted carga su diseño, lo divide y lo transforma fácilmente en un correo electrónico HTML funcional.

Conoce a Mailrox

Mailrox promete un flujo de trabajo simple: cargue un diseño (jpg, gif o png), defina su diseño, agregue texto y HTML personalizado, y exporte. Suena fácil verdad? ¿Pero la creación de correos electrónicos HTML puede ser un proceso fácil?

Soy escéptico, así que hoy vamos a probar este retoño. Lo guiaré a través de todo el proceso de comenzar con un diseño, subirlo al sitio y convertirlo a un correo electrónico en vivo.

La plantilla

Para probar Mailrox, necesitaremos un diseño de correo electrónico HTML. Podría dejar de escribir y tomarme el tiempo para crear el mío, pero soy perezoso y hay un montón de increíbles plantillas gratuitas en línea, así que también podríamos tomar una de esas. Aquí hay una plantilla de PSD Freebies.

Paso 1. Crear un nuevo correo electrónico

Mailrox se encuentra actualmente en versión beta, por lo que es de uso gratuito, por ahora. Usted lanza su correo electrónico para calificar una invitación, recibí el mío en diez minutos, por lo que no debería tardar mucho en entrar.

Una vez que se haya registrado, será llevado a esta página:

Ya te dieron una plantilla para jugar, pero queremos comenzar desde cero, así que presionemos el botón que dice "Crear un nuevo correo electrónico". lo que nos da un simple diálogo donde podemos subir nuestro jpg plano.

Progreso de seguimiento

A lo largo de todo el proceso, Mailrox te ayuda a controlar dónde te encuentras con un pequeño gráfico útil en la parte superior izquierda de la pantalla. Me encanta cuando las aplicaciones hacen esto, me da una idea clara de dónde he estado y adónde voy, además de permitirme hacer clic rápidamente y saltar a diferentes pasos.

Paso 2. Parte y pica

Una vez que subimos nuestra imagen, pasamos a la pantalla de abajo. Aquí vemos el jpg subido junto con una simple tira de herramientas y algunos pequeños consejos y sugerencias para comenzar.

Básicamente, su conjunto de herramientas y flujo de trabajo está completamente centrado alrededor de las herramientas de corte. Hay dos herramientas de corte vertical, dos herramientas de corte horizontal, una herramienta de movimiento de división y una herramienta de eliminación de división.

Como puedes ver, las herramientas de corte en azul son? Simples? ¿Y las herramientas verdes son complejas? Eso suena bien, pero ¿qué diablos significa? Realmente no hay nada que te diga más sobre cómo funcionan estos. Después de algunos experimentos, resulta que los cortes azules recorrerán toda la página y los verdes son conscientes y están vinculados por otros cortes en la página.

"Los cortes azules recorrerán toda la página y los verdes son conscientes y están vinculados por otros cortes en la página".

Para hacer un corte, simplemente toma una herramienta y coloca el mouse sobre el lienzo. Aparece una vista previa de la división, que le permite colocarla exactamente donde la desea. Puede pegarlo en su lugar con un clic.

Haga clic Haga clic Haga clic

Tienes la idea aquí. Simplemente continúe y recorte su archivo, teniendo cuidado de cortar cada objeto que necesitará personalizar de cualquier manera, ya sea intercambiando un gráfico, lanzando texto o simplemente agregando un enlace.

En general, es un proceso bastante rápido y fácil. Si alguna vez ha dividido una PSD en Photoshop, aquí se sentirá como en casa.

Paso 3. personalizar contenido

Mientras recortaba su diseño, lo que realmente estaba haciendo es definir diferentes áreas de contenido para personalizar. A medida que avanzamos hacia el? Contenido? paso, cada una de estas áreas será algo sobre lo que puede desplazarse y hacer clic para cambiar.

Por ejemplo, digamos que queremos mantener esa imagen principal, pero agregue un enlace para que cuando haga clic en la imagen, lo lleve a una URL específica. Para hacer esto, haga clic en esa sección, luego use la pequeña forma para agregar en su enlace.

Bastante fácil ¿verdad? Saltemos a algo un poco más complicado donde tenemos que agregar código personalizado.

Agregar código personalizado

En la parte superior de nuestra plantilla de correo electrónico hay una barra que informa al lector por qué está recibiendo el correo electrónico y lo vincula a un sitio. Obviamente, vamos a querer poner en nuestro propio texto aquí.

El proceso para esto es donde la idea WYSIWYG se descompone. Usted ve, Mailrox no está diseñado para no codificadores. Si no sabes HTML básico y CSS, no llegarás muy lejos.

? Mailrox no está diseñado para no codificadores. Si no sabes HTML básico y CSS, no llegarás muy lejos.

En su lugar, fue creado para diseñadores con una buena comprensión del código web básico que simplemente no quieren pasar por la molestia de codificar un correo electrónico, que es una bestia muy específica que debe codificarse correctamente para que funcione correctamente. Puede sonar como un pequeño nicho, pero apuesto a que esto describe a muchos diseñadores web. ¡Incluyéndome a mi!

Cuando hago clic en el área superior y elijo insertar HTML personalizado, aparece la pantalla que se muestra a continuación. El campo de texto se rodea automáticamente con el código de las tablas y las celdas, por lo que, afortunadamente, nunca tenemos que meternos con eso. En su lugar, necesitamos insertar un párrafo de texto y cualquier estilo de línea es necesario para que todo se vea bonito. Estás completamente solo para esto, así que espero que te sientas cómodo con CSS.

Una vez que haya terminado aquí, básicamente repita este proceso en toda la plantilla hasta que todas las áreas de contenido se hayan personalizado a su gusto.

Etapa 4. Extras

Antes de concluir, vale la pena echar un vistazo a los diversos extras y golosinas que están disponibles para usted en el "Contenido". sección. En la parte superior derecha de la ventana, debería ver el siguiente conjunto de botones:

Aquí puede ver una vista previa en vivo de su plantilla terminada y codificada en el navegador o incluso enviar un correo electrónico de prueba para ver cómo se ve en varios clientes. También hay un botón de descarga, del que hablaremos en el siguiente paso.

Frente a estos botones, en la parte superior izquierda de la pantalla, se encuentra la siguiente tira de herramientas:

Estos le permiten personalizar las características básicas de la página: color de fondo, margen superior y título. También hay un enlace a un "Informe de compatibilidad". Esta es una pequeña herramienta fantástica que le permite asegurarse de que su diseño funcionará en varios clientes de correo electrónico.

Como puede ver, nuestro diseño pasó la prueba para 19 clientes de correo electrónico, incluidos Apple Mail, Gmail y Yahoo. Sin embargo, fallamos en un área: Lotus Notes 6.5-7. De la mano, ni siquiera estoy seguro de qué es eso o si es importante, pero Mailrox está allí para tomar mi mano y ayudarme a tomar una decisión.

La aplicación me informa que tengo algunas celdas de tabla pequeñas que a Lotus Notes no les gustarán, pero también que esto probablemente afectará a menos del 1% de los usuarios potenciales de correo electrónico. Eso me parece aceptable, pero en caso de que quiera solucionar el problema, incluso me dan instrucciones sobre cómo corregir el error.

Paso 5 Descargar

Una vez que haya terminado, haga clic en el botón de descarga que vimos antes para ir a la pantalla de abajo. Aplaudo a los desarrolladores por estas tres opciones, porque creo que son perfectas:

Aquí podemos descargar nuestra plantilla para que esté optimizada específicamente para Mailchimp o Campaign Monitor. Esto es asombroso porque ambos servicios son extremadamente populares y ambos tienen fragmentos de código personalizados muy específicos que se requieren para preparar una plantilla para su servicio.

La tercera opción es igual de genial. Si solo desea descargar el HTML sencillo y las imágenes para cargarlas en su servidor, la aplicación entrará y prefijará todos los enlaces de imágenes con la ruta al directorio en el que va a colocar las imágenes. Esta es una opción muy bien pensada y aprecio el esfuerzo aquí.

¿Que pienso?

Al principio era escéptico acerca de esta herramienta, simplemente porque soy un programador que normalmente prefiere construir cosas a mano y evita los WYSIWYG como la plaga. Dicho esto, odio codificar correos electrónicos HTML. Realmente son un dolor y todo sobre el proceso de diseño se siente torpe e incorrecto si te encanta el diseño de CSS tanto como yo.

"Mailrox parece saber exactamente quién soy y qué quiero de él".

Mailrox parece saber exactamente quién soy y qué quiero de él. Sabe que puedo cortar un diseño con muy poca instrucción, y que soy lo suficientemente competente como para escribir mi propio código para los distintos fragmentos de contenido. Lo más importante es que sabe que, si bien puedo hacer todo eso, no quiero preocuparme por el diseño basado en tablas y las complejidades de la compatibilidad del correo electrónico HTML.

Se centra específicamente en aquellas partes del proceso de creación de correo electrónico HTML que son las más molestas y las maneja por mí. Me encanta que los desarrolladores sean lo suficientemente perspicaz para lograr tal hazaña y realmente disfruté usando la aplicación.

No estoy seguro de lo que cobrarán después de la versión beta, pero siempre que sea razonable, definitivamente puedo verme recurriendo a Mailrox la próxima vez que tenga que codificar un correo electrónico.

"Se enfoca específicamente en aquellas partes del proceso de construcción de correo electrónico HTML que son las más molestas y las maneja por mí".

Como hacerlo mejor

Obviamente, tengo un gran elogio para esta herramienta. Es simple, fácil de usar y parece estar dirigido precisamente a mis talentos y necesidades. Dicho esto, tengo un par de quejas que me encantaría ver abordadas en futuras versiones.

Dame una herramienta de zoom

La primera queja es la inclusión de una herramienta de zoom en el flujo de trabajo de rebanado (o si ya faltó alguna, haga que sea más evidente). Estás tratando de colocar esos cortes en puntos muy precisos en el diseño y, con frecuencia, me encontré con mi cara hacia la pantalla tratando de hacerlo bien.

Dame una herramienta de zoom

Mi segunda queja es que tengo que usar Mailrox para cortar en absoluto. Las herramientas de segmentación de Photoshop son más robustas y los diseñadores están más familiarizados con ellas, así que, ¿por qué no nos permiten dividir el documento en Photoshop y luego cargar nuestra PSD para saltar directamente al paso del contenido?

? Las herramientas de corte de Photoshop son más robustas y los diseñadores están más familiarizados con ellas, así que, ¿por qué no nos dejan cortar el documento en Photoshop?

Una función de carga de PSD pre-cortada definitivamente haría de esta una aplicación asesina, ya que convertiría mi diseño a un correo electrónico codificado en un proceso casi indoloro que podría realizarse muy rápidamente. Las herramientas de corte en Mailrox están bien y deberían permanecer, pero a los que preferimos Photoshop se les debe dar esa opción.

¿Qué piensas?

Ahora que has visto mi recorrido y las opiniones de Mailrox, es hora de que entiendas y me digas lo que piensas. ¿Odias codificar los correos electrónicos HTML tanto como yo? ¿Consideraría utilizar una herramienta como Mailrox para ayudar con el proceso?

Si ha logrado ingresar a la versión beta y tuvo la oportunidad de probar el manejo de Mailrox, deje un comentario a continuación y hágame saber qué es lo que ama y qué cambiaría.