In Diseño

Ya sabemos todos la importancia de tener una web optimizada para dispositivos móviles. Pero no todos los dispositivos móviles tiene la misma pantalla, la misma resolución, la misma forma, etc. Hasta hace poco, el intentar adaptar una página web, y saber como quedaba en las distintas marcas de móviles, tabletas, etc…. era una misión casi imposible, ya que para hacerlo debías de disponer de muchos móviles o tablets, o en cambio ir diciendo a amigos que te prestaran los suyos.

Bien, pues desde hace un tiempo, el navegador Chrome (que todo hay que decirlo, desde hace unos años, se ha convertido en mi favorito tanto por rapidez, facilidad de uso, y utilidades) incluye una función de “Emulación de dispositivos”. Vamos a ver como poder activarla, configurarla y como no, usarla.

como-se-vera-mi-pagina-web-en-los-dispositivos-moviles-02

Para poder activarla nos vamos al menú de Chrome (tienes el acceso en la esquina superior derecha), despues a Más herramientas y allí a Herramientas para desarrolladores.

como-se-vera-mi-pagina-web-en-los-dispositivos-moviles-03

Una vez allí, tendremos que irnos a la pestaña de “Emulation“.

como-se-vera-mi-pagina-web-en-los-dispositivos-moviles-04

En esta pestaña, podemos ver todos los dispositivos disponibles. En el listado podemos comprobar que está actualizado a los últimos modelos que están a la venta (iphone 6, iPhone 6 plus, Nokia N9, etc..)  y otros modelos mucho más antiguos como (iPhone 3G, iPhone 4, etc).

como-se-vera-mi-pagina-web-en-los-dispositivos-moviles-05
Además en esta pestaña de configuración podemos configurar otros aspectos de la emulación, como por ejemplo, la velocidad de la red móvil desde la cual navegaría el dispositivo que estamos emulando. Es decir, podemos emular como carga nuestra página web desde un iPhone 6 plus conectado a una red 4G.

También podremos emular el sistema operativo desde el cual vamos a navegar. Ejemplo: podemos emular como navegar en nuestra página web con un iPhone 5, con una red 3G y con es sistema operativo IOS 8.

Bueno, pues vamos a comenzar a utilizarlo para emular nuestra web en muchos dispositivos distintos.

 

como-se-vera-mi-pagina-web-en-los-dispositivos-moviles-06
Ahora arrastramos la pestaña anterior hacia abajo y en la parte superior del navegador Chrome podemos ver los select donde seleccionar los distintos dispositivos y las distintas redes disponibles para emular. En la foto de arriba, podemos ver la página web www.beyousalud.com (una de las últimas páginas web que hemos hecho en Nuteco) pero la vemos en como si navegaramos desde un Samsung S4 conectado a una wifi.

Además, al pasar el ratón de nuestro ordenador por encima del móvil o tableta emulado, el ratón podrá emular la manera de navegar como si fuera un dedo.

En un post anterior ya os hablé de algunas cosa que nos brindaba el navegador Chrome, y en este post podemos ver que nos da una gran ayuda y herramienta para los que somos diseñadores web.

 

Contacta con Nosotros

Puedes contactar con nosotros sin compromiso. Atenderemos tus dudas gustosamente!!

La importancia de la tipografía en el diseño web