¿Qué es la Web Móvil?

Cuando se habla de Web Móvil se está haciendo referencia a una Web en la que el usuario puede acceder a la información desde cualquier lugar, independientemente del tipo de dispositivo que utilice para ello.

La Web móvil se presenta como un auténtico reto tanto para usuarios como para desarrolladores ya que, por un lado, el usuario encuentra problemas al intentar acceder a los sitios Web desde los dispositivos móviles, y por otro, los proveedores de contenido encuentran dificultades para crear sitios Web que funcionen adecuadamente en todos los tipos de dispositivos y configuraciones.

Una web única

La necesidad de plantear un enfoque consistente de las aplicaciones web, independiente del dispositivo que se use para acceder a las mismas ha dado lugar a la llamada "web única". Donde las URL deben ser intercambiables entre dispositivos, es decir, una misma dirección web debería ser válida tanto para una PC de escritorio como para un dispositivo móvil. Debemos ser capaces de identificar y redirigir al usuario a la versión adaptadad de los contenidos.

La web única no significa la misma web con la misma experiencia, los mismos elementos de navegación, o las mismas funcionalidades en todos los dispositivos. Significa adaptar los contenidos al contexto y a las interfaces de acceso.

Lo que se aconseja

• Usar xHTML básico.
• Usar CSS.
• Usar el atributo media de CSS.
• Usar la información del dispositivo para determinar y adaptar el contenido a sus capacidades: ¿Qué tamaño de pantalla tiene? ¿Permite el uso de cookies?
• Realizar el testing en dispositivos reales.
• Tener muy en cuenta aspectos relacionados con la accesibilidad de nuestra aplicación.

Los desafíos

• Pantallas pequeñas.
• Operaciones que requieren el uso de una única mano.
• Lo habitual es contar únicamente con un control de 4 direcciones.
• El usuario puede no prestar el 100% de su atención a la interacción con el dispositivo.

Debemos tratar a los usuarios móviles como ciudadanos de primera clase de la web. ¡Debemos diseñar para móvil!

Arquitectura de información en web móvil

Recordemos que nuestros usuarios están navegando con un dispositivo que tiene una pantalla muy pequeña, no es sencillo introducir datos, tiene muchas cosas que le pueden distraer mientras navega, etcétera. Por tanto, nuestro usuario busca algo concreto y rápido. De lo contrario es muy probable que nuestro usuario se vaya de nuestra web.

En la siguiente imagen podemos ver la estructura de nuestra web para pc. La cual no sería nada válida para una web móvil.


Para hacerlo los más simple posible, tenemos dos aproximaciones, según nos dice la guía de desarrollo de webs para dispositivos móviles:

Limitar las opciones. Tomar sólo el contenido que va a ser relevante para un usuario móvil y descartar el resto. Evitar riesgos de que el usuario se pierda en la navegación. Si lo más interesante de nuestra web sea su sección de noticias, localización y contacto. ¿Entonces para qué poner un enlace a la estructuración y junta directiva incluyendo foto?

Crear una arquitectura de información jerarquica, simple y bien etiquetada. Obviamente, esto incluirá la aproximación anterior en la que limitabamos las opciones a presentar. Algunas sugerencias:

• 5 Categorías como máximo.
• 10 enlaces por página como máximo.
• No más de 5 niveles de profundidad.
• Priorizar enlaces por actividad y popularidad.
• Utilizar accesskeys.
• Evitar formularios.
• No usar tablas.

Una vez determinadas las necesidades de contenido y definida la estructura de categorías y etiquetas, crear un mapa web para tener una visión de alto nivel de la información.


El papel de la W3C

En la actualidad, el trabajo del W3C en temas de Web móvil se centra principalmente en dos áreas: generación de buenas prácticas y descripción de dispositivos móviles.

El Grupo de Trabajo de Buenas Prácticas en Web Móvil ha sido creado para desarrollar pautas, puntos de verificación y buenas prácticas con el objetivo de ayudar a los proveedores de contenido a desarrollar contenido Web que funcione correctamente en dispositivos móviles. Por otro lado, el Grupo de Trabajo de Descripción de Dispositivo se ha creado para guiar el desarrollo de mecanismos de descripción de dispositivos, es decir, bases de datos de descripciones que los desarrolladores de contenido podrán utilizar para adaptar los contenidos a los diferentes dispositivos.

Hoy hay un total de 60 pautas, que nos aconsejan cómo hacer páginas Web aptas para pequeños dispositivos conectados a Internet. A continuación se citan algunas de ellas, mismas que contienen las consideraciones más importantes, dentro del diseño de los sitios web móviles.

• Como en el mundo de las PC de escritorio, hay navegadores que no respetan las intenciones del proveedor del contenido. Hay diferencias en la interpretación entre los navegadores y hay también deficiencias en la puesta en práctica. Por deficiente nos referimos al no poder soportar las características obligatorias de un estándar o una recomendación relevante como otros bugs o errores en la puesta en práctica.
  
  
• Se recomienda probar el sitio Web desarrollado en los navegadores que utilizan los dispositivos móviles y sobre los dispositivos móviles reales, ya que los emuladores de navegadores móviles en la práctica no funcionan exactamente igual que dentro del propio dispositivo.
  
  
• Se recomienda también definir URLs cortas, debido a la dificultad de tipeo sobre dispositivos móviles. Evitar tener que hacer entrar al usuario a un subdirectorio dentro de un dominio por la misma dificultad.
  
  
• Proporcionar solamente una navegación mínima en la parte superior de la página. Cualquier otro elemento de navegación secundario se puede poner al pie de la página si realmente es necesario. Es importante que los usuarios puedan ver el contenido de la página de una vez cuando la misma haya cargado sin la necesidad de realizar scroll.
  
  
• Proporcionar los links básicos en una sola línea.
  
  
• Proveer mecanismos de navegación consistentes, incluir atajos de teclado para dispositivos sin “pointing device” así el usuario podrá saltar grupos de contenidos. Informar sobre links que apunten a contenido en otro formato, de modo que los usuarios no se descarguen contenido que su dispositivo no puede visualizar o interpretar.
  
  
• No utilizar los mapas de imagen a menos que el dispositivo los soporte con eficiencia.
  
  
• Arriba, abajo, izquierda, derecha y “enter” están disponibles en la mayoría de los dispositivos móviles, aún si no cuentan con “pointing device”.
  
  
• No generar cambios de ventana o “pop ups” sin avisarle al usuario. Muchos dispositivos móviles no pueden soportar más de una ventana abierta.
  
  
• Asegurarse de que el tamaño total de la página sea apropiado a las limitaciones de la memoria del dispositivo. Si las páginas son demasiado pesadas pueden tomar mucho tiempo para cargarse. Además, los dispositivos móviles en general tienen restricciones para visualizar páginas grandes.
  
  
• No usar imágenes para espaciar. El mecanismo popular de utilizar 1 píxel no funciona en una variedad de pantallas.
• Asegurarse que la información proporcionada a color es decodificada correctamente en pantallas monocromáticas. Asegurarse también de proporcionar un buen contraste entre figuras y fondo. Los dispositivos móviles a menudo no tienen buen contraste de color y se utilizan en general en condiciones de la iluminación poco ideales.
  
  
• No utilizar “frames”, ya que muchos dispositivos móviles no los interpretan.
  
  
• No utilizar tablas, a no ser que se sepa de antemano que el dispositivo las soporta.
  
  
• Muchos dispositivos móviles no soportan “embedded objects” o “scripts” y en muchos casos no es posible que los usuarios descarguen el “plug-in” correspondiente.
  
  
• El contenido se debe diseñar con esta limitación en mente. Aún cuando el dispositivo soporte “scripts”, no lo utilizarlos a menos que no haya otra manera de lograr sus objetivos. Los “scripts” aumentan el consumo de energía disminuyendo la vida de la batería.
  
  
• Evitar las medidas absolutas para permitir que el navegador se adapte el contenido a la medida de pantalla.