Sin dudarlo, si hoy día tenemos que nombrar alguna técnica o tecnología candente dentro del mundo del desarrollo web, el “Responsive Design” estaría entre el top 10, incluso, probablemente entre el top 5. Junto a otras/os que también son trendy, como javascript, nodejs, html5…

Y es que en desarrollo también hay modas, y aunque algunas de ellas son totalmente descartables, otras son realmente importantes, y el Responsive Design es una de ellas. Con tanto tipo de dispositivo y navegador, tamaños, orientaciones, etc… se hace imprescindible entender esta técnica.

¿Por qué responsive design?

Supongo que puede haber más razones, pero así de primeras lo atribuiría todo a la experiencia de usuario y a los diferentes dispositivos actuales.

Es decir, hace años, cuando se navegaba siempre desde un ordenador, las resoluciones eran bastante claras y se podía estandarizar una medida para web sin demasiados problemas, todos programábamos/maquetábamos en esas medidas, y todo el mundo feliz (bueno, es verdad, en esa época estaba Internet Explorer 6 que hacía que nuestra felicidad se tornara ira en algunos momentos).

Pero, llegan los dispositivos móviles, laptops, miniportátiles, tablets… bueno, ya sabéis, seguro que quien más quien menos que está leyendo esto posee algunos de ellos (o todos). Y éstos, nos obligan a pensar qué pasa con el usuario.

¿Por qué tiene que tener scrolls horizontales, o tipografías grandes o pequeñas, ilegibles, o iconos que ocupan la pantalla casi entera…?

Pues eso mismo, como diría Mourinho, “¡¿puqué?!”

De ahí la respuesta al porque del Responsive Design, el usuario, su experiencia, poder acceder desde diferentes dispositivos y que su experiencia de navegación no se vea afectada en detrimento de una u otra configuración de pantalla.

¿Cómo se llegó a ello?

Al principio, casi ni se sabía qué era, o cómo hacerlo. De hecho, el paso intermedio que casi todo el mundo asumió, es el uso de algún framework para mostrar una versión móvil de la web. Lo que se suele llamar webApp, pero poco a poco, muchos nos dimos cuenta de que duplicar… no es el camino, y se empezó a optar por javascript para cambiar las CSS, eliminar contenidos, etc…

Y entonces, llegó ella… las media queries, con ellas podíamos servir unas CSS u otras en función de algunos parámetros, como por ejemplo el tamaño con el que el usuario nos visita.

A partir de ahí, muchos pasaron las maquetaciones basándose en las media queries.

¿En qué consiste?

Como se explica arriba, suele tratarse de usar diferentes CSS para según qué resoluciones o dispositivos, aunque se puede jugar con más parámetros utilizando javascript, AJAX, etc…

La base, es que cuando entro desde el ordenador, con una pantalla de, digamos… 1200, la web se adapte a mi pantalla, y pueda tener un mejor visionado, una mejor usabilidad, en definitiva, una mejor experiencia de navegación, pero que si entro desde un laptop de 800, o un móvil de 320, ésta web se adapte a ese tamaño, quitándome elementos que no son necesarios en pantallas más pequeñas, o transformándolos/moviéndolos para que realmente mi experiencia mejore.

Entonces perfecto,¿no?

Uhm… sí, y no.

La idea es buena, y si la ejecución es buena, prácticamente todo está resuelto, pero emergen dudas, y algunos problemas.

Problemática en el Responsive Design

1 Las imágenes: Que escribimos el post anterior (“Responsive Design, ¿Qué Hacemos Con Las Imágenes?“), en resumen, no hay una solución totalmente óptima para cargar las imágenes que tocan según la resolución, y hasta que el estándar de la W3C no se asiente, tenemos que utilizar otras técnicas, frameworks, trucos, etc…

La solución es el que comentamos en el post anterior, utilizar alguna de esas soluciones.

2 Javascript: Algunos de los dispositivos que queremos que sean visionados, no disponen de javascript, o lo marginan bastante, por tanto hay que andarse con ojo. (Tip: hay que utilizar más la etiqueta <noscript>, os aseguro que os saca de muchos problemas en este punto)

La solución es utilizar <noscript> y pensar bien antes de lanzarse a tirar líneas de javascript.

3 El diseño: Aunque puede parecer una obviedad, no lo es. Cuando se diseña ya se tiene que pensar en las diferentes versiones, porque si no puede quedar como un auténtico churro.

La solución es simple, diseñar para diferentes resoluciones, y reutilizar cajas, bordes, etc…

4 El peso y la velocidad de carga (esta me preocupa especialmente): Normalmente, cuando pensamos en responsive, solemos hacer la versión web, y luego vamos adaptando para el resto de dispositivos. No por nada en especial, simplemente porque la versión web suele tener más funcionalidades, mostrar más datos, etc… y eso hace que solamos ir a la “completa”, y luego a medida que bajamos de dispositivo vayamos recolocando, eliminando, etc…

¿Cuál es el problema? Pues todo lo que carga. Es decir, si en la versión web tienes una serie de datos, listas, imágenes, lo que sea… en las versiones más pequeñas, lo único que haces es o recolocarlas, u ocultarlas (o quitándolas con javascript, por ejemplo), pero todas esas “soluciones” solamente solucionan la parte visible, el verdadero problema es que todos esos elementos realmente cargan, el servidor los sirve, por tanto, hay que ir con mucho cuidado con este tema.

¿Solución a este último problema? Es el más complicado, ya que antes de servir la página el servidor no sabe la resolución del usuario, por tanto, una de las posibles soluciones es AJAX (aunque según las vistas, el servidor, etc… se puede convertir en más problema aún) o el uso de templates javascript para determinados elementos de la página.

Es más, aún se buscan soluciones… porque es un tema delicado 😉

Comparte… ¡o no!
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *