No hace falta que te cuente lo importante que es tener un diseño responsive, adaptado a todos los dispositivos. Esto es lo que comúnmente se llama diseño web responsive, o sensible, y que viene a decir que el sitio web se muestra de forma diferente según sea la pantalla en la que se está viendo.
La mayoría de la gente ni lo conoce ni le interesa, pero esto es lo que hace que cuando entres en una página web con diseño responsive desde un móvil o una tableta, no te encuentres textos superpuestos o que necesitan una lupa para leerse, que puedas usar el menú cómodamente que y no tengas que usar el dedo de tu hijo para acertarle al enlace que tu querías y no a los que le rodean. Y lo que ocurre casi siempre cuando alguien intenta ver desde su móvil uno de esos sitios web que no están preparados, es que se sale y busca otra página similar, porque su navegación se hace imposible.
La importancia de la adaptación al móvil en los buscadores
Hasta hace poco solo era una recomendación, cada vez mayor, debido al auge del uso de teléfonos móviles y tabletas para acceder a Internet. Pero hace unos meses Google, anunció que lo tendría en cuenta como factor de clasificación en su ranking web, que es como determina que aparezcas entre los tres primeros o te hundas en la página dieciséis de una determinada búsqueda, por ejemplo.
En el mundillo este del SEO y los círculos del marketing online se le conoce a este anuncio como el Mobilegeddon 😉
La verdad es que de momento no están siendo muy duros, pero era un aviso, la siguiente será de veras. Y si entonces mas te valdrá tener hechos los deberes.
En quenohariayoporti hace ya tiempo que todos los diseños web que entregamos están adaptados a los dispositivos móviles, por eso nos gustaría hacerte algunas recomendaciones…
¿Qué hace un buen Diseño Responsive?
En pocas palabras, el objetivo del diseño sensible o responsive es proporcionar a todos los usuarios, sin importar el dispositivo que estén utilizando, una experiencia de navegación y uso similar.
En términos más específicos, esto significa que todas las funcionalidades de una página estén y se comporten de la misma manera en cualquier dispositivo. Piensa en el menu, los botones de redes sociales o un formulario de contacto, por poner algunos ejemplos. Por otra parte, el contenido debe ser fácil de leer, sin importar el dispositivo en que el usuario esté navegando.
Por lo general, los clasificamos en cuatro según el tipo de pantalla:
- Escritorio, o PC
- Portátil, desde los pequeños notebook hasta las grandes pantallas de retina
- Tabletas y
- Teléfonos inteligentes
Aclaración: Las dimensiones exactas de cada uno varía enormemente entre modelos y de un fabricante a otro. EL sitio web debe poder verse y usarse correctamente en cualquier dispositivo, si bien es posible que sea prácticamente imposible (que es una forma de decir carísimo) ajustarlo y calibrarlo todo para que se vea a la perfección en absolutamente todos los modelos del mercado.
¿Realmente necesito un sitio web adaptado al móvil?
Pues si. Y no solamente por el peso que pueda tener a la hora de aparecer en los buscadores sino porque la tendencia de acceso desde móviles sigue aumentando y, previsiblemente vaya a más.
Te proponemos una sencilla prueba: seguramente tengas acceso a las estadísticas de tu sitio web con Google Analytics, o un servicio similar. Si no es así. ya estás tardando en pedirle a tu webmaster que te lo configure para que al menos te llegue un informe mensual.
Desde estos servicios de analítica web, puedes ver cuantas personas visitan tu sitio desde un dispositivo móvil. También puedes averiguar cuánto tiempo se quedan y así el tipo de experiencia que están teniendo en tu página web.
Dependiendo de la forma en que tengas configurado el servicio de analítica web, también puedes descubrir cuantas de las personas que utilizan un dispositivo móvil se convierten en clientes, se unen a tu lista de correo o se inscriben para una prueba gratuita de un servicio o promoción que ofrezcas.
Esta información normalmente te la pueden mostrar filtrada para equipos de escritorio, móviles y tabletas.
También puedes echar un vistazo a los datos relativos a la forma en que las personas interactúan en tu sitio mediante:
- El porcentaje de rebote
- Las páginas vistas por sesión
- La duración media por sesión
Si los números son significativamente inferiores en móviles que las estadísticas para escritorio, tenemos un problema grave entre manos. Los datos te están diciendo que en móviles y tabletas la gente no está teniendo una buena experiencia cuando visitan tu sitio.
Lo que significa que es hora de hacer algo.
¿Cómo se ve tu sitio en los dispositivos móviles?
Si tu sitio web no está adaptado o no estás seguro de si lo está, lo primero que debemos hacer es comprobarlo. Afortunadamente, existen un montón de herramientas en Internet que pueden ayudarle a evaluar cómo se ve y cómo funciona tu sitio en los dispositivos móviles.
A continuación te enumero algunas páginas donde puedes hacer esta comprobación, pero, para empezar, vamos a realizar la prueba más simple de todas.
Si estás en un ordenador o portátil, entra en la página que deseas probar, deja que se cargue y luego haz tu pantalla del navegador más estrecha (arriba del todo a la derecha, minimizar tamaño, al lado de donde se cierra el navegador). Al hacer esto, si el sitio tiene un diseño responsive, los elementos de la página web se alternarán unos encima de lo otros, pero todavía serás capaz de ver la página completa gracias al desplazamiento.
Si haces la prueba desde un dispositivo móvil, sólo tienes que visitar el sitio que deseas probar y ver cómo se muestra. Si aparece exactamente igual que la versión de escritorio, pero encogido, tu sitio no es sensible.
Cómo probar en múltiples dispositivos mediante simuladores en línea
Con estas dos sencillas pruebas, te puedes hacer una idea, pero… ¿Qué pasa con la gran variedad de modelos que hay por ahí? De los iPads al Google Nexus o a los Samsung Galaxy? ¿Cómo se ve tu sitio web en ellos?
Afortunadamente, no tienes que salir y gastarte una fortuna en todos los dispositivos en el mercado. En vez de eso, puedes utilizar uno de estos emuladores, disponibles para ejecutar las pruebas.
Echemos un vistazo a algunos de ellos.
MobileTest.me
Éste pone a prueba tu sitio a través de seis emuladores de dispositivos móviles, los más populares, incluyendo el iPhone 5, HTC ONE y Google Nexus.
Para probar un sitio, haces clic en el dispositivo que te interesa y escribes la dirección del sitio (URL) o la página que deseas probar. En pocos segundos el emulador muestra la página en el dispositivo. No sólo eso, los vínculos de la página y otros datos permanecen activos, por lo que puedes navegar por el sitio a través del emulador.
Responsinator
Un emulador ingenioso que se centra sobre todo en los dispositivos de Apple, pero que también incluye un par de máquinas de Android. En lugar de tener que probar cada dispositivo a su vez, como el MobileTest.me, basta introducir la URL de prueba y desplazarte por la página.
Mientras lo haces, verás cómo se ve en los dispositivos más populares, tanto en modo vertical como horizontal.
Responsimulator
Este es aún más específico para los dispositivos de Apple: sólo muestra el iPhone y el iPad, pero si es lo que buscas es perfecto.
Am I Responsive
El mismo proceso para esta: introduces la URL de prueba para obtener los resultados. Esta vez, no tendrás que desplazarte, verás los resultados en la parte superior de la pantalla para dispositivos genéricos. Si haces clic en el interior de la pantalla de cada uno, puedes desplazarse y utilizar el sitio con normalidad.
Prueba Mobile-friendly de Google para móviles
Hay uno más que vale la pena mencionar: la propia herramienta de Google.
Prueba de Mobile-friendly de Google
¿Y ahora qué?
Una vez que hemos tomado consciencia de la importancia de que nuestro sitio web sea sensible y se adapte a todos los dispositivos tenemos dos posibilidades: que nuestro sitio web sea responsive (Yuhuuuu!) o que no lo sea, en cuyo caso puedes buscar una empresa que te haga un diseño responsive de tu sitio web o directamente contactar con quenohariayoporti 🙂
Dinos tu propia experiencia, otros emuladores que merezcan ser citados o cualquier comentario al respecto que quieras hacer…
