Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 12/06/2013

Responsive Design: Diseño adaptativo de emails

Los dispositivos móviles cada día que pasa tienen más relevancia. Muchas son las recomendaciones que se dicen, algunas más interesantes que otras.

Hay quien dice que primero se deben hacer 2 versiones, una para escritorio y otra para móvil, y después adaptarlas a través de Media Queries. Otros, directamente son más partidiarios de metodologías Scrum o XP y predican el diseño simple pero eficaz.

Una de las cosas importantes a tener en cuenta es tener claro que lo que vamos a diseñar va a ser utilizado tanto en noteBooks como Smartphones, tanto en ordernadores de escritorio como en tablets, por ello, como decía, es fundamental, con diseños simples o más complejos, utilizar Media Queries. A partir de 1024x768 se debe considerar versión de escritorio. Entre 600 y 1024 debe considerarse diseño para Tablets y, por debajo de 600px, diseños móviles. En esta parte no debéis olvidar poner el atributo viewport de la etiqueta <meta> ya que la mayoría de los navegadores para móviles escalan las páginas HTML para que se adapten al dispositivo del usuario utilizando este atributo.

Otra cosa que siempre se recomienda es utilizar Flexible Grids y Layaouts fluidos porque han sido diseñados para ocupar el total disponible de pantalla del dispositivo que renderiza la página web. Además premiten que sus elementos se redimensionen si cambiamos la resolución o si visualizamos la página desde diferentes dispositivos.

Poner el contenido importante arriba ya que a la mayoría de los usuarios les molesta bastante tener que usar de forma constante el scroll de la pantalla y, eliminar el contenido no esncial en las versiones móviles

Diseñar botones con un tamaño sufuciente porque no olvidemos que, en los dispositivos móviles, el cursor es nuestro dedo.

Como siempre recomendamos nosotros, hacer diseños en Cross Browsing porque si algo falla siempre nos costará menos arreglarlo.

Mostrar las imágenes de forma adaptativa, o por lo menos, no establecer tamaños fijos, es decir, utilizar porcentajes.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.