Estilos CSS para Plantillas Responsivas de Email

Curso de Diseño y Maquetación para Emails

Contenido del curso

Introducción y planeación

Primer proyecto: cómo usar Mailchimp para tu estrategia

Segundo proyecto: Diseño de emails

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

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

Cierre

36
Diseño y Maquetación de Emails con Mailchimp
01:06 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:20

Estilos CSS para Plantillas Responsivas de Email

Curso de Diseño y Maquetación para Emails

Clase 30 de 36

Clase 30 / 36

Recursos

¿Cómo aseguramos una visualización responsiva?

Para garantizar que nuestro diseño sea plenamente compatible y visualmente atractivo en diferentes dispositivos, es crucial trabajar con porcentajes en los contenedores principales y definir adecuadamente los estilos en el CSS. Si has seguido los pasos correctamente, deberías observar que los textos y el CTA están en su sitio, aunque quizás tu plantilla no ocupe todavía el 100% de la pantalla. Para corregir esto, revisa el código y asegúrate de que el ancho está definido al 100% y no a 100 píxeles, ¡así lograrás tener una plantilla totalmente adaptativa!

Comprobar anchos de contenedores: Establecer anchos en porcentaje para una mayor flexibilidad.
Revisar el código: Identifica errores como definiciones de ancho incorrectas.
Mover elementos según el dispositivo: Asegúrate de que los elementos se reorganizan correctamente en tabletas y escritorios.

¿Cómo aplicar estilos a imágenes y textos?

En una interfaz adaptable, las imágenes y los textos son clave. Ajustar el tamaño y posición de elementos gráficos y escritos es vital para la experiencia del usuario. En este contexto, se han definido algunos ajustes importantes:

Estilos en imágenes: Asigna un ancho predeterminado y establece un tamaño máximo utilizando CSS. Para imágenes en el header, define el ancho y altura en sus proporciones.
Texto en el diseño: En lo referente a tipografía, usar fuentes como Arial y Sans Serif es una opción eficaz. Asegura un espacio cómodo entre líneas (line-height) y alinea el texto a la izquierda si así lo requiere el diseño.

¿Qué consideraciones tener para estilos de CTA?

Los botones de llamadas a la acción (CTA) son fundamentales en cualquier diseño web, pues guían al usuario hacia la acción deseada. Para crear CTAs visualmente coherentes con el diseño, tener en cuenta los siguientes puntos es clave:

Background y color de fuentes: Aplica un color de fondo que destaque. Por ejemplo, si el CTA debe destacarse, podrías usar el verde de la marca; acompáñalo de un texto en blanco.
Bordes y enlaces: No olvides los bordes redondeados. Y los enlaces deben replicar los estilos del texto para mantener la coherencia visual.
Ajustes de padding y margin: Revisa los espacios alrededor de los elementos, usando padding-top y padding-left específicamente, según se necesite.

¿Cómo mejorar la organización en columnas de blog?

Al diseñar plantillas que incluyen columnas, como en un blog, es fundamental aplicar estilos que destaquen los elementos sin que se vean apelotonados. Aquí algunas consideraciones:

Tamaño y alineación de imágenes: Fijar anchos para evitar deformaciones. Las imágenes en blogs pueden necesitar un ancho fijo para mantener consistencia, como 180 píxeles máximo.
Texto y espaciado: Utilizar el mismo enfoque en la tipografía, asegurando un line-height adecuado. El padding debe ser conservador para no sobrecargar el contenedor.

Estos ajustes no solo mejoran la estética, sino que también aseguran que el diseño se mantenga funcional y accesible en todos los dispositivos. ¡No dudes en experimentar hasta que logres el equilibrio perfecto!

Henry David Castillo Montoya

Hace 8 años

Ayuda, estoy tratando de hacer esto pero con el metodo de la clase pero no he podido

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

<style>


#PruebaDIV_1 {
    box-sizing: border-box;
    height: 299.484px;
    width: 264.984px;
    padding: 0px 15px;

}


#PruebaA_2 {

    text-decoration: none solid rgb(0, 123, 255);

}


#PruebaDIV_3 {

    box-sizing: border-box;
    cursor: pointer;
    height: 299.484px;
    position: relative;
    width: 234.984px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 5px 5px;

}

#PruebaDIV_4 {

    cursor: pointer;

}

#PruebaIMG_7 {

    vertical-align: middle;
    width: 234.984px;
    border-radius: 5px 5px 0 0;

}


#PruebaDIV_8 {

    position: absolute;
    text-align: center;
    top: 93.4844px;
    width: 234.984px;

}

#PruebaP_9 {

    color: rgb(255, 255, 255);
    display: inline-block;
    width: 75.2969px;
    background: rgb(255, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border-radius: 5px 5px 0 0;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    font-size: calc(12px + 4 * ((100vw - 360px) / 1560));
    margin: 0px;

}

#PruebaDIV_10 {
    padding: 15px;
}


#PruebaH4_11 {
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    font: normal normal 700 normal 24px / 28.8px "Encode Sans Semi Condensed", sans-serif;
    margin: 0px 0px 8px;

}



</style>

  </head>
  <body>

    <body>

      <div id="PruebaDIV_1">
      	<a href="https://www.qhubocali.com/asi-paso/un-temblor-volvio-a-sacudir-a-los-calenos/" id="PruebaA_2" display:block; </a>
      	<div id="PruebaDIV_3">
      		<div id="PruebaDIV_4">
      			<div>
      			</div><img src="https://www.qhubocali.com/wp-content/uploads/2019/01/WhatsApp-Image-2019-01-28-at-4.53.15-PM-310x155.jpeg" alt="Un temblor volvió a sacudir a los caleños" id="PruebaIMG_7" />
      			<div id="PruebaDIV_8">
      				<p id="PruebaP_9">
      					Así pasó
      				</p>
      			</div>
      		</div>
      		<div id="PruebaDIV_10">
      			<h4 id="PruebaH4_11">
      				Un temblor volvió a sacudir a los caleños
      			</h4>
      		</div>
      	</div>
      </div>

  </body>
</html>

Martha Muñoz

Hace 8 años

Hola @davidcastillod, para seguir el método de la clase debes recordar las buenas prácticas para emails en código. No son las mismas reglas que maquetar un sitio web, para email debes diagramar en tablas y usar los estilos en línea.

Comentarios (10)10 comentarios

Karen Gómez

Hace 6 años

Julián Cárdenas

Hace 2 años

Francisco Encabo Servián

Hace 4 años

Mercy María Ix Ballote

LEONEL TORRES GARCIA

Hace 7 años

julian orrego

David Aguilera

Hace 5 años

Henry Giovanny Guzmán Ordoñez

Pablo de los Santos

Kenell Rivera Quiñonez

Juan Jose Tibaldo

Carlos Mariscal

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

Estilos CSS para Plantillas Responsivas de Email