El valor de Mobile First

3/31

Lectura

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?

  • Para desarrolladoras y desarrolladores: escalar es más sencillo

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.

  • Para usuarios: menos es más y para más personas

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.

  • Para negocios: mejor posicionamiento en buscadores

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.

Aportes 82

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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.

Por acá les dejo esta información

Yo aún soy principiante en Frontend y al hacer un par de retos del #PlatziWebChallenge que requieren Mobile First, me di cuenta que al empezar por la versión escritorio me salían muchas más líneas que empezando desde las pantallas pequeñas. Por supuesto, mucho tiene que ver con mi falta de experiencia. Aún así, desde mi punto de vista, puedo observar los beneficios del diseño Mobile First!

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

Vamos con toda en este curso. Diego es un gran profesor y explica todo de una manera super clara!

El éxito de algunas compañías increíblemente ha sido por el modelo Mobile First, como menciona Diego

Lo de Mobile-only en Rappi, Uber hace que te des cuenta que cada vez las computadoras se usan menos para el ocio

  • Escalar es más sencillo
  • Simplicidad y accesibilidad.
  • Relevancia y retención.

Entonces es más fácil ir desde pantallas pequeñas hacía las más grandes. Tiene sentido. Además hoy en día es obligatorio hacer responsive design para que todo el mundo pueda consumir nuestro contenido y que Google nos ayude con el SEO.

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.

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!

Necesito practicar mucho diseño, no se me da :c

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.

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.

ahora si se viene lo chido jajjaja …

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

Muy bueno el ejemplo de Twitter. Pensar que además ellos fueron los que desarrollaron Bootstrap

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.

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:

https://uralberto.github.io/

Información muy clara. Dos consejos que, el profesor Diego a dado antes: Uno; mantener el diseño simple (coordinación entre el diseñador , Ui, y desarrollador); porque, luego los diseños son complejos a última hora para el desarrollador. (hablar con el ux).; dos, recordar que, no puede ser tan pesada (la idea es, tener una interacción rápida).

A pesar de que estaba leyendo esto aun me preguntaba “Por qué empezar desde el celular primero?, puedo acomodar todo después” pero cuando vi los ejemplos de Twitter me quede wow, tiene mucha razón.

A todos nos beneficia Mobile first:
a) Desarrolladores: Ayuda a escalar y optimizar mejor un sitio
b)Usuarios: En un diseño móvil se busca la simplicidad. Cada vez existen más usuarios y un mobile first consume menos datos y potencia del procesador.
c)Empresas y negocios: Google les dará mejor preferencia de SEO

Considerando que NUNCA había escrito una línea de código, leer artículos así me dicen que estoy entrando en un momento donde las cosas se están simplificando mucho para los programadores y más aún para los futuros programadores.

En general un sitio web que sea responsive no se le afectara el seo pero si no lo es puede que te posicione en desktop pero no en mobile para la misma palabra clave y si es muy cierto que desarrollar de - a + es mejor y mas sencillo en tema de codigo

tengo una pregunta al utilizar mobile first se está aplicando pwa?

Vamos con Todo 🔥🔥🔥🔥🔥! 😄

Grade degranda!!!
Ya saben compañeros, primero que se vea bien en celular y despues en escritorios.

Vamos con todaa!

Interesante curso para profundizar en la metodología… ¿no se consideran el uso de frameworks como Bootstrap o Materialize?

Interesante. Eso explica por qué la gran mayoría de las páginas web no se ven iguales en cada dispositivo. Además, es muy buena práctica.

Últimamente he visto aplicaciones que en su versión web tienen muchos errores (principalmente de elementos que se sobreponen sobre otros), que siendo aplicaciones conocidas no entiendo por qué descuidan la versión Desktop…

La verdad si he encontrado sitios que no atienden a mobile first, y a no ser que de verdad nesecita la informcion me salgo inmediatamente, creo que es bueno aprender sobre este tema.

A pesar de que estaba leyendo esto aun me preguntaba “Por qué empezar desde el celular primero?, puedo acomodar todo después” pero cuando vi los ejemplos de Twitter me quede wow, tiene mucha razón.

El Mobile first sí que es importante, y es otra manera de hacer tus webs, porque comienzas del tramaño mobile y vas haciendo los media queries hacia tamaños más grandes, hasta llegar al tamaño desktop. Los breakdowns los defines tú, pero normalmente lo haces a 480, 720 y luego desktop.

Una lectura enriquecedora que nos incita a seguir aprendiendo y adoptar este modelo de trabajo para ser más profesionales ❤️

totalmente de acuerdo, como consumidora es frustrante cuando una aplicación web no esta optimizada para el celular, yo tengo pc pero es el de la oficina y mis temas personales prefiero hacerlos desde el celu, entonces entiendo perfectamente la necesidad y me emociona aprender mas

Y la tendencia va en aumento. Creo que cada vez surgirán más tecnologías enfocadas a los móviles.

Solo me queda la curiosidad. Aunque sepa maquetar perfectamente cada diseño que se requiera, ¿Cómo saber que generará una buena experiencia la distribución de los elementos de una página?

Es muy importante que la usabilidad en mobile sea eficiente y smooth al mismo tiempo que en desktop cumpla todas las funciones. Que alguien puede encontrar tu web desde la PC en el trabajo y le enganche, y luego ingrese en su movil camino a su casa y su uso se agradable. A ir con todo!

Una pregunta chicos y chicas, como o que tecnicas se usan para ir agregando elementos es dicir el html y css conforme la pantalla vaya creciendo?

Alguien me puede explicar bien este párrafo 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.? Nos tenemos que preocupar por esto?

Me gustan los cursos de Diego, son muy dinámicos y aunque aparecen ser largos, el tiempo vuela. Ahora que leo este capítulo, me doy cuenta de lo fácil que hacer ver todo. Un grande!

Muy buena reflexión e introducción al curso. Este profesor es maravilloso !

Realmente necesario.

Realmente me emociona este curso

A tener en cuenta estas recomendaciones!

Al hacer responsive siempre tengo en cuenta que menos es más.

Let’s start this course. I’m so exicted tor learn more about programing.

Here we go. Mobile First, Ven a mí !!!

Estamos ready!

No he tenido mucho tiempo para estudiar…
Pero desde el día que anunciaron dicho curso me emocione un montón por el proyecto.
Vamos con Todo 😄

Mobile First ayuda a llegar a más usuarios, hace escalable el proyecto y se vuelve más adaptable conforme este evoluciona.

Es super interesante y muy importante pensar en los usuarios de mobil que son mas y mas a visitar las paginas desde el cellular.

Y yo pensaba que era al revés. Muy bien, ¡vamos al proyecto!

Hasta ahora no sabia la importancia que tiene hacer Responsive los sitios web

Excelente explicación y representación practica

Los cursos de este profe junto a los de JuanDC son los mejores siempre.

es sorprendente los cambios en el estándar del diseño wed

super

Excelente artículo Diego.

excelente articulo

Excelente columna

Wow! que buena lectura 😃

A darle con todo!!!

Que gran articulo!

Excelentes recomendaciones…

Estaba esperando este curso desde que lo anunciaron … con muchas ganas de aprender !!!

excelente me parece muy bien este post

Con todo !!!

Vamos a darle! Muchas expectativas del curso 😁

Gracias estoy aprendiendo bastante

Con el Mobile First es mucho mas rentable para el usuario ya que no incrementaría costos para el despliegue de su app en aplicativos móviles

Excelente, vamos a darle

Excelente contenido, no tenia conocimiento del tema del SEO.

muy interesante

Excelente material

👌

Gracias muy buen dato

una forma eficiente de ver las cosas