Presiona enter para buscar o ESC para cerrar
Como todos los sitios web, usamos cookies. Si continúas navegando aceptas la política de privacidad.

Un ingeniero que ama las ventas. Imparto formación comercial en empresas tecnológicas. Cofundador de Entradium y Clever Consulting. Profesor en Deusto Business School y otros sitios. Te cuento más aquí.

¿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 móvil y diseño responsive no son sinónimos, y no tienen nada que ver con una aplicación. 3

Cuantos más elementos tenga un diseño, más cara será su adaptación a distintos tamaños de pantalla.

Existen los siguientes tipos de adaptación a móvil:

  1. Aplicación móvil: programa informático creado para que funcione en iOS y/o Android (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).
  2. Diseño responsive: diseño web cuyos elementos se reordenan automáticamente para adaptarse al ancho de la ventana del navegador. Visita una web con diseño responsive, modifica el ancho de la venta del navegador y observa como se redistribuyen sus elementos.
  3. Diseño específico para cada tamaño de pantalla: según el tamaño de pantalla del dispositivo con el que se visita la web, se carga un diseño u otro. En este caso, los elementos no se reordenan conforme se modifica el ancho del navegador.
  4. Diseño que funciona en móviles: prácticamente todos los sitios web.

Es decir, que el diseño responsive (o adaptativo) no es lo mismo que diseño para 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 cuenta con diseño responsive. Ábrela desde tu ordenador y cambia el ancho de la ventana del navegador 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: a la izquierda, el diseño a tamaño completo; a la derecha, el diseño con un ancho de 480 píxeles.

Para tener en consideración distintos tamaños de pantalla de smartphones, tablets y ordenador, los diseños responsive más perfeccionistas cuentan con seis, siete, o incluso más, puntos de ruptura. Un punto de ruptura es el tamaño del ancho de pantalla en el que se redistribuyen los elementos del diseño.

Un diseño responsive es más complejo de implementar, requiere mayor inversión y, en el probable caso de que no esté bien implementado, hará que la web cargue más lento, lo que es perjudicial para el posicionamiento en buscadores.

¡Pero ojo! Que una web no sea responsive ni cuente con un diseño específico para móviles no significa que no funcione en móviles. Prácticamente cualquier web funciona en tablets y móviles, otra cosa es que la experiencia de uso desde móvil en aquellas webs que no cuentan con un diseño móvil o responsive no sea una maravilla.

3 comentarios, deja el tuyo

  • Antonio dice: a las

    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!!

    • Luis Monge Malo dice: a las

      Te recomiendo esta presentación:

      .

  • Mara Hompanera dice: a las

    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.

Deja un comentario