Vista de diseño adaptable Firefox

Una de las cosas a tener en cuenta cuando uno está diseñando y desarrollando un sitio web, es la de pensar que el sitio web debe verse correctamente en todos los dispositivos que a día de hoy utilizamos para navegar por Internet, y para probarlo nos viene de perlas una vista de diseño adaptable.

Esto, que parece algo muy obvio, no lo es tanto y basta con que te pongas con el móvil a navegar un rato y verás la cantidad de páginas webs en las que tienes problemas para navegar, ya sea porque no puedes pulsar en el menú, la letra se ve muy pequeña, el contenido se pierde, el scroll es insufrible, etc, etc…

Todo esto que te cuento recibe numerosos nombres como diseño adaptado, diseño responsive, diseño adaptativo, experiencia de usuario, usabilidad, etc… Ojo que no es lo mismo Adaptative design que Responsive design. Gracias a Dios, cada vez hay más profesionales dedicados a ese mundo y están consiguiendo que nos nos dejemos los ojos y los dedos cuando navegamos desde el móvil.

La herramienta

Pues bien, en relación a todo esto, hoy os quería comentar una herramienta muy útil que nos permite con dos clics ver nuestro sitio en distintas dimensiones para poder de alguna manera “simular” cómo se vería en otros dispositivos, es decir, nos adapta el diseño a una vista de diseño adaptable.

Otra opción que tienes es la de comprarte todos los móviles y tabletas del mercado para luego ir probando tu sitio web en ellas y ver si realmente se ve bien (es coña jeje).

Te puede interesar:  Como Eliminar Las Miniaturas De La Pantalla De Inicio De Chrome

El caso es que la herramienta se llama Vista de diseño adaptable y viene con Firefox.

¿En qué opción encuentro la Vista de diseño adaptable?

Pues, o pulsando CTRL+MAYÚS+M o bien haciendo lo siguiente:

  • En Firefox, pulsamos sobre Desarrollador.
  • Y del menú que nos sale pulsamos Vista de diseño adaptable.

El funcionamiento de la misma es bien sencillo.

  • Puedes estirar o encoger los bordes de la pantalla para ver un tamaño personalizado.
  • Puedes escribir los pixeles directamente en la parte donde te los muestra.
  • Puedes seleccionar un tamaño preestablecido.
  • Puedes simular la rotación del dispositivo.
  • Puedes simular eventos de toque.
  • Puedes capturar pantalla.

En fin, algo básico que debes tener en cuenta cuando diseñas un nuevo sitio web.

¿Y vosotros? ¿Qué herramienta utilizáis?

¡No seas tímido! Comenta | Comparte | Suscríbete

One Response

  1. GErard

Deja un comentario