El poder de la metodología de “Móvil primero”

The Power of the “Mobile First” Methodology

Desarrollar una página web es cada vez mas complicado, ya que día a día se lanzan nuevos dispositivos electrónicos con pantallas de diferentes tamaños y resoluciones, por lo que el diseño de tu pagina se tiene que ver bien en distintos acomodos para distintas pantallas. La metodología de móvil es exactamente a lo que suena, al diseñar primero nuestra pagina para dispositivos pequeños, y progresivamente modificando el diseño para dispositivos más grandes.

La estrategia tradicional para diseñar paginas tiende a ser la de “degradación gradual”, donde primero se inicia con los dispositivos grandes, y continuar removiendo funcionalidades o partes del diseño “no esenciales” conforme se va desarrollando para dispositivos mas pequeños. Esta estrategia no es muy buena para un diseño adaptable o responsivo, ya que conforme se van recortando partes de la página, se complica el desarrollo al tener componentes entrelazados o diseños forzados.

Por otro lado, la estrategia de móvil primero es de “mejoramiento progresivo”, ya que, al iniciar con el diseño de los dispositivos mas pequeños, se tiene que hacer enfoque en las funcionalidades y vistas mas esenciales para la página, de manera que el diseño estará sustentado en lo primordial desde el inicio y se podrán agregar cosas sin complicaciones a medida que avanza el proyecto.

Dado que esta metodología hace énfasis en diseñar para los dispositivos mas pequeños primero, hay muchas limitantes desde el principio, como la cantidad de contenido que se puede mostrar, el ancho de banda (es importante por el tipo de contenido a mostrar) o el acomodo de componentes. Estas limitantes benefician mas a los usuarios, ya que obligan a los desarrolladores a elegir lo mas importante, que es lo que los usuarios vienen buscando en primer lugar. También ayuda mucho que vaya en orden de pequeño a grande y no al revés, ya que sería más difícil tratar de acomodar un diseño grande en una pantalla pequeña, que ampliar un diseño pequeño para una pantalla grande.

Proceso

Lista tu contenido - Comienza por hacer un listado de todo el contenido que quieras poner en la página. Entre más especifico esté el listado mejor (por ejemplo, listar páginas, que componentes habrá, que texto, que imágenes, etc.)
Jerarquización del contenido - Asigna un nivel de prioridad a cada elemento de tu lista de contenido para que puedas determinar que será lo mas importante dentro de cada pagina y facilitar el proceso de diseño.
Escalar contenido - Diseña la página para móvil primero, tomando en cuenta los breakpoints mas pequeños. Una vez terminado el diseño, úsalo como base para breakpoints más grandes. Considera también ampliar el tamaño de botones o elementos que se vean bien en pantallas grandes, pero pueden ser difíciles de presionar con un dedo.
Quitar hovers - Como no hay control con hover en móvil, asegúrate que tu diseño no dependa de esta funcionalidad, por lo que se recomienda que no lo incluyas en tus diseños iniciales (móvil). 5. Quitar gráficos grandes - Los gráficos grandes no se ven muy bien en móvil (se ajustan a como pueden), por lo que puede arruinar la experiencia del usuario.