Es probable que alguna vez hayas escuchado el término “sitio web responsive” y quizá tengas conocimiento de su significado, pues bien, en este artículo voy a explicarte mucho más a fondo de qué se trata, pero… ¿Has escuchado el término mobile first? Este es tal vez menos conocido pero es mucho más importante.

Antes de empezar, es importante conocer los beneficios de tener un sitio web adaptado a dispositivos móviles:

• Mejora la usabilidad de tu sitio web.
• Aumenta el engagement y fidelización de tu marca con el usuario.
• Es más atractivo para google en su indexación y posicionamiento en los resultados de búsqueda.
• Transmite confianza y profesionalismo a tus clientes prospectos.
• Las personas permanecen más tiempo en su smartphone que en un computador.
• Los usuarios te podrán hacer una llamada, enviar un mensaje por correo o whatsapp, de manera más ágil y rápida.

Un poco de historia

Un sitio web responsive, es un sitio web capaz de adaptarse a cualquier tipo de dispositivo y pantalla (desktop, tablet, mobile), este concepto surge en internet debido a la evolución de la tecnología y la posibilidad de navegar a través de celulares inteligentes; tanto fue el cambio, que incluso el lenguaje en el que se desarrollaban los sitios web tuvieron que evolucionar y el HTML5 pasó a ser el rey de internet; y con él, un conjunto de estándares y buenas prácticas que comenzaron a convertirse en tendencias de diseño y desarrollo. Justo ahí se vuelve popular el término “web responsive”, con el objetivo de que los sitios web pudieran acoplarse fácilmente a una tablet o un smartphone.

Con el paso del tiempo y la velocidad con que avanza la tecnología, este concepto pasó a ser un universo de buenas prácticas, donde ya no solo se trata de ajustar el tamaño de un sitio web a un dispositivo móvil, sino también que este ofrezca una mejor experiencia de usuario.

Sitio web responsive

Ya mencionado anteriormente, cuando hablamos de un sitio web responsive, hablamos de un sitio web que se acomoda automáticamente a cualquier dispositivo y pantalla (desktop, tablet, mobile). Esto se logra gracias a HTML5 y CSS3 que combinan unos estándares y una semántica en su código que permite mágicamente hacer que pasen ciertas cosas en la programación. Sin embargo, hay elementos y funcionalidades que se deben acomodar manualmente desde el código CSS. Estos procesos son realizados por un desarrollador frontend.

Con este método y sin la necesidad de implementar un diseño adicional, se puede tener un sitio web que se adapte a cualquier pantalla y dispositivo.

Ahora, ¿con esto quedamos a la vanguardia? posiblemente es una buena solución para que tu sitio web se visualice en smartphones o tablets, sin embargo, no podrás tener la autoridad de manipular la experiencia completa de tu usuario. Así que si quieres estar a la vanguardia, debes de pasar al siguiente nivel con tu sitio web.

Mobile first

Debido a la alta y cotidiana demanda de navegabilidad en dispositivos móviles los últimos años, nace el concepto de mobile first, donde todo su ideal consiste en crear un sitio web y/o producto digital diseñado y desarrollado pensando principalmente en la experiencia móvil.

Esta metodología es lo opuesto al método web responsive o diseño adaptativo, ya que aquí comenzamos a pensar desde la experiencia de un usuario en su smartphone y la vamos escalando hasta un dispositivo desktop.
Esto no es solo un trabajo de diseño, acá se combinan un conjunto de buenas prácticas y metodologías que llevaran a crear un producto 100% optimizado para dispositivos móviles.

En este concepto se deben considerar los siguientes aspectos:

• Diseño UX: se estudia el comportamiento de la experiencia de usuario en diferentes dispositivos y se crea la estructura correspondiente de cada una.
  
• Diseño UI: el diseño de la interfaz está pensado 100% en ofrecer una correcta experiencia móvil, se diseñan elementos que puedan ser escalables a pantallas más grandes.
  
• Desarrollo Frontend: el desarrollo de funcionalidades es más apropiado para usuarios móviles.
  
• Optimización de recursos: la optimización de imágenes, fuentes y elementos de desarrollo es fundamental para la estabilidad del sitio web móvil.
  
• Carga y velocidad: La carga máxima de una página en móvil debe estar entre 1 y 3 segundos para una correcta optimización.

Como puedes ver, mobile first es estar un paso más allá de solo tener un sitio web responsive, es llevar tu sitio web al siguiente nivel ofreciendo al usuario una mejor experiencia móvil.

Si me preguntan cuál método es mejor, siempre voy a estar a favor de las mejores prácticas, por este motivo mi recomendación es crear un producto digital con metodología mobile first; de todos modos, lo más importante hoy es que tu sitio web pueda ser navegado desde cualquier dispositivo y aprovechar todos los beneficios que esto ofrece.