El mundo digital es cada vez más móvil. En España, más del 90 por ciento de los usuarios de Internet usan dispositivos móviles para conectarse. Hoy en día, potentes dispositivos de bolsillo con cientos de funciones reemplazan un gran número de otros menos eficaces y funciones estándar como llamar y enviar mensajes de texto se ven relegadas a un segundo plano. El estudio realizado por la Asociación para la Investigación de Medios de Comunicación (AIMC) muestra que a principios de 2016 más de tres cuartos de los usuarios de Internet usaron sus dispositivos móviles para navegar por la web, una tendencia que va en aumento. Los expertos estiman que para el 2021, con casi 49 exabytes, el tráfico global de datos móviles se quintuplicará.
Descarga aquí la infografía sobre el tráfico global de datos móviles.
Por otro lado, el smartphone no solo le ha robado protagonismo al PC de escritorio: en vez de sentarse frente a una gran pantalla de televisión, cientos de usuarios prefieren navegar en su tablet cómodamente desde su sofá.
Para los desarrolladores y administradores web, esta tendencia representa grandes desafíos: el diseño de una página web debe ser visualizado correctamente en una pantalla de 17 pulgadas y se debe adaptar, además, a las pantallas de tablets y smartphones. Esta es una de las tantas razones para invertir esfuerzos en la optimización de páginas web para dispositivos móviles sin sacrificar la funcionalidad de escritorio. Para lograrlo, el mercado online ofrece soluciones que permiten crear páginas web móviles que cuentan con plantillas adaptativas o con un diseño web responsivo, así como con diferentes plugins para los diferentes sistemas de gestión de contenidos (CMS). A continuación, destacamos las ventajas y desventajas de estas opciones y te mostramos alternativas para que tu proyecto web cumpla al máximo con sus requerimientos móviles.
Las tiendas online, portales de noticias y páginas web corporativas que no sean mobile friendly están cerrando las puertas a una gran multitud de usuarios móviles, a la vez que obstaculizan su posicionamiento en los principales motores de búsqueda. A principios de 2015, el gigante Google presentó una actualización de su algoritmo conocida entre la comunidad online como “Mobilegeddon”. Con ella, desde el 21 de abril de 2015, los operadores de páginas web que descuiden a sus usuarios móviles son penalizados con una pérdida masiva en el ranking en los resultados de búsqueda móvil. El hecho de que Google tome acciones concretas para que cada vez más páginas web sean mobile friendly es un gran avance en el reconocimiento del uso vertiginoso de la navegación móvil. Aquí, la atención se centra en la facilidad de uso. Los dispositivos móviles tienen pantallas más pequeñas que las de los PC o los portátiles y son operados de manera táctil. Además, el ancho de banda de los datos móviles es, por lo general, muy limitado. Por eso, aquellas páginas web que no sean escalables, que no introduzcan alternativas a hover para usuarios con pantallas táctiles o que incluyan gráficos con un uso intensivo de datos, no serán visualizadas correctamente ni facilitarán su uso desde dispositivos móviles. De acuerdo a “Mobilegeddon”, las páginas web que no estén optimizadas serán relegadas de los resultados de búsqueda y marcadas como inadecuadas. Esto significará pérdidas masivas de tráfico y seguramente se verá reflejado en los ingresos generados por la web.
Comprobar si una página web está optimizada para dispositivos móviles es muy sencillo. Existen diversas herramientas online que permiten verificarlo sin ningún coste. A continuación, presentamos algunas de ellas:
Google Mobile Friendly Test: puedes comprobar si tu página web es fácilmente accesible para usuarios móviles con el el Friendly Test de Google. Introduce el URL correspondiente en el campo de búsqueda y haz clic en analizar. La validación se lleva a cabo en unos segundos. Además de una evaluación general incluyendo el informe sobre aquellos aspectos a mejorar, la herramienta cuenta también con una función de vista previa, para visualizar la web en la pantalla de un móvil. Los enlaces a páginas de información temáticamente relacionadas ofrecen consejos sobre cómo optimizar la experiencia móvil. El Google Mobile Friendly Test está disponible en diferentes idiomas.
W3C Mobile Checker: a diferencia de la herramienta de Google, el Mobile Checker del World Wide Web Consortium (W3C) solo está disponible en inglés. Una vez más, el proceso de análisis se lleva a cabo introduciendo el respectivo URL. Los usuarios del W3C Mobile Checker tienen la posibilidad de comprobar la visualización de su web para tres tipos diferentes de dispositivos: 640 x 960 XHDPI, 640 x 1100 XHDPI y 800 x 1280 HDPI. A diferencia del Mobile Friendly Test de Google, el informe de errores de W3C Mobile Checker se concentra en los detalles y está destinado, por lo tanto, a desarrolladores web con conocimientos avanzados. Esta herramienta es gratuita.
IONOS Análisis Web: la herramienta de análisis web de IONOS también permite comprobar de forma gratuita si tu página web es mobile friendly. Para poder leer el código fuente, este instrumento también necesita el URL de la web. Además de la visualización de la página web en diferentes dispositivos, el análisis también identifica otros tres aspectos fundamentales para un proyecto online exitoso: la visibilidad en los buscadores, así como la velocidad y la seguridad de la página web. El servicio está disponible en español.
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 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.
"En 2014, el Internet móvil sobrepasará al Internet de acceso fijo", dijo la analista Mary Meeker en 2008.
Ventajas:
Desventajas:
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:
Desventajas:
Las páginas web adaptativas proporcionan un número limitado de opciones de visualización. Sin embargo, la gran variedad de dispositivos móviles en el mercado exige una mayor flexibilidad en cuanto a opciones de visualización. Como consecuencia, muchos operadores de páginas web se decantan por el diseño web responsivo. Este también se basa en las Media Queries de CSS3. Al igual que con las plantillas adaptativas, el servidor les proporciona el mismo código HTML a los diferentes dispositivos de salida, por lo que la web está disponible bajo el mismo URL para cada variante de visualización. A diferencia de las plantillas adaptativas, el diseño web responsivo se adapta sin problema a todas las pantallas al no utilizar una estricta cuadrícula de diseño. Esto garantiza que se saque el mayor provecho a la distribución del espacio disponible para cada pantalla. Por otra parte, un límite máximo evita que la página web pierda legibilidad cuando se visualice en columnas muy anchas en grandes pantallas.
La complejidad de la implementación del diseño responsivo en una web ya existente puede implicar una gran inversión de dinero, tiempo y trabajo. Además, tanto el diseño como el contenido de la web deben ser flexibles. Los apartados de texto, las imágenes, los vídeos y las gráficas tienen que visualizarse perfectamente, sin excepción, tanto en la pantalla de un Smart TV como en la pantalla de un pequeño smartphone. Así, para evitar los altos costes que conlleva desarrollar un diseño web propio, muchos operadores web se decantan por sistemas de gestión de contenido como WordPress, Joomla, Drupal o TYPO3. Estos proyectos de código abierto cuentan con una gran comunidad de usuarios y desarrolladores y ofrecen, además, una amplia gama de plantillas responsivas que son, en algunos casos, gratuitas.
Ventajas:
Desventajas:
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:
Desventajas:
En 2015, Google vio más búsquedas por dispositivos móviles que por PCs - una razón más para asegurarte de que tu sitio web sea optimizado para dispositivos móviles.
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:
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.
¿Sustituirán por completo los smartphones y tablets a los ordenadores en un futuro? Diversos factores indican que así será, incluso tomando como fundamento el volumen de búsquedas móviles de Google. La estrategia Mobile First se posiciona como una forma de desarrollo y optimización de páginas web para dispositivos móviles. Un diseño sencillo y dinámico no solo garantizará la satisfacción de los...
En Internet se encuentran gran cantidad de textos con diferentes tipos de letra. La expansión del diseño web responsivo también influye en la tipografía web, ya que la representación de la letra debería ajustarse siempre a la pantalla del dispositivo que se usa para asegurar la legibilidad de los contenidos. Una tipografía capaz de responder a estos ajustes debe ser flexible y usar las fuentes que...
El desarrollo web actual tiende a los contenidos interactivos y se distancia de las páginas web estáticas. Aún cuando HTML y CSS siguen siendo los fundamentos sobre los que se suele erigir toda página web, cada vez es más común que los desarrolladores web recurran a lenguajes de programación que se administren desde el servidor a fin de crear páginas web dinámicas. A este respecto, los lenguajes...
El mercado de las aplicaciones ha visto aparecer algunos formatos innovadores y progresivos de aplicaciones. A las nativas les siguieron las aplicaciones web y las híbridas. ¿Qué son entonces las progressive web apps? Básicamente, estas aplicaciones parten del concepto de la web app y revisten a las páginas web de un aspecto de aplicación, pero van aún más allá, ya que prometen utilizar mucho...
La optimización móvil es para los diseñadores web un gran desafío, pero también les ofrece muchas oportunidades para conseguir una experiencia de usuario positiva. Si se lleva a cabo de forma incorrecta o insuficiente, la web móvil creada puede dar lugar a resultados totalmente contrarios a una buena experiencia de usuario. Para que una página web optimizada para móviles satisfaga las exigencias...
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver planes
