Tecnoaficiones

Las nuevas tecnologías al alcance de todos.

Visualiza tu sitio web en diferentes dispositivos y resoluciones.

Sáb, 02/03/2013 - 17:13 -- A.Lliso
Diseño web responsive

Debido a la gran diversidad de dispositivos y la resoluciones de los mismos, cada día es más necesario tener la posibilidad de verificar la visualización del diseño de nuestro sitio web en los diferentes dispositivos y resoluciones más utilizadas, para evitar que nuestro sitio no sea correctamente visualizado.

Vamos a ver dos alternativas diferentes para solventar este problema. Por un lado una aplicación web que nos permitirá visualizar nuestro sitio en los diferentes dispositivos más populares del mercado actualmente, y por otro lado un plugin de Chrome que nos permite visualizar en diferentes resoluciones.

  • La primera opción que voy a presentaros es iphone-emulator.org, que no es más que una web que es capaz de emular cinco dispositivos móviles diferentes, como son el iPhoneiPad, Android, Blackberry, Tablet.

Al tratarse de una web basta con acceder a la web, una vez en la misma en la barra de menú tenemos los diferentes dispositivos disponibles, clicamos en el que deseamos y aparece el dispositivo, ahora basta con escribir nuestra dirección en la barra del navegador del dispositivo virtual, y podremos visualizar y navegar como si fuese un dispositivo real. Os dejo unas instantáneas de como se ve nuestro sitio en varios de ellos.

Tecnoaficiones en iphone

Tecnoaficiones en Android

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tecnoaficiones en iPad

 

  • La segunda opción se trata del plugin Window Resizer para el navegador Chrome, que bajo mi criterio es más profesional, puesto que nos permite múltiples visualizaciones e incluso configurar nuestras propias selecciones de resoluciones. Lógicamente al tratarse de un plugin es necesario tener este navegador de Google funcionando. 

Para instalar el plugin basta con acceder a la página de descarga, y clicar sobre el botón que pone "Añadir a Chrome".

Icono window resizer chromeUna vez instalado el plugin, este aparecerá en forma de icono en la barra de herramientas de nuestro navegador Chrome como aparece en la imagen de la izquierda.

Si clicamos sobre el mismo nos aparecerán las diferentes configuraciones de resoluciones que vienen por defecto en el propio plugin.

Para ver trabajando el plugin NO tenemos que tener la ventana de nuestro navegador maximizada, si en estas condiciones pulsamos sobre el icono y seleccionamos una resolución, esta sera adoptada por nuestra ventana, al tiempo que en la parte inferior de la ventana nos aparecerá por un tiempo la resolución de la misma.

También nos brinda la posibilidad de al ir modificado el tamaño de nuestra ventana arrastrando los bordes, el plugin nos ira informado en la esquina inferior derecha del tamaño de la misma, de esta forma podemos conseguir una resolución especifica sin necesidad de tenerla en nuestras predeterminadas. En la imagen inferior podéis ver somo se vería nuestro sitio en un iPad (1024x768).

 

Tecnoaficiones en Chrome window resizer

Estas son dos de las muchas posibilidades existentes, para los que tratamos de hacer un sitio web que se adapte lo mejor posible a la gran variedad de dispositivos, que hoy en día son capaces de navegar por internet. 

Espero que os sea de utilidad y como siempre si lo deseáis abajo tenéis la posibilidad de compartirlo en las redes sociales con vuestros conocidos. Un saludo.

 

Añadir nuevo comentario

CAPTCHA
Esta pregunta se hace para comprobar que es usted una persona real e impedir el envío automatizado de mensajes basura.
CAPTCHA de imagen
Introduzca los caracteres mostrados en la imagen.