Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Alejandra Castellano
Desarrollo de Emails
Conecta:
@AleCastellano /AleCastellano
www.digitalresponse.es
2/38
Responsive Email Design
www.digitalresponse.es
3/38
www.digitalresponse.es
FALTA DE SOPORTE E INTERPRETACIÓN HOMOGÉNEA
EN DISTINTOS CLIENTES DE EMAIL
POSICIÓN CONSERVADORA
4/...
www.digitalresponse.es
¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
+50%
“Más de la mitad de los emails se abren en un móvil...
www.digitalresponse.es
¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
+15%
Tasa de click
Referencia
6/38
www.digitalresponse.es
¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
CTO +16%
Caso Tous
7/38
www.digitalresponse.es
¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE?
Analiza tu audiencia ¿dónde abren tus emails?
¿Cómo? Lit...
10/38
www.digitalresponse.es
DISEÑO
– Estructura de una columna: Es la que mejor funciona en móvil, ya que disponemos de un anch...
www.digitalresponse.es
DISEÑO
– Look Mobile:
12/38
www.digitalresponse.es 13/38
www.digitalresponse.es
MAQUETACIÓN
Fluido
Adaptativo
Responsive
14/38
www.digitalresponse.es
MAQUETACIÓN
Porcentajes + Tablas Anidadas + Media queries
No se trata de crear un mail “responsive”...
www.digitalresponse.es
MAQUETACIÓN
Porcentajes %
Generamos una interfaz fluida que se adapta al dispositivo
16/38
www.digitalresponse.es
MAQUETACIÓN
Tablas Anidadas
Generamos una estructura de tablas que se recolocan según el espacio de...
www.digitalresponse.es
MAQUETACIÓN
Media queries
Cambiamos las reglas CSS que se aplican según la resolución de la pantall...
www.digitalresponse.es
MAQUETACIÓN
WEB
≠
EMAIL
www.digitalresponse.es 19/38
www.digitalresponse.es
PROBLEMAS Y SOLUCIONES
www.digitalresponse.es 20/38
www.digitalresponse.es
Nota: CAMBIOS EN YAHOO
table[class=devicewidth]
{width: 320px!important;text-align:center!important...
www.digitalresponse.es
CASO PRÁCTICO
Media queries
Cambiamos las reglas CSS que se aplican según la resolución de
la panta...
www.digitalresponse.es
RECOMENDAMOS
Crear módulos reutilizables
www.digitalresponse.es 23/38
www.digitalresponse.es
CASO PRÁCTICO
Módulos: imagen
www.digitalresponse.es 24/38
www.digitalresponse.es
CASO PRÁCTICO
Módulos: texto -> contenedor centrado más estrecho
www.digitalresponse.es 1/38
www.digitalresponse.eswww.digitalresponse.es
CASO PRÁCTICO
26/38
www.digitalresponse.es
CASO PRÁCTICO
Módulos: imagen + texto – TABLAS ANIDADAS
www.digitalresponse.es 27/38
www.digitalresponse.eswww.digitalresponse.es 28/38
CASO PRÁCTICO
www.digitalresponse.eswww.digitalresponse.es
Visible Desktop/Oculto Móvil Oculto Desktop/Visible Móvil
29/38
ELEMENTOS OCU...
www.digitalresponse.eswww.digitalresponse.es
Oculto Desktop/Visible Móvil
30/38
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.eswww.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
31/38
www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es
Clientes sin soporte
de media queries
OPCIÓN 1
...
www.digitalresponse.eswww.digitalresponse.es
Clientes sin soporte de media queries: MOSTRAR VERSIÓN ESCRITORIO
37/38
ELEME...
www.digitalresponse.eswww.digitalresponse.es
Clientes sin soporte
de media queries
OPCIÓN 2
32/38
ELEMENTOS OCULTOS / VISI...
www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es
@media only screen and (max-width: 640px) {
div...
www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es
Clientes con soporte
de media queries y
display...
www.digitalresponse.eswww.digitalresponse.es 35/38
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es
ELEMENTOS OCULTOS / VISIBLES
www.digitalresponse.es 36/38
www.digitalresponse.es
ARTICULOS Y WEBS RECOMENDADOS
Email Client Market ShareEmail Client Market Share
Creando un sencill...
www.digitalresponse.es
GRACIAS
www.digitalresponse.es 38/38
Próxima SlideShare
Cargando en…5
×

Webinar: Responsive Email Design

2.295 visualizaciones

Publicado el

Optimiza tus emails para móvil aplicando el Responsive Email Design. Te damos las claves para adaptarte a esta tendencia y mejorar tus resultados con el email marketing

Publicado en: Marketing
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Webinar: Responsive Email Design

  1. 1. Alejandra Castellano Desarrollo de Emails Conecta: @AleCastellano /AleCastellano www.digitalresponse.es 2/38
  2. 2. Responsive Email Design www.digitalresponse.es 3/38
  3. 3. www.digitalresponse.es FALTA DE SOPORTE E INTERPRETACIÓN HOMOGÉNEA EN DISTINTOS CLIENTES DE EMAIL POSICIÓN CONSERVADORA 4/38
  4. 4. www.digitalresponse.es ¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE? +50% “Más de la mitad de los emails se abren en un móvil” Ya no es una opción, sino una prioridad. Referencia 5/38
  5. 5. www.digitalresponse.es ¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE? +15% Tasa de click Referencia 6/38
  6. 6. www.digitalresponse.es ¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE? CTO +16% Caso Tous 7/38
  7. 7. www.digitalresponse.es ¿NECESITAS QUE TUS EMAILS SEAN RESPONSIVE? Analiza tu audiencia ¿dónde abren tus emails? ¿Cómo? Litmus Analytics 8/38
  8. 8. 10/38
  9. 9. www.digitalresponse.es DISEÑO – Estructura de una columna: Es la que mejor funciona en móvil, ya que disponemos de un ancho muy reducido. – Botones y enlaces grandes: recordemos que pasamos de diseñar para un cursor a diseñar para un dedo y debe haber espacio suficiente para hacer click con facilidad. – Fuente: en algunos casos tendremos ajustar el tamaño de la fuente para una óptima legibilidad. – Look Mobile: debemos facilitar la experiencia del usuario adaptando el estilo del email a lo que está acostumbrado a ver en móvil. Coger convenciones ya establecidas para este tipo de dispositivos nos puede ayudar. Estas convenciones pueden ser iconos, ubicación de objetos… 11/38
  10. 10. www.digitalresponse.es DISEÑO – Look Mobile: 12/38
  11. 11. www.digitalresponse.es 13/38
  12. 12. www.digitalresponse.es MAQUETACIÓN Fluido Adaptativo Responsive 14/38
  13. 13. www.digitalresponse.es MAQUETACIÓN Porcentajes + Tablas Anidadas + Media queries No se trata de crear un mail “responsive”, sino uno, que se muestre usable y con una imagen consistente en todos los dispositivos posibles. 15/38
  14. 14. www.digitalresponse.es MAQUETACIÓN Porcentajes % Generamos una interfaz fluida que se adapta al dispositivo 16/38
  15. 15. www.digitalresponse.es MAQUETACIÓN Tablas Anidadas Generamos una estructura de tablas que se recolocan según el espacio del que disponen 17/38
  16. 16. www.digitalresponse.es MAQUETACIÓN Media queries Cambiamos las reglas CSS que se aplican según la resolución de la pantalla desde la que vemos el email. @media only screen and (min-width: 480px) and (max-width: 768px) { … } 18/38
  17. 17. www.digitalresponse.es MAQUETACIÓN WEB ≠ EMAIL www.digitalresponse.es 19/38
  18. 18. www.digitalresponse.es PROBLEMAS Y SOLUCIONES www.digitalresponse.es 20/38
  19. 19. www.digitalresponse.es Nota: CAMBIOS EN YAHOO table[class=devicewidth] {width: 320px!important;text-align:center!important;} Selectores de atributo → (ya no son necesarios) Yahoo soluciona sus problemas con las media queries www.digitalresponse.es 21/38
  20. 20. www.digitalresponse.es CASO PRÁCTICO Media queries Cambiamos las reglas CSS que se aplican según la resolución de la pantalla desde la que vemos el email. @media only screen and (max-width: 600px) { table.devicewidth {width: 480px!important;text-align:center!important;} table.devicewidth2 {width: 440px!important;text-align:center!important;} img.banner {width: 100%!important;} } @media only screen and (max-width: 480px) { table.devicewidth {width: 320px!important;text-align:center!important;} table.devicewidth2 {width: 280px!important;text-align:center!important;} } www.digitalresponse.es 22/38
  21. 21. www.digitalresponse.es RECOMENDAMOS Crear módulos reutilizables www.digitalresponse.es 23/38
  22. 22. www.digitalresponse.es CASO PRÁCTICO Módulos: imagen www.digitalresponse.es 24/38
  23. 23. www.digitalresponse.es CASO PRÁCTICO Módulos: texto -> contenedor centrado más estrecho www.digitalresponse.es 1/38
  24. 24. www.digitalresponse.eswww.digitalresponse.es CASO PRÁCTICO 26/38
  25. 25. www.digitalresponse.es CASO PRÁCTICO Módulos: imagen + texto – TABLAS ANIDADAS www.digitalresponse.es 27/38
  26. 26. www.digitalresponse.eswww.digitalresponse.es 28/38 CASO PRÁCTICO
  27. 27. www.digitalresponse.eswww.digitalresponse.es Visible Desktop/Oculto Móvil Oculto Desktop/Visible Móvil 29/38 ELEMENTOS OCULTOS / VISIBLES
  28. 28. www.digitalresponse.eswww.digitalresponse.es Oculto Desktop/Visible Móvil 30/38 ELEMENTOS OCULTOS / VISIBLES
  29. 29. www.digitalresponse.eswww.digitalresponse.es ELEMENTOS OCULTOS / VISIBLES 31/38
  30. 30. www.digitalresponse.es ELEMENTOS OCULTOS / VISIBLES www.digitalresponse.es Clientes sin soporte de media queries OPCIÓN 1 32/38
  31. 31. www.digitalresponse.eswww.digitalresponse.es Clientes sin soporte de media queries: MOSTRAR VERSIÓN ESCRITORIO 37/38 ELEMENTOS OCULTOS / VISIBLES
  32. 32. www.digitalresponse.eswww.digitalresponse.es Clientes sin soporte de media queries OPCIÓN 2 32/38 ELEMENTOS OCULTOS / VISIBLES
  33. 33. www.digitalresponse.es ELEMENTOS OCULTOS / VISIBLES www.digitalresponse.es @media only screen and (max-width: 640px) { div[id=hiddenmobile] {display:none!important;} } @media only screen and (max-width: 600px) { div#hiddenmobile {display:none!important;} } 33/38
  34. 34. www.digitalresponse.es ELEMENTOS OCULTOS / VISIBLES www.digitalresponse.es Clientes con soporte de media queries y display:none 34/38
  35. 35. www.digitalresponse.eswww.digitalresponse.es 35/38 ELEMENTOS OCULTOS / VISIBLES
  36. 36. www.digitalresponse.es ELEMENTOS OCULTOS / VISIBLES www.digitalresponse.es 36/38
  37. 37. www.digitalresponse.es ARTICULOS Y WEBS RECOMENDADOS Email Client Market ShareEmail Client Market Share Creando un sencillo email HTML Responsive (Nicole Merlin)Creando un sencillo email HTML Responsive (Nicole Merlin) Litmus CommunityLitmus Community Plantillas Responsive de ZurbPlantillas Responsive de Zurb Responsive Email PatternsResponsive Email Patterns Blog de Email Marketing de Digital ResponseBlog de Email Marketing de Digital Response www.digitalresponse.es 38/38
  38. 38. www.digitalresponse.es GRACIAS www.digitalresponse.es 38/38

×