Que el Responsive Design no acabe contigo

Recientemente, -y por primera vez-, he tenido que realizar el “diseño web adaptativo” (que es como lo traduce la Wikipedia, aunque a mí me gusta más decir “adaptable”  ^^) de una web con mucho contenido y cierta complejidad en su diseño original.

Cuando me pidieron que lo hiciera, me alegré. Se dibujó una sonrisa en mi cara y pensé para mí misma: “qué bien, por fin voy a aprender a adaptar una web de verdad”. Bueno, ahora que ha pasado un poco de tiempo, la idea ya no me parece tan atractiva… jaja. De hecho, empiezo a comprender todo lo que Responsive Design implica y pasa desapercibido a ojos ajenos.


8453257683_2f55e98120

Photo credit: Major Nelson / Foter.com / CC BY-NC-SA

 

Para empezar, decir que hacer una web responsive ya no es una opción. Al principio de los tiempos, cuando una web solo podía ser accedida mediante una pantalla de PC, la idea de hacer flexible un diseño no cabía en nuestras mentes ya que solo existía mayoritariamente una resolución alrededor de 1024 x 768 píxeles. Qué buenos tiempos por cierto . Poco a poco nos hemos ido viendo envueltos en procesos de adaptabilidad de webs para una larga lista de dispositivos, que además no deja de aumentar cada vez más y más…

Para ilustrar lo anterior con un ejemplo, observa el maravilloso surtido de dispositivos para los cuales nuestra web debe verse perfecta:

anatomie-du-web-responsive-design_l

Photo credit: La Fabrique de Blogs / Foter.com / CC BY-NC-SA

¿Qué viewport tendrá mi cliente?

Este tema fue uno de los primeros que me llevaba de cabeza cuando quise empezar a pensar en el diseño responsive de mi web: los breakpoints. ¿Qué resoluciones son las que realmente me importan a la hora de “programar mi CSS”?

Honestamente, para que un diseño responsive fuera absolutamente perfecto y adaptado a todos los dispositivos que existen en el mercado, habría que crear un media query o tener en cuenta las fluid grids para absolutamente todos ellos. Obviamente, eso es una locura, así que lo se suele hacer es escoger unas resoluciones de referencia (las más comunes) y colocar los breakpoints de CSS en ellas, a saber:

grafica

En el gráfico anterior, obtenido de la web StatCounter, se observa qué resoluciones están siendo más utilizadas cada día a nivel mundial. Podemos observar que las más populares son 1366×768, 1024×768, 1280×800, 1440×900, 1920×1080, etc.

Como decía antes, en nuestro código CSS podríamos crear un media query para cada ancho en píxeles anterior, pero si usamos correctamente los fluid grid (porcentajes como magnitud para tamaños de elementos del DOM en vez de tamaños fijos como “px”) podemos englobar todas las resoluciones anteriores en dos grupos: resoluciones con max-width de 1920px y resoluciones con max-width de 1024px.
*Existe también la posibilidad de usar “em” en vez de “px” para establecer los breakpoints, pero es tan extenso de explicar bien que será materia de otro futuro post 🙂
 
[cc]@media (max-width: 1920) {
div { width: 100%; }
}

@media (max-width: 1024) {
div { width: 75%; }
}[/cc]
 
Considerando este aspecto, ya no hace falta que creemos media queries para cada ancho de dispositivo que se nos ocurra, podemos ir agrupando de acuerdo a diferentes tipos de funcionalidad. Por ejemplo, lo más sencillo sería pensar primeramente en tres grandes grupos de resoluciones, correspondientes a tipo de dispositivo. Normalmente querremos que una web tenga un diseño para PC, otro ligeramente diferente para Tablet y otro más diferente para Móvil:

• Visualización en PC : viewport > 1024px

• Visualización en Tablet:   1024px > viewport > 460px

• Visualización en Móvil:  460px > viewport
 
Poco a poco veremos que es necesario hacer más diferenciación dentro de un mismo grupo de dispositivo (como hemos visto antes con 1920px y 1024px. Ambas son para PC, pero es necesario un media query para cada una), ya que el tamaño varía mucho de unos a otros y a veces es complicado que no se descuadren los elementos aun habiendo usado técnicas como los tamaños porcentuales para los elementos.

Me gustaría ir respondiendo en cada post que escriba, las preguntas que yo misma me he ido haciendo a medida que voy aprendiendo a transformar webs en webs adaptables. La de hoy fue la primera duda que tuve al enfrentarme a un CSS en blanco, listo para adaptarse al dispositivo que fuese. La del próximo día, tendrá que ver con los fluid grids porque estoy segura de que aprendiendo bien a usar esta técnica puedes ahorrarte muchos quebraderos de cabeza… Puedo haber parecido un tanto pesimista en mis palabras, pero en realidad critico porque me resulta muy muy atractivo el tema. Poder adaptar el contenido de una web a cualquier soporte es hacerlo accesible a muchas más personas, y entonces es cuando recuerdo lo feliz que me hace pinchar en un link de un tweet que me lleva a una página con tamaño de letra legible desde mi Samsung Galaxy Ace, mientras estoy tumbada en el sofá 🙂