Mobile First¿Cuál es la idea?

En un diseño simple, las reglas css se aplican para cualquier ancho de ventana

Para adaptar un diseño para desktop a menor ancho, se van agregando media queries con redefiniciones que se aplican hasta un ancho máximo

graceful degradation

las reglas se definen pensando en el diseño large, por default

large

@media(max-width: mmmpx)

redefine reglas que se aplican cuando el ancho está por debajo del máximo indicado mmmpx

medium

@media(max-width: ssspx)

redefine reglas que se aplican cuando el ancho está por debajo del máximo indicado ssspx

small

En Mobile First se van agregando media queries con redefiniciones que se aplican a partir de un ancho mínimo

progressive enhancement

las reglas se definen pensando en el diseño small, por default

small

@media(min-width: mmmpx)

redefine reglas que se aplican cuando el ancho está por encima del mínimo indicado mmmpx

medium

@media(min-width: lllpx)

redefine reglas que se aplican cuando el ancho está por encima del mínimo indicado lllpx

large

Ventajas del Mobile First● Está acorde con el Progressive Enhancement que también se hace en UX para el

desarrollo de prototipos y en el desarrollo Lean en general.● Así, permite enfocarse primero en los bloques constituyentes

○ luego en el contenido○ luego en la presentación

● Es más económico agregar algo cuando llega el momento (Just In Time) que quitar cosas cuando no es necesario

Sin embargo● La idea es usar Mobile First para proyectos nuevos, no viejos● Es más económico pasar un diseño a mobile siguiendo las pautas del Graceful

Degradation que volverlo a hacer como Mobile First○ No es una tarea trivial pasar un diseño Desktop First a Mobile First○ Es más seguro ir degradando un diseño que ya funciona

● En general, no es buena idea volver a hacer algo que ya funciona, a menos que se tenga un plan importante de mejoras con Progresive Enhancement que haga que valga la pena.

Gracias@rulokoba

Rulo KobashikawaMobile First, ¿Cuál es la idea?20171220