Mobile first, ¿Cual es la idea?
Click here to load reader
-
Upload
antonio-kobashikawa-carrasco -
Category
Design
-
view
48 -
download
4
Transcript of Mobile first, ¿Cual es la idea?
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