Mobile First Design ¿Por qué es necesario? 📱

A la hora de diseñar una página web una de las preguntas más importantes que uno se debe hacer es “¿Que debo hacer para que mi página sea accesible para el mayor público posible?”. 🤔


Indudablemente una respuesta a eso es que el contenido se pueda visualizar correctamente en los navegadores más utilizados como lo es Chrome y luego Safari.

En este caso no hay mucho que considerar ya que el mercado es dominado por solo un par de navegadores que ocupan el 80% del mercado, y si bien hay que darle prioridad a los mismos, no hay que olvidarse de los otros en lo posible ya que juntos sacan una porción grande de la torta.


Bien, pero ahora en relación a los dispositivos, ¿A cuál tengo que priorizar al hacer una página web, al ordenador o al dispositivo móvil? 💻📱

Es una buena pregunta, a finales del 2016 se mostraba una clara tendencia a que teléfono móvil iba a dominar el mercado.



Uno se imaginaría que el smartphone a esta altura ya dominaría el mercado por una amplia diferencia pero la realidad es que la lucha entre las computadoras y los dispositivos móviles aún no termina.

Si bien la mayoría de los usuarios ingresan a través de un celular, su diferencia con los usuarios que utilizan computadoras no es muy amplia.



¿Pero por qué sucede esto? 🤔


Navegar a través de un smartphone es muy práctico ya que es el primer dispositivo que uno tiene a mano, pero un análisis por parte de WolfGangDigital llegó a la conclusión que para las páginas donde se requiere ciertas acciones complejas por un usuario, como en los e-commerce, se prefiere utilizar más el ordenador. Esto puede ser debido a que uno al comprar prefiere comparar precio, reviews, características, etc., o a veces si es tu primera compra necesitas rellenar un formulario con varios campos. Una tarea compleja para un celular ya que requiere un nivel de multi-managing que resulta más fácil en un ordenador.


Entonces, ¿Esto quiere decir que hacer “mobile first” es lo mismo que hacer “desktop first”?

No, de igual manera se debe comenzar con “mobile first” por las diferentes restricciones que el dispositivo móvil tiene y el ordenador no.


¿Qué hay que tener en cuenta al hacer un diseño “Mobile First”? ✍


Hacer una página que quepa en la pantalla de un teléfono no es suficiente ya que al ser relativamente chica la manera en la que el usuario interactúa es diferente. Hay que pensar que, a diferencia del mouse que utiliza la gente en un computadora, en un teléfono se utiliza algo menos preciso: el dedo.☝

Por lo tanto hay muchas cosas que podés hacer en un ordenador que no las podés hacer en un dispositivo móvil y no viceversa.


❗Acá van algunos tips para poder hacer una experiencia móvil eficiente:

  • Textos cortos y al punto.

  • Solo pedir información indispensable en los formularios (cuanto menos datos pidas mejor).

  • Hacer grandes los elementos interactivos (botones, links, etc.).

  • Ser menos invasivo (prevenir popups o videos que se autoreproduzcan por ejemplo).

  • Utilizar sliders para acortar contenido que se extiende mucho verticalmente (como puede ser un listado en formato tarjeta de blogs o productos).

  • Adaptar el contenido multimedia para distintos dispositivos, por ejemplo no mostrarle una imagen de resolución 1080p a un teléfono que difícilmente note la diferencia si tuviera la mitad de resolución.

  • Mejorar la velocidad de carga


Herramientas que nos ayudan a saber si nuestra página está bien preparada para un dispositivo móvil:


🔶Google Mobile-Friendly Test


Google tiene su propia versión de la prueba para dispositivos móviles y es bastante sencilla. Ingresá la URL de su sitio web y haga clic en Analizar, y luego espere los resultados. Si tu sitio es compatible con dispositivos móviles, vas a ver un mensaje de confirmación verde. Si no es así, la prueba te va a mostrar las razones por las que tu sitio web no pasó la prueba y te dirigirá a recursos para ayudarte a solucionar los problemas.


🔶Google Search Console


A diferencia de Mobile-Friendly Test esta herramienta es muy útil para analizar los distintos dispositivos que ingresan a tu página web y saber si el contenido se mostró adecuadamente o hubo un problema de adaptación (como por ejemplo un elemento se estiró por fuera de los bordes de la pantalla). También te ayudará a analizar el tiempo de carga para saber si tu página esta bien optimizada.


🔶MobiReady


MobiReady al igual que Google es sencillo y gratuito. Solo con ingresar la URL de tu sitio web te informará el estado de tu página listado los distintos elementos analizados con un círculo que puede ser verde, amarillo o rojo dependiendo de si encontró un un problema grave o solo una recomendación para mejorar.



¡Esperamos que te haya sido útil! Cualquier consulta, nos encontrás en el chat 💬