Lecciones aprendidas disarrollando sitios para el iphone, por Ross Harmes

Ross Harmes, programador de Yahoo y autor del libro “Javascript Design Patterns“  ha publicado en post en el blog de flickr un interesante artículo sobre el desarrollo de versiones optimizadas para el iphone, aunque los mismos consejos se pueden aplicar al desarrollar para cualquier plataforma móvil.

Muchos consejos son de sentido común, pero ya sabeis que a veces hay que ver algo escrito por alguien  de su “peso” para convencernos de que ese era el camino :)

Advertencia, esto no es una traducción, más bien una interpretación llenando sus sabios consejos de tonterías y opiniones de un servidor.

No uses librerías javascript o frameworks para los css

En los dispositivos moviles el peso es primordial y los frameworks suelen tener muchas cosas que no necesitamos. Aconseja el framework de Yahoo (como no, viniendo de Flickr-Yahoo) YUI3. Al poder descargar solo las funciones que necesitamos es ideal para ahorrar ancho de banda, ese bien tan precioado en conexiones 3g o Edge. En el caso de los css es más tajante: ” Every line in your CSS must be custom; each property must be scrutinized to ensure it’s needed.”

Carga solo las partes de las páginas que necesites, no las páginas enteras.
Como muchas partes de la página van a ser iguales, Ross recomienda cargar por ajax solo la parte que necesites, separar las páginas en trozos más pequeñs que vas cargando cuando necesitas.

Este apartado me parece intersante, ya que uno de los problemas que solemos tener en las páginas al ir cargando lo que necestamos con ajax es que perdemos los permalinks. En el caso de las webs es un problema (de posicionamiento más bien), pero las versiones para iphone estan libres de esta “tara”, asi que …ala.. ¡a cargar todo con Ajax!
PD: recuerdo el infierno que fue intentar que todo funcionara en un sistema de reservas que cargaba todas las opciones y listados por ajax. Al final quedó bonico pero los programadores sudaron sangre (un saludete a mis ex-compañeros German y Jose)

No desarrolles para un solo dispositivo.

Hace incapié en utilizar css y codigo que quede bonito en las distintas  plataformas (iphone, symbian, opera, Android). Diseñalas elasticamente, ya que el mismo iphone puede utilizar en vertical y horizontal. Sé previsor para poder adaptarlo a las distintas plataformas con pocos cambios.

Optimiza TODO

Los dispositivos móviles suelen tener poca cpu y memoria (en comparación con los portatiles y equipos de sobremesa), por lo que no cachean todo los elementos de la web. Ross comenta que el iphone solo cachea ficheros de menos de 25 kb (dato interesante). Así que ya tenemos un limite que no debemos superar. Recomienda utilizar compresores de javascript y optimizar las imagenes. Para las imágenes recomienda varios servicios, un servicio online y un programa de escritorio: smushit y pngout. No conocía ni uno ni otro :(
He localizado un post sobre el peso de las páginas que leí ayer:  otro blog más – Blogs obesos

Que el usuario sepa que esta sucediendo.

La desventaja en los dispositivos con interfaz táctil es que no sabes si le has dado a un botón o enlace. En las webs puede existir un feedback a modo de subrayado, destacar el fondo o cambiar una imagen, pero en los disitivos con pantalla tactil esto no sucede. No existe el “rollover”. Cuando pulsas has pulsado y punto, sin advertencia previa. La solución que propone (y que han aplicado en su versión móvil de Flickr) es cambiar los botones o enlaces una vez los has “clickado”, añadiendoles estado de “cargando” y cosa por el estilo

Por último recomienda el Framework iUI framework para empezar a desarrollar para estas plataformas.

Enlaces del artículo: