¿QUE ES MOBILE FIRST?
Este diseño responde al gran uso de los dispositivos móviles para navegar por
internet. Desde hace unos años, los smartphones y las tablets suponen cada vez
una mayor proporción de tráfico para muchas webs.
Mobile First, como su nombre indica, “primero móvil” es una tendencia de
diseño y maquetación web orientada a dar prioridad a la visualización en
dispositivos móviles, es decir, se diseña una web para smartphones y tabletas y
su estructura se adapta a los ordenadores (al contrario de lo que se venía haciendo
hasta hace poco).
A principios de los 90 es cuando se empieza a desarrollar “oficialmente” contenido
para Internet. El diseño web se desarrollaba específicamente para ordenadores de
sobremesa o portátiles y contaban con una estructura rígida, sin animaciones, ni
colorido, pero fue el inicio de una era que marcaría un antes y un después en las
comunicaciones.
Desde entonces el desarrollo web no ha dejado de crecer y dar prioridad al usuario,
es por este motivo que el diseño web se va transformando al diseño responsive,
que se basa en el desarrollo de una web para que sea compatible y correctamente
visible tanto en ordenadores como en dispositivos móviles. En estos años hemos
vivido de forma acelerada el crecimiento de Internet con una magnitud tal, que ha
cambiado radicalmente nuestros hábitos de vida.
En cuanto al desarrollo web se refiere, hemos pasado de crear páginas en HTML
en el que el diseño y el ancho de banda que existía no permitía grandes propuestas
a lo que tenemos hoy en día.
El HTML2 ya permitía incluir banners e imágenes, apareció Flash como CSS y el
HTML5 que permite un sinfín de aportaciones y Macromedia que permitía
animaciones hasta llegar a lo que hoy en día conocemos usabilidad a las páginas.
Este tipo de diseño web va un paso más allá del popular diseño responsive. En el
diseño responsive tradicionalmente se ha partido del diseño de escritorio para
adaptar el de tablets y dispositivos móviles. En esta adaptación es común que el
contenido pierda cierta calidad, al prescindir de ciertos elementos por el bien de
la velocidad o la usabilidad de las páginas.
En cambio, en un diseño Mobile First, se parte de la versión para dispositivos
móviles y tras esta se plantean en el resto. Con esto se consigue un contenido
100% relevante y adecuado en todos los dispositivos.
¿POR QUE ES IMPORTANTE EL MOBILE FIRST?
Uno de los grandes impulsores del MOBILE FIRST, es el proyecto AMP una
iniciativa de código abierto que busca mejorar la experiencia web para usuarios
móviles. Puedes encontrar más información en este enlace.
El objetivo principal de todo esto es que un usuario desde móvil tenga la misma
experiencia a la hora de navegar por nuestro sitio web que un usuario desde
escritorio. Todo tiene que adaptarse, los botones, los enlaces, imágenes, etc. A
continuación, veremos cómo mejorar estos aspectos.
La experiencia de usuario y las mejoras en este sentido es lo que nos hace
evolucionar en el diseño web enfocado al Mobile First.
En noviembre de 2016, Google da el primer paso en su evolución al Mobile First,
empieza a hacer pruebas para que los algoritmos den prioridad a aquellas páginas
que ofrecen contenido web en formato responsive, fundamentando principalmente
que todo el contenido que muestra una web en formato escritorio debe ser
exactamente igual al que se muestra en un smartphone o Tablet, ya que el usuario
así lo demanda.
Actualmente el buscador estrella indexa primero a aquellas webs cuyo contenido
da prioridad a su visualización en dispositivos móviles que es donde
mayoritariamente consumen contenido los usuarios.
Según un estudio realizado por Think With Google, el 87% de los internautas se
conectan a través de su Smartphone, con estos datos era lógico que el buscador
realizará cambios en beneficio de sus usuarios y en el suyo propio, claro.
Por otra parte, aparecer en los primeros puestos de las búsquedas en Google es
una de las principales preocupaciones de aquellas empresas que buscan tener
rentabilidad en la red, para ello es imprescindible que tus usuarios se sientan
cómodos cuando te visitan, que tu diseño sea atractivo, intuitivo o amigable y que
además le guste a los algoritmos de Google.
Si encargas el diseño de una web a una empresa de desarrollo, pídeles que den
prioridad al Mobile First, para ello apuesta por un diseño sencillo y pensado para
tu público objetivo, si lo haces así ya tienes una buena parte del camino recorrido.
El tráfico desde dispositivos móviles es una tendencia tan importante que desde
marzo de 2021 Google solo tiene en cuenta la versión móvil de los sitios web para
sus criterios de indexación y posicionamiento SEO.
Si bien hasta ahora esta era una tendencia vista como una alternativa
al responsive, tras el anuncio de la indexación Mobile First de Google se ha
convertido sin duda en la opción más interesante.
CARACTERISTICAS DEL MOBILE FIRST
Un diseño de este tipo se compone de muchos elementos distintos, pero los más
conocidos son:
LA VELOCIDAD: Este es uno de los factores que más influyen en la
consideración de Google sobre tu página web. La velocidad de carga web ha sido
siempre una prioridad para el buscador, que busca la mejor experiencia para sus
usuarios.
TAMAÑOS ADECUADOS: Quizás este sea uno de los elementos más
específicos a tener en cuenta para dispositivos móviles. Debemos asegurarnos
de que los botones y enlaces de nuestra página tienen el tamaño adecuado o
están suficientemente separados los unos de los otros para pulsar cómodamente.
POP-UPS POCO INTRUSIVOS: Debemos evitar los pop-ups que bloqueen la
navegación. También es importante asegurarnos de que son fáciles de clicar y de
cerrar, para no entorpecer la navegación del usuario por nuestra página.
IMÁGENES OPTIMIZADAS: Las imágenes deben ser poco pesadas y de un
tamaño adecuado para no ralentizar innecesariamente la carga de la página.
También es importante que estas tengan una buena resolución y que se vean
correctamente en los distintos dispositivos, ya que son una parte esencial de
nuestro contenido.
Al diseñar con móviles en mente, primero que nada, estas son algunas
consideraciones típicas con las que nos encontramos:
• JERARQUÍA VISUAL. En la pantalla de un ordenador podemos usar varias
columnas para presentar el contenido a nuestros usuarios, pero en móviles
tenemos que pensar de verdad qué es lo más importante, porque el usuario
lo verá en formato vertical.
• FUNCIONES TOUCH. Un pequeño detalle que es diferente entre un
ordenador y un móvil: el puntero. En ordenadores hacemos clic con una
flechita muy puntiaguda. En móviles usamos nuestros dedos. Así que hay
que tener en cuenta esto al pensar en el tamaño de los botones y
elementos clicables.
• GRANDES GRÁFICOS. El típico slider inmenso que ocupa toda la pantalla
del ordenador se ve muy bien en el ordenador, pero en una pantalla de
unos pocos centímetros de ancho puede que no se distinga su contenido.
• EFECTOS HOVER. Pasas el mouse sobre un botón o una imagen y ésta
cambia de color y hace un efecto muy chulo. No cuentes con esto en
móviles.
En resumen, el enfoque MOBILE FIRST no quiere decir que dejemos de lado a
los dispositivos de escritorio, que siguen siendo los más usados en muchos
casos para acceder nuestros sitios web o aplicaciones, sino que al pensar en las
limitaciones de los dispositivos móviles podemos concentrarnos en las
funcionalidades clave de nuestra aplicación y asegurarnos de que será
universalmente funcional, sin importar qué tipo de dispositivos se usen.
El enfoque MOBILE FIRST es un principio del enfoque de mejora
progresiva (progressive enhancement, en inglés). Bajo este enfoque, el diseño
para móviles se debe atacar primero por ser el más complejo. Una vez que se
han resuelto los problemas para móviles, diseñar para el resto de dispositivos
será más fácil. Al hacerlo de esta manera, pensarás primero en lo esencial de tu
aplicación y el diseño incluirá las características clave. Luego, ya pensando en
otros dispositivos, se podrán ir agregando más funcionalidades.
El enfoque opuesto sería el de graceful degradation (algo así como degradación
gentil), que incorpora todas las complejidades del sistema desde el inicio, y las
va quitando dependiendo de las limitaciones del dispositivo. Con esta filosofía se
corre el riesgo de que la experiencia en móviles sea planificada más como un
añadido y se queden fuera funcionalidades clave.
En los últimos años el uso de dispositivos móviles como medio para acceder a
Internet se ha intensificado. Vemos como en la actualidad el número de
búsquedas realizadas por un smartphone es superior a las búsquedas que se
llevan a cabo a través de un PC. Así, se hace evidente la importancia del Mobile
First.
VENTAJAS DE MOBILE FIRST
Cuando un sitio web se desarrolla para desktop, la versión mobile necesita muchas
adecuaciones en los elementos para que todo funcione en el espacio del celular.
En algunos casos, muchos componentes se eliminan para que el sitio web quede
perfecto en el ambiente mobile.
Adicionar información en una pantalla más grande es relativamente más fácil si la
comparamos con el espacio de un dispositivo móvil; lo cual no permite el exceso
de información. Por esta razón es necesario eliminar información de poca
importancia para ofrecer una mejor experiencia al usuario.
Podemos decir entonces, que un sitio web hecho para dispositivos móviles se
ajusta con más facilidad para el computador. Además de garantizar más visibilidad
en los mecanismos de búsqueda; sitios web optimizados para dispositivos móviles
suelen ofrecer una experiencia mejor para los usuarios.
Pero, además de esto, un sitio web Mobile First nos trae diversos desafíos de
diseño y usabilidad como:
• El tamaño de la pantalla reducido;
• La conexión móvil limitada;
• El comportamiento de los usuarios;
• Las pantallas ‘touch’ etc.
De esta forma, aumenta la atención con la arquitectura de la información,
usabilidad y accesibilidad. Cuando inicia la versión para desktop, el exceso de
información no será un problema pues ha sido eliminado anticipadamente. Solo
tendrás que preocuparte por enriquecer la experiencia del usuario.
Una de las principales ventajas del Mobile first es su escalabilidad, es decir, se
puede ir adaptando a las necesidades de los usuarios y crecer en función de las
posibilidades de la empresa en cuanto a tiempo de respuesta de servicio o
abastecimiento en el caso de tiendas online.
En Quality Devs tenemos como principal objetivo llegar a los usuarios en la forma
en que ellos mejor saben manejarse en la red, para ello antes de entrar en un
proyecto web, debemos saber exactamente a quién va dirigido para que tanto el
diseño como la usabilidad sea la adecuada en cada caso. La personalización es
fundamental para que tu proyecto no sea uno más.
DESVENTAJAS DE MOBILE FIRST
En qué casos no debemos aplicar un
diseño MOBILE FIRST
Al contrario de lo que puedas leer en otros blogs de marketing o en redes sociales,
hay casos en los que desde CRO Creativo no recomendamos realizar un diseño
basado en móvil. Con la experiencia que hemos adquirido a lo largo de los años
como empresa líder en analítica web y CRO, sabemos que algunos de nuestros
clientes tienen un público que es meramente profesional, y que acceden a la web
en horario profesional y principalmente desde un ordenador de sobremesa.
Lo que hacemos en nuestra agencia antes de decidirnos por un diseño tradicional
o un MOBILE FIRST es analizar:
• las fuentes del tráfico
• los dispositivos con los que los usuarios acceden a esa web
• la tasa de conversión según el dispositivo
• el sector y los competidores
• el tipo de negocio y los objetivos de la web
• La experiencia móvil no está 100% optimizada
• La experiencia en desktop no está 100% optimizada
• No es lo más óptimo para tu SEO (si ese es tu objetivo)
• No es adecuado para webs con contenido muy pesado
Por ejemplo, algunos de nuestros clientes que tienen un mayor tráfico de
sobremesa frente al móvil son de estos tipos:
• Empresas B2B
• Empresas de servicios profesionales
• Sector industrial / médico / farmacéutico
Por eso, lo primero es analizar bien las fuentes de tráfico y el tipo de empresa o
negocio para el que se va a desarrollar la web, y una vez tenemos todos los datos
decidimos el tipo de diseño que vamos a aplicar al proyecto.
DIFERENCIA ENTRE MOBILE FIRST Y WEB RESPONSIVE
El diseño web mobile first se diferencia del diseño responsive en la forma en que
se afronta y ejecuta un proyecto. Mientras que una web responsive primero fue
diseñada para PC y posteriormente adaptada para que se ajuste a dispositivos
móviles, el mobile first afronta desde el comienzo del diseño un enfoque directo
hacia los dispositivos móviles. Una vez terminado el desarrollo para móviles
bajo mobile first, se adapta a ordenadores y otros dispositivos.
Suele haber muchas confusiones entre estos dos conceptos. Mucha gente piensa
que son lo mismo cuando son completamente diferentes. El diseño responsive
comienza en el desktop; es decir, a la resolución máxima requerida, y luego se
reduce a la pantalla más pequeña posible.
A pesar de que el contenido y el diseño se ajusta a los dispositivos móviles, la
navegación, el contenido y las velocidades de carga y descarga están más
orientadas a una web tradicional.
El diseño web mobile first es similar al diseño de una app. Primero se optimiza el
diseño a una navegación para dispositivos móviles y luego se adapta el diseño
para que pueda verse perfectamente en dispositivos más grandes sin muchas
modificaciones. En el diseño web mobile first, todo el diseño se basa en
proporcionar una excelente experiencia de usuario móvil: velocidades de descarga
rápidas, fácil navegación con pantalla táctil, mantener proporciones para
elementos clicables con dedo y no con mouse (es mucha la diferencia entre los
tamaños de botones, las distancias de los textos, etc. para la óptima navegación
con nuestros dedos).
¿POR QUÉ EL DISEÑO RESPONSIVE? En general, el diseño responsive es más
común entre las empresas B2B en las que el contenido del sitio web debe ser
informativo. El contenido HTML enriquecido que está estructurado correctamente
también es ideal para SEO.
El diseño web responsive es el mejor enfoque cuando sabemos que nuestra
audiencia accede a nuestro sitio web durante la jornada laboral desde una oficina
y con ordenador.
EL ENFOQUE O LO QUE CONLLEVA MOBILE FIRST
En 2015, Google anunció que por primera vez había recibido más búsquedas
realizadas desde dispositivos móviles que de escritorio. Como consecuencia, la
industria online ha puesto un mayor interés en el desarrollo de nuevos conceptos
y estrategias de diseño web móvil.
De esta forma, la metodología Mobile First ha revolucionado la creación de
páginas al enfocarse primero en el diseño para terminales móviles – pensando
también en su usabilidad y rendimiento –, para luego adaptarlas a la pantalla de
un ordenador.
Mobile First es un concepto de diseño web optimizado para móviles, donde
inicialmente se crea una página web para tablets y smartphones, para adaptarla
luego a las necesidades de un navegador de escritorio.
Hasta hace unos años, era común que los diseñadores y los programadores se
hicieran cargo de la ejecución de páginas web pensadas únicamente para ser
visualizadas en ordenadores.
En principio, estas eran diseñadas con una gran variedad de características,
adaptando sus gráficos y estructura para ser visualizados en grandes pantallas,
usando conexiones de datos de gran velocidad.
Así, se relegaría a un segundo plano la planificación de una web móvil, que hasta
entonces era considerada una especie de apéndice. Con Mobile First, el flujo de
trabajo se invierte y se establecen otras prioridades; impactando a la vez todo el
desarrollo e infraestructura técnica detrás de una página web.
En principio, el propósito del diseño Mobile First es desarrollar una solución web
óptima para dispositivos móviles; y solo después, basándose en la estrategia de
mejora progresiva (en inglés Progressive Enhancement), dichas páginas web son
optimizadas para todo tipo de pantallas de ordenadores y portátiles.
El siguiente paso consiste en adaptar la página web a formatos lo
suficientemente amplios para ser visualizados en pantallas grandes.
Es común que, durante la implementación de esta estrategia, se creen gris en
formato móvil. Finalmente, vale acotar que todo proceso de optimización de
páginas web basado en la estrategia Mobile First se guía por los principios
del diseño web responsivo.
El gran número de visitas a páginas web desde dispositivos móviles comprueba
que, desde hace un tiempo, el diseño web para smartphones y tablets no es solo
un nicho, sino que se ha convertido en un mercado principal que debe ser
prioridad para cualquier proyecto online. Los expertos estiman que para el 2021,
con casi 49 exabytes, el tráfico global de datos móviles se quintuplicará.
