Recién leo en Hongkiat una nota con 10 tips para mejorar la usabilidad en web móvil que vale la pena tomar en cuenta

1. Diseña en base a la resolución de pantalla.
2. Divide las páginas web en pequeñas partes.
3. Simplifica el diseño.
4. Siempre deja la opción de “Ver el sitio web completo”.
5. Posiciona bien los elementos de navegación según la audiencia y el dispositivo.
6. Usa enlaces de texto, en vez de imágenes (para reducir el peso de la página web).
7. Diferencia el enlace seleccionado del resto de enlaces.
8. Balance los enlaces según la página que se muestra. No intentes mostrar todos los enlaces en una página.
9. Reduce el ingreso de texto, en su lugar busca usar ingreso de opción multiple o autocompletado.
10. No uses pop-ups ni páginas que se refresquen automáticamente.

Pueden ver la explicación y ejemplos de cada tip en el artículo original: Mobile Web Design: 10 Tips To Better Usability (inglés).

—
Fotografía por John Larsson, liberada bajo licencia Creative Commons by.

iPhone Transit Planner por illustir (cc-by)

Esta semana pude leer un artículo en el blog de Pablasso llamado ¿Cómo debe ser el Internet para móviles? que es acerca de cómo WAP y WAP2 han quedado obsoletos con la llegada del iPhone de parte de Apple, y como él acertadamente menciona, ahora no hay tantas limitaciones de memoria o software como antes. Hasta aquí puedo darle la razón, con Apple y Android soportando HTML5 ¿quién quiere usar WAP?

Por otro lado termina el artículo con un par de comentarios en los que no estoy de acuerdo, vamos por partes:

Pablasso: En mi mundo ideal los móviles deberían de adaptarse a mostrar los contenidos lo más fielmente posible, y si no tienen la pantalla adecuada, entonces proveer aplicaciones para obtener esos contenidos por otros medios, como puede ser RSS

Es un error grave pensar que la web debe ser igual todo el tiempo y en todo lugar, especialmente  en el campo de los móviles.

Web móvil va más allá de adaptar al navegador, importan las capacidades del dispositivo así como también importa el contexto (lugar, hora, tarea, etc) en donde recibe la información, y para apoyar esto citó a la guía breve de web móvil de la W3C:

W3C: Es importante tener en cuenta que existen grandes diferencias entre usuarios móviles y usuarios fijos, como son los diferentes tipos de contenido que manejan, las capacidades de los dispositivos que utilizan (pantallas pequeñas) y el contexto en el cual el usuario recibe el contenido (por ejemplo, en el autobús).

Mostrar en el móvil exactamente lo mismo que en la PC no es siempre lo mejor, aunque también es cierto que un buen navegador, como Safari Mobile, puede ayudar mucho a navegar sobre esas webs no optimizadas para móviles y crear una mejor experiencia web que WAP o WAP2.

iPhone junto al iPod Touch son buenos dispositivos con un excelente navegador pero están muy lejos de competir contra una PC. En un día normal de navegación he llegado a bloquear Safari Mobile hasta 3 veces, no puedo cargar más de 2 webs “normales” (no adaptadas a móviles) y menos usar Flash.

De nuevo, la web móvil no es acerca de un navegador, hay que considera rendimiento (hardware), compatibilidad (software), velocidad de transferencia (conexión) y costo (de conexión, del móvil, etc.).

Pablasso: A menos que sea punto clave para tu negocio, yo no me preocuparía en ofrecer una versión web para móviles con navegadores inferiores al iPhone.

Tengo que aceptar estoy de acuerdo, si no es clave para tu negocio no debes preocuparte por desarrollarlo, porque para todo hay mercado y es bueno enfocarte en el tuyo. Por ejemplo, si el 90% de las visitas desde móviles provienen de iPhone ¿qué sentido tendría invertir tiempo y dinero en desarrollar una web WAP?

Sin embargo, no hay que olvidar que el enfoque de la web es lograr el mayor alcance posible, independientemente del medio, el dispositivo e incluso de limitaciones físicas. De allí la importancia de apegarse a estándares y no desarrollar solo para uno.

Más información sobre la web móvil

• Introducción a la web móvil.
• One web. Un artículo explicando cómo funciona el concepto de web única.
• Alzado escribe un buen artículo sobre Cómo diseñar para la web móvil. Una aproximación práctica. Nada complicado, solo un buen acercamiento a lo que la web móvil involucra.

Si vamos a enlazar el mundo,
el móvil será nuestro mouse.

frase vista en una muy buena presentación de John Pettengill acerca de la web móvil llamada An Internet Watered Down or, hot to save the mobile web. Si estas diseñando para la web móvil, o piensas hacerlo, debes ver esta presentación.

Mobile Widgets por Dan Taylor (CC)

Hoy en el blog de Betavine, Mobile Web Widgets, encontré una lista de consejos al desarrollar widgets para móviles. Me gusta la lista, especialmente porque aplica en el desarrollo web móvil.

Los dejo con una traducción un poco libre de Technical tips for mobile widget development:

• Automaticamente selecciona el campo principal cuando sea posible, es más fácil que usar el joystick del teléfono para llegar a él.
• Los efectos al colocarte encima de un elemento (Hover) son importantes para la usabilidad. Haz evidentes los botones porque a veces es difici llegar a ellos.
• Asegurate que el móvil tenga la fuente que tu usas y especialmente que se vea bien. las fuentes cursivas pueden no verse bien.
• No redimensiones imágenes usando HTML, los teléfonos lo hacen mal y se ve mal.
• Asegurate de tener un buen icono que se vea genial en el “Administrador de Widgets”.
• Usa CSS Sprites porque es más fácil migrar tu widget a la web..
• No hay un manejador de evento keypress, tenlo presente si planeas crear un juego.
• Recuerda, el teléfono es rápido, pero no tan rápido como tu computadora. Tampoco la conexión a Internet, optimiza lo más que puedas.

Como pueden ver, no son consejos fuera de este mundo, son consejos muy básicos pero siempre debemos tener en cuenta al desarrollar para la web móvil, o los widgets para móviles.

“Accessing the Web from a mobile device is not something users do because they have to, it is something they do because they want to”

Que en una traducción un tanto libre dice:

Accesar a la web desde un dispositivo móvil no es algo que los usuarios hagan porque pueden, es algo que hacen porque quieren

Una frase escrita por el MWI Team blog basada en IBM Study Finds Consumers Prefer a Mobile Device Over the PC, un estudio de IBM realizado el pasado octubre en Estados Unidos, China y el Reino Unido. El estudio mostró que al menos el 50% de las personas, de las 600 que participaron, han sustituido la computadora por un dispositivo móvil. Algo impresionante y que en mi caso es totalmente cierto. Además se espera que en el 2013 la cifra aumente de 50% a 80%, aunque personalmente no apostaría por eso.

Siguiendo con los resultados del estudio, muestran que uno de los mayores usos, además de comunicación, es el consumo de información a través de la web móvil, y que gracias a esto se espera que aumente el número de personas que prefieren los móviles. Los usuarios esperan usar más el internet desde el móvil para el 2011, además de tener más contenido disponible, incluyendo redes sociales y mensajería instantánea.

Recomendaciones para desarrolladores

También dentro del documento hacen algunas recomendaciones para la gente que trabaja con móviles acerca de cómo actuar frente esta adopción. Abajo los dejo tres de los cinco puntos que conciernen a la web móvil:

• Definir una estrategia respecto al Internet móvil para entender el comportamiento de los consumidores y poder identificar la estrategia que mejor aproveche los puntos fuertes.
• Transformar el modelo de negocios para integrarlo la estrategia respecto al internet móvil, esto incluye áreas de investigación y desarrollo, mercadeo y ventas (marketing and sales) o servicios de entrega (service delivery).
• Apoyar la adopción de estándares libre y open source para hacer crecer y nutrir el ecosistema(móvil).

Cuando escribí que el 2009 es el año de los móviles, en parte fue por las estadísticas y en parte porque es algo que ya se siente. Tengo dos móviles, un Sony Ericsson y un iTouch, sin mencionar la PDA abandonada, y día a día es más fácil navegar en Internet, ya sea porque los sitios web tiene una versión móvil o porque el navegador es lo suficientemente capaz de navegar en casi cualquier web.

Tener el móvil es un buen avance, otro es que la web en general ya se esta preparando, ya hay muchas webs con versión móvil, pero por otro lado ¿estamos aprovechando todo esto?

Ayer revisaba mis estadísticas de Google Reader, y es sorprendente que casi la mitad de mis lecturas son desde el móvil, por supuesto hay blogs que leo solo en la computadora pero también es cierto que otros solo los leo desde móvil. Casi seguro lo mismo sucede con otros sitios web que visito como Twitter, Facebook, Friendfeed y Flickr.

La web móvil tarde o temprano va a instalarse, como dije antes, creo que será este año 2009, lo que me intriga saber es qué tan rápido las personas la van a empezar a consumir. Sé que esto ya esta pasando, pero no a todos los niveles, en Latinoamérica ni siquiera tenemos buenos planes de Internet por parte de las telefónicas, actualmente tampoco veo a la gente con necesidad de conectarse desde cualquier lugar, la mayoría aún desconoce los beneficios de esto.

¿Cuando llegará la época en que digamos “Read on mobile: 100%”?

Nota: Los porcentajes de la imagen son de los temas leídos (no ignorados) y no el porcentaje que leo en móvil.

1. Desarrollo de sitios web móviles con Yahoo! Blueprint. Es una reseña rápida del Framework de Yahoo! para crear aplicaciones móviles, Yahoo! Blueprint. Más adelante haré una reseña de la versión 1.1 (la del artículo es la 1.0) y entraré en detalles sobre el tema.
2. Siete errores al diseñar un sitio web móvil. Una critica constructiva a un artículo sobre errores al diseñar para la web móvil.
3. Las estadísticas web declaran al 2009 el año de los móviles. La era de los móviles ya ha llegado, por eso estoy convencido de que el 2009 es el año de los móviles. En este artículo hablo sobre los motivos que me llevan a pensar eso.
4. Estilo iPhone para las carpetas de Apache. El último artículo, o mejor dicho tutorial, en donde explico de forma más técnica como convertir el estilo de las carpetas del servidor web para que sean compatibles con Safari Mobile (iPhone/iTouch).

Además les recomiendo el tema La revolución móvil de Internet está en manos de Webkit que escribió Freddie de Cristalab.

Artículos recomendados en Friendfeed

Si te interesa el tema de la web móvil considera unirte a la sala web móvil en Friendfeed en donde puedes compartir más artículos o leer los que comparto ocasionalmente.

Espero esto te sirva para iniciarte en la web móvil o si estas dentro ayudes a difundir la palabra

Abajo les dejo la charla, no es una transcripción por lo tanto no es literal, son, por decirlo de alguna forma, “las notas del orador”

Introducción a la web móvil

¿Qué es la web móvil?

La web móvil es Internet, el mismo que todos conocemos, la única diferencia de la web móvil o la razón por la que se le llama así es porque esta hecho para PDAs en un principio, luego se popularizo en teléfonos y ahora resulto en una mezcla de los dos que dio paso a gadgets más bonitos como el Nokia N95 o el iPhone.

¿Por qué es móvil?

Es móvil porque es pequeña, me refiero a que ocupa poco espacio o al menos debería y se puede navegar desde cualquier lugar con un gadget con conexión a Internet. Las ventajas de la web móvil es que esta disponible en lugares en donde quizás una computadora o laptop no sería practica. Es rápida, actualmente se usa exclusivamente para buscar, hacer consultas y demás, pero poco a poco se ha vuelto también una herramienta de entretenimiento, podemos leer blogs y ver vídeos de Youtube.

¿Necesitas una web móvil?

Dejando atrás los conceptos hablemos ya de diseño web para móviles, de desarrollar páginas para el teléfono y aquí el primer paso, la igual que otras páginas de internet, es preguntarse “¿necesito mi sitio web en el teléfono?” “¿para qué serviría?”

Ok, después de mucho pensarlo y consultarlo con la almohada estamos seguros que necesitamos el sitio web de la empresa en el teléfono. Claro también esta la opción de que el jefe te obligue y no hay mucho de donde elegir jeje

¿En donde empiezo?

Lo primero que viene a la mente, o al menos a mi me paso, es buscar un gadget donde probar el diseño, prueba y error, descargar X cantidad de programas, investigar porque no puedo ver mi intro en flash y de vuelta a probar otra vez el diseño. Error.

No digo que no funcione así, claro que funciona pero van a perder mucho tiempo, y el tiempo es oro y el oro dinero ok? El problema con el ejemplo anterior no es buscar un gadget, eso es lo más fácil con tanta empresa acechándonos con superplanes y si son listos hasta consiguen que el jefe (o la jefa) les compre uno. No es un error probar, tampoco instalar programas, mucho menos investigar, el problema es que nos saltamos un paso: Saber qué es lo que se necesita

¿Necesitamos esa intro en flash? Casi estoy seguro que no, tampoco en la computadora pero ese es otro tema, por eso tenemos que hacer una lista básica de lo que queremos.

Supongamos que es el sitio web de un fotógrafo

¿Qué tenemos?

• el portafolio
• el perfil del fotógrafo
• área de clientes donde pueden descargar sus fotos
• una lista con los servicios

¿Ahora pensemos que sería útil en un teléfono? ¿qué valdría la pena conservar? Se me viene a la mente

• El listado de servicios
• La información de contacto
• Quizás el perfil del fotógrafo o fotógrafos.
• El portafolio puede servir pero lo dejaría afuera porque se vuelve un poco pesado y contratar a un fotógrafo por las fotos que vimos en el teléfono es algo arriesgado, si entienden a qué me refiero? jeje Además, si entramos desde el teléfono es muy probable de que ya conozcamos al fotografo.

Otras opciones que agregaría porque me parecen interesantes para los clientes son:

• Saber si las fotos que se tomo el cliente ya estan listas
• Hacer cita para la sesión de fotos
• Opción de compartir las fotos con amigos

¿Quedo claro en donde hay que empezar?

Investigación

Cuando se habla de web móvil solo hablamos de una, el problema es que a cada pinche navegador la muestra como se le antoja. Por eso es bueno pensar en la web móvil pero también pensar en qué teléfonos y navegadores nos gustaría que se viera mejor, si pueden conocer que teléfono usan los clientes excelente sería genial, sino se puede usen las estadísticas. Para nadie es un secreto que el iPhone es bastante popular, incluyendo el ipod touch, también las blackberry son famosas en el mundo de los trajes negros y no dejemos afuera a Opera Mini, el mejor navegador para teléfono hasta que llego Safari junto al iPhone y el G1 con Android.

Supongamos que investigamos y decidimos que vamos a trabajar para teléfonos básicos, las feas páginas wap y una versión bonita para webkit. Mobile Safari el navegador del iphone, opera mini, Android y Oss, el navegador de Nokia trabajan con webkit, estos por mencionar algunos porque hay muchos más. Con ellos podemos trabajar un sitio web presentable.

Los Limites

• Pantalla pequeña
• Escritura complicada
• Velocidad de conexión
• Memoria del teléfono
• Pocas opciones multimedia
• Sin comunidad de desarrollo

No tienen que saber todos los limites, solo tener una idea básica para que nuestra idea no quede muy grande para el teléfono.

Por el otro lado están las buenas practicas

La W3C hace ya un tiempo recomendó buenas practicas para diseño de la web móvil.

1. Diseña para una web
2. Basarse en estándares
3. Aléjate de peligros conocidos
4. Ten cuidado con las limitaciones de cada dispositivo
5. Optimiza la navegación
6. Revisa los colores e imágenes
7. Mantenlo pequeño
8. Usa la conexión con moderación
9. Reduce las dificultades para ingresar información
10. Piensa en los usuarios en movimiento. El tiempo es corto y las distracciones muchas.

Diseño web móvil es fácil

No se que hayan escuchado sobre diseñar para teléfonos pero yo les digo que es fácil. Hablando técnicamente es igual a diseñar para cualquier navegador para PC, es HTML, CSS y en el caso de los Smartphones podemos darnos el lujo de usar Javascript.

Si saben hacer un sitio web para PC, entonces saben hacer un sitio web para móvil, por supuesto, siempre que tengan presentes las buenas practicas que mencione antes.

Seguro van a escuchar de algunos tipos de construir páginas web como por ejemplo xhtml-mp (mobile profile), que esta hecho especialmente para la web móvil y funciona, pero NO ES NECESARIO. Grábense eso.

Trabajen XHTML hasta CSS2 (que es básicamente es lo que se usa ahora) y estarán bien.

También es un poco lento

El diseño web móvil requiere mucha prueba y error, eso quita tiempo. Además es bueno probarlo en la mayor cantidad de navegadores para mejorar la experiencia. Luego con el tiempo sabrán que funciona y que no sin necesidad de mucha revisión. Obviamente no pueden tener todos los móviles, si los tienen perfecto, pero sino hay que apoyarse en los emuladores. Esos programitas que simulan lo que necesitamos ver. Ahora, rápido les puedo mencionar que hay emulador para iPhone, Opera Mini, Android, creo que Blackberry también tiene el suyo, en ready.mobi encuentran emulador de Nokia y de Sony Ericsson. Hay algunos más pero al final les voy a dar la dirección de del blog en donde tengo toda esa información (la dirección es webdebolsillo.com/recursos).

Hacer cosas

En este punto ya saben que es bueno y qué es malo, o al menos deberían. Hay que probar porque no se sabe que se puede hasta que se intenta. Prueben hacer efectos, prueben reducir espacio, prueben hacer algo nuevo. Muchas cosas que sabemos del diseño web aplican también para los teléfonos, solo hay que saber como adaptarlas.

Inspiración

Cuando se empieza en esto es bueno tomar inspiración, ir a ver que ha hecho gente con más experiencia en el campo. Por ejemplo de mis sitios web móviles favoritos esta Flickr. Su sitio web es genial, ojala hubiera más sitios web como este. También esta Facebook, que aunque un poco más pesado es igual de interesante.

Otro sitio web interesante, que por cierto ayer no estaba disponible pero que espero mañana si, es CWTV, un canal de Warner que logro un buen diseño y una buena adaptación del mismo para móviles.

Recursos

Hay bastantes recursos para diseñar para web móvil, pueden ver una recopilación en mi blog visitando la página de recursos (http://webdebolsillo.com/recursos).

Allí están los enlaces de los emuladores, de documentos con buenas practicas y de otros artículos que podrían servirles. Igual, lo seguiré ampliando poco a poco y con su ayuda.

Seguir aprendiendo

Me hubiera gustado mostrarles un ejemplo, algo más practico pero por cuestiones de tiempo no se puede. Si están interesados pueden entrar webdebolsillo.com y preguntar, también junto a Hugo Muralles (@hCante) estamos empezando un grupo para desarrollo de móviles y aprender, pueden unirse comentando aquí o en el foro de móviles en Cristalab.

Presentación completa

Pueden ver o descargar la presentación completa desde SlideShare. También pueden utilizarla, solo les recuerdo que esta bajo licencia Creative Commons By-Sa (Mencionen que soy el autor y compartan bajo las misma licencia)