Responsive Email Footer

Firma digital para pie de correo electrónico.

📋 Tabla de contenido

Sobre el proyecto
Uso
Contribución
Licencia

📌 Sobre el proyecto

Dentro de las herramientas existentes en posicionamiento de marca, la implementación de una firma digital personalizada dentro de la estructura de un correo y su uso recurrente en el ámbito profesional, empresarial, de negocios, académico y político permite trasladar los conceptos de branding al receptor del correo.

La firma digital nos permite instrumentalizar la comunicación de la marca dentro de los diferentes usos cotidianos que hacemos del correo electrónico, otorgando al usuario un referente de validez en su comunicación con el receptor del correo, del mismo modo esta herramienta permite su uso en marketing segmentado por usuario y su posición en los diferentes hitos del journey de compra utilizando metodologías de marketing.

🧑‍💻 Uso

La construcción de la firma digital se realizará mediante la implementación del preprocesador PUG de HTML el cual permitirá modularizar y aportar a HTML de cualidades de lenguajes de programación. Para modificar el contenido del la firma digital haremos uso de las variables, mixins, includes y extends declaradas en el archivo template.pug que permitirán extender los componentes contenidos. La siguiente guía mostrará como modificar el código de la firma digital.

:: Estructura de carpetas y archivos

Repository/
|
├── signing.html
├── README.md
└── templates/
|
├── head.pug
├── signing.pug
└── template.pug

Las imágenes contienen una dinámica de intercambio respondiendo a las dimensiones de la pantalla en la que se visualice, la imagen del usuario no deberá superar los 150x150px y en una visualización mayor a 600px la podremos modificar en la Ln 23, Col 128 del archivo signing.pug detro de ./templates/, al cambiar la url en la propiedad background: url( ... ); del elemento <img> que lo contiene. La imagen que se visualice en dimensiones de pantalla menor a 600px se modificaran en la Ln 7, Col 1155 del archivo head.pug detro de ./templates/, al cambiar la url en la propiedad background: url( ... ); de la clase .userimage{ ... } que la contiene.
La imagen de la compañía no deberá superar los 140x75px y se modificara en la Ln 31, Col 54 del archivo signing.pug detro de ./templates/, al cambiar el atributo src=' ... ' del elemento <img> que la contiene.
Las variables contendrán los datos y url's de imágenes que se pueden modificar con base en la siguiente estructura:

-var user = ["first name","[space]last name ","[space]surname", "position", "working area", "company legal name"]

-var contact = ["phone number(s)","email", "web site","address" ]

-var icon = ["phone__icon","email__icon","web site__icon","address__icon" ]

-var social = ["social__icon_1","social__icon_2", "social__icon_3","social__icon_4"]

-var terms = ["short_terms_of_service"]

Una vez personalizado el contenido, compilaremos el archivo HTML ejecutando por consola la siguiente instrucción cada vez que el archivo cambie:

pug -w ./templates/signing.pug -o ./ -P

El archivo se creará en la raíz del repositorio con el nombre signing.html y se podrá incrustar como firma digital desde diversos gestores de correo electrónico multiplataforma que permiten adjuntar una firma desde un archivo HTML.

🧮 Contribución

Si tiene una sugerencia que mejoraría esto, forkea el repositorio y cree una solicitud de extracción. Cualquier contribución que hagas es muy apreciada.

Fork al proyecto
Cree una rama feature (git checkout -b feature/NewFeature)
Confirme sus cambios (git commit -m 'Hola! agregue una nueva característica')
Push a la rama (git push origin feature/NewFeature)
Abrir un Pull Request.

📜 Licencia

Construido bajo la licencia MIT. Consulte LICENSE para obtener más información.

⚒️ Construido con

Your feedback 💚 is always appreciated!
@erwindevdesign

erwindevdesign / responsive_email_footer Goto Github PK