El enfoque Mobile First: Diseñando para el éxito online

https://www.freepik.es/psd-gratis/diseno-maqueta-pantalla-telefono-movil_3576516.htm#query=M%C3%B3vil&position=24&from_view=search&track=sph

El enfoque Mobile First:

Diseñando para el éxito online

La era digital ha llegado para quedarse y el uso de los móviles es uno de los primeros indicadores que se pueden observar en la actualidad. Esta tendencia está en constante crecimiento y es por eso que las empresas están interesadas en diseñar los sitios web priorizando la visualización desde los dispositivos móviles. A esto se le conoce como Mobile First y, a continuación, te explicamos todos los detalles para poder implementarlo.

 

¿Qué significa Mobile First?

Mobile First hace referencia a un modelo de diseño que prioriza la visualización en los smartphones. Esto quiere decir que se potencia la experiencia de usuario en los dispositivos móviles a la hora de diseñar y desarrollar una página web.

Por lo tanto, si quieres implementar este tipo de diseño, debes comenzar incluyendo tamaños de pantalla más pequeños e ir subiendo. Esto puede resultar un poco confuso si estás acostumbrado a priorizar primero los tamaños grandes, teniendo en mente el escritorio. Sin embargo, los tiempos cambian y los diseñadores webs se adaptan a las exigencias del mercado.

 

La relación entre Mobile Firts con el HTML y CSS

Para poder elaborar un diseño Mobile First tienes que entender los fundamentos del HTML y el CSS. Lo primero que tienes que hacer para planificar tu diseño Mobile First es elaborar un esquema básico en papel o en una herramienta digital como es el caso de Illustrator. En cuanto tengas una idea general de cómo quieres que sea tu página web, tienes que comenzar con a insertar el código HTML y CSS para darle vida.

Uno de los factores fundamentales de este tipo de diseño es la utilización de consultas de medios responsivos, conocidos en inglés como media queries. Estas consultas te permiten cambiar el código CSS para adaptarlo a diferentes dispositivos (tabletas, ordenadores, etc.) y que se puedan ver bien. Esto es realmente importante en un mundo que cada vez opta más por la conexión de diferentes dispositivos digitales.

Una vez hayas terminado el diseño básico y hayas configurado las consultas de medios responsivos, debes comenzar a añadir el contenido. En este campo, la libertad creativa es crucial. Ten en cuenta que puedes enfocarlo a diferentes contenidos: texto, formularios o contenido multimedia como las imágenes y los vídeos. Lo más relevante, independientemente del contenido que elijas, es que seas conciso y que se puedan leer con comodidad en las páginas más pequeñas.

https://www.freepik.es/foto-gratis/representaciones-experiencia-usuario-diseno-interfaz_36298552.htm#query=M%C3%B3vil%20dise%C3%B1o&position=1&from_view=search&track=ais

 

¿Qué son los “media queries”?

Los media queries son un tipo de construcción de lenguaje en CSS que permite definir estilos condicionales que se pueden aplicar solo en ciertas situaciones. La utilización más habitual de estas consultas de medios es la adaptación del estilo de un sitio web dependiendo del ancho de la pantalla del usuario.

Se suelen utilizar para desarrollar diseños responsivos, por lo que es una herramienta fundamental a la hora de diseñar una página web. En la actualidad, todas las webs se diseñan de forma que se adapten a cualquier dispositivo electrónico para facilitar la visualización y la satisfacción de los usuarios.

Para poder llevar a cabo una consulta de medios, tienes que configurar una regla formada por todos los estilos diferentes que se tienen que aplicar en diversas situaciones. Para que puedas visualizar un ejemplo, puedes poner una regla que defina el estilo para pantallas más anchas que 750px.y otro para pantallas más estrechas que 750px. De esta forma, estás abarcando todos los tipos de pantallas.

Una vez hayas establecido la regla, debes especificar las condiciones que se deben dar para que se aplique cada estilo. Las condiciones son como parámetros, por lo que pueden basarse en la anchura, altura, resolución, orientación o, incluso, en el tipo de dispositivo.

En cuanto tengas las consultas de medios configuradas, se comenzarán a aplicar de forma automática cuando la página esté cargada en el dispositivo correspondiente. Si deseas cambiar los estilos basándote en la interacción del usuario, se recomienda usar JavaScript para que puedas añadir o eliminar diferentes clases que activen otras reglas de consulta de medios.

Como puedes ver, el diseño Mobile First es una manera perfecta de generar diseños responsivos para que los usuarios puedan disfrutar de una interfaz cómoda a nivel visual.

En la actualidad, sería muy extraño acceder con el móvil a una web que solo esté diseñada para ordenadores, ya que, incluso, algunos navegadores como Google comienzan a penalizar en sus búsquedas la ausencia de un diseño responsivo.

Esto tiene sentido porque Google es una empresa a la que le interesa que los usuarios estén a gusto con sus búsquedas. Si un usuario accede a una página web que no se adapta a su dispositivo, se sentirá incómodo y dejará de utilizar el buscador. Por lo que se puede decir que, al final, los diseños responsivos también tienen participación en el SEO.

https://www.freepik.es/foto-gratis/manos-alto-angulo-sosteniendo-papel_34523257.htm#query=M%C3%B3vil%20dise%C3%B1o&position=13&from_view=search&track=ais

Referencias

  • Mor-Samuels, E. (2022). Lo esencial del diseño Mobile-First para 2022. AppsFlyer. https://www.appsflyer.com/es/blog/mobile-marketing/mobile-first-design/
  • ¿Qué es el Mobile First? la nueva manera de ver el diseño web. (2022, 29 noviembre). Liderlogo Agencia de Diseño y Marketing. https://www.liderlogo.es/diseno/que-es-mobile-first/