Created with Sketch.

¿Por qué Mobile First?

Cuando se habla de que es el diseño Responsive en sitios web, casi todos sabemos de lo que se está hablando, pero… ¿Y si alguien te hablase de Mobile First? ¿Sabrías definir en qué consiste? Partiendo de la idea de Responsive vamos a analizar un poco la metodología de Mobile First.

El diseño Responsive permite adaptar cada site a diferentes formatos. Se crea desde un formato desktop pensando en éste y adaptándolo a varias versiones de terminales móviles.

En Mobile First, el objetivo también es la adaptación, pero desde el otro lado, desde el smartphone. Mobile First se trata de comenzar un proyecto por la pantalla más pequeña e ir adaptándolo a formatos más grandes. Primero pensar en los móviles.

Esto exige a los diseñadores y desarrolladores a centrarse más en el contenido y en la experiencia de usuarios (Ux).  

 

[Tweet “Con Mobile First el contenido será desde el principio más preciso y ordenado “]

 

Como diseñador o desarrollador seguro que te ha surgido el problema de: ¿y ahora cómo coloco los contenidos para que no se queden apelotonados? O incluso como usuario: conoces una web en formato escritorio, vas a navegar un día por esa misma web en el móvil, y te encuentras todo apelmazado. Esto genera un sentimiento de caos que solo provoca cerrar la web. Aplicar Mobile First evita que esto suceda.

e-growing-ejemplos-malosybuenos
Fuente: Mobile Friendly Test

Aquí dos malos ejemplos y uno bueno:

1ª imagen: Tiene un gran margen blanco en la parte de abajo y la web se ve muy pequeña.

2ª imagen: Podemos ver una web que no deja márgenes pero toda la información está apelotonada y para acceder a cualquier contenido hay que hacer mucho zoom.

3ª imagen : Buen ejemplo de web Mobile First. El usuario entra para buscar un vuelo y sin hacer scroll ni zoom se encuentra con los campos que necesita.

 

¿Y por qué elegir Mobile First?

Estamos viviendo un cambio en la forma de acceder a la información. Vivimos en el aquí y ahora. Si vas por la calle caminando y necesitas consultar algo ¿qué utilizas? El móvil.

En el año 2015 muchas de las web ya recibieron más tráfico desde móviles que desde ordenadores. Según el informe ditrendia de “Mobile en España y en el Mundo 2015” las cifras indican datos de uso móvil mucho más alto que en ordenadores. El uso de ordenadores cada año baja, tanto en portátil (de un 86% en 2012 a un 82% en 2014) como en sobremesa (de un 77% en 2012 a un 74% en 2014)

Fuente: ditrendia “Informe Mobile en España y en el Mundo 2015”

¿No es motivo suficiente para tener más en cuenta los terminales móviles? Si los usuarios utilizan el móvil para buscar información hay que trabajar desde ahí para no quedarse atrás o incluso peor, desaparecer.

[Tweet “Los usuarios utilizan cada vez más el móvil para acceder a internet. ¡No te quedes atrás!”]

 

¿Quieres comprobar si tu web está adaptada a todos los dispositivos?

Pues es súper fácil. Google creó en su día una herramienta para poder saber si tu site es Mobile Friendly. Solo tienes que introducir la URL de tu web en Mobile Friendly Test y ver si cumple los requisitos. En caso de tener algún tipo de error, esta herramienta te dará indicaciones para corregirlos.

Y una vez metidos en Google, sus valoraciones y algoritmos, también puedes probar esta otra herramienta Google Pagespeed Insights. Igual que en la anterior, solo tienes que poner la URL de tu site y podrás saber si hay algún elemento que esté retardando la carga de tu página. Es muy visual. Tienes una nota en “mobile” de la velocidad y de la experiencia de usuario. Y otra pestaña “ordenador “donde te hace una serie de sugerencias para mejorar tu site.

[Tweet “Mobile First cumple la premisa: “TODO ha de verse bien” “]

En definitiva, Mobile First, a mi modo de ver las cosas, es la metodología que más se adapta a los tiempos que corren y que más nos ayuda a crear sitios web bajo la premisa: TODO ha de verse bien