Diseño web responsive: mejores prácticas

Dentro de no mucho hará dos años que escribí el artículo Introducción al Diseño Web Adaptable o Responsive Web Design. Entonces era algo que estaba en sus inicios y hoy en día, aunque poco a poco, se va convirtiendo en algo que se da por asumido al desarrollar una web.

El Diseño Web Adaptativo (o adaptable, como lo llamé yo entonces) sigue siendo objeto de muchos artículos y conferencias. Sus usos van evolucionando y perfeccionándose. He creído oportuno refrescar aquel primer artículo con una serie de consejos o prácticas recomendadas para este año 2013 en lo que a diseño web adaptativo se refiere.

¿Empezamos el diseño por el móvil?

Probablemente uno de los aspectos que más debate ha generado es si empezamos a diseñar y programar una web desde el tamaño del móvil y vamos subiendo hasta terminar en el tamaño de sobremesa, o al revés (empezando como siempre con el tamaño del ordenador de sobremesa y vamos ajustando hasta llegar al tamaño del móvil).

Aunque parezca que ambos caminos son iguales, no es así. Veamos por qué.

Empezando por el sobremesa

El diseño web adaptativo en sus inicios (y el mejor ejemplo es el artículo que escribí hace dos años) estaba centrado en crear en primer lugar la web para el tamaño de pantalla que tiene el ordenador de sobremesa, y luego ir ajustando a medida que disminuye el tamaño de pantalla. Hoy en día se sigue haciendo mayoritariamente así.

Normalmente los media queries que se usan en este caso son max-width, simplificando y ajustando para las pantallas más pequeñas.

Por ejemplo:

¿Qué problemas puede traer esta vía? Los Media Query no están soportados por todos los móviles. Los BlackBerry anteriores a la versión 6.0 (una pesadilla…), Windows Phone 7 y NetFront (anterior al tercer Kindle) no lo soportan. Con este sistema dejaríamos fuera a todos los usuarios con estos móviles.

Otro problema es que normalmente la versión de móvil termina siendo una versión descafeinada de la web original, a la que no se le ha dedicado mucho tiempo.

Empezando por el móvil

Si damos la vuelta al proceso y construimos primero la versión móvil, usando media queries para ajustar el diseño a medida que aumenta el tamaño de pantalla, evitamos el problema de incompatibilidad que veíamos antes.

Ahora los media queries serán diferentes a los que veíamos antes:

El único problema que se nos planteará será con Internet Explorer en sus versiones anteriores a la 9, ya que no soportan media queries, pero esto se arregla facilmente con una hoja de estilos a medida para esas versiones (muy sencillo usando Sass, como podéis ver en este artículo). Podemos usar también alguna librería javascript que haga que lo soporten, como respond.js, aunque tiene el inconveniente de depender de la misma.

El que no tengamos problemas de falta de soporte en los móviles no es la única ventaja de este segundo modo de hacer las cosas.Normalmente la hoja de estilos resultante suele ser más sencilla que usando la otra vía.
Otra ventaja es que empezar por el móvil nos servirá para determinar de una manera más clara cual es el contenido realmente importante de nuestra web.

¿Cuales son los Puntos de rotura?

Hace dos años, cuando escribí el primer artículo, lo teníamos todos claro: 320px para el móvil, 768px para el iPad y 1024px para el sobremesa. En los tamaños intermedios daba igual lo que pasara.

El problema es que estamos creando diseños para esos anchos ignorando al resto. Dado el gran número de dispositivos diferentes que salen continuamente, esta manera de hacer las cosas ya no es válida. Además tampoco dejamos preparada nuestra web para un posible futuro con otros anchos estándares.

Hoy en día los puntos en los que aplicamos un media query nos lo tiene que dar el contenido, no el dispositivo más vendido. La manera de hacerlo es bien sencilla: ve cambiando poco a poco el ancho del navegador y donde la web se rompa, aplica un media query. Por ejemplo, supongamos que empezamos por el móvil y vamos subiendo.

En nuestra hoja CSS pondremos los estilos que serán de aplicación general, pero que serán los que muestren la versión de móvil.

A continuación añadimos el primer media query, para introducir los estilos que serán de aplicación (por ejemplo) cuando el ancho de pantalla sea de 600px o superior:

Y si llegado a 800px necesitamos nuevos estilos para anchos de pantalla superiores a 800px hacemos:

Y así para cada punto en el que necesitemos una variación en función de lo que nos exija el contenido.

No al display:none

Cuando empezamos con el diseño web adaptativo hacíamos la web para tamaños grandes de pantalla y luego lo que no cabía en el móvil lo ocultábamos con un display:none y listo. Sin embargo con esto no impedimos que el móvil tenga que descargar todos los componentes de la página, incluso los que no va a usar aunque los hayamos ocultado.

Tenemos que buscar las vías necesarias para que aquello que no se vaya a usar no se tenga que descargar. Y aunque el tema de las imágenes está aún sin solucionar de manera satisfactoria, tenemos ya bastantes herramientas que nos permiten desde el servidor ofrecer al navegador sólo aquello que realmente vaya a utilizar.

Y es precisamente en este punto en el que me extenderé en futuros artículos.

En siguientes artículos hablaré por lo tanto de diferentes temas ya más concretos: el tamaño de los textos, el uso de vídeo, de imágenes, etc..

11 comentarios en “Diseño web responsive: mejores prácticas

  1. Tenemos que buscar las vías necesarias para que aquello que no se vaya a usar no se tenga que descargar. Y aunque el tema de las imágenes está aún sin solucionar de manera satisfactoria, tenemos ya bastantes herramientas que nos permiten desde el servidor ofrecer al navegador sólo aquello que realmente vaya a utilizar.

    Hola Juan,

    cuales serían esas herramientas para evitar el display: none?

    se agradece si puedes mencionar algunas,

    atte.

    Martín

    1. Hola Martín,

      Lamentablemente los mecanismos que tenemos en la actualidad no son gran cosa. Tenemos que utilizar media queries con imágenes en background muchas veces. Otras veces puede venir bien utilizar Javascript para detectar si un media query se aplica o no (matchMedia()), Modernizr para saber si una característica la soporta o no el navegador. También podemos usar RESS, viajando primero al navegador, volviendo con la información y enviando entonces sólo lo necesario para ese dispositivo (lo que implica una segunda carga de la web…), no paran de salir cosas aunque todas tienen inconvenientes.

  2. Buen artículo,

    decir que Internet es un escaparate para los productos y servicios de las empresas, a los que los clientes quieren poder acceder estando en el sofá de su casa, en la cafetería, en el parque, mientras se trasladan en autobús o en metro, en cualquier momento y en cualquier lugar.

    Es una lastima que después de conseguir atraer la atención de los usuarios hacia nuestra página, estos no puedan acceder y disfrutar de su contenido como debieran y por ello perder muchos de nuestros clientes potenciales.

    Yo aconsejo utilizar Bootstrap para el diseño de mis web.

    Gracias Juan

     

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.