Mobile friendly: diseño web móvil para tu proyecto online

Para que tu página web se pueda utilizar co­rre­c­ta­me­n­te desde sma­r­t­pho­nes y tablets, es im­pre­s­ci­n­di­ble op­ti­mi­zar­la para di­s­po­si­ti­vos móviles. Para ello, puedes crear una versión es­pe­cí­fi­ca de tu web móvil o apostar por un diseño web ada­p­ta­ti­vo que ajuste au­to­má­ti­ca­me­n­te los co­n­te­ni­dos al tamaño de cada pantalla.

Por qué la op­ti­mi­za­ción móvil de tu página web es im­pre­s­ci­n­di­ble

Un diseño pensado para una pantalla de 17 pulgadas no se puede trasladar sin más a una tablet o a un sma­r­t­pho­ne. No solo cambian la re­so­lu­ción y el tamaño de la pantalla, sino también los métodos de in­ter­ac­ción (táctil frente a ratón), las pro­po­r­cio­nes, la orie­n­ta­ción y, en muchos casos, la velocidad de conexión. Todo ello hace im­pre­s­ci­n­di­ble abordar de forma es­tra­té­gi­ca cómo optimizar una página web para móviles, sin renunciar a una buena ex­pe­rie­n­cia en or­de­na­do­res de sobremesa.

Las so­lu­cio­nes que han de­mo­s­tra­do funcionar en la práctica son las si­guie­n­tes:

• Diseño re­s­po­n­si­ve: diseño fluido que se adapta au­to­má­ti­ca­me­n­te a distintos tamaños de pantalla.
• Diseño web ada­p­ta­ti­vo: versiones de diseño pre­de­fi­ni­das (brea­k­poi­nts) según el tipo de di­s­po­si­ti­vo, con detección desde el servidor o desde el cliente. Este enfoque permite optimizar de forma es­pe­cí­fi­ca la web móvil, por ejemplo haciendo más ligera la versión orientada a sma­r­t­pho­nes y adaptando de forma precisa los elementos y la na­ve­ga­ción.
• Página web móvil in­de­pe­n­die­n­te o app: para algunos proyectos sigue siendo una opción, por ejemplo cuando se requieren fu­n­cio­na­li­da­des muy es­pe­cí­fi­cas para di­s­po­si­ti­vos móviles o ex­pe­rie­n­cias in­me­r­si­vas. No obstante, su uso es cada vez menos habitual, ya que el esfuerzo de de­sa­rro­llo, el ma­n­te­ni­mie­n­to y la fra­g­me­n­ta­ción aumentan co­n­si­de­ra­ble­me­n­te.

Además, entran en juego nuevos re­qui­si­tos y técnicas:

• El enfoque mobile-first ya es un estándar: primero se diseña para pantallas pequeñas y después se amplía la fu­n­cio­na­li­dad para pantallas más grandes.
• La op­ti­mi­za­ción del re­n­di­mie­n­to ya no es opcional: los tiempos de carga, las Core Web Vitals y el uso eficiente de imágenes y scripts suelen ser decisivos para la duración de las visitas o las tasas de rebote.
• La in­ter­ac­ción táctil y la usa­bi­li­dad son aspectos clave: botones más grandes, mayor espaciado, na­ve­ga­ción intuitiva, gestos, etc.

A co­n­ti­nua­ción, ana­li­za­mos las ventajas y de­s­ve­n­ta­jas de estas opciones y te mostramos qué al­te­r­na­ti­va permite que tu proyecto sea realmente mobile friendly y ofrezca una web móvil op­ti­mi­za­da.

Por qué deberías optimizar tu página web para móviles

Google da cada vez más im­po­r­ta­n­cia a que las páginas web se vi­sua­li­cen co­rre­c­ta­me­n­te en di­s­po­si­ti­vos móviles. Un factor clave es la facilidad de uso (UX). Los sma­r­t­pho­nes y las tablets cuentan con pantallas más pequeñas que los or­de­na­do­res de sobremesa o los po­r­tá­ti­les y se manejan pri­n­ci­pa­l­me­n­te mediante toques y gestos.

Además, el ancho de banda de las co­ne­xio­nes móviles suele ser más limitado. Las páginas web que no se adaptan al tamaño de la pantalla, que muestran in­fo­r­ma­ción relevante solo mediante efectos hover o que incluyen gráficos con un alto consumo de datos no se vi­sua­li­zan co­rre­c­ta­me­n­te ni resultan cómodas de usar en di­s­po­si­ti­vos móviles. Como co­n­se­cue­n­cia, Google puede ex­clui­r­las de los re­su­l­ta­dos de búsqueda móvil o marcarlas como no aptas. Para los pro­pie­ta­rios de páginas web, esto suele tra­du­ci­r­se en una pérdida si­g­ni­fi­ca­ti­va de tráfico y, en última instancia, en una caída de los ingresos.

¿Cómo saber si tu página web es mobile friendly?

Puedes comprobar de forma rápida y sencilla si tu página web está bien op­ti­mi­za­da para móviles mediante he­rra­mie­n­tas online. Existen numerosos servicios gratuitos que permiten ana­li­zar­la. Te re­co­me­n­da­mos las si­guie­n­tes opciones para ver tu página web en versión móvil y evaluar su co­m­pa­ti­bi­li­dad:

• Li­gh­thou­se: la he­rra­mie­n­ta de código abierto de Google para analizar la calidad de una página web. Li­gh­thou­se también evalúa aspectos clave de la usa­bi­li­dad móvil.

• IONOS Website-Checker: IONOS ofrece con el Website-Checker una he­rra­mie­n­ta gratuita para comprobar si una página web es mobile friendly. Para analizar el código fuente, solo necesita la URL de la página web. Además de verificar la correcta vi­sua­li­za­ción de la web móvil en distintos di­s­po­si­ti­vos, el análisis evalúa otros tres factores re­le­va­n­tes para proyectos online de éxito: la vi­si­bi­li­dad en bu­s­ca­do­res, la seguridad de la página web y el tiempo de carga.

Enfoques para la op­ti­mi­za­ción de la página web

Según el tipo de proyecto, existen distintas opciones para diseñar una página web que funcione co­rre­c­ta­me­n­te en cualquier di­s­po­si­ti­vo. Entre las más ha­bi­tua­les se en­cue­n­tran las páginas web móviles in­de­pe­n­die­n­tes, las pla­n­ti­llas de diseño web móvil con ma­que­ta­ción ada­p­ta­ti­va y las so­lu­cio­nes basadas en plugins para sistemas de gestión de co­n­te­ni­dos.

Páginas web móviles

Las páginas web móviles son do­cu­me­n­tos HTML creados de forma in­de­pe­n­die­n­te de la página principal y pensados ex­clu­si­va­me­n­te para el uso móvil bajo una URL separada. Este tipo de versiones móviles suele pu­bli­car­se bajo el nombre de host “m” (m.ejemplo.com), mientras que la versión estándar de la página web se ofrece bajo “www” (www.ejemplo.com).

Lo ideal es disponer de una versión móvil para cada página de es­cri­to­rio relevante. No obstante, las páginas web móviles no tienen por qué ser idénticas a sus versiones de es­cri­to­rio. Ofrecer una web móvil como al­te­r­na­ti­va resulta es­pe­cia­l­me­n­te útil cuando los usuarios acceden desde fuera de casa y consultan co­n­te­ni­dos distintos a los que suelen ver desde un ordenador de sobremesa.

Las páginas web móviles suelen estar orie­n­ta­das pri­n­ci­pa­l­me­n­te a sma­r­t­pho­nes. Esto implica una ada­p­ta­ción al tamaño reducido de la pantalla, botones más grandes y la renuncia a gráficos con un alto consumo de datos. En otros di­s­po­si­ti­vos móviles, como las tablets, las páginas diseñadas es­pe­cí­fi­ca­me­n­te para sma­r­t­pho­nes no siempre se muestran de forma óptima. Aun así, existen buenas razones para crear páginas web móviles separadas.

Diseño web ada­p­ta­ti­vo

Una al­te­r­na­ti­va a una página web móvil in­de­pe­n­die­n­te es un diseño web móvil que se adapta au­to­má­ti­ca­me­n­te al di­s­po­si­ti­vo final. En este caso, la vi­sua­li­za­ción de una página web se basa en el área visible de la pantalla (viewport). Los diseños web ada­p­ta­ti­vos se rigen por puntos de ruptura definidos de forma fija (brea­k­poi­nts): una rejilla de diseño re­la­ti­va­me­n­te rígida que ofrece distintas vistas para viewports cla­ra­me­n­te definidos. Lo habitual es contar con versiones de diseño para una vista de es­cri­to­rio, una vista de tablet y una vista de sma­r­t­pho­ne. A di­fe­re­n­cia del diseño re­s­po­n­si­ve, que de­s­cri­bi­re­mos más adelante, los diseños web ada­p­ta­ti­vos no permiten una ada­p­ta­ción fluida a cualquier tamaño de pantalla.

Como base técnica de los diseños web ada­p­ta­ti­vos se utilizan las llamadas media queries (consultas de medios). Se trata de un concepto de CSS3 que permite asignar hojas de estilo en función de las ca­ra­c­te­rí­s­ti­cas del di­s­po­si­ti­vo de salida. Por lo general, las páginas web con diseño ada­p­ta­ti­vo se optimizan para tipos de di­s­po­si­ti­vos concretos. En este proceso, los de­sa­rro­lla­do­res web suelen guiarse por gamas de productos populares, como el iPhone o el iPad. Por este motivo, estas páginas web para móviles no siempre se ajustan de forma óptima al di­s­po­si­ti­vo desde el que se vi­sua­li­zan.

Diseño re­s­po­n­si­ve

Las páginas web ada­p­ta­ti­vas solo ofrecen un número limitado de variantes de vi­sua­li­za­ción. Sin embargo, la gran di­ve­r­si­dad de di­s­po­si­ti­vos móviles exige so­lu­cio­nes de pre­se­n­ta­ción cada vez más flexibles. Por este motivo, muchos pro­pie­ta­rios de páginas web optan por diseños re­s­po­n­si­ve en lugar de un diseño web ada­p­ta­ti­vo. Al igual que los diseños ada­p­ta­ti­vos, estos se basan en CSS3 media queries y el servidor entrega el mismo código HTML a todos los di­s­po­si­ti­vos. De este modo, la página web está di­s­po­ni­ble en todas las variantes de vi­sua­li­za­ción bajo una misma URL.

A di­fe­re­n­cia del diseño web ada­p­ta­ti­vo, la ada­p­ta­ción al tamaño de pantalla se realiza de forma fluida, sin depender de una rejilla rígida de viewports definidos de manera fija. Esto permite apro­ve­char de forma óptima el espacio di­s­po­ni­ble en la pantalla de cualquier di­s­po­si­ti­vo. Úni­ca­me­n­te se establece un límite superior para evitar problemas de le­gi­bi­li­dad en pantallas grandes, como columnas ex­ce­si­va­me­n­te anchas.

No obstante, debido a la co­m­ple­ji­dad de los diseños re­s­po­n­si­ve, relanzar una página web siguiendo este enfoque suele ser costoso y requerir mucho tiempo. Además, no solo el diseño, sino también los co­n­te­ni­dos deben co­n­ce­bi­r­se de forma flexible. Los textos, imágenes, vídeos y tablas deben funcionar co­rre­c­ta­me­n­te tanto en un sma­r­t­pho­ne como en una Smart TV. Por ello, en lugar de de­sa­rro­llar diseños propios desde cero, muchos pro­pie­ta­rios de páginas web recurren a sistemas de gestión de co­n­te­ni­dos como WordPress, Joomla, Drupal o Typo3. Estos proyectos de código abierto cuentan con amplias co­mu­ni­da­des de usuarios y de­sa­rro­lla­do­res y ofrecen una gran variedad de pla­n­ti­llas de diseño re­s­po­n­si­ve, algunas de ellas di­s­po­ni­bles de forma gratuita.

Plugins móviles para CMS

En el caso de páginas web ya exi­s­te­n­tes basadas en un sistema de gestión de co­n­te­ni­dos, los plugins ofrecen una forma rentable de optimizar en poco tiempo la presencia online para di­s­po­si­ti­vos móviles. Esta opción resulta es­pe­cia­l­me­n­te adecuada cuando los pro­pie­ta­rios de páginas web desean mantener el diseño de es­cri­to­rio original y solo quieren ampliarlo con funciones es­pe­cí­fi­cas para móviles.

Una solución de terceros muy conocida es WPTouch para WordPress, el sistema de gestión de co­n­te­ni­dos más utilizado del mundo. Este plugin permite crear una versión mobile friendly in­de­pe­n­die­n­te del proyecto. En la práctica, este enfoque se co­rre­s­po­n­de con una página web móvil separada, ya que la versión adicional se entrega ex­clu­si­va­me­n­te a di­s­po­si­ti­vos móviles y de forma in­de­pe­n­die­n­te de la página principal.

Google prefiere las páginas web re­s­po­n­si­ve

En el de­sa­rro­llo web, es habitual orie­n­tar­se por las re­co­me­n­da­cio­nes del principal motor de búsqueda: Google. Según sus propias di­re­c­tri­ces, Google prefiere cla­ra­me­n­te el diseño web re­s­po­n­si­ve. La empresa fu­n­da­me­n­ta esta pre­fe­re­n­cia en varios motivos:

• En los diseños re­s­po­n­si­ve, los co­n­te­ni­dos están di­s­po­ni­bles bajo una única URL, lo que facilita su co­m­pa­r­ti­ción y el enlazado.
• A di­fe­re­n­cia de las páginas web móviles separadas que funcionan en paralelo a la versión de es­cri­to­rio, Google puede asignar sin di­fi­cu­l­tad pro­pie­da­des de in­de­xa­ción cohe­re­n­tes a los diseños re­s­po­n­si­ve. De este modo, ya no es necesario indicar la relación entre páginas de es­cri­to­rio y versiones móviles.
• El diseño web re­s­po­n­si­ve requiere menos ma­n­te­ni­mie­n­to que los proyectos web con varias páginas que ofrecen el mismo contenido.
• Al no necesitar re­di­re­c­cio­nes, los diseños re­s­po­n­si­ve evitan errores típicos asociados a la gestión de páginas web móviles in­de­pe­n­die­n­tes.

No obstante, el factor decisivo para Google pro­ba­ble­me­n­te sea que, en las páginas web re­s­po­n­si­ve, solo es necesario un único proceso de rastreo, mientras que las páginas web móviles separadas deben ser indexadas in­di­vi­dua­l­me­n­te. De este modo, el buscador puede ahorrar recursos de forma si­g­ni­fi­ca­ti­va al priorizar el diseño web re­s­po­n­si­ve.

Errores fre­cue­n­tes en páginas web móviles

En la op­ti­mi­za­ción móvil de páginas web existen errores ha­bi­tua­les que pueden afectar de forma notable a la ex­pe­rie­n­cia de usuario. A menudo, los re­s­po­n­sa­bles de un proyecto web su­b­e­s­ti­man hasta qué punto factores como los tiempos de carga, la na­ve­ga­ción o la usa­bi­li­dad influyen en pantallas pequeñas. A co­n­ti­nua­ción, te mostramos las fuentes de error más fre­cue­n­tes en una web móvil:

• Elección in­co­rre­c­ta del enfoque técnico: la decisión entre un diseño re­s­po­n­si­ve, una página web móvil separada o un diseño web ada­p­ta­ti­vo es clave. Aunque Google prefiere el diseño re­s­po­n­si­ve, la elección debe basarse en el público objetivo, los di­s­po­si­ti­vos re­le­va­n­tes y la co­m­ple­ji­dad del proyecto. Cambiar de enfoque más adelante suele ser costoso y requerir mucho tiempo.
• Interfaz de usuario (GUI) poco intuitiva: un mal diseño de la interfaz puede di­fi­cu­l­tar co­n­si­de­ra­ble­me­n­te el uso en móvil. Deben evitarse textos demasiado pequeños, elementos difíciles de tocar, efectos mouseover, funciones ocultas o una función de búsqueda difícil de usar. Las pantallas táctiles requieren pri­n­ci­pios de in­ter­ac­ción distintos a los del es­cri­to­rio.
• Re­n­di­mie­n­to de­fi­cie­n­te: los tiempos de carga largos influyen ne­ga­ti­va­me­n­te en la tasa de co­n­ve­r­sión. A partir de unos 3 segundos, muchos usuarios abandonan la página, es­pe­cia­l­me­n­te en móviles con co­ne­xio­nes ine­s­ta­bles. Los errores más comunes son imágenes sin comprimir, formatos de imagen inade­cua­dos, exceso de Ja­va­S­cri­pt, de­ma­sia­das so­li­ci­tu­des HTTP, código sin optimizar o la ausencia de caché.
• In­te­r­s­ti­tia­ls demasiado grandes y pu­bli­ci­dad intrusiva: los elementos su­pe­r­pue­s­tos a pantalla completa, por ejemplo para pro­mo­cio­nar apps o forzar registros en ne­w­s­le­t­te­rs, pe­r­ju­di­can se­ria­me­n­te la ex­pe­rie­n­cia de usuario en móvil y di­fi­cu­l­tan el acceso al contenido. Es pre­fe­ri­ble optar por elementos discretos que no oculten la in­fo­r­ma­ción principal. La pu­bli­ci­dad intrusiva debe evitarse en las páginas web móviles.
• Re­s­tri­c­cio­nes en el archivo robots.txt: si este archivo bloquea el acceso de Googlebot a recursos como CSS, Ja­va­S­cri­pt o imágenes, la página no puede re­n­de­ri­zar­se co­rre­c­ta­me­n­te. Esto afecta ne­ga­ti­va­me­n­te tanto a la ex­pe­rie­n­cia de usuario como al po­si­cio­na­mie­n­to.
• Di­fe­re­n­cias fu­n­cio­na­les en la versión móvil: las páginas web móviles separadas conllevan el riesgo de co­n­te­ni­dos in­co­m­ple­tos, re­di­re­c­cio­nes in­co­rre­c­tas o errores 404 que no afectan a la versión de es­cri­to­rio. Para evitar fru­s­tra­cio­nes, todos los co­n­te­ni­dos y funciones re­le­va­n­tes también deberían estar di­s­po­ni­bles en la versión móvil de la página web.