¿Por qué hablar de Diseño Web Responsivo? Si eso estuvo de moda en el 2012, bueno, pues este tema no deja de tener actualizaciones como todos los temas de tecnología. De hecho es tan pertinente hablar de Diseño Web Responsivo como hablar de UX, no para entrar en una batalla de terminología, sino para desarrollar proyectos desde una perspectiva más amplia, ya que no podemos separar una buena experiencia de usuario sin tomar en cuenta un diseño web responsivo.
Ahora más que nunca, tenemos en el mercado una gran variedad de dispositivos móviles, y a diferencia de hace 4 años, ahora tenemos pantallas que van desde los 272 x 350 ppi hasta pantallas de 5,120 x 2880 ppi y todos los tamaños y variantes en medio. Aunado a esto, la resolución o densidad de pixel de 72 ppi, dejó de ser el único estándar desde que Apple, introdujo sus pantallas de alta resolución que alcanzan resoluciones hasta de 401 ppi en un iPhone 6+. El diseño web está tomando una nueva dimensión, ahora el contexto del usuario y el dispositivo con el que accede a la red, son otras variantes a tomar en cuenta para desarrollar un proyecto y ofrecer una mejor experiencia en la interacción con la información.
Según AMIPCI(Asociación Mexicana de Internet), hay 53.9 millones de usuarios conectados a la red, de los cuales el crecimiento de usuarios conectados a través de smartphones ya ha dejado atrás a los usuarios que se conectan desde computadoras de escritorio. También The Internet of Things, es una tendencia que incorpora nuevos dispositivos, desde relojes, computadoras de autos hasta lavadoras, pero, no hay que agobiarnos ya que es imposible tomar en cuenta todos los dispositivos y/o pantallas para diseñar un sitio.
Una metodología dentro del proceso de diseño, para afrontar esta gran diversidad de dispositivos es:
- Diseñar layouts flexibles o líquidos.
- Incorporar Media Queries en nuestro código.
- Tratar imágenes en diferentes resoluciones y dimensiones.
Ahora vamos por partes, una vez que tenemos definido las secciones y la funcionalidad de nuestro sitio, podemos utilizar herramientas gráficas como Illustrator y Photoshop. Dentro de estas aplicaciones definimos mínimo tres pantallas: desktop, tablet y smartphone. Aquí entra todo el «feeling y expertice» del diseñador web.
El diseñador es el que debe pensar en un layout flexible, es decir, un layout que se adapte a diferentes resoluciones sin perder consistencia, por ejemplo, para computadoras de escritorio, puede definir cuál será la resolución mayor para su diseño y como se comporta el layout hasta la menor resolución de escritorio, hasta hacer el siguiente cambio de dispositivo. Así hasta llegar al layout para smartphones donde se define cual es el tamaño mínimo de nuestro layout.
Una vez que tenemos definida una interfaz gráfica, debemos traducir todo a código, esto es la parte de maquetación, y aquí se divide nuevamente el proceso de diseño: por una parte debemos tener una estructura sólida en nuestro HTML, utilizando semántica adecuada para cada una de las secciones de una página o cada uno de los módulos; por otra, agregamos todo el diseño a través de CSS. En esta parte es donde incorporamos los Media Queries, que son instrucciones para indicar a nuestro sitio que diseño (CSS) debe desplegar dependiendo la resolución de pantalla del dispositivo.
Por último, el tratamiento de imágenes sigue siendo tierra de nadie, ya que aún no hay estándares adoptados por los usuarios, y aunque hay propuestas por parte de la W3C, como el <picture element>, los fabricantes de dispositivos cambian constantemente la densidad de pixeles en sus dispositivos, por ejemplo, el iPhone 3G tenía una densidad de 162 ppi, esto en el 2008 y el iPhone 6+ tiene una densidad de 401 ppi, en 8 años ha crecido más de la mitad la densidad de pixeles. Por esto es dificil implementar una solución al tratamiento de imágenes en diferentes dispositivos. El desarrollo tecnológico no va a la par del desarrollo de sitios web y aplicaciones. Además el tratamiento de imágenes no sólo tiene que ver con resoluciones de pantalla, también con la velocidad de ancho de banda de cada dispositivo, así como la latencia y el motor de render de cada navegador.
Para la parte gráfica hay algunos tips que podemos utilizar, por ejemplo Adobe Muse, tiene la opción de tratar gráficos para pantallas de alta resolución, utilizando una técnica relativamente simple a partir de la resolución de una imagen. Por ejemplo si tenemos una imagen que debe abarcar 300px de ancho en un layout, Muse pide que pongas una imagen del doble de tamaño (600px) para usarla en dispositivos retina display.
En la parte de código, vamos a tomar el mismo ejemplo, una imagen de 600px de ancho y al poner el ancho ya sea en HTML o en CSS poner la mitad o incluso usar porcentajes.
<img src=”foto.jpg width=”300px”>
<img src=”foto.jpg width=”100%”>
Esto no es la mejor solución, ya que, si el usuario tiene poco ancho de banda, está cargando datos innecesarios. Para eso podemos utilizar JavaScript, para cargar la imagen adecuada dependiendo del tipo de dispositivo.
En nuestro siguiente diplomado que inicia el próximo 16 de marzo, se ve como abordar este problema desde la parte gráfica hasta la parte de código. Por el momento estoy preparando un tutorial para tratar imágenes para web desde Adobe Photoshop y Adobe Illustrator, estén atentos 😉