Estilos CSS para Plantillas de Email Escalables

Clase 24 de 36 • Curso de Diseño y Maquetación para Emails

Clase anteriorSiguiente clase

Resumen

Dale prioridad a usar los atributos de cada etiqueta, para los estilos solamente debes añadir lo justo y necesario.
No utilices short-hands dentro de tu CSS, es buena practica utilizar las propiedades individuales.
Para los colores utiliza siempre el formato hexadecimal de 6 dígitos.

Reto: Incluye los estilos al footer y comparte tu progreso en la sección de discusiones.

Maylen Cuevas

student•

Aquí mi proyecto:

Y aquí el código:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
  <head>
    <meta charset="utf-8">

  </head>
  <body style="margin 0 auto;">
    <table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="dcdee2">
      <!-- Header -->
        <tr>
            <td align="center" style="padding-top:20px; padding-bottom:20px;"><img src="Logo.png" alt="Harmony Logo" width="70" style="width: 70px height:auto; display: block"></img></td>
        </tr>
        <!-- Fin Header -->
        <!-- Contenido -->

        <tr>
            <td>
                <table width="100%" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td bgcolor="40514" height="50"  align="center" style="padding-top:50px; padding-bottom:50px;">
                      <span style="color: white; font-size:19px; font-family:Montserrat">¡Hola, *Nombre*! Tenemos una oferta increible para ti.</span>
                    </td>

                  </tr>
                  <tr>
            <!-- Contenido Destacado -->
                    <td>
                        <img src="Principalx2.jpg" alt="Imagen Principal" border="0" style="width:100%; height: auto; display:block;" ></img>
                    </td>

                  </tr>
                  <!-- Fin Contenido Destacado -->
                  <!-- Texto Principal -->
                  <tr>
                    <td align="center" height="50" style="padding-top:70px; padding-bottom:50px;" >
                      <span style="color: #40514e; font-size:18px; font-family:Montserrat; font-weight:bold;">
                        30% OFF en todos nuestros productos. ¿Te lo vas a perder?
                      </span>
                  </tr>
                  <!-- Fin texto Principal -->
                  <!-- Call to action -button -->
                  <tr>
                    <td align="center">

                        <img src="boton1.jpg" alt="Llevame a las ofertas" width="265px" style="width:260; height:auto; display:block; padding-top:40px; padding-bottom:60px;" ></img>

                    </td>
                  </tr>
                  <!-- Fin call to action -->
                </table>

            </td>
        </tr>
        <!-- Fin Contenido -->
        <!-- Footer -->
        <tr>
            <td>
              <table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="7c8482">
                <!-- Redes -->
                <tr>
                  <td>
                    <table width="100" align="center" cellpadding="0" cellspacing="0">
                      <tr align="center" >
                        <td style="padding-top:30px; padding-bottom:10px;"><img src="facebook.png" alt ="Imagen Facebook" style="padding-right:10px;" ></img></td>  <td style="padding-top:30px; padding-bottom:10px;"><img src="instagram.png" alt="Imagen Instagram" style="padding-left:10px;"></img></td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <!-- Fin redes -->
                <tr align="center">
                  <td style="padding-top:30px;padding-bottom:20px; color:#333033; font-family:Montserrat; font-size:18px; ">
                    Enviado con ♥ por Harmony.
                  </td>
                </tr>
                <tr align="center" >
                  <td style="color: #333033; line-height:10px; font-family:Montserrat; font-size:10px; padding-top:20px; padding-bottom:20px;">
                    Te enviamos este contenido porque estas suscripto a nuestro boletín. <a href="#" >Puedes darte de baja aquí</a>
                  </td>
                </tr>
              </table>

            </td>
        </tr>
        <!-- fin footer -->
    </table>
  </body>
</html>

Me esta gustando muchisimo este curso :D

Robert Suarez

student•

Quedo muy bacano.

Ana Milena Martínez Guerrero

student•

Súper lindo 😊

Alejandro Lopez Ramírez

student•

Así se ve mi plantilla

![Esquelto](

![Diseño](

Martha Muñoz

student•

Muy buen trabajo! :)

Vidalia Pedraza

student•

Y el codigo? =(

Daniel Enrique Astudillo Guzmán

student•

Aquí mi diseño, cambié el formato y apliqué los colores de la Start-up para la que estoy diseñando esta campaña espero les guste! =)

Anderson Víctoria Tejada

student•

Santiago Arismendy

student•

Hola, en (font-family: xxx ) que fuentes puedo usar y cuales No puedo usar para que los clientes de correo funciones correctamente. Acabe de usar (font-family:Dejavu), al visualizar no genera errores pero al enviar por correo se cambia la fuente.

Mayra Lopez

student•

Para que funcione las fuentes no comunes en otros navegadores y por ende en los correos ,debe estar instalada o ser llamada desde google fonts. Tu puedes usar cualquier fuente, ´si el ordenador no la encuentra, usa alguna por defecto.

Jorge Luis Paiva Huamán

student•

<td width="100" style="50px"> En style la unidad es pixel, en el atributo de la etiqueta, qué unidad de medida será? #

Eduardo Hidalgo Díaz Rugama

student•

por defecto width y height como atributos usan pixeles.

Luis Lira

student•

Cuando lo haces con estilos en línea siempre serán con con pixeles.

José Mauricio Osorio Corredor

student•

Apunte:

Alejandro Lopez Ramírez

student•

![](

Andrés Perdomo

student•

Así me quedo el email.

![](

Así es el codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body style="margin:0 auto">
    <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#1C3643">
        <!--Header-->
        <tr>
            <td align="center" style="padding-top:20px;padding-bottom:20px;" >
                <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none">
                <img src="imagen/logo_platzi.png" alt="Escuela de formación Online" width="127" style="width:127;height:auto;display:block;">
                </a>
            </td>
        </tr>
        <!--Fin header-->
        <!--contenido-->
        <tr>
            <td>
                <!--Contenido destacado-->
                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#1C3643">
                <tr>
                    <td height="50" bgcolor="#172c36" style="font-family:Arial,sans-serif;font-size:18px;color: #ffffff; text-align:center"> Hola, *Nombre*</td>
                </tr>
                <tr>
                    <td>
                        <a href="https://platzi.com/clases/diseno-email/" target="_blank" border="0" style="text-decoration:none">
                        <img src="imagen/2x.jpg" alt="Nuevo curso de diseño y maquetación de emails" border="0" style="width:100%;height:auto;display:block;">
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="padding-top:30px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 25px; color: #ffffff; text-align: center; line-height:26px; ">
                        Aprende cuáles son las herramientas necesarias y las buenas prácticas para ejecutar un email.
                    </td>
                </tr>
                <tr>
                    <td align="center" style="padding-top:20px;padding-bottom:20px;" >
                        <a href="https://platzi.com/clases/diseno-email/" target="_blank" border="0" style="text-decoration:none">
                        <img src="imagen/CTA.PNG" alt="Quiero aprender ya" style="width:220px;height:auto;display:block;">
                        </a>
                    </td>
                </tr>
            </table>
                <!--Fin contenido destacado-->
            </td>
        </tr>
        <!--Fin contenido-->
        <!--Footer-->
        <tr>
            <td>
                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
                <tr>
                    <td>
                    <table align="center" border="0" cellpadding="4" cellspacing="1" style="padding-top:20px;padding-bottom:20px;">
                        <!--Redes sociales-->
                        <tr>
                            <td>
                                <a href="https://twitter.com/platzi" target="_blank" border="0" style="text-decoration:none">
                                <img src="imagen/TWT.png" alt="Twitter" style="width:48px;height:auto;display:block;">
                                </a>
                            </td>
                            <td>
                                <a href="https://www.facebook.com/platzi/" target="_blank" border="0" style="text-decoration:none">
                                <img src="imagen/FB.png" alt="Facebook" style="width:48px;height:auto;display:block;">
                                </a>
                            </td>
                            <td>
                                <a href="https://platzi.com/" target="_blank" border="0" style="text-decoration:none">
                                <img src="imagen/ENLACE.png" alt="Web" style="width:48px;height:auto;display:block;">
                                </a>
                            </td>
                        </tr>
                        <!-- Fin Redes Sociales-->
                    </table>    
                    </td>
                </tr>
                <!--Información de la marca-->
                <tr>
                    <td style="padding-top:10px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 25px;text-align: center;"> 
                        Enviado con ♥ por Platzi
                    </td>
                </tr>
                <!-- Fin Información de la marca-->
                <!--Legales-->
                <tr>
                    <td style="padding-top:10px; padding-bottom:10px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 15px;text-align: center;">
                        Te enviamos este contenido porque haces parte de la comunidad Platzi.
                    </td>
                </tr>
                <tr style="padding-top:10px; padding-bottom:30px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 15px;text-align: center;">
                    <td>
                        Lamentamos que te vayas, pero puedes <a href="http://sendgrid.platzi.com/asm/unsubscribe/" target="_blank">darte de baja aquí.</a>
                    </td>
                </tr>
                <!--Fin de legales-->
            </table>
            </td>
        </tr>
        <!--Fin footer-->
    </table>
</body>
</html>```

Martha Muñoz

student•

Qué buen trabajo! :)

Daniel Augusto Melgarejo Gómez

student•

Uyyy, bueno es mi primera vez programando y realizando una campaña de email marketing, este email es de captación y cómo lead magnet estoy ofreciendo una asesoría gratuita ya sea online o presencial. El texto del contenido lo he dejado dentro de la imágen y no dentro del código, que opinas de esto??? Adjunto imagen y código!

<<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body style="margin: 0 auto;"
    <table width="100%" align="center" border="0" cellpadding= "0" cellspacing="0" bgcolor="#09205D" >
        <!-- Header -->
        <tr>
            <td align="center" style="padding-top: 20px;padding-bottom: 20px;">
                <a href="https://workmate.com.co/" target="_blank" border= "0" style= "text-decoration: none">
                <img src="images/workmate_logo.png" alt="workmate - su aliado tecnológico" >
                </a>
            </td>
        </tr>
        <!-- Fin Header -->
        <!-- Contenido -->
        <tr>
            <td>
            <Table width="100%" align="center" border="0" cellpadding= "0" cellspacing="0">
                <tr>
                    </a>
                    <td height="50" bgcolor="#4A017D" style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #FFFFFF; text-align: center;">Hola, *Nombre* </td>
                    </a>
                </tr>
                <tr>
                    <td><img src="images/contenido_texto2x.jpg" alt="Obten una asesoría gratis" border= "0" style="width:100%; height:auto-display= block;"></td>
                </tr>
                <tr>
                    <td>
                </tr>
                <tr>
                    <td align="center" style="padding-top:20px;padding-bottom: 20px;">
                        <a href="https://workmatetechnology.youcanbook.me" target="_blank" border= "0" style= "text-decoration: none">
                        <img src="images/cta.png" alt="Agendar mi cita" width="220" style="width: 220px; height:auto; display:block;">
                    </td>
                </tr>
            </Table>
            </td>
        </tr>
        <!-- Fin contenido -->
        <!-- Footer -->
        <tr>
            <td> 
                <Table width="100%" align="center" border="0" cellpadding="0" cellspacing="0"; bgcolor="#FFFFFF">
                    <tr>
                        <td>
                            <table align="center"; border="0"; cellpadding="4"; cellspacing="1"; style="padding-top: 20px;padding-bottom: 20px;">
                                 <!--Redes sociales-->
                                <tr>
                                    <td>
                                        <a href="http://bit.ly/Contacto_Workmate_Whatsapp" target="_blank" border= "0" style= "text-decoration: none">
                                        <img src="images/wa_logo.png" alt="whatsapp" style=“width:40px;height:auto; display: block” >
                                    </td>
                                    <td>
                                        <a href="https://www.instagram.com/workmate.technology/" target="_blank" border= "0" style= "text-decoration: none">
                                        <img src="images/ig_logo.png" alt="instagram" style=“width:40px;height:auto; display: block”>
                                    </td>
                                    <td>
                                        <a href="https://www.facebook.com/Workmate.Tec/" target="_blank" border= "0" style= "text-decoration: none">
                                        <img src="images/fb_logo.png" alt="Facebook" style=“width:40px;height:auto; display: block”>
                                    
                                    </td>
                                    <td>
                                        <img src="images/yt_logo.png" alt="Youtube" style=“width:40px;height:auto; display: block”>
                                    </td>
                                </tr>
                                <!-- Fin Redes Sociales-->
                            </table>
                        </td>
                    </tr>
                    <!--Información de la marca-->
                    <tr>
                        <td style="padding-top:10px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 18px;text-align: center;">
                            Enviado por 🤝 Workmate Technology. </td>
                    </tr>
                    <!-- Fin Información de la marca-->
                    <!--Legales-->
                    <tr>
                        <td style="padding-top:10px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family: Arial, sans-serif; font-size: 12px;text-align: center;">Te enviamos este mensaje por ser parte de nuestra lista de contactos.
                        </td>
                        </tr>
                    <tr>
                        <td style="padding-top:0px; padding-bottom:20px; padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-align: center;">
                            si no deseas recibir estos mensajes...<a href="https://gmail.us20.list-manage.com/unsubscribe?u=78634ecb91280e4dfeecf73fc&id=39fc833e07">darte de baja</a>
                        </td>
                    </tr>
    
                    <!--Fin de legales-->
                </Table>
            </td>
        </tr>
        <!-- Fin Footer -->
    </table>
</body>
</html>
>

Francisco Encabo Servián

student•

¿Por qué el CTA es una imagen? ¿No se puede fabricar un botón?

Dani Ospina

student•

Hola, 😄

la idea es que lo personalices y vaya en consonancia con la identidad de tu marca.

Francisco Encabo Servián

student•

pues vaya idea, resulta que lo que da más problemas en los gestores de correo son los botones, algo que hubiera sido magnifico aprender en este curso. Pero nada, para eso ya están otros tutoriales ..... vaya.....

Juan Carlos Wilches Niño

student•

en mi experiencia laboral siempre he tenido problemas con las fechas (24 de diciembre de 2019) y el texto que habla de una uRL como (++unejemplo.com++) y algunos dispositivos moviles y clientes de correo me los pinta de color azul y les agrega el estado de over. ¿Hay alguna manera para evitar que eso ocurra de manera predeterminda?

Anderson Víctoria Tejada

student•

Hola, si estás haciendolo desde el codigo puedes colocarle una etiqueta de color al texto con el hipervinculo

Rubí Jiménez

student•

¡Hola! Me ha gustado un montón el curso. Tengo una duda, ¿es buena práctica si al inicio del documento agrego los estilos con la etiqueta <style>? o es ¿mejor si lo hago directamente en html? Gracias :D :O

Martha Muñoz

student•

Hola @rubijimenezmendoza, para la maquetación de emails la mejor práctica es manejar los estilos en línea con esto aseguras que el email se visualice correctamente en todos los clientes de correo. Con el uso de la etiqueta <style> se corre el riesgo que ese código sea ignorado por los preprocesadores de los clientes de correo, sobre todo por Gmail! Aquí puedes revisar la compatibilidad de la etiqueta <style>

Jeremy Bryan Icó Herrera

student•

Angélica Echeverry

student•

Pues lo hice exactamente a la profesora, y no se ve nada parecido. Lo hice de otro tema, repitiendo el video más de 20 veces y 2 veces el código, y no tienen nada de responsive mi resultado. Esperaba más explicación.

Sebastián Pascali Pasquale

student•

funcionan mal los servidores no carga bien el video, queda pillado.

BEATA ALEKSIEJUK

student•

Muchas gracias por el curso ! Aqui esta ejemplo del coreo ! https://github.com/beataaleksiejuk/Email

Luis Francisco Rascón Carrasco

student•

Carlos Rodríguez

student•

Wao, este curso es genial, he estado trabajando con css para web y no sabía la cantidad de trucos para los emails!

Anderson Víctoria Tejada

student•

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body style="margin: 0 auto;">
	<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#1c3643">
		<!-- Header -->	
			<!-- Inicio Logo -->
		<tr>
			<td align="center" style="padding-top: 20px; padding-bottom: 20px;">
				<a href="http://sgtnetworks.com" target="_blank" border="0" style="text-decoration: none;"> 
				<img src="images/logo.png" width="127" style="width: 127px; height: auto; display:block;" alt="Sona Green Technologies - Lider en infraestructura Cisco"></a>
			</td>
		</tr>
			<!-- Fin Logo -->

		<!-- Fin Header -->

			<!-- Contenido -->
		<tr>
			<td >
				<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
				<!-- Inicio Saludo -->
					<tr>
						<td height="20" bgcolor="#172c36" style="font-family: arial,sans-serif;font-size: 20px;color: #ffffff; text-align: center;">Hola, *Nombre*</td>
					</tr>
					  <!-- Fin Saludo -->

					  <!-- Inicio Imagen Destacado -->
					<tr>
						<td>
							<a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank" style="text-decoration: none;">
							<img src="images/contenido.png" alt="¡Qué necesita su red?" border="0" style="width: 100%;height: auto;display: block;">
							</a>
					</td>

					</tr>
					<!-- Fin Imagen Destacado -->

					<!-- Inicio Texto Destacado -->
					<tr>
						<td  style="padding-bottom: 20px;padding-top: 30px;padding-left: 10px;padding-right: 10px; font-family: arial,sans-serif;font-size: 20px;line-height: 26px; color: #ffffff; text-align: center;">Responda dos preguntas y cree una solución que pueda ayudarlo a cumplirla</td>
					</tr>
					<!-- Fin Texto Destacado -->

					<!-- Inicio CTA -->
					<tr>
						<td align="center" style="padding-top: 20px; padding-bottom: 20px;"><a href="https://www.cisco.com/c/m/en_us/solutions/enterprise-networks/solution-builder.html?oid=caten018587" target="a_blank" border="0" width="220" style="text-decoration: none; width: 220px">
							<img src="images/CTA.png" alt="Realizar test de examen de Red">
							</a>
						</td>
					</tr>
					<!-- Fin CTA -->
				</table>
			</td>
		</tr>
			<!-- Fin Contenido -->
			<!-- Footer-->
		<tr>
			<td>
				<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
					
					<!-- Inicio Redes Sociales -->
					<tr>
						<td>
							<table width="20%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="padding-top: 10px; padding-bottom: 10px;">
							<tr>
								<td><a href="https://www.facebook.com/Sona-Green-Tech-112390463449415/?view_public_for=112390463449415" target="a_blank" style="text-decoration: none;"><img src="images/face.png"></a></td>
								<td><a href="https://twitter.com/tw_sona" target="a_blank" style="text-decoration: none;"><img src="images/Twitter.png"></a></td>
								<td><a href="https://www.linkedin.com/company/sona-green-tech/about/?viewAsMember=true" target="a_blank" style="text-decoration: none;"><img src="images/Linkedin.png"></a></td>
								<td><a href="https://www.youtube.com/channel/UCR5fyMD7O4e4hLzL5CCUYHQ?disable_polymer=true" target="a_blank"><img src="images/Youtube.png"></a></td>
							</tr>
						</table>
						</td>
					</tr>
					<!-- Fin Redes Sociales -->
                       
					<!-- Inicio Info Marca -->
					<tr>
						<td style="text-decoration: none;" align="center" style="padding-top: 20px; padding-bottom: 20px;"><img src="images/sona.png" alt="Enviado desde Sona Green Technologies"></td>
					</tr>
					<!-- Fin Info Marca -->
					<!-- Inicio Legal -->
					<tr>
						<td style="padding-bottom: 0px;padding-top: 0px;padding-left: 1px;padding-right: 0px; font-family: arial,sans-serif;font-size: 10px;line-height: 26px; color: black; text-align: center;">Te enviamos este contenido porque haces parte de los Clientes Premium de Sona.
</td>
					</tr>
					<tr>
						<td style="padding-bottom: 0px;padding-top: 0px;padding-left: 1px;padding-right: 0px; font-family: arial,sans-serif;font-size: 10px;line-height: 26px; color: black; text-align: center;">Lamentamos que te vayas, pero puedes darte de baja <a style="text-decoration: none;" href="https://sona.us20.list-manage.com/unsubscribe?u=55135afb9cefa68f72742ad69&id=c009f6d09a&e=[UNIQID]&c=981799468b" target="a_blank"> aquí.</a></td>
					</tr>
					<!-- Fin Legal -->
				</table>
			</td>
		</tr>
		<!-- Footer-->


	</table>
	

</body>


</html>```

Estilos CSS para Plantillas de Email Escalables

Introducción y planeación

Diseño y Maquetación de Emails para Marketing Digital

Ventajas del Email Marketing y Estrategias de Optimización

Tipos de Emails y Estrategias de Marketing Digital

Técnicas de Desarrollo de Emails: Código, Builders y Frameworks

Estrategias de Email Marketing: Optimización y Segmentación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Creación de tu primera campaña en Mailchimp

Diseño de Email de Bienvenida en Mailship

Creación de listas de contactos en Mailchimp

Personalización de Campañas en Mailchimp: Segmentación y Diseño

Envío de Emails de Prueba y Finales en Mailchimp

Análisis de Reportes de Campañas en Mailchimp

Creación de Formularios Modales con Mailship para Suscripciones

Incorporación de Formularios de Suscripción en Landing Pages

Automatización de Correos de Bienvenida en Mailship

Segundo proyecto: Diseño de emails

Diseño de Emails Escalables y Responsivos

Buenas prácticas en diseño de emails para marketing

Diseño y Maquetación de Emails Promocionales en Photoshop

Diseño de Newsletters en Photoshop: Guía de Tres Columnas

Diseño de Emails Responsivos en Photoshop y Preparación para Código

Tercer proyecto: maquetación de email de promoción en técnica escalable

Maquetación de Emails Promocionales Escalables en Photoshop

Buenas prácticas en diseño y maquetación de emails

Creación de Plantillas de Email HTML Compatibles con Todos los Clientes

Inserción de Imágenes y Enlaces en Plantillas de Email HTML

Estilos CSS para Plantillas de Email Escalables

Creación de Campañas Promocionales en Mailchimp

Cuarto proyecto: maquetación de newsletter en técnica responsive

Diseño de Newsletters Responsivos en HTML5

Creación de Newsletter HTML con Imágenes y Links

Media Queries para Diseño Responsive en Email Marketing

Estilos CSS para Contenedores Responsivos en Plantillas de Email

Estilos CSS para Plantillas Responsivas de Email

Técnicas Avanzadas de Responsive Design para Móviles

Incorporación de Web Fonts en Plantillas de Correo Electrónico

Código condicional en correos para compatibilidad con Outlook

Pruebas de Envío de Plantillas Responsive con PutsMail

Estrategias para Integrar Videos en Emails de Forma Efectiva

Cierre

Diseño y Maquetación de Emails con Mailchimp