SlideShare a Scribd company logo
1 of 18
Download to read offline
<Maquetación
de emails />
y cómo no morir en el intento...
Viajemos
en el tiempo…
Vayamos a los
inicios del
internet
Maquetar emails siempre ha sido como
crear páginas web en los primeros tiempos de internet:
● Maquetación con tablas
● Estilos inline
● Resolución máxima de 600-800 px
● No se puede usar Javascript
● más limitaciones
● y más limitaciones...
● Muchísimas líneas,
● Poco legible
● Difícilmente mantenible
El código HTML final resulta bastante sucio:
¿Por qué tanto problema con la maquetación de emails?
Gran cantidad dispositivos y programas para revisar el correo:
aplicaciones nativas para móviles, aplicaciones para desktop, aplicaciones web.
fuente: webdesign.tutsplus.com
La mayoría de la gente revisa su correo en el móvil:
fuente: litmus.com
Muchos clientes de correo no soportan media-queries:
fuente: mailchimp.com
Regla de oro para evitar la frustración:
fuente: foundation.zurb.com
Algunas pautas a seguir:
fuente: mailchimp.com
Consejos para no volverse loco en el intento:
● No empezar a maquetar desde cero
● Utilizar alguna plantilla:
○ Mailchimp
○ Sendwithus
○ Themeforest
● O mejor aún, el framework para emails de Foundation
● Testear, testear, testear...
Herramientas para testear:
● Litmus (de pago)
Herramienta específica para testear emails.
● Putsmail (gratuita)
Para hacer pruebas sencillas y rápidas.
● Mailchimp (gratuita hasta cierto límite)
Herramienta para hacer envío de emails. Permite
descargar plantillas, subir las propias y hacer pruebas
de envío (limitadas por día).
Foundation al rescate:
El paquete facilita mucho el trabajo, ya que incluye:
● Gulp
● Inky HTML para no tener que maquetar en tablas
(aunque el HTML final son tablas)
● Sass
● Inliner
● BrowserSync
● Image Compression
Empezando con Foundation:
Instalamos la línea de comandos de Foundation:
npm install --global foundation-cli
Instalamos el framework:
foundation new --framework emails
Dentro de la carpeta del proyecto arrancamos el servidor:
npm start
Escribiendo Inky HTML:
-Inky-
-HTML-
Etiquetas disponibles:
Inky breakpoints:
@media only screen and (max-width: #{$global-breakpoint}) {}
Un solo breakpoint los 596px o más pequeño.
Para usar este breakpoint desde nuestro archivo sass:
¡Manos a la obra! Ahora solo queda empezar a maquetar :-)
<Maquetación
de emails />
Fernanda Walker
Diseñadora UX/UI & Front-end
fernandawalker.com

More Related Content

What's hot

Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...JuanKa Díaz - jdevelopia
 
Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoDiego Cardozo
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -IntroducciónOscar Josué Uh Pérez
 
Hosting: Cuál es el apropiado para mi negocio en Internet
Hosting: Cuál es el apropiado para mi negocio en InternetHosting: Cuál es el apropiado para mi negocio en Internet
Hosting: Cuál es el apropiado para mi negocio en InternetInterlat
 
Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaverSiany Cox
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intentoDiego Cardozo
 
Curso Online de Prestashop: Tu Negocio en la Red
Curso Online de Prestashop: Tu Negocio en la RedCurso Online de Prestashop: Tu Negocio en la Red
Curso Online de Prestashop: Tu Negocio en la RediLabora
 
¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?aitorgr
 
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...wpargentina
 
Masterclass - Cómo comunicar tu idea al mercado con Wordpress
Masterclass - Cómo comunicar tu idea al mercado con WordpressMasterclass - Cómo comunicar tu idea al mercado con Wordpress
Masterclass - Cómo comunicar tu idea al mercado con WordpressToni Padrell
 
Fundamentos teóricos
Fundamentos teóricosFundamentos teóricos
Fundamentos teóricosLuis Nickolas
 

What's hot (15)

Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
Buenas practicas para nuestros desarrollos word press por JuanKa Díaz - WC Gr...
 
Optimizar performance sin morir en el intento
Optimizar performance sin morir en el intentoOptimizar performance sin morir en el intento
Optimizar performance sin morir en el intento
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -Introducción
 
Hosting: Cuál es el apropiado para mi negocio en Internet
Hosting: Cuál es el apropiado para mi negocio en InternetHosting: Cuál es el apropiado para mi negocio en Internet
Hosting: Cuál es el apropiado para mi negocio en Internet
 
Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaver
 
Testeando performance sin morir en el intento
Testeando performance sin morir en el intentoTesteando performance sin morir en el intento
Testeando performance sin morir en el intento
 
Curso Online de Prestashop: Tu Negocio en la Red
Curso Online de Prestashop: Tu Negocio en la RedCurso Online de Prestashop: Tu Negocio en la Red
Curso Online de Prestashop: Tu Negocio en la Red
 
¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?¿Por qué usar frameworks javascript?
¿Por qué usar frameworks javascript?
 
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
WordPress WPO: Consejos y Herramientas (Federico Álvarez - Meetup Bs. As. Oct...
 
Masterclass - Cómo comunicar tu idea al mercado con Wordpress
Masterclass - Cómo comunicar tu idea al mercado con WordpressMasterclass - Cómo comunicar tu idea al mercado con Wordpress
Masterclass - Cómo comunicar tu idea al mercado con Wordpress
 
Fundamentos teóricos
Fundamentos teóricosFundamentos teóricos
Fundamentos teóricos
 
Experiencias trabajando para agencias y clientes
Experiencias trabajando para agencias y clientesExperiencias trabajando para agencias y clientes
Experiencias trabajando para agencias y clientes
 
Hosting Para Novatos
Hosting Para Novatos
Hosting Para Novatos
Hosting Para Novatos
 
In 26
In 26In 26
In 26
 
Edwin
EdwinEdwin
Edwin
 

Similar to Maquetación email (20)

Cómo podemos ganar 80 minutos al día - parte práctica
Cómo podemos ganar 80 minutos al día - parte prácticaCómo podemos ganar 80 minutos al día - parte práctica
Cómo podemos ganar 80 minutos al día - parte práctica
 
Consejos para el HTML
Consejos para el HTMLConsejos para el HTML
Consejos para el HTML
 
HERRAMIENTAS INFORMATICAS I ADMINISTRACION DE EMPRESAS
HERRAMIENTAS INFORMATICAS I ADMINISTRACION DE EMPRESAS HERRAMIENTAS INFORMATICAS I ADMINISTRACION DE EMPRESAS
HERRAMIENTAS INFORMATICAS I ADMINISTRACION DE EMPRESAS
 
Presentación: Aplicación de evaluaciones digitales
Presentación: Aplicación de evaluaciones digitalesPresentación: Aplicación de evaluaciones digitales
Presentación: Aplicación de evaluaciones digitales
 
Manual html
Manual htmlManual html
Manual html
 
Manualhtml
ManualhtmlManualhtml
Manualhtml
 
Manual html
Manual htmlManual html
Manual html
 
Html basico
Html basicoHtml basico
Html basico
 
Correo elctronico (outlook) 2
Correo elctronico (outlook) 2Correo elctronico (outlook) 2
Correo elctronico (outlook) 2
 
Mandar
MandarMandar
Mandar
 
DEBER
DEBERDEBER
DEBER
 
Jesus maria-fernanda
Jesus  maria-fernandaJesus  maria-fernanda
Jesus maria-fernanda
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Unidad III
Unidad IIIUnidad III
Unidad III
 
UNIDAD III
UNIDAD IIIUNIDAD III
UNIDAD III
 
Unidad III
Unidad IIIUnidad III
Unidad III
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Correo electrónico 3 hemi
Correo electrónico 3 hemiCorreo electrónico 3 hemi
Correo electrónico 3 hemi
 
Actividad 1
Actividad 1Actividad 1
Actividad 1
 

Recently uploaded

Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfSharonSmis
 
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfTÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfkevinramirezd069bps
 
Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 2024Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 20242024 GCA
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfSharonSmis
 
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfINFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfFlorMezones
 
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECPLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECESTADISTICAHDIVINAPR
 
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfCARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfsolidalilaalvaradoro
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................RebecaVera12
 
dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.JimenaPozo3
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDElenitaIriarte1
 
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdfSSIETETO
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfjuandavidbello432
 
Plantilla árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptxPlantilla árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptxYasmilia
 
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfCRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfpaulmaqueda395
 
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...collagedesign18
 
Que es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxQue es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxYeissonRINCONRIVERA
 
abecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearabecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearNoemiCARABAJAL
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfYesiRoh
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfTpicoAcerosArequipa
 
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...UNACH - Facultad de Arquitectura.
 

Recently uploaded (20)

Diseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdfDiseño y concepto DOC-20240412-WA0023..pdf
Diseño y concepto DOC-20240412-WA0023..pdf
 
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdfTÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
TÉCNICAS GRÁFICAS PARA ARQUITECTOS Y DISEÑADORES.pdf
 
Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 2024Hitos de la Historia de la universidad de Cartagena 2024
Hitos de la Historia de la universidad de Cartagena 2024
 
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdfDiseño ( concepto-caracteristicas y herramientas para el diseño.pdf
Diseño ( concepto-caracteristicas y herramientas para el diseño.pdf
 
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdfINFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
INFORME SOBRE EVALUACIÓN DIAGNÓSTICA MARZO 2024 TERCERO.pdf
 
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR ECPLANTILLA POWER POINT EL NUEVO ECUADOR EC
PLANTILLA POWER POINT EL NUEVO ECUADOR EC
 
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdfCARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
CARACTERIZACIÓN MEDICINA ALTERNATIVA Y TERAPIAS COMPLEMENTARIAS.pdf
 
PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................PPT - EFECTO NETFLIX.pptx ..........................
PPT - EFECTO NETFLIX.pptx ..........................
 
dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.dia del niño peruano para cartulina.pdf.
dia del niño peruano para cartulina.pdf.
 
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDDREVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
REVESTIMIENTON PROCESO CONSTRUCTIVO DDDDDDDDD
 
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
658953840-5-Etapas-Del-Proyecto-de-Emprendimiento.pdf
 
Comandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdfComandos Autocad Español Autodesk Autocad.pdf
Comandos Autocad Español Autodesk Autocad.pdf
 
Plantilla árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptxPlantilla árbol de problemas psico..pptx
Plantilla árbol de problemas psico..pptx
 
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdfCRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
CRITERIOS_GENERALES_DE_ISOPTICA_Y_ACUSTI.pdf
 
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
Partes-de-la-noticia como aspecto de gran importancia en el Diseño Editorial ...
 
Que es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptxQue es un sistema integrado de Seguridad.pptx
Que es un sistema integrado de Seguridad.pptx
 
abecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorearabecedario cursiva para imprimir y colorear
abecedario cursiva para imprimir y colorear
 
Duvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdfDuvalin día del niño para negociosss.pdf
Duvalin día del niño para negociosss.pdf
 
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdfMaterial de Apoyo - Acelerador de Carrera con Power BI.pdf
Material de Apoyo - Acelerador de Carrera con Power BI.pdf
 
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
Parque lineal Los Lirios en las márgenes del arroyo Navajuelos, en San Cristó...
 

Maquetación email

  • 1. <Maquetación de emails /> y cómo no morir en el intento...
  • 3. Vayamos a los inicios del internet
  • 4. Maquetar emails siempre ha sido como crear páginas web en los primeros tiempos de internet: ● Maquetación con tablas ● Estilos inline ● Resolución máxima de 600-800 px ● No se puede usar Javascript ● más limitaciones ● y más limitaciones...
  • 5. ● Muchísimas líneas, ● Poco legible ● Difícilmente mantenible El código HTML final resulta bastante sucio:
  • 6. ¿Por qué tanto problema con la maquetación de emails? Gran cantidad dispositivos y programas para revisar el correo: aplicaciones nativas para móviles, aplicaciones para desktop, aplicaciones web. fuente: webdesign.tutsplus.com
  • 7. La mayoría de la gente revisa su correo en el móvil: fuente: litmus.com
  • 8. Muchos clientes de correo no soportan media-queries: fuente: mailchimp.com
  • 9. Regla de oro para evitar la frustración: fuente: foundation.zurb.com
  • 10. Algunas pautas a seguir: fuente: mailchimp.com
  • 11. Consejos para no volverse loco en el intento: ● No empezar a maquetar desde cero ● Utilizar alguna plantilla: ○ Mailchimp ○ Sendwithus ○ Themeforest ● O mejor aún, el framework para emails de Foundation ● Testear, testear, testear...
  • 12. Herramientas para testear: ● Litmus (de pago) Herramienta específica para testear emails. ● Putsmail (gratuita) Para hacer pruebas sencillas y rápidas. ● Mailchimp (gratuita hasta cierto límite) Herramienta para hacer envío de emails. Permite descargar plantillas, subir las propias y hacer pruebas de envío (limitadas por día).
  • 13. Foundation al rescate: El paquete facilita mucho el trabajo, ya que incluye: ● Gulp ● Inky HTML para no tener que maquetar en tablas (aunque el HTML final son tablas) ● Sass ● Inliner ● BrowserSync ● Image Compression
  • 14. Empezando con Foundation: Instalamos la línea de comandos de Foundation: npm install --global foundation-cli Instalamos el framework: foundation new --framework emails Dentro de la carpeta del proyecto arrancamos el servidor: npm start
  • 16. Inky breakpoints: @media only screen and (max-width: #{$global-breakpoint}) {} Un solo breakpoint los 596px o más pequeño. Para usar este breakpoint desde nuestro archivo sass:
  • 17. ¡Manos a la obra! Ahora solo queda empezar a maquetar :-)
  • 18. <Maquetación de emails /> Fernanda Walker Diseñadora UX/UI & Front-end fernandawalker.com