Mi web móvil

W3C nos ofrece una lista de 60 Buenas Prácticas en la realización de la Web Móvil .

Os dejo un resumen de lo que considero más importante.

• URL. Lo más corta posible.

• Barra de navegación. Ofrezca en la cabecera de la página sólo la navegación mínima necesaria.

• Lo más importante, primero. Ofrece al usuario lo que busca. Si sabes que pide muchas noticias de prensa, eso debe ser el primer enlace de la web.

• No recargar automáticamente la página, a menos que se informe claramente al usuario y se ofrezca una forma de poder detener dicha acción. El usuario se podria encontrar con una factura considerable por un descuido.

• Peso limitado. Yo recomendaría no más de 10 KB

• Scroll. Limite el desplazamiento de la página a una dirección.

• Test. Haga pruebas en emuladores y en dispositivos reales siempre que sea posible. Porque hay que recordar que por bueno que sea un emulador, es un emulador.

• Enlaces
  • Intentar que sean mínimos a recursos externos.
  • Proporcione accesskeys. Es aconsejable etiquetar los enlaces con número del 0 al 9 para aprovechar el teclado móvil. Hay que minimizar las veces que el usuario tiene que teclear.
  • Intente conseguir un equilibrio entre los enlaces que hay en la web y lo que un usuario tarda en llegar a donde quiere.
  • Identificar de forma clara el destino del enlace. Si no estamos seguros de si el formato del destino es soportado por el dispositivo debemos indicarlo. Por ejemplo, para un pdf o para una web no móvil.

• No usar ventanas emergentes(Pop-Up).

• No ofrecer más contenido del solicitado por el usuario y que sea estrictamente necesario para la estructura y navegación de la página.

• Minimizar el código. Un espacio en blanco hay que cargarlo, y eso con un móvil cuesta dinero. Esto se puede llevar al extremo, no lo recomiendo, de quitar la tabulación de la programación y dejar todo el texto compacto.

• No utilice tablas, a menos que sepa que el dispositivo es compatible con ellas.

• Utilice caché y no confie ciegamente en Cookies.

• Intente que las hojas de estilo sean pequeñas (en peso), recordando que la página tiene que ser legible sin hojas de estilo.

Después de leerlas y resumirlas creo que se pueden reducir en una: sentido común. No subimos un logo de 2 mb en una web para pc, y no necesariamente hemos leido una regla que nos diga eso. Pues ahora tenemos que cambiar nuestra forma de afrontar el diseño y pensar en las características de nuestros dispositivos.

Podeis comprobar si se cumplen estas reglas en vuestra página en la herramienta que nos proporciona W3C Mobile Web Best Practices Checker.

Una vez que estamos convencidos de por qué debemos realizar una web para dispositivos móviles, intentaré explicar cuales son los principales problemas que nos encontramos cuando creamos una web para este tipo de dispositivos.

Tendremos problemas particulares respecto a una web para pc, pero otros nos resultaran muy conocidos.

Los principales problemas son:

• El tamaño de la pantalla es muy limitado(resolución, orientación).

• El entorno del usuario puede ser muy diverso, por tanto tenemos que captar su atención. Hay demasiados elementos que le pueden distraer y hacer que abandone nuestra web.

• Dificultad para introducir datos.

• Precio de las tarifas de conexión. Esto mejorará porque ya están saliendo tarifas planas de conexión a Internet, y porque esta en crecimiento los dispositivos que permiten conectarse a través de una wifi.

• Colores escasos.

• Diversidad de navegadores. Si con una web para pc tenemos problemas para crear una web que se vea igual en todos, con un dispositivo móvil este problema se multiplica.

• Escasos recursos de memoria de los dispositivos.

• Control de los operadores. En algunas ocasiones adaptan el contenido de una página. Para poder insertar en la cabecera o en el pie un buscador o un menú de navegación propio.

Cómo vemos el camino no es fácil, pero tampoco pretendo desanimar a nadie. Simplemente avisar de los obstáculos que os vais a encontrar aquellos que realiceis una web para móvil.

Para aquellos que quieran  empezar a desarrollar web para dispositivos móviles creo que deberían empezar por leerse  la guía para el desarrollo de webs de dispositivos móviles (Versión pdf | Versión html)

Es una guía de referencia que nos dá una idea general de cómo realizar el proyecto y aquellas cosas que debemos considerar. 

The goal of this guide is to provide developers and site owners with enough knowledge to get started with the creation of Web content for mobile users. It covers the benefits of publishing for mobile users, how mobile delivery differs from desktop delivery and how to design for the mobile context.

Además, nos habla de la iniciativa para la web móvil de W3C, y también de su guía de buenas prácticas.

Por ahora, la guía no incluye las técnicas más avanzadas tales como la adaptación, pero están preparando una segunda parte con este tipo de temas mucho más complejos.  De momento, sólo tenemos un vista general de lo que será la guía para el desarrollo de webs de dispositivos móviles II.

Y si el libro os parece pesado, o quereis un resumen, podeis consultar la presentación en pdf que hizo el autor, Brian Fling,  Everything you always wanted to know about the mobile web (But were afraid to ask).

WPhone es un plugin de WordPress que nos permite administrar nuestro blog desde el móvil.

El proceso para instalar y utilizar WPhone es muy sencillo:

1. Descargar plugin y descomprimir.
2. Subes la carpeta del plugin a la carpeta ‘wp-content/plugins/’ y activar el plugin.
3. A partir de este momento, al introducir el usuario y contraseña para acceder al panel de administración del blog dispondrás de una casilla de selección que te permite acceder en el modo de visualización para móviles.

Este plugin nos proporciona dos versiones para la interfaz de administración:

• Una adaptada para iPhone / iPod Touch u otros teléfonos que dispongan de soporte completo para Javascript, CSS y animaciones AJAX.
• Otra versión, más ligera, diseñada para el resto de teléfonos móviles (no necesita Javascript ni ningún otro requisito, sólo que se pueda ejecutar Html).

MobilePress es un plugin de WordPress que nos permite disponer de una versión de nuestro blog para dispositivos móviles.

El proceso de instalación es sencillo:

1. Descarga MobilePress
2. Sube la carpeta mobilepress a /wp-content/plugins/
3. Activa el plugin en el panel de administración de Plugins
4. Si quieres usar themes a medida, o quieres especificar una descripción o título distintos para la versión móvil, configura estas opciones en el panel de administración de MobilePress

En las opciones del panel de administración de MobilePress he puesto:

• Force Mobile Site? No
  Yes.  Esta opción fuerza de su sitio a ser para móviles.
  No.  Sólo será para móviles cuando deba serlo.

• Treat iPhone as a web browser? No

• Treat Windows smartphone as a web browser? No

• Treat Opera Mini as a web browser? No
  En las tres últimas preguntas si ponemos Yes desactivamos la visualización para dispositivos móviles si entramos a través de iPhone, smartphone y Opera Mini.

Por defecto se instalan dos themes. Uno que se utilizará por defecto para todos los dispositivos móviles, y otro específico para iPhone.

Este es el titular del artículo que dedica El Faro al portal web para dispositivos móviles de la Universidad de Murcia.

1. El público potencial para un servicio web para dispositivos móviles.

En el último año (2008) se ha detectado que en España ya hay más líneas de teléfonos móviles que habitantes. Hoy en día prácticamente todos los teléfonos móviles que salen al mercado ya cuentan con la opción de navegación web, lo que hace que el público potencial de un servicio web para dispositivos móviles esté en torno al 90% la población española.

Actualmente en España son más de 5.000.000 de usuarios los que utilizan un teléfono móvil para el acceso a internet, lo que supone un 15 % de la población española, frente al 10% del año anterior.

Además, en el último año el tráfico de Internet generado por los abonados móviles del país creció el 415 por ciento entre el primero y el segundo trimestre del año.

Estos datos nos indican que ya es muy alto el número de usuarios reales de internet a través de dispositivos móviles, pero también es muy significativo el número de usuarios potenciales de internet en el móvil que nunca utiliza este servicio. Un motivo de este elevado número de personas que no utilizan este servicio móvil puede estar en el elevado precio de las tarifas de acceso a internet para móviles. Otro motivo muy importante para explicar la baja cifra de usuarios reales respecto al total de potenciales, es la escasa cantidad de sitios web adaptados a la navegación mediante dispositivos móviles.

2. Conectividad.

Según Telecoms & Media (2007), un tercio de la población mundial tiene acceso a internet con dispositivos móviles. Esto es dos veces el número de conexiones a internet por medio de pc. Y se prevee, que en el 2010, la mitad de la población mundial tenga acceso a internet a través de dispositivos móviles.

3. Facilidad para contactar.

En una web para móvil podemos facilitar que a la misma vez que ven un teléfono de contacto puedan llamar mediante un click.

4. Privacidad.

El móvil es realmente personal. Nuestro pc puede que lo compartamos con varias personas.

5. El móvil siempre está encendido y siempre lo llevamos encima.

Esto es muy importante para que la gente pueda consultar información o comprar un producto cuando ve o escucha un anuncio en valla publicitaria, radio, televisión, etcétera.

6. Simplicidad al pagar.

Permite pagar al final de mes, de una vez y no cada vez que quiero comprar. Este es uno de los principales obstáculos a la venta por Internet, flexibilizar el pago. Sin embargo, pese a ser una ventaja evidente, también hay que decir que de momento en este tipo de transacciones económicas las compañias de telefonía se quedan con mucho dinero. Cuando enviamos un mensaje para descargar una aplicación para móvil, es fácil que la compañia de telefonía se quede con una 30-40-50% de la venta. Mientras que las ventas en un comercio tradicional, cuando pagamos con tarjeta, están en torno al 3%. Pero es razonable pensar que esto tendrá que cambiar pronto.

Por todo esto os recomiendo empezar a trabajar en una versión web para dispositivos móviles de vuestra página.

A finales del año pasado presentamos una primera versión del portal web de la Universidad de Murcia (http://m.um.es) dirigido a dispositivos móviles. Algunos ya lo sabreis por el post escrito en Úsalo.

Son muchas las dudas que nos surgieron desde que se inició de este proyecto. Os dejo algunas de las más importantes:

• Página específica o adaptación de css. Una de las dudas que teniamos era si debiamos hacer una web específica para móviles o adaptar mediante css la web actual de la UMU.  Según los criterios de accesibilidad, una web tiene que ser accesible desde cualquier dispositivo. Para resolver esta duda, planteamos otra pregunta, ¿un usuario busca lo mismo a través de móvil que de pc?. La respuesta es obvia. No. No podemos pedirle a un usuario que recorra un árbol web complejo a través del móvil. Y tampoco cuando uno navega a través del móvil busca la misma información.
  Así que decidimos hacer un portal específico para dispositivos móviles. Sobre los contenidos tendremos que ir haciendo mejoras. Tenemos que ver cuales son los contenidos más demandados  y  a partir de ahí modificar la estructura del mapa web actual.

• ¿Redirigir a los usuarios?. Otra de las dudas era sobre si debiamos redirigir al portal móvil a todos los usuarios que accedieran a www.um.es a través de móvil, iphone, pda, psp, o cualquier otro dispositivo móvil. Decidimos hacerlo, de momento, para dar a conocer la web, y también porque ahora mismo ahorramos dinero y tiempo a los usuarios que accedan a través de su móvil.
  Personalmente creo que esta redirección debe estar siempre. Un usuario no tiene por qué conocer el portal que hay para móviles, y le estamos obligando a que desgargue el portal general.
• ¿Cómo hacer la redirección?. Para terminar comentaros que para realizar la redirección desde www.um.es al portal para móviles hemos utilizado un script que analiza el user agent del cliente. Y estamos trabajando en un script que trabajará con la libreria de wurfl para la detección de dispositivos móviles.

De momento, vamos poco a poco, porque el aumento de recursos relativos a personal  va lento, pero seguiremos presentando mejoras.

Por supuesto, podeis dejar cualquier sugerencia o queja sobre este portal.