Ya conoces la importancia del desarrollo Mobile First, ahora aprenderás el valor que entrega más allá de estar enfocado a las vistas móviles. Recuerda que en responsive design un diseño se adaptará a distintas vistas independientemente para cuál dispositivo se desarrolló primero y con este estándar primero crearemos para dispositivos móviles.
¿Quiénes se ven beneficiados?
Pasar un desarrollo con vista de escritorio a móvil requiere de realizar diversas consideraciones, puede tornarse complejo pues además esto implica tener que eliminar elementos de la vista y generalmente es más fácil añadirlos.
Mobile First por el contrario hace de esta experiencia algo más llevadero y a nivel del código es bastante sencillo pasar de móvil a vistas más grandes, con la oportunidad de colocar componentes adicionales en el proceso.
Sí, es cierto que cada vez es mayor la cantidad de personas navegando en dispositivos móviles y es que Mobile First no solo llega a más dispositivos por la enorme variedad de vistas disponibles en el mercado, sino también a más personas.
La simplicidad en el diseño también ayuda a que tu comunicación sea efectiva hacia tus usuarios, brindando una experiencia de navegación agradable y que junto a un diseño accesible tu alcance aumente considerablemente.
Esto también añade valor a tus usuarios con una velocidad de conexión limitada y/o dispositivos de gama baja.
Google comenzó trabajar a inicios de 2018 con un algoritmo que otorga de mayor relevancia a aquellos sitios optimizados para móviles. Esto no afectará a aquellos sitios que tengan una versión de escritorio y móvil, pero sí penalizará a los que carezcan de una alternativa móvil.
Para fines de SEO esto puede significar un menor rebote de usuarios si el contenido es lo suficientemente atractivo para retener la atención de los usuarios.
Evolución progresiva
Así como avanza la tecnología también podemos apreciar los cambios en tendencias del desarrollo frontend que incluso llegan a convertirse en estándares, como ha sido Mobile First.
Primero desarrollamos para escritorio donde nuestro sitio web podía consumirse desde una computadora de escritorio y monitores en laptops. Después surgió la necesidad de adaptar estos sitios a dispositivos portátiles como teléfonos inteligentes y tablets.
Al aumentar el consumo de sitios en dispositivos móviles surgió la necesidad de desarrollar primero para estos y después escalar a otras pantallas más grandes. Esta evolución ha llevado al punto en que algunos servicios estén disponibles cómo mobile-only, donde la única forma de consumirlos es desde un dispositivo móvil como el caso de aplicaciones financieras, de entregas a domicilio y otras más.
Twitter como caso de estudio
Esta popular red social ha pasado por diversas transformaciones en su diseño y una de las más importantes es su visualización desde diversos dispositivos.
Analizando estas capturas de pantalla podrás apreciar como desde la vista móvil se mantiene bastante simplificado, conforme aumenta se le añaden otros elementos y conserva otros en común.
Vista en móvil (iPhone X)
Vista en navegador de escritorio
Vista reducida en navegador de escritorio
Conclusión
Ahora sabes cuál es la razón por la que este estándar es tan importante actualmente en tus conocimientos como desarrolladora o desarrollador web. Además de que estás asegurándote de que tus sitios lleguen a más dispositivos y personas, también estás haciendo que tu código sea más fácil de escalar y de hacer modificaciones en el futuro. Ahora, te invito a continuar con el curso y seguir aprendiendo más sobre Mobile First.
Jhonatang Gómez
Como recomendación chicos. Hay muchos sitios web que aun no usan Mobile first. Tomemos nota, pongamonos en contacto con esas compañías y ofrezcamos nuestros servicios para readaptar su sitio web.
José Luis Díaz Santos
Tienes toda la razón, no había pensado en eso :)
Vanesa Percy
Que buena recomendación, gracias compañero.
Marianna Guedez
Por acá les dejo esta información
Sebastian Cifuentes
Me pasa mucho lo de la carga, cuando entro a un sitio y si se demora más de 10 segundos ya empiezo a buscar otras páginas.
Marianna Guedez
Hola sebastian, uff me pasa igual.
Felipe Avendaño Toro
Aquí les dejo un link donde muestran cómo han evolucionado las búsquedas para celulares y computadores
Victor Andres Castillo Zambrano
gracias
José Luis Díaz Santos
Excelente muchas gracias :)
Jean Pool Zambrano Hernandez
En esta dirección pueden encontrar diferentes patrones de diseño web que son adaptables, los cuales siempre parten de una vista en dispositivos moviles y escalan hasta pantallas de escritorio. https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns
Cristian Camilo
Easy to understand
Cristian Camilo
Thank you!
Juan Sebastian Morales Salazar
Vamos con toda en este curso. Diego es un gran profesor y explica todo de una manera super clara!
Iván Arcos
El éxito de algunas compañías increíblemente ha sido por el modelo Mobile First, como menciona Diego
Victor Andres Castillo Zambrano
muy cierto
Jhon Alexander Mondragon Trinidad
Existen casos como lo es MercadoLibre en su entorno para vendedores, si accedes desde el celular te mostrara las opciones mas importantes y mas concretas, si accedes desde un computador te muestra mas opciones y con mas detalle de las ventas y los clientes.
Victor Andres Castillo Zambrano
muy buen ejemplo
Jhanpiere Montes
Leonardo Riojas
Lo de Mobile-only en Rappi, Uber hace que te des cuenta que cada vez las computadoras se usan menos para el ocio
Karen Paola Torres Archbold
De verdad no había pensado primero en mobile firts y en las universidades no nos enseñan que primero debemos tener en cuenta los dispositivos mobiles, bueno esto debe ser por que apenas nos dan las bases del conocimiento, pero de verdad es una buen ruta de aprendizaje la añadidura de este curso. Gracias team platzi!
Michael Steven Viloria García
lo que pasa es que muchas veces en las universidades enseñan lo mismo durante años, lo que lleva a que no se actualicen constantemente igual como lo hacen las tecnologias por eso quizas no contemplan el hecho del mobile firts ya que antes no se tenian encuenta.
Uriel Alberto Arevalo Franco
Me queda claro. Mobile first, definitivamente. Viví la experiencia de hacer mi primer sitio web personal para escritorio. Pasarlo después a móvil fue fatigante y no quedó bien. Cometí el error de dejar vistas de hasta tres columnas con letra muy menuda, difícil de leer para el usuario. Se los comparto:
Sebastián Carrillo Fonseca
Hola Uralberlo, no pude ver tu sitio web en responsive.
Uriel Alberto Arevalo Franco
Quieres decir que no lo pudo ver en un celular?
Javier Alejandro Flores Gomez
Necesito practicar mucho diseño, no se me da :c
Ignacio Consuegra
x2
Emilio Vega
tranquilo compañero, roma no se construyó en un día...
DANIEL SUAREZ
tengo una pregunta al utilizar mobile first se está aplicando pwa?
Edwin Morales
Saludos Daniel no PWA son las siglas de Progresive Web App, si son exclusivas para móviles pero no es lo mismo que Mobile First. Una PWA se comporta como una App de el Google store o Apple store pero no tienes que descargarla vive en la internet como una página normal, pero con mas funcionalidades como : push notification, activar la cámara del mobil, utilizar tu location y mas opciones. Espero Diego puede contestarte mejor o muchos de los estudiantes de Platzi 🙂
BRIAN GALVEZ VILLALOBOS
En realidad no, para que se considere una pwa necesita ser lo mas parecido a una aplicacion o tener funciones de la misma, en cambio mobile first es el diseño de la pagina web, puede ser una pagina estatica que solo muestre informacion y empiezan a diseñarlo desde el principio en movil ya estas aplicando movil first.
Francisco Ezequiel Ferreyra
Muy bueno el ejemplo de Twitter. Pensar que además ellos fueron los que desarrollaron Bootstrap
Abel Ortiz H.
empezar desde mobile hace que sea mas facil redistribuir los elementos despues, y ubicarlos de forma concreta, dandole mas personalidad a cada media query.
Este curso va a estar muy divertido.
Erwin Frias
Totalmente de acuerdo. Cuando comenzamos a desarrollar desde un dispositivo móvil, es más fácil agregar y distribuir elementos en pantallas más grandes.
arturo becerra
ahora si se viene lo chido jajjaja ...
Andrés David Loaiza Zamudio
ESTO ES UNA GRAN VERDAD
"Google comenzó trabajar a inicios de 2018 con un algoritmo que otorga de mayor relevancia a aquellos sitios optimizados para móviles. Esto no afectará a aquellos sitios que tengan una versión de escritorio y móvil, pero sí penalizará a los que carezcan de una alternativa móvil."
Jesús Miguel Moreno Plasencia
Lo interesante de todo esto es que vemos como no se pierde el concepto de la pagina, como el diseño se mantiene y no pierde valor ante el usuario. Buen ejemplo el de Twitter.
