Herramienta de Usabilidad - ResponsiveDesignerChecker

Una de las cosas mas importante para nuestra pagina web es que sea responsive, llega a ser tan primordial que en muchas ocasiones primero se diseña la web para móvil y después para el resto de dispositivos.

A continuación os mostrare una pagina para comprobar si nuestra web es responsive o no, aquí encontrareis la web.


La utilización de la web es muy sencilla, solo debemos poner la URL de la web:


Y nos cargara dicha web, dándonos la posibilidad de cambiar el tamaño en el que esta se vería. Podremos elegir entre distintos dispositivos y pantallas (monitores, tablets y móviles) o si queremos podemos poner unas dimensiones a nuestro gusto.




En esta ultima imagen vemos como la pagina de la tienda online RaccoonGames no es responsive. Por lo tanto en móviles y otros dispositivos su uso se ve mermado.

Comentarios

Publicar un comentario

Entradas populares de este blog

Herramientas de Desarrollador Web en Mozilla Firefox - Recursos p.2

Imagen
En esta segunda parte sobre los recursos explicare todos los campos que componen un recursos y  los detalles de la solicitud. Comenzando por los campos nos encontramos los siguientes: - Estado: aquí se nos muestra si se ha obtenido correctamente el recurso, mostrara un circulo verde y un código 2XX si es correcto, naranja y un código 3XX si se a redireccionado o rojo y un código 4XX/5XX si han ocurrido errores. - Método: el método de solicitud HTTP. - Archivo: nombre del archivo descargado. - Dominio: dominio del PATH solicitado. -Tipo: el content-type de la respuesta. -Tamaño: el tamaña del recurso. Además de todos estos campos hay una linea temporal donde se nos muestra, en ella podemos ver el tiempo que tardo en cargar la pagina y en que momento se cargo cada recurso. Si hacemos click en alguno de los recursos se nos abrirá una ventana en la derecha de las herramientas. En esta ventana se nos muestran los ...
Leer más

Herramientas de Desarrollador Web en Mozilla Firefox - Vista de Diseño Adaptable

Imagen
La Herramienta que comentare esta semana sera le vista de diseño adaptable. Esta herramienta esta disponible tanto en Firefox como en Chrome. Esta funcionalidad nos permite ver como afectaría la resolución de diferentes pantallas a nuestra pagina web. Existen dos formas principalmente de acceder a dicha herramienta. La primera en pulsando Ctrl+Mayús.+M o pulsando F12 y clickando en el icono marcado en la siguiente imagen. Una vez aquí veremos que en la parte superior aparecen las medidas que tiene la pantalla donde se visualiza nuestra pagina, la cual podemos cambiar a nuestro gusto.  En el siguiente ejemplo vemos la diferencia entre un ancho de 900 y uno de 1446, donde apreciamos que al tener unas medidas superiores se despliega de forma automática la barra lateral izquierda, mientras que la menos revolución tendíamos que pulsar en el menú de hamburguesa para que esto pasase. En la zona superior izquierda tenemos una opción que por defecto esta e...
Leer más