The Power of the “Mobile First” Methodology 

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 

  1. 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.) 
  2. 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. 
  3. 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. 
  4. 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. 

6. Probar - Prueba tu diseño en un dispositivo móvil, y busca que la pagina se vea bien, cargue rápido y sea fácil de usar.

Share if you like it

  • Categories
  • Tags
  • Recent posts
  • Leave a Comment

    Name*
    Email*
    Website

    The reCAPTCHA verification period has expired. Please reload the page.