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:  Código HTML para punto medio

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

3 comentarios en “Vista de diseño adaptable Firefox”

  1. Hola, GErard, uso siempre esta herramienta, pero a veces me pasa que cuando luego miro el resultado en el móvil, es muy diferente de lo que veo en la vista de diseño adaptable. Hay algún truco para forzar que en el móvil se vea lo mismo que lo que veo con esta herramienta? (por supuesto he vaciado caché, etc, etc.)
    Muchas gracias!
    Laura

    1. Hola Laura, te respondo yo. Lo que ves en el móvil es lo correcto. La herramienta de Firefox te muestra la visión adaptable pero, como has podido comprobar, puede haber discrepancias si lo miras desde el dispositivo móvil. Por tanto, si tienes que corregir algo, lo que ves en el móvil es lo real. Espero te ayude mi comentario.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba