Tener un diseño responsive no es lo mismo que tener un diseño para móviles.
El diseño responsive es el diseño web que se adapta automáticamente al tamaño de la ventana del navegador.
Por otro lado, el diseño para móviles es un diseño que funciona correctamente en dispositivos móviles. Dentro de esta categoría debemos diferenciar aquellos diseños elaborados para un tamaño concreto de pantalla.
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 un excelente ejemplo de 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 a la superficie disponible.
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, el que hace un diseño responsive desea que funcione en móviles y tablets. Puedes comprobar como la web de WWF funciona perfectamente en éstos dispositivos móviles.
En el caso más perfeccionista, un diseño responsive cuenta con siete versiones:
- pantalla de ordenador
- pantalla de tablet de 10 pulgadas en horizontal
- pantalla de tablet de 10 pulgadas en vertical
- pantalla de tablet de 7 pulgadas en horizontal
- pantalla de tablet de 7 pulgadas en vertical
- pantalla de móvil en horizontal
- pantalla de móvil en vertical.
Como imaginarás, un diseño responsive es mucho más laborioso, y tanto más caro, que un diseño no responsive.
Media Queries es una galería que contiene cientos de excelentes diseños responsive.
Un diseño responsive me parece lo más elegante que se puede hacer en diseño web, pero tiene unas cuantas desventajas: requiere una mayor inversión, es más costoso mantenerlo actualizado y hará que la web cargue más lento (más de esto próximamente), por lo que es peor para el posicionamiento en buscadores.
Algo no tan elegante, pero con menos desventajas, es contar con un diseño adicional específico para móvil (o tablet, o cualquier tamaño concreto de pantalla). El contenido siempre es el mismo, pero si la web se visita desde un ordenador se muestra un diseño distinto que cuando se visita desde un móvil, por ejemplo.
Es decir, en esta última 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 la web se adaptan automáticamente al tamaño de la ventana.
Brave New Code, es una empresa dedicada al desarrollo de productos de software, que cuenta con diseños distintos para móvil y tablets que para ordenador.
¡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.
Prácticamente cualquier web que no use Flash (Flash es una tecnología en desuso, al borde de la extinción, y no merece la pena profundizar en ello), funcionará 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 prescindidir de menús desplegables o cualquier elemento que se accione cuando se coloca encima el puntero del ratón.
Por último tenemos las aplicaciones móviles, algo completamente distinto a todo lo hablado hasta ahora. Por cierto, no hay mayor inutilidad que una aplicación móvil que se limite a mostrar el mismo contenido que se ha publicado en la web, como ocurre con las apps para iPhone de El Mundo y El País.
Resumen: tipos de de adaptaciones a móviles
Según su adaptación a móviles existen los siguientes tipos de diseño web:
- Diseño responsive: se adapta automáticamente al tamaño de pantalla.
- 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.
- Diseño que funcione correctamente en móviles: mientras no se use Flash, no debería haber gran problema.
Este post ¿Qué es (y qué no) el diseño responsive y el diseño para móviles? fue publicado originalmente en mongemalo.es.
Artículos relacionados:
- El diseño web minimalista que triplicó el tráfico de mi blog
- No empieces con el diseño de tu web antes de leer esto