¿Has escuchado anteriormente los términos Mobile First?

Esta tendencia web se ha convertido en la base de diseño y desarrollo para los mejores sitios web del mundo. Todo con base en la movilidad que los dispositivos portátiles nos han brindado. 

Pero… ¿Qué significa realmente Mobile First? Bueno, hasta donde yo recuerdo, la primera vez que escuché el término fue en una conferencia en Chicago en la TechWeek, donde se presentó John Buda. 

Dentro de esta cálida plática, se demostró que el tipo de diseño que exigen los nuevos públicos se debe enfocar en el concepto Mobile First.

Donde, a diferencia del diseño tradicional, la planeación, el diseño UX (enfocado en el usuario) y el desarrollo que coloque a los dispositivos portátiles al frente.

Entonces: ¿Mobile First es un cambio de paradigma web?

Analicémoslo de la siguiente manera. Alguna de las compañías pioneras en la implementación de diseño Mobile First, comenzaron a adaptar sus sitios web hace ya bastante tiempo. 

Por ejemplo, Google incorporó en 2010 dicha estrategia. 

Como has de sospechar, el nombre de esta tendencia indica claramente que su principal preocupación de diseño son las versiones móviles y no así las de escritorio o cualquier otro dispositivo. 

Anteriormente, el principal enfoque del diseño web se basaba en versiones de escritorio y, después, venía una leve preocupación por su contraparte móvil. En la actualidad, y gracias al desarrollo de tecnologías digitales, cada día más personas utilizan dispositivos portátiles en lugar de hardware fijo. 

Esto quiere decir que, hoy más que nunca, la importancia de contar con un diseño web adaptable (o, mejor dicho, especializado) en versiones móviles es clara.

Como puedes ver, Mobile First, es la mejor forma de tomar parte de los diferentes cambios digitales que sufre el mercado. Planeación, diseño e implementación; todo enfocado en la usabilidad portátil. Este cambio de paradigma, nos ha demostrado que los consumidores buscan consumir contenidos en cualquier lugar del mundo y en el momento que lo desean. La mejor forma para cumplir sus deseos es brindarles contenidos especializados para versiones móviles.  

Llamamos a Mobile First un cambio de paradigma porque afecta directamente la experiencia de nuestros usuarios. Es decir, los ajustes y diseños responden a nuevas condiciones. Atrás quedó el mundo de escritorio, ahora toda la información debe estar disponible con un diseño genial en la palma de tu mano. 

Esto no quiere decir que las versiones de escritorio no sirven más. Si bien su uso ha disminuido, aún existen usuarios que prefieren estas versiones. Sin embargo, el enfoque principal de la construcción del sitio se encuentra en la portabilidad y, posteriormente, su adaptación al uso tradicional.   

La idea detrás del diseño Mobile First,, nos dicta que todo la experiencia del usuarios debe ser hecha a la medida y ser funcional para distintos contextos. ¿A qué me refiero? Textos de lectura sencilla y fáciles de navegar, por ejemplo. 

Fotografías, videos, mapas; todo debe ser de fácil acceso y de calidad en su reproducción. Lo más importante es el despliegue correcto de información en el dispositivo. Más adelante lo analizaremos a profundidad. 

Así, analicemos los pasos clave que nos llevaron a lo que hoy conocemos como Mobile First. 

Para comprender a cabalidad todo lo relacionado con el diseño Mobile First, primero debemos dividir el tema en dos fases históricas.

Diseño responsivo

El diseño responsivo es, básicamente, un método que permite a cualquier sitio web adaptar su contenido a diferentes pantallas (formato y tamaño) de forma automática. Es decir, es un método que despliega el contenido de la mejor forma para el usuario.

Este hecho reduce drásticamente acciones no deseadas y tediosas como: paneos, zoom y scroll de la página.  

Entonces, ¿Mobile First y diseño responsivo son lo mismo?

Si bien el diseño responsive y Mobile First comparten prácticas, ingredientes e ideas; sus métodos, estrategias y ejecución difieren en gran medida uno del otro.  

Para que este punto sea más claro, dispondré de un ejemplo:

Imagina que tienes que conectar dos diferentes ciudades mediante un tren. Obviamente quieres construir un tren de calidad y que en cuestión de una par de horas te lleve del punto A al punto B. 

La pregunta es: ¿Tu idea sería construir un tren de carbón y convertirlo en un tren de diesel y, posteriormente, en un tren eléctrico? Es obvio que la respuesta es no. ¿Por qué gastarías tu tiempo diseñando y construyendo con viejos modelos? 

¿Te das cuenta que no tiene sentido trabajar así? Bueno, lo mismo pasa en el mundo digital. Sin embargo, en este mundo la gente sí construye un tren de carbón primero. Es decir, muchos construye un sitio web para escritorio primero, posteriormente lo convierten un sitio responsivo y, por último, se acuerdan que deben adaptarlo a móviles.

Entonces, ¿en qué son diferentes uno del otro?

Los diseños responsivos son una técnica de diseño web, donde se utiliza CSS personalizado para ajustar el sitio al dispositivo donde se proyecta. La codificación del sitio es más compleja, pero el enfoque primario continúa en la necesidades de escritorio antes que las móviles. 

Dicho en otras palabras, el diseño responsivo construye un sitio para escritorio y lo adapta al dispositivo desde donde se consuma información. 

Mobile First, a diferencia del diseño responsivo, es una estrategia. Si bien puede utilizar un marco de trabajo similar a los sitios responsivos, su principal consideración se encuentra en las necesidades de los usuarios móviles.

Es decir, en lugar de crear un sitio web para escritorio y forzarlo a una versión portátil; la idea es crear un sitio con las necesidades móviles como bandera de guerra.

Si eres de los que piensa que este hecho no hace diferencia alguna. Te bastará con saber que 52.64% del tráfico total en internet sucede desde dispositivos portátiles, de acuerdo con un estudio publicado por Statista.  

Avance progresivo y degradación

Estos dos conceptos nacieron antes que el diseño responsivo, podríamos decir que son los abuelos responsables de la existencia de Mobile First. Pero, como cualquier familia, las generaciones cambian con el tiempo. 

La idea del avance y degradación era facilitar la proyección de sitios web en diferentes dispositivos, mediante distintas versiones de un mismo sitio. 

El avance progresivo construye en primera instancia una versión del sitio web simple para correr en navegadores móviles. Posteriormente, a esta versión se le suman funciones avanzadas para proyectarse en escritorio o tablet. Digamos que se agregan efectos, botones, interacciones en tiempo real, etc. Con la intención de mejorar la experiencia del usuario. 

¿Ya comenzaste a darte cuenta cuál es el gran problema con este método?  Exacto, la experiencia de usuario queda relegada de quienes consultan la versión móvil. Y nadie, en serio nadie, quiere afectar la experiencia de usuario como diseñador web.  

Ahora bien, la degradación, contrariamente, comienza el diseño desde una versión avanzada del sitio apta para escritorio o tablet. Y, más adelante, comienza una dieta para adaptarlo a versiones móviles cortando funciones y contenidos (claro, perdiendo calidad en experiencia de usuario).  

Entre ambos conceptos, el avance progresivo ha ganado la batalla. Esto se debe a que sí diseñas un sitio con todas sus funciones en escritorio, será muy difícil desprenderte de ellas, para, crear una versión móvil. Y es totalmente entendible, si ya trabajaste construyendo una página genial, ¿por qué querrías perder calidad en tu sitio?

Así, diseñar, primero, un sitio para proyectarse en versiones portátiles, el avance progresivo te permite considerar diferentes funciones para mejorar la experiencia de cada uno de tus usuarios. Esto te brinda la oportunidad de tomar ventaja de estas características únicas. 

Sin embargo, esto no quiere decir que sea tu mejor opción. Solamente es una aclaración que, de ambos términos, éste es el mejor y mas utilizado. 

Justo ahora debes estar preguntándote, entonces, qué acciones debo tomar para construir mi sitio con base en Mobile First.

Bueno, a continuación te presento: 7 estrategias para crear sitios web Mobile First. 

Primero, vale la pena recordar que, al implementar estos 7 consejos, podrás comenzar a diseñar sitios web para los dispositivos que los usuarios realmente utilizan y no solo diferentes versiones de un sitio.

Ojo, antes de comenzar cualquier proyecto de diseño web, recuerda estudiar y comprender las necesidades de tus usuarios o mercado. Esto marcará, en gran medida, la experiencia de usuario que debes diseñar, el tipo de contenidos, colores, fuentes, etc. 

Dicho esto, comencemos con nuestros 7 consejos para construcción de sitios Mobile First. 

Diseño simple y minimalista

El por qué de este primer punto es sencillo: La gente ama la simplicidad. ¿La razón? Disminuye la ansiedad y el sentimiento de avasallamiento; además mejora la claridad y comprensión de lectura. 

Esto aplica también para el mundo web. Menos es más, seguramente has escuchado esta declaración anteriormente. El mejor consejo es únicamente incorporar los elementos que realmente necesitas en tu sitio y no gastes tu tiempo en elementos barrocos.

Pregúntate, ¿cuáles son los beneficios de incorporar x elemento al sitio? ¿En realidad es necesario? Como usuario, ¿lo considero indispensable?

Para ayudarte a decidir de mejor forma, te comparto siete puntos que pueden ayudarte a simplificar tu sitio web: 

  • Utiliza una fuente sencilla y de fácil lectura. No ahorres reduciendo el tamaño de la letra, esto puede dificultar la lectura de tu contenido. 
  • Reduce el número de páginas de tu sitio. Considera únicamente las indispensables para tu proyecto y deja la paja de lado. 
  • Utiliza un máximo de dos columnas de texto o imagen para versiones web. 
  • Diseña tu página con marcos claros y definidos. 
  • Aumenta los espacios en colores claros (blancos) y elimina distorsiones. 
  • Incorpora una función de búsqueda avanzada, para que tus usuarios encuentren rápidamente lo que necesitan.
  • Elimina botones innecesarios, imágenes de amplio scroll y todo que pueda ser considerado como chatarra.

Contenidos personalizados

¿Recuerdas que te dije: “antes de comenzar conoce a tu público”? Este punto te dejará en claro el por qué de esta advertencia. 

Seguro sabes que los contenidos son los reyes del mundo digital. Así es: blogs, e-books, vlogs, infografías, guías, manuales, música, etc. Son la razón por la cuál un sitio se distingue de otro. 

Si te preguntas, ¿cuál es mi tipo de contenido ideal? Lamento decepcionarte, pero no hay una respuesta exacta. Mi mejor consejo (nuevamente) es conocer a fondo tu público y con base en ellos tomar determinaciones claras. 

Hablando de Mobile First y contenidos, es importante que consideres lo siguiente: 

  • Blog post de mayor longitud de palabras generan nueve veces más leads (prospectos) que contenidos cortos.  
  • Los usuarios de dispositivos portátiles prefieren contenidos de mediana a corta longitud. 
  • El video es el rey de los contenidos. Claro, el video de calidad. 
  • Utilizar blog con contenidos específicos es un must  de cualquier estrategia de marketing digital.
  • El contenido Mobile First debe ser conciso y claro.

Diseño gráfico Mobile First

El diseño de tu sitio web es un punto fundamental en la creación de sitios Mobile First. 

Por ejemplo, un estudio publicado por el Design Council de Reino Unido, demostró que las compañías enfocadas en el diseño gráfico del sitio web, tuvieron un desempeño 200% superior a sitios sin enfoque en diseño. 

La pregunta es, ¿cuáles son las claves de un diseño Mobile First? Las principales de 2019, nos indican varios puntos clave: 

  • Paleta de colores vivos
  • Patrones abstractos y figuras geométricas
  • Minimalismo
  • Tipografías fuertes y claras
  • Contraste de colores: escala de grises
  • Fotografías propias
  • Videos propios
  • Ilustraciones a mano digitalizadas
  • Gradaciones de color y bitonos
  • Espacios blancos, para facilitar la lectura

Call to Action (CTA) funcionales 

De nada sirve que inviertas tiempo y dinero diseñando un increíble sitio Mobile First, con contenidos de alta calidad, si tus CTA te llevan a landing pages no optimizadas. El mismo caso sucede si diriges a tus usuarios a un formulario que no pueden llenar porque se encuentran en una versión móvil.   

Es decir, tus Call to Action no funcionarán si no están diseñados teniendo en mente a los usuarios móviles. Si quiere priorizar la experiencia portátil, no puedes olvidar que tus CTA deben ser mobile friendly.  

Considera incorporar chats en vivo, bots y mensajería SMS (aunque no sea muy popular), para fomentar la interacción móvil entre los usuarios. 

La velocidad es importante

Este no punto no es exclusivo de Mobile First, seguro sabes que la velocidad de carga de tu sitio es una métrica fundamental, para la experiencia de usuario. Además, claro, de ser un factor del ranking de posicionamiento de Google.

 De acuerdo con Neil Patel, 79% de los compradores en sitios de e-commerce, abandonan la página si experimentan problemas de performance del sitio. Por si fuera poco, 40% de los usuarios abandonan un sitio web si tarda más de tres segundos en cargar

Dicho esto, creo, es evidente la necesidad de cualquier sitio web (especialmente los Mobile First) de contar con un servidor de calidad, que permita una conexión ideal a todos tus usuarios.  

Ahora bien, dejando de lado la calidad de los servidores; por supuesto que existen distintas prácticas que te ayudarán a mejorar la velocidad de carga de tu sitio. Lo ideal es implementar estos protocolos desde la creación de tu sitio, pero puedes adaptarlos si tu web ya está en línea.

Recuerda que estos consejos están enfocados en Mobile Firts. 

  • Primero debes conocer el performance de tu sitio. Utiliza Test my site de Google y verifica tu velocidad de carga. 
  • Comprime las imágenes de tu sitio, para mejorar la carga. Si estás basado en WordPress puedes utilizar plugins como Smush
  • Instala una Content Distribution Network (CDN), que ayuda a cargar elementos desde el caché más cercano al usuario. 
  • Cifra tu sitio con SSL. Es decir tu debe indicar https://www.tusitio.com
  • Utiliza herramientas de lazy loading cómo Infinite Scroll para WordPress.

Comunicación móvil

Como has podido leer, los dispositivos móviles son una revolución total en tecnología web y comunicación. Esta ha modificado los ciclos de comunicación entre empresas y usuarios. 

La idea es clara. Los usuarios quieren información de una compañía y sus productos de forma inmediata. Además no desean realizar llamadas innecesarias.

Esto quiere decir que, tal vez, tengas que considerar las preferencias de tus clientes para entablar comunicación contigo. Afortunadamente, existen cientos de herramientas digitales que te ayudarán a gestionar esta transición. 

Es aquí donde softwares como HubSpot vienen a jugar un papel fundamental en los procesos de: comunicación, seguimiento, lead nurturing y cotizaciones. Todo claro, mediante un sistema automatizado.  

De igual forma considera agregar un chat en vivo o chatbot para humanizar un poco tu sitio web. La mayoría de estos chatbots, ya se encuentran diseñados priorizando a los usuarios móviles. 

Prueba tu sitio antes de lanzarlo en vivo

Probar y probar, tal vez es una de las claves más importantes de cualquier diseño web. Todos, incluso los mejores sitios Mobile First, deben ser testeados antes de ser publicados. Me refiero a conocer la funcionalidad, evaluar la experiencia y determinar su funcionalidad en diferentes sistemas operativos portátiles.

Dentro de estos sistemas operativos, yo te recomiendo considerar cinco sistemas. Si bien los dos primeros lugares le pertenecen a Android e iOS (75 y 22% del mercado respectivamente). También son importantes sistemas como: Microsoft, Symbian y RIM.