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
Top Related