Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
En las dos primeras partes de esta serie de estudio de caso, hemos visto cómo se diseñaron los nuevos mensajes Envato Tuts+, y luego se construyeron como entregas de HTML/CSS estáticas. En esta pieza final del rompecabezas, te mostraré cómo convertimos esos archivos en plantillas de Campaign Monitor.
En esta etapa había un par de miembros del equipo involucrados en el proceso: Cameron y yo. Cam se encargó de integrar los digests en Campaign Monitor, yo manejé los boletines, que explicaré en este post.
1. Prepare sus archivos
Nicole entregó una serie de archivos al final del proceso de compilación, incluyendo HTML, CSS e imágenes. Juntos, atendieron una serie de diferentes tipos de correo electrónico, por lo que sólo tenía que tomar los pedacitos necesarios para la plantilla boletín y el trabajar desde allí.
Consejo: Descargue los archivos del codigo si desea seguir adelante.
Heroe local
Actualmente, las rutas dentro de los archivos son todas relativas. Hay un par de enlaces a los archivos CSS, algunos enlaces dentro de ellos a las imágenes, y todos apuntan al directorio de archivos local como lo vemos. Por ejemplo:
1 |
<!-- Stylesheets -->
|
2 |
<link rel="stylesheet" type="text/css" href="css/styles.css" /> |
3 |
<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" /> |
4 |
|
5 |
<!-- Optional - for selectable topic colours -->
|
6 |
<link rel="stylesheet" type="text/css" href="css/topics.css" /> |
Cuando subimos nuestros archivos al final del tutorial, Campaign Monitor reconocerá todas estas rutas y las modificará en consecuencia.
2. Comienzar en el principio
Nuestro proceso es el siguiente: tomaremos todos los pedacitos estáticos de nuestra plantilla de correo electrónico y los intercambiamos por fragmentos dinámicos siempre que sea posible. Desplazamiento hacia abajo, el primer error que encuentro es alrededor de la línea 73: un enlace a la versión web:
1 |
Something not looking right? <a href="#">View the web version</a> |
Ese enlace será diferente cada vez, así que cambiémoslo por el dinámico <webversion> del CM:
1 |
Something not looking right? <webversion>View the web version</webversion> |
Fácil como eso. ¡Siguiente!
3. Enlaces más importantes
La <webversion> que acabamos de usar es uno de los pocos enlaces importantes que Campaign Monitor ofrece. Mientras estamos en esto, hagamos uso de uno o dos. El párrafo de las preferencias de correo electrónico se puede encontrar en la línea 346, y se ve así:
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <a href="#">update your email preferences</a> or <a href="#">unsubscribe</a>.</p> |
Utilicemos <preferences> y <unsubscribe> para hacer que la sección sea dinámica:
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <preferences>update your email preferences</preferences> or <unsubscribe>unsubscribe</unsubscribe>.</p> |
Hay un par de otros enlaces importantes, como <forwardtoafriend>, pero no vamos a hacer uso de ellos en este caso.
4. Líneas Únicas
La siguiente cosa que tenemos que atender es la dirección de correo electrónico principal.
Alrededor de la línea 87, la encontrarás marcada así:
1 |
<p class="heading h1">Translation Project Newsletter</p> |
2 |
<p class="heading h2">Month 20XX</p> |
Párrafos, con clases heading y h1 o h2 (gracias email HTML). Cada
uno de ellos debe ser editable desde dentro de Campaign Monitor, por lo
que, dado que sólo necesitaremos editar el contenido del texto y nada
más, podemos usar el elemento de plantilla <singleline>:
1 |
<p class="heading h1"> |
2 |
<singleline label='Newsletter title'>Translation Project Newsletter</singleline> |
3 |
</p>
|
4 |
<p class="heading h2"> |
5 |
<singleline label='Newsletter subtitle'>Month 20XX</singleline> |
6 |
</p>
|
Los párrafos permanecen perfectamente intactos, solo agregamos una región editable dentro de cada uno. Cada singleline tiene un atributo opcional label, que se mostrará útilmente desde el editor Campaign Monitor:
5. Líneas múltiples
Para contenido que es un poco más complejo que los encabezados y straplines, usaremos el elemento <multiline>. En
la línea 134 encontrarás el contenido de nuestro "primer artículo" que
usaremos como introducción para cada correo electrónico:
1 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
2 |
|
3 |
<p>Ian Yates<br /> |
4 |
<strong>Editor, Envato Tuts+</strong></p> |
Hagamos que estas dos secciones sean dinámicas:
1 |
<multiline label='Intro blurb'> |
2 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
3 |
</multiline>
|
4 |
|
5 |
<multiline label='Your friendly host'> |
6 |
<p>Ian Yates<br /> |
7 |
<strong>Editor, Envato Tuts+</strong></p> |
8 |
</multiline>
|
Estos siguen el mismo patrón que antes: regiones editables, con etiquetas opcionales–pero esta vez nos permiten usar un editor WYSIWYG:
6. Imágenes editables
Desplácese hasta la línea 168 y encontrará una imagen dentro de una celda de tabla, todo por sí mismo:
1 |
<td class="image"> |
2 |
<img src="images/onecol3.jpg" width="514" alt="" /> |
3 |
</td>
|
Esto será parte de una sección repetible (que trataremos en un minuto) así que primero hagamos esta imagen dinámica. No
me gusta usar la palabra "simplemente" en los tutoriales, pero en este
caso lo dejaré pasar: simplemente agregue el atributo editable a la
etiqueta de imagen. ¡Hecho!
1 |
<td class="image"> |
2 |
<img editable src="images/onecol3.jpg" width="514" label="section image" alt="" /> |
3 |
</td>
|
El
atributo width es obligatorio, pero el src (que nos da una imagen
predeterminada) es opcional, como tambien nuestro amigo el atributo label.
Con eso hecho, el editor nos permite eliminar la imagen predeterminada, subir uno nuevo, añadir texto alt, y (crucialmente) agregar un enlace.
"Los datos duros dicen: los correos electrónicos con imágenes se convierten casi dos veces más." – Chris Hexton, CEO y cofundador de Vero
Nota: tenga en cuenta que si elegimos quitar la imagen por completo, el formato que contiene seguirá. Esto puede resultar en grandes áreas rellenadas sin contenido, así que considere cómo formatear sus imágenes en el diseño.
7. Áreas Repetibles
Esa imagen es parte de una sección que queremos poder repetir tantas veces como sea necesario. Comienza en la línea 146 y termina en la línea 176, con los comentarios:
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
3 |
|
4 |
</table>
|
5 |
<!-- END Repeatable Article, Stroked at Top -->
|
Como
hicimos anteriormente con otras áreas, necesitamos hacer que el
encabezado dentro de esta sección sea <singleline> y el contenido
sea <multiline>, así que hazlo antes de ir más lejos.
Para hacer que todo este fragmento sea repetible, envolveremos los pedacitos necesarios en un elemento <repeater>:
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<repeater>
|
3 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
4 |
|
5 |
</table>
|
6 |
</repeater>
|
7 |
<!-- END Repeatable Article, Stroked at Top -->
|
Esto nos proporcionará algunos controles adicionales en el editor de Campaign Monitor, lo que nos permitirá duplicar la sección, moverla (útil para reordenar) o eliminarla.
Nota: el <repeater> debe contener una <singleline>, una <multiline> o una <img editable>.
Otra nota: ¡no puedes anidar elementos <repeater>!
8. Diseño
Ahora para una sección repetible con una diferencia. Es una sección de tema específico, y cada tema tiene uno, con el color del tema apropiado.
En
el caso de nuestro boletín de proyectos de traducción, a veces podemos
incluir una sección de Fotografía y Video, junto con Codigo, y Desarrollo de juegos. A veces podemos omitir Código. A veces podemos presentar los nueve temas. Entonces, ¿cuál es el mejor para organizar esto? Introduzca el elemento <layout>.
Podemos
usar múltiples elementos de diseño dentro de un único bloque
<repeater>, de modo que cada vez que duplicamos el bloque, se nos
da una selección de diseños. En nuestro caso, queremos elegir entre los temas disponibles, por lo que nuestro formato se verá como esto:
1 |
<repeater>
|
2 |
|
3 |
<layout label='Topic: PHOTOGRAPHY & VIDEO'></layout> |
4 |
<layout label='Topic: WEB DESIGN'></layout> |
5 |
<layout label='Topic: DESIGN & ILLUSTRATION'></layout> |
6 |
<layout label='Topic: CODE'></layout> |
7 |
|
8 |
... |
9 |
|
10 |
</repeater>
|
Allí verás elementos de diseño, cada uno con una etiqueta única.
Importante: no utilice entidades HTML escapadas (como & en vez de &) dentro de las etiquetas del diseño.
Comience en la línea 183 envolviendo nuestros bloques de temas en un <repeater>. A
continuación, envuelva cada uno de los bloques de temas en un elemento <layout label=''>, asegurándose de asignarles etiquetas únicas.
Ahora, una vez que subamos todo a Campaign Monitor, el editor nos dará todas nuestras opciones de diseño cuando queramos repetir una sección:
9. Cargar al Campaign Monitor
¡Todo nuestro arduo trabajo está hecho, ahora necesitamos subir nuestros archivos a Campaign Monitor para usar nuestra plantilla en una campaña de correo electrónico!
En el panel de control de Campaign Monitor, vaya a Plantillas > Importar.
A continuación, introduzca un nombre para su plantilla, seleccione el archivo HTML finalizado y, a continuación, seleccione todos los demás elementos necesarios (CSS e imágenes) como un archivo zip.
Sus archivos se cargarán y procesarán, lo que tomará un momento. Los estilos se optimizarán (algunos en linea, algunos se inyectarán en el <head> del HTML) y las rutas se actualizarán. Cuando todo esté listo, su plantilla estará disponible para seleccionar cuando inicie una nueva campaña.
Conclusion
Esto concluye este estudio de caso por correo electrónico; Una visión de cómo diseñamos y construimos los correos de Envato Tuts+. Espero que haya disfrutado siguiendo el proceso, y si necesita inspiración por correo electrónico para su próximo proyecto, asegúrese de consultar las últimas plantillas de correo electrónico disponibles en Envato Market.
