Como saber si mi web es responsive y las mejores herramientas

El Internet de la segunda década del siglo XXI definitivamente ha dejado atrás las páginas web tradicionales, como consecuencia de su adaptación a un entorno en permanente cambio, con multitud de diferentes tipos de accesos que condicionan en buena medida el diseño web y la forma de mostrarse al usuario.

Como el nuevo algoritmo de Google prioriza la versión móvil, para el desarrollo de nuevos diseños web o para la optimización de los existentes, deben utilizarse herramientas que verifiquen la adaptación de esos sitios web a los distintos tamaños de dispositivos móviles existentes.

Tabla de contenidos

¿Qué es una Web responsive?

El nombre responsive es la forma coloquial de denominar a las webs adaptativas, y viene de las siglas en inglés de RWD, Responsive Web Design. Esta tecnología no es nueva: Ya en el año 2008 el consorcio de la World Wide Web publicó la guía con buenas prácticas Mobile Web Best Practices 1.0

El diseño responsive  es un conjunto de técnicas de diseños webs que se utilizan para crear un sitio que se adapte y cambie según el dispositivo o resolución de pantalla que esté utilizando el usuario.

Mediante ese diseño, los usuarios siempre verán una página web optimizada, con una única URL y código;  no importando si acceden desde una pantalla panorámica, una tablet, un notebook o un dispositivo móvil.

El diseño responsive reestructura los elementos y contenidos que contiene el sitio web y los adapta a las características de la pantalla a utilizar, optimizando el uso del espacio disponible dentro la propia pantalla, con el objetivo de satisfacer la expectativa de buena experiencia del usuario.

Esa reestructuración y adaptación se consigue mediante las hojas de estilo CSS (Cascading Style Sheets – Hojas de estilo en cascada) y de las “media queries”, siendo éstas las responsables de redimensionar y adaptar el contenido a la pantalla, para satisfacer positivamente la experiencia del usuario al navegar e interactuar en cualquier pantalla con cualquier sitio web.

web-design-responsivo

¿Por qué una Web debe ser responsive?

El contenido de un sitio web puede ser visualizado utilizando cualquiera de los diferentes tipos de instrumentos existentes (ordenadores o PC’s, tablets y teléfonos móviles) los que no sólo tienen pantallas con diferentes tamaños y resoluciones, sino que en algunas, como las de las tablets y los teléfonos móviles, el contenido se puede rotar visualizándose en horizontal o en vertical.

Por lo tanto, es necesario que el contenido de la página web fluya de manera automática, modificando su forma y tamaño al recolocarse y adaptarse a las características de las pantallas de cada dispositivo.

Las páginas web responsive permiten la visualización del contenido y la navegación en todas estas circunstancias, siendo capaz el usuario de interactuar con el contenido de manera adecuada.

Estas circunstancias han determinado que una web responsive ya no sólo es necesaria e importante, sino que se ha convertido en un requerimiento obligatorio para que el sitio no pierda posición en la web y se haga invisible para los clientes y para Google.

Ventajas de una página web responsive

A continuación se relacionan algunas de las ventajas que ofrece un diseño responsive:

  • Genera más tráfico, más conversiones y más ventas, ya que la navegación es adecuada y al mismo tiempo que se proporciona una mejor experiencia de usuario.
  • Mejora la usabilidad de la página (es más comprendida, aprendida y usada, por ser más atractiva)
  • Mejora el posicionamiento SEO, al posicionarte en la web para las búsquedas de los usuarios a través de dispositivos móviles
  • Logra la reducción de los tiempos de carga de las páginas, clave para el SEO y para que los usuarios no abandonen nuestro sitio.
  • Mejora la indexación y el rastreado de la página por parte Google.
  • Contribuye a la reducción de costos y a la necesidades de otros desarrollo web, ya que necesitarás únicamente un sólo sitio, y no uno para la versión PC y otro para la versión móvil
  • Logra un acceso completo a la web:
  • Aumenta la viralidad al generar un diseño web para dispositivos móviles.
  • Disminuye la tasa de rebote de tu web
  • Facilita la analítica web

Los efectos más comunes con los que se detecta que una web responsive no está optimizada para el móvil, son:

  • La ventana gráfica no se ha definido
  • El texto es demasiado pequeño para leerlo
  • El contenido es más ancho que la pantalla
  • Los elementos en los que se puede hacer clic están demasiado cerca unos de otros

Ventajas-des-diseno-responsivo

¿Cómo saber si tu página web es responsive?

  • La prueba para dispositivos móviles de Google. Tras ingresar la URL de tu web será analizada y se te indicará si tiene un diseño web móvil optimizado. El funcionamiento es simple.
  • Introducir la URL de la web a analizar en el apartado habilitado en la parte superior
  • El resultado que Google devuelve es que si la web no está optimizada para dispositivos móviles saldrá un aviso de color rojo o verde si la web es responsive y está optimizada para dispositivos móviles.
  • La prueba real en un conjunto de dispositivos
  • Prueba 1: Reducir, con el ratón, la ventana del navegador procediendo a comprobar si realmente la página web se adapta al menor tamaño, verificando lo siguiente:
    • Que no sea necesario hacer scroll horizontal.
    • La aparición de nuevos menús desplegables fáciles de accionar sustituyendo a los clásicos de navegador web en escritorio.
    • Ajuste preciso de todos los elementos al tamaño de la pantalla…
    • Tamaño de las fuentes legibles.
    • Botones y fuentes clicables con fácil acceso.
  • Prueba 2: Redimensionar la pantalla del navegador desde el escritorio; según varíe el tamaño de la misma, comprobar que la estructura, el diseño y las imágenes se ajustan a las condiciones de visualización.
  • Prueba 3: Verificar, con la ayuda de Google, la existencia de un “para móvil”, en la descripción de la página; lo cual indica que el sitio web cuenta con un diseño responsive.
  • Prueba 4: Abrir cualquier link de alguna página y adaptar la ventana al tamaño de algún dispositivo móvil; luego, actualizar la página y comprobar su adaptación al referido móvil.
  • Prueba 5: Ir a la leyenda “inspeccionar elemento“, dar clic en él, y después al icono del teléfono, seleccionas y das F5 o refrescar página, y listo, verás si tiene o no diseño web responsive.
  • Accediendo a la consola Javascript de Google Chrome
  • Detección de errores mediante la usabilidad móvil de Google Search Console
  • El análisis de las métricas y otras pistas
  • Uso de simuladores o herramientas web

web-responsive

Las Mejores Herramientas de diseño web para comprobar si tu web es responsive

A continuación se relacionan un conjunto de herramientas de diseño web con las que se pueden realizar diferentes pruebas cómodamente desde el navegador:

  1. Resizer
  2. MobiReady
  3. Screenfly
  4. Mobiletest
  5. Responsivepx
  6. Responsinator
  7. Modify Headers
  8. Am I Responsive
  9. ResponsitestTool
  10. .Mobile Friendly
  11. Mozilla Firefox Tool
  12. Screencheck de Cyber Crab
  13. Google Resizer
  14. Demonstrating Responsive Design
  15. Am I Responsive?
  16. Ipadpeek
  17. Responsive Web Design Tester
  18. Responsive Inspector
  19. Mobile/Responsive Web Design Tester

Sin embargo, el mejor responsive test consiste en probar la página web personalmente en el mayor número de dispositivos posible, pues al final, los instrumentos mencionados anteriormente son únicamente simuladores