Share
En este tutorial vamos a echar un primer vistazo al marco de la Fundación para correos electrónicos de ZURB. Lo configuraremos, explicaremos lo que viene en el paquete y luego crearemos un correo electrónico simple y sensible..
Hemos creado una guía completa para ayudarlo a aprender Foundation, ya sea que esté comenzando o si desea explorar temas más avanzados, consulte Fundación de aprendizaje.
En el último medio año conocí a un par de marcos y calderas para la creación de correos electrónicos HTML. Antes de estas herramientas, el desarrollo real siempre era difícil de probar y corregir, sin mencionar el hecho de que los correos electrónicos respondían.
Codificar correos electrónicos HTML es un animal muy diferente en comparación con la creación de una página web normal. Es como viajar en el tiempo a 1999. Necesitamos usar diseños basados en tablas, estilos en línea y dar cabida a clientes como aplicaciones de escritorio (Thunderbird, Outlook) y webmails (Gmail, Yahoo).
Para resolver este rompecabezas y obtener resultados confiables, tenemos dos opciones:
Para los propósitos de este tutorial, obviamente vamos a ir con la segunda opción.
El correo electrónico de ZURB apilar proporciona una solución de paquete todo en uno para crear correos electrónicos.
Consiste en:
Foundation for Emails verá cómo usted codifica, compila, alinea y luego minimiza el resultado listo para la producción. Ha sido ampliamente probado en muchas aplicaciones de escritorio y móviles; para la lista completa de lo que está soportado puede consultar la sección de compatibilidad. También puede consultar la guía oficial al comenzar con el marco..
Para todo este proceso, uso Windows 10, la versión de 64 bits. Si utiliza un sistema diferente, podrá seguir.
La pila funciona con Node.js y su gestor de paquetes npm. Para instalar Foundation for Emails abrimos nuestra terminal, luego usamos el comando:
npm install --global foundation-cli
Luego cambiamos el directorio a una carpeta de proyecto (donde quiera que quiera ejecutar este proyecto) usando cd [ruta de la carpeta del proyecto]. En el directorio del proyecto el siguiente comando debe ser:
nueva fundación --framework correos electrónicos
Se te preguntará "¿Cómo se llama el proyecto? (sin espacios) ”, momento en el que ingresa el nombre de un proyecto, pulsa Intro, luego se sienta un momento mientras se instalan las dependencias del proyecto..
Ahora estamos configurados con todos nuestros archivos de proyecto, nuestros módulos Node están instalados y nuestros componentes Bower están instalados. Para iniciar el marco y el servidor, vaya a la carpeta del proyecto y use el comando:
reloj base
La dirección web predeterminada (generalmente http: // localhost: 3000 /) se abrirá directamente en su navegador tan pronto como lo haga. Verás una nueva plantilla de correo electrónico, lista para usar:
En su carpeta de proyectos encontrará (entre otras cosas) una src carpeta. En esta carpeta encontrarás:
Accentsconagua
bienes, estilos e imágenesdiseños, diseños de envolturapáginas, códigos HTML básicosparciales, partes HTML reutilizablesLa página de índice se puede encontrar aquí: src / pages / index.html
Nota: si no está familiarizado con Node.js, puede consultar nuestra guía de principiantes para reforzar lo que estamos haciendo:
Fundación utiliza una cuadrícula de doce columnas. Vale la pena señalar que el espacio horizontal en un correo electrónico suele ser estrecho, sobre todo porque se ha movido gran parte del correo electrónico al móvil, por lo que es recomendable usar solo una o dos columnas. Para conocer las mejores prácticas, consulte la siguiente guía:
Foundation for Emails utiliza Inky, su propio nuevo lenguaje de plantillas, cuyo objetivo es eliminar el complejo marcado que inevitablemente causan las tablas. Estas son las etiquetas Inky que nos ayudan a marcar las cuadrículas:
|
También podemos especificar el tamaño de la cuadrícula con los atributos. pequeña y grande.
Esta es una sección de una columna..
|
Columna Uno
Ese simple marcado, cuando se compila, nos da lo siguiente:
|
Este ejemplo separado es una fila de dos columnas (cada columna se colapsa a 12 de ancho en puntos de interrupción pequeños, manteniéndose 6 de ancho para grandes).
|
Columna Uno Columna dos
En esencia, usaremos uno
Ahora que entendemos el uso básico de Inky, cambiemos el asunto del correo electrónico. En pages / index.html Podemos cambiar los siguientes detalles al principio del documento; es posible que esté familiarizado con esta forma de “Materia Frontal” si alguna vez ha usado YAML:
--- Asunto: Cake Poker Summer Tournament ---
Para insertar una imagen de logo usamos HTML estándar.
Luego agregué otro par de filas dentro del
|
Nuestro querido fan del poker! Tenemos noticias para ti: el campeonato de verano llegará pronto. Si quieres participar, registra tu plaza antes del 5 de junio.!
|
El gran premio es 1 millon de euros y tiempo de vida 10% rakeback en línea!
Agregué otra imagen sobre la ciudad del torneo, nuevamente en relación con el documento..
Observe la
La sección de detalles es un poco más complicada y proporciona más información sobre el evento. Para esta sección utilicé dos columnas por fila, cada una explicando una parte específica. Nuevamente, cada mitad se colapsa en una columna en las pantallas móviles..
|
Detalles del torneo.
|
Londres, Royal Hall of Gamblers
El lugar perfecto para un moderno campeonato de poker..
|
Hotel Markuee
Cerca de cuatro estrellas **** alojamiento con servicio completo y excelente comida.
|
Masaje
Un servicio gratuito para todos los jugadores del torneo..
|
Comprar en
500 + 50 GBP
Finalmente agregué un Registro botón para registrarse. Utilicé el proporcionado componente, centrándolo con el
A medida que construye y cambia cosas, su proyecto se actualizará continuamente en el navegador. El código compilado se puede encontrar en el proyecto. dist directorio, siendo los archivos principales index.html y css / app.css.
Cuando estemos contentos con lo que tenemos, podemos usar este comando para alinear el código con los estilos y comprimir todo:
npm ejecutar construir
Después del proceso de construcción, lo que encontrarás en el dist Folder es una versión minificada y lista, adecuada para la producción pero ciertamente no es adecuada para ninguna edición.!
¡Ha completado su primera sesión, haciendo un correo electrónico HTML sensible con el marco de Foundation for Emails! Hicimos un diseño simple, con una y dos filas de columnas, imágenes, texto enriquecido y un Registro botón al final.
Para inspirarse, eche un vistazo a la categoría Plantillas de correo electrónico en Envato Market. Tal vez diseñar, construir, y luego enviar su propio!
