La semana pasada, nuestro compañero Félix Zapata impartió un charla en nuestras oficinas sobre ese concepto tan de moda últimamente entre los que diseñamos y desarrollamos páginas web,  que es el Diseño adaptado o Responsible Web Design.

Este concepto, no es nuevo, desde hace varios años se lleva estudiando, pero no ha sido hasta hace un par de años, con la aparición de los primeros terminales telefónicos inteligentes de Apple, cuando este concepto ha tomado relevancia, al universalizarse el uso de estos dispositivos entre la mayoría de los usuarios de la red y cambiar el modo de acceso de estos a Internet. Las empresas como la nuestra deben contemplar al menos cuatro tipos de dispositivos a la hora de desarrollar proyectos, a saber:

  • Pantallas de ordenador de escritorio
  • pantallas de ordenador portátil
  • Pantallas de tabletas
  • Pantallas de teléfonos inteligentes
  • Con su correspondiente resolución de pantalla y sus limitaciones o ventajas a la hora de mostrar el contenido.

Teniendo en cuenta estas plataformas, se muestra como algo embarazoso el hecho de tener que realizar múltiples desarrollos y diseños para multitud de dispositivos con sus particulares características y se hace necesario aplicar técnicas que nos permitan adaptar el núcleo de nuestro contenido y línea de diseño a los diversos anchos de pantalla y resoluciones trabajando una sola vez o las menos posibles.

Al respecto han surgido teorías como Mobile first o Desarrollo progresivo, promulgadas entre otros por Luke Wroblewski,  que indican que la primera línea de trabajo se debe basar en los más pequeños dispositivos para posteriormente adaptar lo que estos muestran al resto de resoluciones.

 Las caracterísiticas que definen esta corriente se basan en tres puntos:

La explosión de la movilidad: se hace necesario ir pensando en los dispositivos más pequeños como fuerza mayor de acceso a la red a corto plazo, debemos diseñar pensando en el mayor número de usuarios y estamos muy cerca de los días en los que el acceso a la red se base fundamentalmente en móviles y tabletas así que lo primero debe ser el móvil y el resto lo demás.

Los móviles te fuerzan a focalizar: al desarrollar para móviles nos centramos en los datos y acciones más importantes, no hay espacio para florituras gráficas ni largos chorros de contenido, esto fuerza al desarrollador o diseñador  a ser sintético. Si desarrollamos de esta manera ya tenemos una base sobre la que ir añadiendo capas gráficas y de contenido según dispongamos de más superficie visible para mostrarlos. Si son buenos para  móvil serán buenos para todo lo demás, en cambio si son buenos para pantallas de escritorio no siempre serán buenos para resoluciones más pequeñas.

Los móviles aumentan tus capacidades: la experiencia móvil es mucho más compleja y enriquecedora que la experiencia web tradicional, al contar con dispositivos capaces de mucho más allá del estatismo de los Pc, como son geolocalización, cámara de fotos, GPS, acelerómetro …etc. Comenzando la fase de desarrollo por estos dispositivos para una mejor y más completa experiencia de uso en resoluciones superiores.

Pero esta tendencia según Félix debería sustituirse por aquella denominada Content First, definida en este  artículo de Ethan Marcotte, muy ilustrativo al respecto, proponiendo soluciones basadas en el concepto de un cimiento de contenido flexible, que se pueda adaptar a múltiples escenarios, apoyado en:

  • rejillas flexibles
  • imágenes flexibles,
  • multimedia flexible y
  • elementos de diseño flexibles

 Todo ello, utilizando como herramienta las Media Query basadas en CSS3.

Debemos optar por situar el contenido como piedra angular del desarrollo y a partir de la misma ir construyendo los diferentes diseños acordes a las visualizaciones en cada dispositivo.

Debemos pensar muy bien el contenido, realizando una lista del mismo organizada de mayor a menor importancia,  con lo cual todo lo que figure en la lista de contenidos importantes deberá estar presente en todos los dispositivos, obviando lo prescindible a la hora de diseñar para pantallas más pequeñas, es decir, adaptando éste contenido a los distintos tipos de visualización, con el mínimo trabajo posible ayudándose de las Media Queries.

Utilizando:

  • Diseño y estructura flexible: A través del uso de valores proporcionales, como porcentajes y unidades em, y de las propiedades max-width y max-height en nuestro CSS, para lograr que los distintos elementos se adapten al tamaño del navegador. Teniendo muy en cuenta que ningún elemento gráfico marque la anchura del diseño, es decir no comenzar el diseño partiendo de limitaciones previas.
  • Multimedia Flexible: Debemos utilizar imágenes de fondo  escalables, composiciones con capas, recortando las imágenes muy grandes mostrando en los dispositivos más pequeños su parte fundamental y aligerándolas de peso optimizándolas. Debemos tener en cuenta que la carga de datos en móviles a través de 3G sigue siendo más lenta que desde LAN o Wifi.
  • Elementos Media Query de CSS3, aplicando una serie de filtros que te permiten establecer comportamientos de los elementos dependiendo de donde se van a mostrar, esto tiene como única pega que sólo funcionan en versiones de Explorer superiores a la 9, debiendo usar JavaScript en versiones anteriores. Para el resto de navegadores, ya sean Chrome, Firefox o Safari sí están disponibles estas tecnologías en sus últimas versiones más utilizadas.

Primero piensa el contenido que vas a sacar,y ten en cuenta que  todo lo que sea importante debe estar visible en todo tipo de navegadores y resoluciones. 

Como conclusión Félix apunta que el diseño adaptado debe tomarse como una forma de trabajo estandarizada que siempre se debe utilizar como norma de buena práctica en la gestión de todo tipo de proyectos, debemos realizar diseño adaptado por defecto, no venderlo como un plus al cliente.

En Tanta nos hemos tomado esto muy en serio y en todos los proyectos en los que hemos trabajado últimamente, además de todos los proyectos que tenemos en cartera  hemos puesto en práctica las técnicas de diseño adaptado reseñadas anteriormente.

Enlaces de interés:

Responsive web design: a project-management perspective

Responsive Web Design: What It Is and How To Use It

Diseño Sensible – Responsive Design

Media Queries

Responsive Web Design

A Responsive Design Approach for Navigation, Part 1

A Responsive Design Approach for Complex, Multicolumn Data