Hace mucho que se quedaron atrás las páginas web que se consultaban solamente desde un ordenador. Hoy en día debemos estar preparados para adaptar nuestros sitios web y que estos puedan consultarse en todo tipo de dispositivos. Por este motivo, en este post, te presentamos el diseño responsive y su rol en el diseño de páginas web que respondan a las necesidades del usuario.
¿Qué es el diseño responsive?
El diseño responsive es una metodología de diseño de páginas web que pretende solucionar el problema de diseñar páginas web para diferentes dispositivos. Su idea principal es adaptar la apariencia de una página o aplicación web al dispositivo donde se encuentra. El objetivo es que la página se vea igual en todos los dispositivos. Esto no significa que sea igual en términos visuales, sino que pueda responder al usuario del mismo modo. Bajo la lógica del diseño responsive, el usuario debería tener una buena experiencia independientemente al tamaño de la pantalla o el dispositivo que use.
La diferencia entre el diseño responsive y otras metodologías es que esta crea un solo diseño que se adapta al dispositivo. Esto evita desarrollos ad-hoc para cada dispositivo y nos evita la complejidad de tener varias versiones de una misma página o aplicación.
Aunque tener varias versiones parece una buena idea, presenta grandes problemas a largo plazo, ya que, bajo esta metodología, cada vez que quieras actualizar tu página tienes que hacerlo en todas las versiones. Con la gran cantidad de pantallas que existen en la actualidad, esto crea altos costes para las empresas y aumenta el riesgo de que algo se pierda en el proceso de diseño.
Mobile First
Dentro del diseño responsive hay quienes sugieren la metodología mobile first. Esta metodología sugiere que la mejor forma de diseñar una página web adaptable es empezar por el diseño para dispositivos móviles. El método mobile first pretende diseñar primero la página web en versión móvil porque es el diseño más restrictivo. Al tener poco espacio, los diseñadores pueden volverse creativos con el orden de la página web y luego expandirse en las demás versiones. De este modo, se crea la web de menor a mayor: se empieza por el móvil vertical y horizontal, luego la tableta vertical y horizontal, después el portátil (poco más grande que la tableta) y, finalmente, los monitores.
Especificación del viewport
La especificación del viewport es una etiqueta meta que define el comportamiento del área visible de una página web en un dispositivo (viewport). En la mayoría de los casos, nos recomiendan escribir la etiqueta de la siguiente manera:
<meta name=”viewport” content=”width-device-width, initial-scale = 1.0, maximum-scale= 1.0, user-scalable=no>
Como se ve en su escritura, esta etiqueta tiene cuatro posibles especificaciones, que son:
- width: esta especificación determina el ancho del viewport en relación al ancho del dispositivo. En la línea de código anterior este ancho es igual al ancho del dispositivo. (width=device-width).
- initial-scale: esta especificación determina el tamaño inicial con el que se encuentra el usuario al abrir la página web. En la línea de código, el tamaño está definido como 1.0. (initial-scale=1.0).
- maximum scale: esta especificación determina el tamaño máximo al que el usuario puede llevar la página web al usar el zoom. (maximum-scale=1.0).
- user-scalable: esta especificación determina si el usuario puede o no hacer zoom.
Aunque normalmente se ponen los valores definidos en la escritura, te recomendamos no quitarle al usuario la posibilidad de escalar tu página web. A menos que tengas un propósito específico al hacer esto, eliminar el zoom es bloquear la usabilidad de la página web. En muchas ocasiones donde implementamos este bloqueo, el usuario tiene problemas explorando la página web en tamaños distintos al del dispositivo. Cuando un usuario no puede mover la página a su gusto tiende a frustrarse y desconectarse. Además, esta especificación puede afectar a la experiencia de usuario de navegantes con discapacidades visuales que necesitan un mayor tamaño de visualización.
Si quieres saber más sobre esto, te recomendamos leer el post de la MDN sobre la etiqueta meta.
¿Quieres seguir aprendiendo?
Después de leer este post, sabes qué es el diseño responsive y cuáles son las ventajas de usarlo. Ahora es el momento de seguir aprendiendo sobre este concepto y ponerlo en práctica adaptando tus propias páginas web. Por ello, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, donde uno de los proyectos será poner tus habilidades en funcionamiento para crear una página web que se adapte a distintos dispositivos. ¡Anímate a matricularte y seguir aprendiendo!
