---
title: "Responsive email: el diseño adaptativo en los correos electrónicos"
description: "Responsive email: el diseño adaptativo en los correos electrónicos"
---

[Blog de la agencia de marketing digital Elogia](https://blog.elogia.net)

# [Responsive email: el diseño adaptativo en los correos electrónicos](https://blog.elogia.net/responsive-email-el-diseno-adaptativo-en-los-correos-electronicos/)

 Escrito por [Jana Izern](https://blog.elogia.net/author/jana-izern) | 10 de mayo de 2013, 16:05:42 Z

El diseño de los emails también debe ser [responsivo](http://www.elogia.net/blog/responsive-web-design-seamos-flexibles/). Con aproximadamente una **tasa de apertura del 20%**\* en dispositivos móviles (y subiendo), el **diseño responsive** de [los emails](http://www.elogia.net/blog/mittum-bbdd-segmentar-por-resultados/) ya ha dejado de ser un tema “que tenemos que mirar”, y ha pasado a ser algo totalmente **prioritario**: “para ya” ;)

Nuestra primera recomendación a la hora de diseñar un correo electrónico es hacer 2 bocetos: uno para **web** y otro para [móvil](http://www.elogia.net/blog/emma-solutions-omexpo-2013/). De esta manera ya tendremos claro desde el principio la forma en la que **se adaptará la creatividad en cada dispositivo** (ordenador, [tablet](http://www.elogia.net/blog/quiero-una-tablet/), smartphone...) y tendremos claro como maquetarlo.

Teniendo esto en mente, os damos algunos consejillos. ¡Vamos allá!

- **Keep it simple!**  
  La primera cosa a tener en cuenta, tanto en el diseño como en el código HTML es la **simplicidad**. Una columna mejor que dos; si podemos **quitar información redundante**, la quitamos; call to action bien claro y visible...
- **Del cursor al dedo**  
   No olvidemos que no es lo mismo hacer clic con un cursor que con un dedo. Por ello, intentemos que los **botones** tengan un tamaño suficientemente grande como para poder ser tocados por un dedo. Nosotros recomendamos un **alto de unos 45px**.
- **Lo importante, arriba**  
   Al tener la **limitación de ancho**, es muy probable que [el e-mail](http://www.elogia.net/blog/mittum-bbdd-segmentar-por-resultados/)se alargargue. Para evitar que el usuario no vea la información más importante, es mejor situarla **al principio**.
- **Mediaqueries**  
   Las *mediaqueries* son una potente **herramienta para adaptar nuestro contenido a los diferentes dispositivos**. Además son muy fáciles de utilizar, solo tenemos que definirlos en la hoja de estilos y a partir de ahí jugar con los elementos.
- **Flexibilidad**  
   Un diseño flexible combinado con los *mediaqueries* hará que nuestro diseño se adapte a [cualquier dispositivo](http://www.elogia.net/blog/responsive-web-design-seamos-flexibles/).
- **Si lo necesitas, esconde el contenido no esencial**  
   Para las resoluciones de pantalla más pequeñas podemos aplicar una **clase especial** para que los elementos menos importantes se escondan.
- **Hay cosas que no cambian**  
   Como siempre, debemos **seguir utilizando tablas**, no utilizar estilos en línea, no utilizar javascript... Vamos, lo que todos ya sabemos :)
- **Después de todo...**  
   ¿Hay algo que no funciona? Revisa que tengas puesto el *meta viewport* en el \<head\> de tu HTML...

Finalmente, decir que con todas éstas medidas conseguiremos que un **email responsive** pero siempre estaremos supeditados a las limitaciones de algunos webmails... Incluso en algunos casos nos lo podrían enviar a SPAM :(. Conociendo los pros y contra, toca valorar si se prefiere que el email se vea de forma óptima en **cualquier dispositivo**; o si se prefiere [asegurar la recepción al 100%](http://elogia.net/servicios/performance-marketing/), aunque luego la visualización en algunos dispositivos no sea la ideal... Ya lo dicen, “no se puede tener todo en ésta vida”! ;)

\* Datos de apertura de una *newsletter* durante el mes de enero de 2013, suma de las aperturas en Blackberry, [Mobile Safari](http://www.elogia.net/blog/iphone5-apple-keynote/) y Android.

[Ver post completo](https://blog.elogia.net/responsive-email-el-diseno-adaptativo-en-los-correos-electronicos/)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Jana Izern"
  },
  "dateModified" : "2017-03-01T12:30:17.755Z",
  "datePublished" : "2013-05-10T16:05:42Z",
  "headline" : "Responsive email: el diseño adaptativo en los correos electrónicos",
  "image" : {
    "@type" : "ImageObject",
    "height" : 400,
    "url" : "https://cdn2.hubspot.net/hubfs/1986236/blog-files/web-design.png",
    "width" : 1600
  },
  "mainEntityOfPage" : "https://blog.elogia.net/responsive-email-el-diseno-adaptativo-en-los-correos-electronicos/",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60.0,
      "url" : "https://cdn2.hubspot.net/hubfs/1986236/Emails/logo_elogia-1.png",
      "width" : 56.540756
    },
    "name" : "Blog de Elogia"
  }
}
```