Tu Web recibe visitas desde diferentes dispositivos, como smartphones o tablets. ¿Cumple tu sitio web con los estándares de *responsive design*?
En varias ocasiones hemos mencionado que actualmente accedemos a Internet desde diferentes dispositivos además de la computadora, como televisores, consolas de videojuegos, tablets o smartphones. Esto implica que una página web se verá en distintos tamaños de pantalla y desde diferentes sistemas operativos o plataformas.
De ahí la importancia del responsive design o diseño adaptable, que permite que cualquier página o sitio web se adapte al dispositivo donde se está mostrando para que todo funcione correctamente.
Veamos cómo comprobar si nuestro site cumple con los requisitos del responsive design analizando su código o mostrándolo imitando navegadores y plataformas móviles.
Responsive Website Design Checker & Testing
La compañía tecnológica Serfo pone a nuestra disposición una herramienta online simple pero muy práctica. Se llama simplemente Responsive Website Design Checker & Testing y, como su nombre indica, nos ayuda a comprobar cómo se muestra una página web en diferentes dispositivos.
Sólo hay que pegar la dirección de nuestro sitio web en el campo correspondiente y pulsar en el botón Test. Luego sólo tendremos que elegir las distintas opciones para comprobar si nuestra web se adapta a distintos tamaños de pantalla y motores de navegación.
En concreto, podemos simular iPhone, Google Nexus, Galaxy, Kindle, iPad, Windows, Mac y distintos tamaños de pantalla de escritorio.
QuirkTools Screenfly
Con un catálogo de dispositivos algo más amplio, QuirkTools Screenfly nos ayuda a ver una página web cualquiera desde diferentes pantallas, dispositivos y sistemas operativos.
Indicamos la dirección, pulsamos en Go y veremos una vista previa de esa página o sitio web. Desde la barra superior podremos elegir entre pantallas de computadora, tablets, dispositivos móviles o televisores.
Además, permite girar la pantalla, cargar de nuevo la página y/o abrirla empleando un servidor proxy para evitar limitaciones geográficas o de proveedor.
Google Resizer
Cuando Google rediseñó Android con su nuevo estilo Material, puso en marcha un sitio web con material, herramientas y manuales de ayuda a diseñadores y programadores de aplicaciones.
Entre las herramientas disponibles encontraremos Google Resizer, que nos permite ver una página web en diferentes tamaños de pantalla.
Como en los casos anteriores, indicamos la dirección y se mostrará en la parte inferior en forma de vista previa adaptada a dispositivos de escritorio y/o móviles genéricos. Al pulsar en los iconos de escritorio y móvil, veremos que la vista previa tiene una guía con tamaños de pantalla.
En móvil, por ejemplo, veremos pantallas de 480, 600, 840 o 960, mientras que en dispositivos móviles encontraremos 360, 600, 720 y 1024.
Website Responsive Testing Tool
Con un estilo similar a los anteriores, Website Responsive Testing Tool mostrará una dirección cualquiera según el tamaño de pantalla o dispositivo que elijas de entre el amplio catálogo.
Smartphones, tablets, computadoras, televisores… La herramienta tiene un menú con distintas resoluciones e incluso permite simular que giramos la pantalla de vertical a apaisado y viceversa.
Como complementos, también es posible activar o desactivar el scrolling para navegar por la página principal de arriba abajo, así como comprobar otros aspectos de código y estándares web mediante su W3 Validator.
Además de mostrar la página adaptada a diferentes tamaños de pantalla, es posible navegar por ella para comprobar si enlaces y demás subpáginas se muestran también correctamente.
