¿Qué es (y qué no) el diseño responsive y el diseño para móviles?

Una aplicación móvil, un diseño móvil y un diseño responsive son cosas distintas.

Diseño responsive (o adaptativo) no es lo mismo que diseño para móviles.

  • El diseño responsive es el diseño web que se adapta automáticamente al ancho de la ventana del navegador.
  • El diseño para móviles es el diseño que funciona correctamente en dispositivos móviles.

Aunque sería extraño, un diseño responsive puede no funcionar correctamente en móviles y, por supuesto, un diseño para móviles no tiene por qué ser responsive.

La web de la ONG World Wild Life es una web con diseño responsive. Ábrela desde tu ordenador y cambia el tamaño de la ventana para ver cómo su diseño se adapta automáticamente al espacio disponible.

Dos captura de pantalla de la web WWF, en dos tamaños: móvil y pantalla de ordenador. Cada captura presenta una distribución de elementos diferente.

Diseño responsive en la web de WWF: en la captura izquierda se ve el diseño a tamaño completo, en la captura derecha se ve el diseño cuando el tamaño de la ventana es de 480 px × 640 px.

Como parece obvio, quien hace un diseño responsive desea que proporcione una buena experiencia en móviles y tablets. Puedes comprobar cómo la web de WWF funciona perfectamente en dispositivos móviles. En el caso más perfeccionista, un diseño responsive cuenta con siete versiones para distintos tamaños de pantalla de smartphone, tablet y ordenador, en horizontal y vertical.

Un diseño responsive es lo más elegante que se puede hacer en diseño web, pero requiere mayor inversión, y si no está bien implementado hará que la web cargue más lento, lo que es perjudicial para el posicionamiento en buscadores.

Otra alternativa es contar con un diseño individual para cada tamaño de pantalla. El contenido será el mismo en todos los dispositivos, pero si la web se visita desde un ordenador el diseño será distinto que cuando se visite desde un móvil. En esta opción existen dos o más diseños individuales, y según desde dónde se visita la web, se usa uno u otro. Esto es diferente del diseño responsive, donde en todos los casos se carga el mismo diseño y los elementos de éste se reordenan y redimensionan automáticamente al ancho de la ventana.

¡Pero ojo! Que una web no sea responsive ni cuente con un diseño específico para móviles no significa que no funcione correctamente en móviles, otra cosa es que la experiencia de uso no sea una maravilla.

Prácticamente cualquier web que no use Flash (Flash es una tecnología para crear webs que está obsoleta) funciona correctamente en tablets y móviles. En estos casos existen ciertas prácticas que pueden mejorar la experiencia de navegación desde el móvil, como por ejemplo delimitar el área de los elementos clicables y prescindir de menús desplegables o cualquier elemento que se accione cuando se coloca encima el puntero del ratón sin hacer clic.

Por último existen las aplicaciones móviles, algo distinto a todo lo hablado hasta ahora. Por cierto, no hay mayor inutilidad que una aplicación móvil que se limita a mostrar el mismo contenido que hay en la web.

Resumen: tipos de de adaptaciones a móviles

  1. Aplicación móvil: es un programa informático creado para un sistema operativo como iOS o Android.
  2. Diseño responsive: diseño web que se adapta automáticamente al ancho de la pantalla.
  3. Diseños específicos para varios tamaños de pantalla: según con qué dispositivo se visita la web, se carga un diseño u otro.
  4. Diseño que funciona en móviles: prácticamente todos los sitios web excepto los pocos que queden hechos con Flash.

3 comentarios, deja el tuyo

  1. Antonio dice:

    Hola, hay dos puntos en los que no estoy en absoluto de acuerdo:
    – un diseño responsive cuenta con siete versiones: De hecho, es uno de los puntos más importantes a tener cuenta al diseñar un sitio adaptable, ya que los puntos de ruptura los debe establecer el contenido de la web y no la resolución del dispositivo.
    – No entiendo por qué dices que la web cargue más lento, si el contenido puede servirse en diferentes tamaños precisamente para que en versiones con resoluciones pequeñas la web pese menos..

    Saludos!!

    1. Luis Monge Malo dice:

      Te recomiendo esta presentación: http://vimeo.com/49194960.

  2. Mara Hompanera dice:

    Me parece muy acertado lo que comentas del diseño responsive, al leer tu articulo me he dado cuenta que por esa razón no es muy buena la pagina de Infojobs en móviles, ya que te deja inutilizadas opciones importantes que puedes usar desde tu PC, como modificar tu carta de recomendación, por ejemplo.

Comenta

Todos los campos son obligatorios: