Cómo comprobar si el diseño de tu web es multidispositivo

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0

Para los que no lo conozcáis, Google Chrome Canary es la versión para desarrolladores web del conocido navegador Google Chrome, y lo podéis descargar aquí.

Chrome canarys

 

Como ya hacen las últimas versiones de Google Chrome y Mozilla Firefox, Google Chrome Canary permite comprobar si nuestro sitio web se muestra correctamente en las pantallas de diferentes dispositivos como ordenadores de sobremesa, tabletas y smarphones.

También hay varias webs que te permiten ver tu página en el dispositivo que elijas, pero a mí Chrome Canary me parece la mejor opción porque también permite editar el código css en vivo.

El acceso a esta funcionalidad de Chrome Canary es bastante sencillo: basta con hacer click con el botón derecho del ratón en cualquier parte de la página y luego en “inspeccionar elemento”.

abrir chrome canary

La pantalla que aparece a continuación la he dividido en cinco partes para explicar un poco sus funcionalidaddes:

opciones chrome canary:A)  Aquí podemos escoger el dispositivo en el cual queremos simular la visualización de nuestra página web. En la pantalla anterior he escogido la opción “Samsung Galaxy S3, Galaxy Nexus”, que tienen una resolución de 360×640.Estos smartphones son de los modelos más pequeños del mercado, pero también podemos visualizar nuestra web de la misma forma que se mostraría en dispositivos de diferentes marcas como Apple (Iphone / Ipad), Amazon (Kindle), Blackberry, Google, HTC, Motorola, Samsung o Sony. Y por supuesto, también en portátiles (genéricos, HDMI y táctiles). También nos permite introducir la resolución manualmente. Además de probar en esos dispositivos que aprecen listados, yo recomendaría probar también escribiendo manualmente la resolución de los Mac Pro (2560×1600)..

B) Podemos realizar una simulación de la velocidad a la que se descarga y muestra nuestra web variando el tipo de conexión. Nos permite realizar simulaciones para conexiones wifi, adsl, 3g, edge, gprs y “no throttling”, o lo que es lo mismo, a nuestra velocidad de conexión real.

C) En esta parte de la pantalla es donde se muestra el aspecto que tendría nuestra web según el dispositivo que hayamos seleccionado. Recuerda actualizar la página cuando cambies de dispositivo o de resolución, pues a veces algunos elementos no se refrescan correctamente.

D) Aquí aparecerá seleccionado el código del elemento html sobre el que pulsaste “inspeccionar elemento”. Si mueves el ratón por este código, verás cómo se ilumina en color azul la parte de la pantalla “C” que corresponde con el código html que estás seleccionando.

E) Y aquí se muestra el código css que corresponde al elemento html seleccionado. Esta opción es bastante interesante porque permite editar el código css en vivo y observar los resultados en la pantalla “C”.

En el caso de nuestra web, podéis observar que en la simulación realizada ha desaparecido el menú principal (el superior, con fondo blanco) y se ha sustituido por el botón desplegable “Menú”, con fondo de color azul claro. En la versión móvil también desaparece el slider (las diapositivas de imágenes) y se ajustan el texto y los botones de las redes sociales al ancho de la pantalla.

Ah, y un detalle más: si instaláis Google Chrome Canary no vais a perder vuestro querido Google Chrome. Os aparecerá un nuevo icono de color amarillo como el de la primera imagen de este artículo. Y al abrirlo veréis que importa todos vuestros datos (marcadores, contraseñas, aplicaciones e historial) del otro Chrome. Cuando instaléis una aplicación para Canary únicamente os aparecerá en ese navegador, pero si instaláis una aplicación en Chrome os aparecerá también en el Canary.

Si te ha gustado este artículo compártelo con tus amigos usando los botones de las redes sociales. ¡Te lo agradecería!

Tweet about this on TwitterShare on Facebook0Share on Google+0Share on LinkedIn0

Deja un comentario

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