Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Herramientas de diseño responsivo

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 19 de Marzo de 2019
  • 2 min de lectura | Diseño Web
Herramientas de diseño responsivo
El reproductor de video será cargado en breves instantes.

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.

curso-diseño-responsive

Recuerda que puedes comenzar este curso con tu suscripción de OpenWebinars. Si todavía no estás suscrito, aprovecha para hacerlo ahora.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 17 cursos:

  • Curso de Polymer
  • Curso de React JS
  • Optimización Web en el Navegador

y 14 cursos más!

Duración: 63 horas y 33 segundos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars