Diseño Responsivo

Desde el 2012, los teléfonos inteligentes y tabletas han superado el número de ordenadores portátiles o de escritorio en posesión de usuarios de la web. Debido a esto, ha surgido una nueva tendencia del diseño llamada diseño responsivo, que establece que reajustar el tamaño en que se muestra el sitio dependiendo el dispositivo en que se visualice no es suficiente, sino que el sitio debe adaptarse al tamaño y modo de empleo del dispositivo, logrando la mejor experiencia de visualización posible para el usuario. Algunos de estos dispositivos son: consolas de videojuegos, teléfonos inteligentes, televisiones inteligentes, computadoras portátiles, computadoras de escritorio y tabletas, entre otros.

Es muy importante diseñar correctamente las páginas de internet de una empresa, porque de esto dependerá la interacción del usuario con el sitio y si logra cumplir sus objetivos (obtener información, hacer una compra, compartir información etc.).

En términos generales, un buen diseño responsivo web debe estar adecuado a las necesidades, habilidades y objetivos de los usuarios, por lo tanto debe seguir un proceso similar al siguiente:

1. Panificación – (identificar los requerimientos del proyecto)

2. Diseño (modelado del usuario, diseño del concepto, definición de estilo, diseño visual responsivo)

3. Prototipado (Prototipos de baja fidelidad y prototipos de alta fidelidad)

4. Evaluación (métodos de inspección y métodos de test)

5. Implementación y Lanzamiento

Cabe mencionar que las fases de diseño, prototipado y evaluación están intricadamente relacionadas y pueden llegar a ser cíclicas si la primera vez que se realizan no se obtienen los resultados esperados.

Un buen diseño web de la tendencia antes mencionada también debe ser:

Comprensible

Que sea sencillo entender cómo está distribuida la información en el sitio.

Claro

Que tenga instrucciones claras o titulares obvios sobre lo que el usuario podría necesitar al visitar el sitio.

Amigable

Que sea fácil de usar para cualquier usuario, sin importar que sea la primera o la milésima vez que visita el sitio.

De fácil aprendizaje

Que sea lo suficientemente intuitivo para que una persona que no lo ha visto nunca pueda usarlo con facilidad.

Una gran ventaja de los diseños flexibles es no asumen las proporciones de la pantalla del dispositivo en el que se muestran, sino que se adaptan al tamaño del momento. Esto significa que modifican el tamaño de los elementos pero no las proporciones que mantienen entre sí con las dimensiones de la pantalla. Una técnica muy importante para implementar el diseño adaptable en algún sitio web es el acomodo fluido de la retícula:

Permite determinar los puntos de quiebre donde un sitio comienza a modificar el tamaño de los diferentes elementos como encabezados, imágenes y el cuerpo del texto.

Permite especificar el aspecto de un sitio al ser visualizado a través diferentes dispositivos. El diseño del ancho fijo se construye por medidas de pixeles específicos, mientras que el diseño fluido de la retícula se construye por porcentaje.

Para entenderlo mejor, se presenta a continuación un ejemplo de comparación entre ambos tipos de diseño:

Sin embargo, programar con proporciones en vez de medidas fijas no es lo único que debe hacerse para optimizar la experiencia del usuario sin importar el dispositivo. Aquí es en donde entra el módulo de CSS3 llamado ‘media queries’, que son una serie de órdenes incluidas en la hoja de estilos que permiten adaptar la representación del contenido de manera mucho más profunda y exhaustiva a características específicas del dispositivo, como la resolución de su pantalla o características de accesibilidad como el braille. Funciona básicamente por columnas entonces, dependiendo el tamaño y proporciones de la pantalla en que se visualizará el sitio, se modifica el número de columnas necesarias para distribuir apropiadamente la información visual: la resolución de una computadora de escritorio requiere cinco columnas, la de una tableta requiere cuatro y un teléfono inteligente de tamaño estándar requiere sólo tres. Desde el año 2012, es un estándar recomendado por la W3C y es el principio básico del diseño responsivo.

Esta tendencia fue creada y difundida por el diseñador y autor norteamericano Ethan Marcotte, y busca que se pueda visualizar una página web igual de bien en un dispositivo ‘viejo’ que en uno con tecnología de punta. Lo que lo hace tan funcional y popular hoy en día es que con una sola versión del código en HTML y CSS se cubren todas las resoluciones de pantalla y, por lo tanto, el sitio queda optimizado para todo tipo de dispositivos. También es muy útil porque ayuda a posponer o incluso evitar la necesidad de crear una aplicación para cada sistema operativo de dispositivos móviles, como iOS 8 o Android KitKat.

El diseño web adaptable ayuda a evitar redirecciones y los errores que se derivan de éstas, así como evitar los errores al acceder desde enlaces de las redes sociales o ‘social links’ desde cualquier aparato.

Como sólo aparece una URL para el sitio completo, es ideal para la optimización en motores de búsqueda porque facilita el análisis del sitio para Google y otros motores.