Previsualizar tu web como en un dispositivo móvil

Saber que aspecto va a tener nuestra web en los diferentes dispositivos móviles hoy en día es fundamental, ya que la mayoría del tráfico web se origina en las búsquedas desde el móvil, por eso es importante saber que tan bonita y funcional luce nuestra web desde un Smartphone.

Por otro lado, ver como se ven desde diferentes dispositivos, como tablets, portátiles, y en diferentes resoluciones, también es algo muy a tener en cuenta en el trabajo de un diseñador de contenidos, o para todos los que queramos tener una web o blog de categoría.

En primer lugar vamos a daros unos pasos para ver como se verían nuestras webs en diferentes dispositivos utilizando el buscador mas utilizado Google Chrome, y lo haremos a través de Google Developer Tools (incluido en el navegador). Vamos allá!

Pasos:

Para abrir el Google Developer Tools pulsamos F12 (con el navegador abierto) o también las teclas combinadas Ctrl + Mayúsculas, aparecerá un icono en forma de móvil, lo pulsamos.

Como veremos en la parte de arriba, ofrece muchas opciones, tales como poder escoger el dispositivo y el modelo, la resolución, la orientación etc. Fácil y muy útil.

¿No aparece el modelo de Smartphone en el que lo queríamos probar? No pasa nada, podemos añadirlo ¿Cómo? Abrimos el Developers Tools y pulsamos en Settings, seleccionamos Devices y a continuación en Add Custom Device, y listo!.

Revisando como queda la visualización desde diferentes dispositivos, podremos corregir errores (si los hubiese) y aumentar la experiencia de usuario.

Sin embargo, hoy día existen varias herramientas que podemos instalar en nuestro ordenador y que nos facilitan todo este proceso, vamos a mencionaros las mejores y mas utilizadas por los usuarios, estas son:

 

iPhoney

Como so nombre indica, esta aplicación simula la visualización de una web a través de un Smartphone de la marca Iphone.

 

W3C mobileOK Checker

 

Este es muy utilizado, ya que nos indica todos los problemas que hay en el código de nuestra web, mostrando si es compatible con el estándar W3C.

 

iPad Peek

Para ver como queda en un una Tablet de la marca Apple, hablamos del Ipad.

 

Modify Headers

Esto es una extensión para el navegador Firefox, con ella podremos imitar la visualización desde diferentes dispositivos.

 

Adobe Device Central CS5

Si tienes esta herramienta, estas de suerte, con ella podrás hacer lo que estamos mencionando.

 

Google Mobilizer

Por supuesto no podía faltar la herramienta de Google, únicamente facilitamos la url y veremos como luce nuestra web.