¿Es tu sitio mobile friendly o responsive? 5 claves para identificar las diferencias
Sabemos que un buen diseño web debe contar con 2 aspectos esenciales para su éxito: la visualización atractiva y, por supuesto, la correcta y eficiente funcionalidad. Así que, tomando en cuenta estos elementos, así como la usabilidad actual (el cual involucra todo tipo de dispositivos y gadgets) habrá que hacernos 2 preguntas esenciales:
¿Mi sitio realmente está adaptado para poder verso y usar en cualquier dispositivo? Y teniendo un gran ¡sí! entonces.
¿Mi formato es mobile friendly o responsive?
1: ¿Qué significan los términos mobile friendly y responsive?
Mobile Friendly
- Cuando se abre en un dispositivo móvil lo que se ve en la versión de escritorio se adapta a la escala de la pantalla del smartphone o tablet.
- El acomodo de las letras, menús, imágenes y demás elementos es idéntico que cuando se abre en un desktop, sólo que en menor tamaño.
Responsive
- Diseñado con las distintas apariencias que tendrá para cada tipo de pantalla, es decir, para escritorio y para tablets o smartphones.
- Los menús, imágenes, enlaces, textos, videos y demás elementos no lucirán igual en todos los dispositivos, pero tendrán las mismas funciones.
Por lo que, de entrada, veremos un diseño más sofisticado en este último, pues no sólo se tratará de una escala, sino más bien, de una optimización completa para la mejor experiencia de la persona usuaria.
2: Usabilidad
Ahora bien, ya que tenemos las bases del “mobile friendly o responsive” chequemos otro dato trascendental que los diferenciará; y éste es la usabilidad como factor esencial, pues en cada uno lo veremos de diferente forma:
Mobile Friendly
- Se enfoca más en la imagen para que se adapte a cada dispositivo sin variaciones y menos en la usabilidad, pudiendo limitar la experiencia de usuario.
- No cambia el formato web, sólo se escala.
- Contempla los móviles más como dispositivos de divulgación y no tanto como de interacción.
Responsive
- Apuesta totalmente por la usabilidad.
- Su web lucirá distinta en cada versión, es decir, según si es Escritorio, Smartphone o Tablet.
- La identidad se mantendrá mediante el branding.
Así, veremos qué para elegir entre mobile friendly o responsiva dependeremos de lo que queramos priorizar: imagen o usabilidad.
3: Diseño
Por otro lado, otra diferencia clara entre los 2 conceptos será, por supuesto, el uso distinto del diseño, pues veremos lo siguiente en cada uno de ellos:
Mobile Friendly
- Se basará en la identidad visual.
- No habrá opciones de cambio dependiendo el dispositivo.
- Todas las imágenes y funciones (incluyendo botones) se escalarán.
Responsive
- Regularmente, dará opciones a la persona usuaria al abrir el sitio, preguntándoles en qué tipo de dispositivo deseará verlo.
- Distintos diseños para cada dispositivo.
- Todos los links y botones funcionarán de forma específica y adecuada.
Por lo que veremos que en esencia, su diferencia radicará en la cantidad de diseños, pues en el caso de la versión responsiva habrá que hacer tantos sitios como dispositivos se tengan.
4: Prioridades
Ahora bien, si después de todo esto, todavía no sabes qué es lo mejor para tu sitio, si un formato mobile friendly o responsive, pues entonces checa las prioridades de cada uno:
Mobile Friendly
- Diseño dirigido a necesidades de usuarios de móviles, como por ejemplo, e-commerce, llamadas, descarga de apps, etc.).
- Creación rápida de sitios, incluyendo menor peso y carga más rápida.
- Mayor agilidad a nivel de HTML y CSS pues sólo se programa lo que un navegador de móvil necesita mostrar.
- Costos más económicos.
- Muy buenas opciones de DIY.
Responsive
- Facilidad para actualizar el sitio.
- Optimización para motores de búsqueda.
- Aumento de conversión y redirección de códigos.
- Mejor derivación de tráfico.
Así que, checa qué necesitas y quieres para que selecciones la opción más adecuada dependiendo del objetivo y la función del sitio.
5: Herramientas
Finalmente, y aunque no se trata de sus diferencias, hay que cerrar este tema con algunas herramientas que se recomiendan usar para que revisar el grado de movilidad de los sitios:
- Prueba de optimización para móviles de Google: Solo ingresando la URL o código del sitio para que se haga la inspección.
- Métricas web principales: Con 3 elementos que garantizan la experiencia del usuario y el ranking de la web:
- Largest contenful paint (LCP): Tiempo de carga de contenido a partir del elemento más grande que se ve sin hacer scroll down. Un tiempo menor a 2.5 segundos es considerado bueno por Google.
- First input delady (FID): Responsividad de la página o el tiempo que hay entre una acción hecha por la persona usuaria (como un click) y la respuesta del navegador. Más de 0.1 es calificado por Google como lento.
- Cumulative layout shift (CLS): Estabilidad visual, es decir, las ocasiones en que los elementos se mueven a medida que se cargan. Tiempos mayores a 0.1 son calificados como favorables por Google.
¿Mobile friendly o responsiva?
Como viste, ser mobile friendly o responsiva es más una cuestión de decidir qué es lo más conveniente para nuestros objetivos en cuanto a diseño y usabilidad, pues a pesar de sus diferencias, ambos tienen como objetivo esencial el poder mostrar un sitio de forma adecuada en los diferentes dispositivos, recordando que la visualización múltiple es un hecho y una necesidad en los tiempos que corren.
