Comprobar nuestra página web en distintas resoluciones

página web responsive

La proliferación de todo tipo de dispositivos y tamaños de pantalla ha hecho que para el diseño de páginas web la comprobación de cómo se ve nuestra página web en cada uno de ellos sea una tarea esencial.

Hacer este tipo de gestión físicamente con cada uno de los dispositivos, además de ser prácticamente imposible, supondría una cantidad de tiempo muchas veces inviable en un proyecto de diseño y desarrollo web. Recordemos que no solo es comprobar, sino que posteriormente hay que en la inmensa mayoría de los casos, corregir desajustes importantes en la maquetación de la página web.

¿Cómo comprobar nuestra web?

En este sentido la red ofrece multitud de opciones que nos permitirán realizar estas comprobaciones vía internet de forma relativamente eficiente, evitando dolores de cabeza y pérdidas sustanciales de tiempo en el desarrollo web.

Por supuesto, será necesario por parte del diseñador web el haber concebido la página web con adaptabilidad para distintas resoluciones y poseer los conocimientos de CSS (diseño web responsive) necesarios para aplicar los ajustes en caso que sean necesarios.

Herramientas

Veamos algunos ejemplos de plataformas que ofrecen el servicio de comprobación de nuestra página web.

 

screenfly

Screenfly. Su uso es sencillo, simplemente incluimos la dirección de la página web que vamos a testar y luego seleccionamos la resolución en píxeles del tamaño de pantalla a probar. Screenfly nos mostrará rápidamente cómo se ve la web en esas dimensiones.
El servicio es de uso gratuito y no hace falta registro previo.

quirktools.com/screenfly

 

 

resolution test

Resolution Test es un plugin del navegador Google Chrome que se basa en modificar el tamaño de la ventana del navegador y así podremos ir realizando las comprobaciones de cómo se el diseño de nuestra web en las distintas resoluciones.
Resolution Test incluye una lista de resoluciones de uso habitual además de una opción de personalización que nos permitirá configurar nuestra propia resolución web.

Para descargarlo hay que entrar en la Chrome web store y localizarlo a través de su buscador. Lo instalas y lo tienes operando en segundos.

chrome.google.com/webstore/detail/screen-resolution-tester/bnbpeddmakpmblddofjnoghpjminhjph

 

 

Google chrome resolution test

El navegador Google Chrome posee su propia utilidad para hacer test de resolución y dispositivos y cómo se comporta la página web. A ella se accede desde la ruta inspeccionar elemento (básico para cualquier diseñador web) y en la esquina superior izquierda hay icono de un teléfono, al hacer click se superpone una ventana donde se despliegan multitud de opciones para probar la página web en cuestión.

 

responsinator comprobador de diseño web

Responsinator es otra herramienta online que nos permite comprobar cómo se ve el diseño de la página web en distintos dispositivos. La particularidad de esta herramienta es que está expresamente orientada a smarthphones y tablets. La página posee una interfaz limpia y clara que permite poder ver cómo se adapta el diseño web en estos dispositivos y en tal caso poder aplicar las correcciones necesarias.

responsinator.com

 

Browsershots

Finalmente mencionáremos a un clásico dentro de la comprobación de navegadores y resoluciones de pantalla: Browsershots.

En su servicio gratuito Browsershots proporciona capturas de pantalla de nuestras páginas web en distintos navegadores y sus respectivas versiones, pero en su servicio de pago la plataforma ofrece comprobaciones en toda clase de dispositivos y tabletas entregando al usuario sus respectivas capturas de pantalla. La gran ventaja es que dichas comprobaciones son realizadas de forma real en los dispositivos, lo que nos dará mayor certeza sobre cómo se visualiza nuestro proyecto web.

browsershots.org

 

¿Y tú qué herramientas usas para comprobar tu página web?

 

Anuncios

Un comentario en “Comprobar nuestra página web en distintas resoluciones

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s