Herramientas de diseño responsivo

Te contamos cuáles son y cómo utilizar las herramientas que nos ofrecen los navegadores para trabajar con el diseño responsivo.

Qué es el diseño responsivo

Antes de entrar a ver las herramientas de diseño responsivo que nos ofrecen los navegadores, hay que tener claro qué es el diseño responsivo.

El diseño responsive es una aproximación al diseño web, que permite que nuestras páginas web se vean correctamente en distintos tipos de dispositivos y tamaños de pantalla, adaptando ese diseño a dicho dispositivo, al entorno en que se van a mostrar.

Problema del diseño responsivo

La realidad es que hay innumerables dispositivos, cada uno con una resolución de pantalla, profundidad de color, tamaño horizontal, tamaño en vertical, resumiendo, hay multitud de dispositivos que hacen que el diseño responsivo sea algo complejo y que requiere conocer distintos conceptos.

El inconveniente es que no podemos probar nuestra página en todos los dispositivos, porque físicamente no disponemos de ellos, de esa gran variedad.

Solución al problema

Cuando surgió este problema, los navegadores evolucionaron y a día de hoy nos proporcionan una serie de herramientas que nos permiten simular como quedaría nuestra página web en distintos tipos de dispositivos, al menos los navegadores más conocidos.

Herramientas en Chrome

Para acceder a las mismas en el navegador Chrome pulsamos el botón derecho del ratón y clicamos en la opción “Inspeccionar” o la tecla F12. Después pulsamos el icono “Toggle device toolbar”, que nos permite entrar en modo responsivo.

Al hacerlo nos aparecen las opciones responsive, dónde podemos establecer la densidad de píxeles, el tipo de dispositivo que tenemos, ver los breakpoints en los que cambia el tamaño de la pantalla, ajustar ese tamaño manualmente arrastrando las marcas o indicando su tamaño en píxeles, e incluso elegir un dispositivo en concreto.

Si elegimos un dispositivo en concreto, podemos elegir la orientación del mismo, mostrar la página en formato horizontal o en formato vertical.

También podemos quitar la rejilla, el cuadro del dispositivo, capturar la imagen y muchas otras opciones que nos ofrece el navegador.

Herramientas en Firefox

En el navegador Firefox el funcionamiento es similar que en Chrome. Abrimos la misma página web repsonsive, accedemos a las herramientas pulsando el botón derecho del ratón y eligiendo la opción “Inspeccionar elemento” o con la tecla F12.

Una vez abierto el inspector pulsamos el icono “Vista de diseño adaptable”, y de la misma forma que ocurría en Chrome, aparece un menú en la parte superior, en el que podemos elegir distintos tipos de dispositivos, diferentes tamaños de pantalla, la densidad de píxeles, formato apaisado o retrato e incluso opciones para simular cargas y muchas más opciones.

Es muy aconsejable utilizar estas herramientas, porque son fundamentales a la hora de hacer un diseño responsive para nuestras páginas web.

Aprende a crear páginas Web responsive utilizando HTML y CSS, y empieza a realizar páginas Web profesionales que se adapten a todo tipo de dispositivos y navegadores.