Estrategias de Diseño Mobile First y su Impacto en SEO
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.
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.
Tienes toda la razón, no había pensado en eso :)
Que buena recomendación, gracias compañero.
Por acá les dejo esta información
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.
Hola sebastian, uff me pasa igual.
Aquí les dejo un link donde muestran cómo han evolucionado las búsquedas para celulares y computadores
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
muy cierto
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.
muy buen ejemplo
Escalar es más sencillo
Simplicidad y accesibilidad.
Relevancia y retención.
Lo de Mobile-only en Rappi, Uber hace que te des cuenta que cada vez las computadoras se usan menos para el ocio
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!
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.
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:
Hola Uralberlo, no pude ver tu sitio web en responsive.
Quieres decir que no lo pudo ver en un celular?
Necesito practicar mucho diseño, no se me da :c
x2
tranquilo compañero, roma no se construyó en un día...
tengo una pregunta al utilizar mobile first se está aplicando pwa?
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 🙂
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.
Muy bueno el ejemplo de Twitter. Pensar que además ellos fueron los que desarrollaron Bootstrap
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."
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.
