SEO Mobile-First: Re-enfocando tu proceso SEO a un mundo móvil #TheInbounder
Mobile first, ¿Cual es la idea?
Click here to load reader
-
Upload
antonio-kobashikawa-carrasco -
Category
Design
-
view
49 -
download
4
Transcript of Mobile first, ¿Cual es la idea?
![Page 1: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/1.jpg)
Mobile First¿Cuál es la idea?
![Page 2: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/2.jpg)
En un diseño simple, las reglas css se aplican para cualquier ancho de ventana
![Page 3: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/3.jpg)
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
![Page 4: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/4.jpg)
las reglas se definen pensando en el diseño large, por default
large
![Page 5: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/5.jpg)
@media(max-width: mmmpx)
redefine reglas que se aplican cuando el ancho está por debajo del máximo indicado mmmpx
medium
![Page 6: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/6.jpg)
@media(max-width: ssspx)
redefine reglas que se aplican cuando el ancho está por debajo del máximo indicado ssspx
small
![Page 7: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/7.jpg)
En Mobile First se van agregando media queries con redefiniciones que se aplican a partir de un ancho mínimo
progressive enhancement
![Page 8: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/8.jpg)
las reglas se definen pensando en el diseño small, por default
small
![Page 9: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/9.jpg)
@media(min-width: mmmpx)
redefine reglas que se aplican cuando el ancho está por encima del mínimo indicado mmmpx
medium
![Page 10: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/10.jpg)
@media(min-width: lllpx)
redefine reglas que se aplican cuando el ancho está por encima del mínimo indicado lllpx
large
![Page 11: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/11.jpg)
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
![Page 12: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/12.jpg)
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.
![Page 13: Mobile first, ¿Cual es la idea?](https://reader038.fdocuments.es/reader038/viewer/2022100803/5a65b2047f8b9a92368b4a2f/html5/thumbnails/13.jpg)
Gracias@rulokoba
Rulo KobashikawaMobile First, ¿Cuál es la idea?20171220