Home > Blog > Web Móvil: Consideraciones antes de empezar un proyecto

Web Móvil: Consideraciones antes de empezar un proyecto

Publicado el 18/06/09
por Ricardo Gil

Tengo en la cabeza rondando desde hace tiempo una serie de puntos o pautas propias que pienso que se deben tener en cuenta a la hora de crear una página web para ser vista en dispositivos móviles, y ha sido ahora cuando he decidido agruparlas, ordenarlas y sobre todo postearlas para que no queden en mi olvido. Mi intención es ir ampliándolas con el tiempo, conforme vaya viendo necesidades nuevas, errores y conforme avance el mundo de la tecnología móvil, cuyo ritmo de actualización tanto de software como de hardware es increíble.

He intentado que las pautas sigan un orden lógico que lleve desde la concepción de la idea hasta el desarrollo, aunque reconozco que son generalizaciones que por si mismas no conforman una “guía paso por paso para crear mi propia web móvil”. Como ya he dicho se trata más de una ordenación de lo que he ido viendo y leyendo en el último par de años.

1. Adaptación web o desarrollo específico

Antes de desarrollar una versión web móvil, debemos pensar si lo que queremos es una adaptación de la web “corriente” o vamos a hacer un desarrollo específico.

En algunos casos, nos bastará (siempre desde servidor) con ocultar partes de la web “corriente” y usar una CSS distinta que adapte el contenido a dispositivos móviles. Para ello detectaremos desde servidor que el agente de usuario que accede corresponde a un dispositivo móvil y le serviremos la versión móvil. Incluso podemos agrupar los dispositivos por segmentos (básicos, medios, avanzados) y servir distintas CSS para distintos dispositivos y así ofrecer una mejor experiencia a cada usuario.

En otros quizás nos compense realizar un desarrollo específico para móvil, con su propia URL y un código específico. Ya sea porque la adaptación de la web “normal” sea costosa, o porque la página sobre la cual tenemos que crear la versión móvil tenga un código que no permita su rápida adaptación.

Es cierto que lo ideal es tender a la web única, pero con algunas tarifas de datos creo que resulta molesto e irritante para el usuario servirle páginas cuyo peso y tiempo de descarga supere el umbral de su paciencia y su bolsillo. Además debemos tener en cuenta que la mayoría de navegadores móviles no tienen caché, así que en realidad el usuario se descarga todo el contenido cada vez que accede.

2. Pensar en el escenario de uso

Es importante valorar qué información queremos mostrar en la versión móvil y qué va a necesitar el usuario en cada uno de los escenarios posibles de uso.

No es lo mismo consultar una página web desde un ordenador, sentado en casa que cuando hemos parado el coche en el arcén o estamos perdidos en un sitio que no conocemos y llegamos tarde a esa reunión tan importante. La mayoría suelen ser escenarios en los que la usabilidad juega un papel fundamental porque el usuario reclama una información con urgencia o se encuentra en una situación complicada. Aunque también hay otros escenarios en los que las prisas no son el principal problema, pero el entorno dificulta la navegación. Consultar las noticias en el metro (ruido, poco espacio para el usuario, al menos una mano ocupada), o en la calle donde la visualización de ciertos elementos puede verse perjudicada por la luz.

En el caso de aplicaciones o servicios web, también es importante remarcar que la mayoría de usuarios de versión móvil son usuarios registrados de nuestra aplicación, así que ofrecerles su página de inicio con lo más destacado es algo que cobra mucha importancia. Los principales ejemplos pueden ser las versiones móviles de Facebook o Tuenti, claramente enfocadas a usuarios registrados.

3. Los dispositivos táctiles: nuestras manos quitan visión.

A la hora de prototipar una versión móvil, tenemos que tener en cuenta algo muy importante en los dispositivos táctiles, y es que en la mayoría de los casos nuestras manos dificultan la visión de parte del contenido cada vez que el usuario interactúa. En un monitor tradicional, el usuario ve toda la página, hace scroll con facilidad y cuando ve un link en el que pinchar mueve el ratón, mientras que en un móvil el usuario no ve todo el contenido, hacer scroll puede ser más complicado y en ese gesto la propia mano del usuario tapa el contenido con lo que hay que tener en cuenta dónde se colocan ciertos elementos ya que puede que el usuario no llegue a verlos nunca. ¿Alguien recuerda por qué el Doctor Hibbert no veía nunca el lápiz clavado en el cerebro de Homer? Pues eso.

homer
Es importante hacer prototipos en papel y que nosotros mismos los probemos y veamos los posibles problemas. ¿Por qué en papel? Porque la interacción táctil es más fácil de representar mediante papel que sobre un documento digital.

4. No depender de eventos que requieran exclusivamente un método de entrada

Los dispositivos móviles pueden ser controlados tanto gestualmente como por teclado, y en el caso de dispositivos como la Palm Pre, Blackberry Storm, Nokia N97 o HTC Dream que cuentan con pantalla táctil y teclados qwerty además de “pads” pueden ser manejados por ambos métodos.

Así pues usar manejadores de eventos exclusivos (como “onclick” que sólo funcionaría con ratón) para un tipo de dispositivo de entrada excluiría automáticamente al resto de usuarios.

5. Minimizar las llamadas al servidor (CSS, javascript, imágenes, etc…)

Cada llamada al servidor ralentiza la carga de la página, ya que por cada llamada se ejecutan una serie de acciones que no puede realizarse simultaneamente. Así pues, es mejor llamar a una imagen de 50Kb que a 10 imágenes de 5Kb.

Trucos como el uso de una única imagen para todos los “backgrounds” (como en youtube), el uso de los servidores de Google Code para el uso de frameworks de JS como JQuery, e incluso realizar las llamadas de CSS únicamente usando <link /> en vez de @import (anieto2k), optimizar el tamaño de nuestras imágenes, y también el tamaño de las CSS, JS, compresión en servidor, etc.

6. Testear las páginas con Firebug para ver cuánto ocupan en total

La pestaña “red” de Firebug nos ofrece información muy valiosa para saber dónde podemos mejorar la velocidad de carga de nuestras páginas. Nos dice el número de llamadas que hacemos al servidor, el peso de cada fichero, así como el peso total de la página (HTML + CSS + JS + IMGS…).

firebug

7. Accesibilidad y estándares web ahora más que nunca

Llevamos años evangelizando sobre la accesibilidad y los estándares web, sobre la importancia de abarcar a todos los usuarios y dispositivos, así que ahora más que nunca debemos aplicarnos nuestros “cuentos” y dar ejemplo de cómo hacer bien las cosas. Sé que la web móvil resulta mucho más compleja que la web de escritorio, la cantidad de dispositivos, resoluciones de pantalla, navegadores, sistemas operativos, conexiones, soporte de tecnologías y de usuarios puede llegar a resultar abrumadora. Por eso es un reto maravilloso.

Tenemos actualmente más de un dispositivo móvil, y todos con posibilidad de conexión a Internet, por habitante, la expansión de este mercado ahora que las tarifas de datos empiezan a ser asequibles y en muchos casos obligatorias para la adquisición de ciertos terminales nos brinda una oportunidad única en nuestra profesión de llegar a más gente que nunca. Y a nuestros clientes les ofrece una nueva ventana en la que ofrecer sus servicios.

8. Testear en Ready.mobi cuando esté online

Artículos relacionados

¿Y ahora qué?

Por favor deja tu comentario, queremos saber tu opinión sobre este artículo. Trackback URL: Web Móvil: Consideraciones antes de empezar un proyecto.