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.