Mobile First

¿Qué significa mobile first?

En la actualidad se estima que aproximadamente dos billones de personas en el mundo acceden a Internet por medio de sus smartphones, esto viene a ser un 51% del total de usuarios de celulares inteligentes, razón por la que optar por diseños de páginas web con prioridad en su versión móvil sea cada vez más usada.

Mobile first es un enfoque que da prioridad al diseño de una página web en su versión para móviles y adaptarla a una versión de escritorio posteriormente.

Antes se buscaba hacer primero el diseño de escritorio y luego adaptarlo a móviles, sin embargo, el creciente uso de estos dispositivos en los últimos años ha hecho que el diseño para móviles se haga más necesario.

Entonces con el enfoque de mobile first los desarrolladores tienen la flexibilidad de ampliar en lugar de reducir.

Esto es porque en una versión de escritorio de un sitio web tiene mucho más espacio para aprovechar, por lo que los elementos de diseño principales pueden estar muy bien adaptados para brindar una mejor experiencia de usuario.

Pero la cosa cambia cuando el usuario decide abrir el sitio desde su dispositivo móvil, pues no encuentra el mismo diseño, el contenido no se adapta tan fácilmente a un espacio más pequeño o las imágenes y otros elementos pueden verse desordenados.

Lo que luego conduce a que la experiencia móvil esté por debajo del promedio en comparación con la versión desk y para algunos usuarios, puede verse como una página con diseño improvisado.

Con mobile first los diseñadores podrán comenzar por crear una página pensada para los dispositivos móviles, ubicando los aspectos más relevantes de una mejor manera, así el header y otras secciones del sitio se podrán priorizar.

Esto finalmente hará que la ampliación a una versión de escritorio sea mucho más óptima.

Entonces,

¿Por qué es importante el diseño mobile first?

El mobile first se hace con el objetivo principal de dar una mejor experiencia de usuario (UX) a los usuarios de dispositivos móviles como celulares o tablets.

Es la manera correcta de diseñar un sitio web.

En primer lugar, la ampliación de los diseños (de mobile a desk) presenta mucha más libertad en la forma en que puedes adaptar todo tu contenido.

Teniendo un producto móvil que funciona bien, ya has priorizado las funciones y capacidades necesarias de tu sitio web. Así que las decisiones para adaptar esa versión móvil a una de escritorio se concentran en qué agregar y cómo… En vez de tener que pensar “qué elimino de mi página” para que se adapte a la versión para celulares.

La clave de iniciar con un diseño para móviles es concentrarse en el contenido dando prioridad a la organización de la página web, modificando elementos que se enfocan en lo esencial, de esta forma te concentras en un contenido que sea realmente útil para una persona que llega por primera vez a la página y accesible en utilidades para usuarios recurrentes.

Otro de los factores por los que hacer diseños mobile first es que si realmente hace seguimiento del tráfico a tu sitio web, el algoritmo de Google podrá favorecer tu sitio en su motor de búsqueda para tener mejor calificación y por consiguiente, mejor clasificación en las páginas de resultados.

Si bien a Google lo que más le interesa es que tu página sea accesible en cualquier versión (escritorio o móvil) si algo es cierto es que para ellos es relevante que los sitios web proporcionen una buena experiencia de usuarios en versiones móviles, porque esto puede aumentar su visibilidad y potencialmente, la tasa de conversión.

¿Cómo es el proceso de mobile first design?

Si estás pensando en qué se debe hacer para tener una versión amigable para dispositivos móviles, te mostraremos algunos pasos que puedes tener en cuenta antes de comenzar.

El enfoque mobile first puede hacerse de múltiples formas, por ejemplo en Dazzet diseñamos páginas web pensadas primero para dispositivos móviles y aplicamos todo este proceso:

1. Planificación y elaboración de la visión: Comenzamos con una investigación de la funcionalidad, el diseño y el propósito del sitio web o de la aplicación, de acuerdo con las necesidades de la empresa, para así estructurar un cronograma, prototipos, etc.
   En esta fase se combina, organiza y estructura un plan para determinar cuáles serán los objetivos, el alcance y qué capacidades requieren las funciones principales y cómo deberán estar integradas al diseño. Aquí también se puede valorar qué se incluirá en la versión de escritorio.
2. Evaluación técnica: analizamos los sistemas en los que deseas sentar la base de tu página o de la aplicación, por ejemplo, la compra del dominio (si la página web se construye por primera vez), la elección del hosting, en qué plataforma se creará la página, compras de plugins, etc.
3. Diseño y prototipo: aquí todas las ideas que se tenían en el papel en los pasos anteriores comienzan a tomar forma!
   Comenzamos con el diseño del sitio con visualizaciones previas y tangibles de cómo deseas que se vea, se sienta y se desarrolle dando prioridad a lo que es mejor para los usuarios con la visión empresarial.
   De ahí que la experiencia de usuario es primordial en esta etapa, que el diseño sea responsive, pensando en la movilidad: qué flujos serán intuitivos y fáciles para los visitantes móviles.
   Se tienen en cuenta otros elementos como el copy, ubicación de botones de call to action, contenidos gráficos,
4. Desarrollo: aquí comienza todo el proceso de codificación con base en lo planeado!
5. Pruebas: este es un paso esencial e iterativo, es decir que no se hace solo una vez, sino que se establecen momentos específicos para hacer pruebas del funcionamiento y/o de la experiencia de usuario de tu sitio web.
   Aquí se puede optar por hacer pruebas manuales, automatizar las pruebas, lanzar una versión beta o incluso, alojar a un grupo de usuarios para recibir feedback sobre la página y su versión móvil en diferentes dispositivos.
6. Implementación: una vez que todo ha salido como queremos, lanzamos la página!
7. Monitoreo: cuando ya la página se encuentra al aire y ha recibido visitas, siempre es necesario monitorear y hacer analítica. Esto brindará datos esenciales sobre el tiempo de carga, el rendimiento, la accesibilidad, la disponibilidad y funcionalidad.
   Ten en cuenta que las pruebas siempre son necesarias, así que se pueden determinar un cronograma de monitoreo para evaluar con base en objetivos específicos, esto es vital en el proceso de hacer optimizaciones al sitio web.

Si quieres saber más de cómo crear páginas web exitosas te invitamos a leer esta guía.