El documento explica el enfoque de "Mobile First" para el diseño de sitios web, el cual consiste en definir primero las reglas CSS pensando en dispositivos móviles pequeños y luego ir agregando reglas mediante queries de medios para adaptarse a pantallas más grandes, en contraste con el enfoque tradicional de "Desktop First". Este enfoque se alinea con los principios de mejora progresiva y permite enfocarse primeramente en los bloques de contenido antes que en la presentación.

1. Mobile First
¿Cuál es la idea?

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

3. 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

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

5. @media
(max-width: mmmpx)
redefine reglas que se
aplican cuando el ancho está
por debajo del máximo
indicado mmmpx
medium

6. @media
(max-width: ssspx)
redefine reglas que se
aplican cuando el ancho está
por debajo del máximo
indicado ssspx
small

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

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

9. @media
(min-width: mmmpx)
redefine reglas que se
aplican cuando el ancho está
por encima del mínimo
indicado mmmpx
medium

10. @media
(min-width: lllpx)
redefine reglas que se
aplican cuando el ancho está
por encima del mínimo
indicado lllpx
large

11. 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

12. 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.

13. Gracias
@rulokoba
Rulo Kobashikawa
Mobile First, ¿Cuál es la idea?
20171220