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

Descarga aquí la infografía sobre el tráfico global de datos móviles.

Al priorizar la navegación móvil, Google ha puesto bajo presión a operadores web de todo el mundo. Aunque conceptos como Mobile First o diseño web móvil responsivo no son nuevos a los oídos de los operadores de páginas web, “Mobilegeddon” marcó un nuevo comienzo en la era de la optimización móvil. Ahora no solo los responsables de grandes páginas web corporativas o de gobierno, de tiendas online o de portales de noticias se preocupan por cumplir con tales requisitos en un margen de tiempo determinado, sino que también las pequeñas empresas y los autónomos con webs pequeñas se ven obligados a invertir en optimización móvil. Sin embargo, la aplicación de tales ajustes es una cuestión de presupuesto. Mientras que darle un enfoque móvil a un nuevo proyecto web es relativamente sencillo, adaptar una página web ya existente es un proceso que puede estar asociado a una gran inversión de tiempo y de dinero. Dependiendo del proyecto, también existe la posibilidad de crear una web móvil completamente independiente de la web de escritorio, ya sea partiendo de cero utilizando plantillas de diseño web móvil responsivo o valiéndose de plugins para los diferentes sistemas de gestión de contenidos.

La web móvil

La característica principal de una página web móvil es que no depende de los documentos HTML de la página principal y utiliza un URL distinto. Los dominios de este tipo de webs se caracterizan por utilizar la letra “m” como nombre del host, en vez de “www”. 

m.ejemplo.es

www.ejemplo.es

Idealmente, toda página de escritorio debería contar con una versión web móvil separada. Sin embargo, las páginas web móviles no necesariamente tienen que ser idénticas a sus versiones de escritorio. Una página web móvil resulta de gran utilidad cuando los usuarios acceden desde un dispositivo móvil a un contenido completamente diferente a cuando lo hacen desde su ordenador en casa. Para aclararlo mejor, se puede analizar el ejemplo de la página de Iberia. Mientras que la oferta de escritorio “www.iberia.com/” cuenta con una gran cantidad de información sobre la totalidad de sus productos y servicios, su versión móvil “m.iberia.com” se concentra principalmente en los aspectos de reserva, check-in y gestión de la reserva.

En general, las páginas web móviles están hechas para adaptarse correctamente a las pantallas de los smartphones. Esto se refleja en el ajuste perfecto al tamaño de pantallas pequeñas, en el uso de grandes botones y en que prescinden de gráficos con un uso intensivo de datos. Sin embargo, este tipo de páginas web móviles que han sido diseñadas para pantallas más pequeñas, no se muestran de manera óptima en otros dispositivos como tablets. A continuación, presentamos las razones para crear una web móvil separada.

Ventajas:

• Los operadores de páginas web pueden especificar exactamente qué tipo de contenido quieren optimizar para móviles y cuál para navegadores de escritorio.
• Ambas versiones de la web se pueden personalizar por separado sin que los cambios afecten a la otra.
• En el diseño web móvil, los desarrolladores tienen la oportunidad de responder a las exigencias técnicas del tipo de terminal (generalmente smartphones).
• Es posible crear páginas web pequeñas que funcionen correctamente incluso cuando el usuario navega con una tarifa de datos reducida.

Desventajas:

• Trabajo adicional, pues cada página web que haya sido creada como una versión móvil separada debe ser gestionada de manera separada.
• Los cambios realizados en la versión de escritorio no se realizarán en la versión móvil.
• l crear la versión móvil de una página web en general se está creando contenido duplicado. Esto puede tener un impacto negativo en el posicionamiento en los resultados de búsqueda.

Plantilla adaptativa

Una alternativa a la creación de una web móvil es optar por una plantilla adaptativa con la que la web se adapte automáticamente al dispositivo. Con esta, la visualización de una página web se realiza en función del rango visible (viewport) de la pantalla utilizada. Las plantillas adaptativas están definidas por puntos de corte predefinidos, es decir, una cuadrícula de diseño relativamente estricta que garantiza la visualización exacta desde diferentes puntos de vista (vista de escritorio, vista en tablets y vista para smartphones). A diferencia del diseño web responsivo, del que hablaremos en el siguiente punto, las plantillas adaptativas no se adaptan automáticamente a todos los dispositivos. Los fundamentos técnicos del diseño web adaptativo son las llamadas Media Queries (consultas de medios). Este es un concepto CSS3 que rige la asignación de una hoja de estilo a un medio de salida en función de sus propiedades. Así, las páginas web son optimizadas para adaptarse a determinados dispositivos. Los desarrolladores web se enfocan principalmente en aparatos tan populares como el iPhone o el iPad, lo que hace que muchas veces no se adapten de forma óptima a todos los dispositivos.

Ventajas:

• En comparación con el diseño web responsivo, las plantillas adaptativas gozan de una complejidad reducida.
• Debido a que los diseños adaptativos solo admiten un número limitado de vistas, los operadores web tienen un mejor control sobre la presentación del contenido.
• A diferencia de las páginas web móviles, con las plantillas adaptativas solo se debe gestionar una única versión.

Desventajas:

• El enfoque del diseño adaptativo en ciertos tamaños de pantalla suele conllevar problemas de visualización para algunos dispositivos.
• Elegir los puntos de corte predefinidos requiere un análisis previo del público objetivo deseado.
• En contraste con una página web móvil, en el diseño adaptativo se mostrará una única versión para todas las pantallas. Por ello, una reducción de la carga de datos para dispositivos móviles solo es posible de forma limitada.

Plugins CMS para una web mobile friendly

Una solución económica para aquellas páginas web basadas en un sistema de gestión de contenidos es la gran oferta de plugins para optimizar una web para dispositivos móviles sin invertir mucho tiempo. Una de las soluciones más populares es el plugin WPTouch para WordPress, el sistema de gestión de contenidos más utilizado en el mundo. Este plugin permite a los propietarios de páginas web crear una versión móvil independiente de su web exlusiva para dispositivos móviles. Una alternativa a WPTouch es el WP WP Mobile Edition.

Ventajas:

• La implementación de estos y otros plugins es una alternativa fácil y económica. Por lo general, las versiones básicas están disponibles de forma gratuita.

Desventajas:

• El correcto funcionamiento de la página web depende de un tercero, en este caso el soporte de software.
• El contenido entregado a los diferentes dispositivos siempre será el mismo. Por lo tanto, los operadores web tienen menor libertad para responder a las necesidades específicas de los dispositivos utilizados por sus visitantes.

Muchos sectores de Internet se desarrollan en función de las actualizaciones de Google, el líder entre los buscadores. La empresa ha logrado reunir más del 90 por ciento de la totalidad de las búsquedas en casi todos los mercados más relevantes. Como consecuencia, aquellos operadores web que pierdan de vista actualizaciones como, por ejemplo, el “Mobilegeddon”, se verán afectados con una pérdida significativa de su visibilidad en las páginas de resultados. En su guía para móviles, Google explica los motivos por los que prefiere el diseño web responsivo, justificándolo de la siguiente forma:

• El contenido está disponible en un único URL, facilitando que los usuarios puedan compartir y enlazar el contenido.
• A diferencia de la operación paralela de una web móvil y una web de escritorio, el diseño web responsivo facilita el proceso de indexación. Con ello, Google no tiene que reconocer las diferencias correspondientes para webs de ordenador y de dispositivos móviles.
• Los proyectos web responsivos requieren un menor mantenimiento comparadas con la gestión de varias páginas con el mismo contenido.
• Dado que los diseños responsivos no necesitan redirecciones, se pueden evitar aquellos errores habituales cuando se gestionan diferentes páginas web.

Sin embargo, el punto más importante para Google es que las páginas web responsivas solo necesitan una indexación, mientras que las páginas web móviles independientes deben ser indexadas por el crawler de manera individual. En otras palabras, gracias al diseño web responsivo, el buscador ahorra una cantidad significativa de recursos.