¿Ya te diste cuenta de las diferencias de un sitio o blog cuando entras desde la computadora, la Tablet o el celular? Hasta hace poco tiempo, el único medio para navegar por internet era a través de la computadora de escritorio. Hoy el escenario es diferente. Con el creciente número de adeptos a las tablets o smartphones, insertos en una sociedad cada vez con menos tiempo y que prioriza el acceso remoto a la información, el contenido puede ser visualizado en pantallas de 2” a 5” (celulares), de 6” a 11” (tablets) y hasta en TVs de 50”.

Para atender esta realidad e impactar a mayor número de personas, el contenido debe ser formateado de acuerdo con las más variadas resoluciones de pantalla. Esta adaptación que refiere a la resolución de pantalla de cada uno de los dispositivos en el cual el contenido es accesado, es conocido como Diseño Responsivo.

Como el propio nombre lo indica, el diseño responsivo alude al tamaño de la pantalla y se adapta de la mejor forma, o sea, no necesitas crear dos sitios separados. Basta un único sitio que será adaptado para el móvil o desktops.

Entonces lo que más importa en este concepto, aplicado por el pionero Ethan Marcotte, no es el tamaño de la pantalla pero sí la resolución. Debe ser tenida en cuenta a la hora de planear el diseño, ya que la resolución de un iPhone, por ejemplo, se puede aproximar a la de una computadora. Para ayudar en la tarea de detectar las características de los medios de acceso para que el contenido pueda ser visto de diversas formas y en diferentes contextos, podes utilizar las Media Queries, también conocidas @media.

Entendé el concepto de Media Queries

Los Media Queries son derivados de los Media Types, concepto utilizado anteriormente para definir el formato CSS para los diferentes medios de acceso.

La traducción literal de Media Queries es “consulta de medios”. En otras palabras, es un conjunto de estilos basados en CSS3, que actúan como condiciones o reglas dinámicas, y guían al visitante de tu sitio o newsletter de acuerdo con el dispositivo que estuviera usando para accederlo, tornando la lectura mas legible en diferentes tamaños de pantalla.

· All: para todos los dispositivos.

· Braille: para dispositivos táctiles.

· Embossed: para impresión en braille.

· Handheld: para dispositivos móviles, con pantallas pequeñas y conexión limitada a internet.

· Print: para impresión en papel.

· Projection: para presentaciones como PPS.

· Screen: para monitores o dispositivos con pantallas coloridas y alta resolución.

· Speech: para sintetizadores de voz.

· Tty: para dispositivos como como Teletypes e Terminais.

· TV: para dispositivos como televisores.

Además del tipo de dispositivo, es posible definir tamaño, orientación, proporción o resolución, garantizando mayor precisión cuando el CCS fuera aplicado.

Notá que en los ejemplos anteriores, el primero está destinado a dispositivos móviles con pantalla pequeña, mientras que el segundo contempla una computadora de pantalla grande. La resolución, en cambio, no fue el tema central, generando problemas para dispositivos móviles como iPhone, por ejemplo, de alta resolución. Por eso se adoptaron los Media Queries, ya que aquí es definido el formato CSS para escenarios específicos.

En este ejemplo, el formato será aplicado en aparatos con alta resolución y con un largo (width) máximo de 480px. Además, hay una lista de características que pueden ser utilizadas para indicar los dispositivos: device-width, height, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan y grid. Existen también tres operadores lógicos para restringir o ampliar el alcance del formato: not, o (puede ser sustituido por una coma) y only.

Después de definir los diferentes comportamientos y formatos para cada tipo de dispositivo, tenés que planear un layout amigable, manteniendo la misma línea visual y el contenido para todos los aparatos. Un buen ejemplo es A List a Part. Aquí, podes ver una compilación que reúne 50 modelos de buenas prácticas. Otro sitio legal que trae una serie de GIFs con algunos conceptos visuales de diseño responsivo es Froont.

Al final, además de adaptarse a la pantalla que estás utilizando, el diseño responsivo se modifica para mejorar su usabilidad.

Cómo aplicar el diseño responsivo en email marketing

El mail está llegando definitivamente, y con fuerza, al móvil. El porcentaje de mails abiertos en dispositivos móviles, según el reporte de Return Path, fue de 60% (20% solamente mediante el iPad). Número que podría ser mayor si las campañas fueran optimizadas para atender a ese público. Esto pasa porque los usuarios de Smartphones y tablets también consumen información vía desktop, o sea, una experiencia multiplataforma.

Estudios también indican que las personas miran sus smartphones, en promedio, 150 veces al día. Otro dato importante que debe ser tenido en cuenta es que el 80% de los usuarios borran mails que no se adaptan a sus aparatos.

En la creación de campañas de email marketing, el objetivo es promover la mejor experiencia de navegación posible al usuario a través de un newsletter más atractivo para los dispositivos móviles, generando mayor participación y clics, además de servir como garantía de acceso a la información independiente del medio elegido.

Podes ofrecer una nueva forma de navegación, aumentar o disminuir fuentes, cambiar colores, rediseñar destaques (menú, sidebar…), alterar u ocultar contenido.

Primero tenés que tener en cuenta cada uno de los dispositivos móviles, no importa la marca o cuán desconocido sea. Por eso, cada detalle será de extrema importancia para que el diseño funcione plenamente.

· Pensá en el tamaño mínimo de la fuente para el texto.

· Para íconos cliqueables, el tamaño mínimo recomendado es de 44x44 pixeles, así la chance de que el usuario cliquee fuera del área o en otro ícono sea menor, sin contar que también es una forma de mejorar la experiencia de navegación.

· Optá por medidas en porcentaje para que se puedan ajustar independientemente de los tamaños de pantallas.

· Para desktops, el largo de un template debe tener 640px, inclusive con la posibilidad de dividir el contenido en columnas. Para el móvil, lo ideal es utilizar solo una columna debido al tamaño reducido de la pantalla, la cual podría perjudicar a la lectura.

No te olvides de probar el diseño responsivo en todos los proveedores de mail, inclusive en diferentes dispositivos móviles para asegurar que las cosas salgan como las planeaste.

Este tipo de mail es compatible con: iOS Mail app, Android 4.x Email (OEM) app, Windows Phone 7.5, BlackBerry OS7 y BlackBerry Z10. Y es incompatible con: iPhone Gmail app, iPhone Mailbox app, iPhone Yahoo! Mail app, Android Gmail app, Android Yahoo! Mail app, BlackBerry OS5, Windows Mobile 6.1, Windows Phone 7 y Windows Phone 8.

Por lo tanto, presentar un layout adecuado a cada tipo de dispositivo no es ya un servicio de lujo o diferencial, sino un elemento fundamental para promover una mejor experiencia de usabilidad y acceso al usuario. Además aumenta la tasa de clics y, consecuentemente, la lectura.

Mucho puede venir por delante aunque no lo podamos imaginar, pero lo que es cierto hoy es que no podemos restringir al diseño a los 1024 pixeles de largo de un desktop. A través del diseño responsivo, el mail puede ser simplificado a punto de generar una lectura agradable y mejorar las interacciones por medio de pantallas pequeñas.