grancomo.com Weblog de Luis Villa sobre Espacios, Personas, Tecnología y Experiencias

Cómo diseñar para la web móvil. Una aproximación práctica

NOTA: Correcciones y puntualizaciones realizadas a partir del comentario de Carlos I. (a quien conozco personalmente).

Mejorar la experiencia móvil -y aumentar el ARPU- sigue siendo uno de los asuntos pendientes de las operadoras, fabricantes y proveedores de contenidos y servicios móviles.

Hace alrededor de un año, tras múltiples debates, negociaciones y acuerdos se lanzó la iniciativa .mobi, un dominio promocionado por Nokia orientado a alojar este tipo de servicios. Apoyada por fabricantes y operadoras, forma parte de la Mobile Web Initiative del W3C. El proceso de siempre, con los mismos de siempre uniéndose para hacer las cosas más complejas.

Como cosa buena, Dotmobi, la entidad registrante, ha lanzado varios servicios de apoyo para impulsar la adopción, o comercialización, del dominio:

Por su parte, y complementando sus Recomendaciones para la Web Móvil, del W3C, Mobile Web Initiative, ha publicado herramientas y material de referencia para diseño y desarrollo móvil:

Pero, ¿qué pasa cuando varios sitios con una base de usuarios altamente involucrados espontáneamente adoptan una práctica alrededor de un problema real y esta se convierte en convención? Lo mismo que sucedió con el RSS, lo mismo que con los microformatos. Soluciones sencillas, prácticas, basadas en problemas reales y beneficiosas para el usuario.

El subdominio m., aloja la versión móvil de un servicio, y suelen ser una lección de minimalismo si los abres en tu navegador, ya que se desarrollan alrededor del núcleo incorruptible del servicio. Echa un vistazo a estos ejemplos:

No se trata de “miniaturizar” el contenido para mostrarlo sin más en pequeños displays, algo sencillo aplicando estándares web, sino adaptarlo a un contexto móvil: es decir, “movilizar” el contenido. Y es lo que está sucediendo, sin necesidad de nuevos dominios o desarrollos paralelos en tecnologías más cerradas como WAP.

Los ingredientes, los usas cada día. Combínalos de manera diferente y empieza a jugar (y descárgate el pequeño gran navegador, Ópera Mini, te ahorrarás en la factura del móvil).

webmovil.png

Ingredientes: Contextualización de interfaz (Usabilidad) + XHTML + subdominio m. + Opera Mini

Y es que en la web, una comunidad siempre ofrecerá soluciones más ágiles, prácticas y cercanas a los problemas reales que un comité.

Enlaces Extra


23 Comments

La clave Luis está justo en eso que dices. No hay que mostrar el mismo contenido.

El dispositivo móvil supone una experiencia completamente distinta al navegador estándar. Requiere otros contenidos, otra funcionalidad. No sólo hay que adaptar la presentación, hay que pensar qué contenidos se dan y cómo se dan.

Posted by Agustín Jiménez on 4 July 2007 @ 5am

A mí lo de los estándares de facto me parece que está guay, pero lo cierto es que lo del subdominio m.* me gusta casi tan poco como el .mobi por muchas razones, entre ellas la duplicidad de recursos ¿ahora mi cuenta es flickr.com/demimismo ó m.flickr.com/demimismo?

Me parece que los estándares web proporcionan suficientes mecanismos para que los desarrolladores podamos adaptar un recurso a diferentes dispositivos, no creo que sea necesario hacer versiones alternativas (salvo en contadas excepciones).

Posted by demimismo on 4 July 2007 @ 10am

David, en mi opinión, a nivel de uso es más cómodo el m. para teclear, que irte a un .mobi. Mucho más usable.

Respcto a los estándares, veo algún depende, como quie contextualizas mejor si haces una versión reducida y sobre todo la magia de la CSS, en teoría te mostraría contenidos para el móvil, pero el XHTML seguiría viajando y al precio que van las conexiones…

A no ser que me hables de XSL en el servidor y todas esas cosas… ¿Es eso?

Posted by Luis Villa on 4 July 2007 @ 10am

Tienes razón, el tamaño del documento es un buen argumento para separar (aunque no para siempre), pero también se pueden aplicar parches en el servidor (detección de agente de usuario)…

Otro problema gordo es que seguramente se avecinan mobile-browser wars, lo digo por el tema del iPhone y su navegador, supongo que por todo esto es por lo que algunos están optando por los subdominios m.*, pese a que también usan detección de agente de usuario, como en flickr, que te redirecciona automáticamente a la versión para móviles. Habrá que buscarle el puntito a todo esto :-)

Posted by demimismo on 4 July 2007 @ 6pm

El que hagas una versión especifica para el movil no quita que tu versión web debería también estar pensada para dispositivos de pantalla reducida.
Y lo que para mi es una aberración es que por culpa de una detección de agente de usuario no pueda acceder a la información que espero encontrar en una url, sino otra supuestamente optimizada para el tipo de dispositivo que uso. Como diría el ex, “y quién te ha dicho a ti que quiero que conduzcas por mi”.

Posted by juan on 5 July 2007 @ 4am

Juan, no puedo estar más de acuerdo. :-)

No crees que el subdominio m. es un acceso directo y voluntario por parte del usuario a la versión que desea?

Posted by Luis Villa on 5 July 2007 @ 7am

Hola Luis,

La verdad que no acabo de ver la gran ventaja para el usuario ya que, si bien la utilización del subdominio m.loquesea puede ser un poco mas sencillo que el usar un dominio .mobi, si me pongo en el lugar de nuestro querido usuario me parecería mucho mejor el poder acceder de forma adecuada a cualquiera de esos sitios sin tener que preocuparme de poner una m delante cuando navegue con mi dispositivo móvil.

Para mi, y creo que para cualquier usuario, lo ideal sería meter la dirección que conozco de siempre y que se arregle mi dispositivo con el servidor para proporcionarme el contenido adaptado a cada situación, el cómo me trae absolutamente sin cuidado (poner una m delante ya es parte del cómo). Eso sí sería darle a los usuario lo que quieren y ¡vaya! casualmente es lo que promueve unos de esos de siempre con MWBP, Device Description y el concepto correcto de One Web: consistencia temática pero con adaptación.

Por cierto ¿qué haríamos con los enlaces en los documentos? ¿si quiero enlazar a flickr desde mi sitio web lo hago con m, sin ella o de las dos maneras por si alguien accede con móvil? ¿o creamos dos redes paralelas una en la que sólo se pueda enlazar y acceder a contenidos m.algo y otra para los “tradicionales”?

Hombre, mientras el trabajo está terminado te puedes ahorrar tres pulsaciones utilizando la m (que insisto no creo sea el sueño dorado de todo usuario, sobre todo si lo comparamos con la otra opción) pero no veo que el uso de un subdominio garantice per sé que algo se desarrolle entorno a un núcleo incorruptible ni que tenga ninguna ventaja en ese aspecto respecto a un dominio dedicado.

Y es que ese es el verdadero meollo de este asunto, la adaptación de contenidos (no de la presentación, que sería trivial si se siguen las buenas prácticas), y no veo por el momento ninguna solución propuesta por parte de “las comunidades” para garantizar esa consistencia temática y ese núcleo incorruptible, claro que seguramente será porque esa ya conlleva inevitablemente un poco mas de tiempo y tener que desarrollar tecnologías de esas tan complejas y aburridas (¿o sería mejor que cada uno tenga que desarrollar su propia solución ad-hoc?, o peor aún, ¿nos dedicamos a replicar todo a manubrio pero resumidito?). Menos mal que tenemos esos anticuados comités que sí se encargan del trabajo sucio con el desarrollo de las tecnologías mencionadas y otras ;o)

También es curioso eso de llamar a los microformatos “solución beneficiosa para los usuarios”. Creo que habría que consultárselo a todos los usuarios que “sufren” esos problemillas de accesibilidad que los promotores con usuarios altamente involucrados reconoce pero se niega reiteradamente a corregir (será que los discapacitados no son parte de esa base de usuarios involucrados)

Por último puntualizar que MobileOK no es un servicio de dotmobi, es una de las Recomendaciones que se están desarrollando dentro del W3C como complemento de las Buenas Prácticas de Web Móvil y en la que dotmobi es uno mas de los participantes. Por tanto no hay relación ninguna entre las MWBP o el mobileOK, que son un esfuerzo en crear Recomendaciones para mejorar la experiencia de usuario en la Web Móvil, y los dominios .mobi, que en mi opinión no son mas que una iniciativa comercial y muy lucrativa para unos pocos (Y que por cierto el W3C considera una mala práctica)

Sin acritud, ya sabes.
Saludos
CI.

Posted by Carlos on 5 July 2007 @ 12pm

El comentario de juan me recuerda a un post de ALA, en el que se hablaba de “breaking user expectations” al incluir hojas de estilo de impresión.

Siendo la navegación web a través de móvil tan jovencita, creo que es un punto muy interesante… ¿espera el usuario encontrar el sitio web tal y como lo ve con su navegador de pc? ¿es consciente de las limitaciones de su dispositivo móvil (al margen del tamaño de la pantalla)?

Sobre el tema de la detección de agente de usuario: al final de lo que se trata en la mayoría de los casos es de “explotar” una base de datos, de manera que siguiendo patrones de diseño como MVC, hay que estar preparado en todo momento para suministrar la vista adecuada al dispositivo que la demande.

Posted by david on 5 July 2007 @ 2pm

Luis: efectivamente, el subdominio m, como acceso voluntario me parece correcto y deseable. Lo que no tengo muy claro es que la optimización de acceso a una web vía móvil tenga que ser solo a través de una versión reducida y simplona del contenido. Desde luego que en móviles que tengan una resolución de pantalla muy pequeña o estén limitados técnicamente el mejor acceso que pueden utilizar es el simplón. Pero ese no es el caso de un gran número de dispositivos que están bien dotados (me refiero a tamaño de pantalla y uso “completo” de xhtml,css y javascript :) ). A través de estos últimos son los que se prevé que se de el “Next Big Thing”. Como ejemplo obvio de esto tenemos el iPhone.
Por eso no me parece correcto que una detección de agente de usuario me redirija a la versión m. Prefiero tener la libertad de poder elegir que versión usar.

Posted by juan on 6 July 2007 @ 1am

Carlos, he separado la parte Dotmobi y W3C para que se vea que no están juntas.

En el fondo, no puedo más que darte la razón: los conceptos de One Web, URIs, etc. y evitar la temida “balcanización” de la red…

PERO…

Mi post es una “aproximación práctica”, y a falta de algo mejor, es útil y funciona, y es sobre todo “muy practica” y sencilla de implementar ¿Porqué? Porque utiliza ingredientes sencillos y al alcance de todos. Y lo que es sencillo puede tener más posibilidades de adopción. En ocasiones lo que propone W3C, son labores complejas para una web que tiene su punto de “bricolaje”).

Tengo que reconocer que es tan sencillo, que me recuerda a cuando hacía mis primeras web allá por los 90. (sólo le falta el fondo gris). Pero con todos sus fallos conceptuales, su duplicación de recursos (aunque el recurso final es el mismo: un artículo, una oferta de empleo), he montado una versión móvil y conceptualizada en una tarde, activando un subdominio y 3 plantillas.

Por otro lado, lo que si que estoy de acuerdo, es que la adaptación de contenidos debe venir desde el SERVIDOR (llámalo parseos, XSLT, soluciones comerciales como Volantis [1] etc.), no, como dicen algunos usuarios, con CSS y XHTML ocultando y mostrando información, haciendo viajar todo por la red. (¿Porqué pagar por descargar información que no vas a ver y no quieren que veas?). De todas maneras, la aproximación One Web, por muy correcta, puede ser demasiado técnica y abstracta para la gente que hace la web de andar por casa “ahí fuera”. ;-)

Aún queda. Estamos aprendiendo. Centrémonos en usuarios y el uso práctico. Tomemos riesgos y aprendamos a crear y usar contenidos móviles, que gracias a una aproximación practica ya lo estoy haciendo y recibiendo feedback, y no perdamos de vista One Web.

“El viaje más largo comienza por un paso”, Confucio
“¿Cuánto queda? ¿Cuándo llegamos? Quiero parar” Niño en asiento de atrás

;-)

[1] http://www.volantis.com/

Posted by Luis Villa on 6 July 2007 @ 2am

Juan, no estoy de acuerdo con lo de “versión simplona y reducida” del contenido. ¿Porqué no lo llamas contextualización?

Respecto al XHMTL+Javascript etc, tampoco estoy de acuerdo: me recuerda demasiado a la I Guerra de los Navegadores y parece que no hemos aprendido nada. Seguimos fascinados por la tecnología, lo cual me parece muy bien siempre que no perjudique a los usuarios. De momento no hay “Next Big Thing” y durante años, habrá que convivir con la “carga” de usuarios con dispositivos que no soportan Javascript y resto de tecnologías… diseñemos para el Mínimo Común. (Y los del iPhone y cía que vayan a la versión completa, que si está correctamente diseñada no tiene porque verse mal).

Bueno, una vez más estamos aprendiendo y compartiendo experiencias prácticas y creo que lo dicho por Nielsen en los 90 y todo lo trabajado por W3C tras la experiencia de las Guerras de Navegadores es tan de sentido común que es completamente aplicable en la Web Móvil.

Un saludo, :-)

Posted by Luis Villa on 6 July 2007 @ 3am

[...] Luis Vila ha publicado en su blog una aproximación práctica para el desarrollo de aplicaciones web pará dispositivos móviles. [...]

Posted by Conceptos iniciales para diseñar una aplicación web móvil on 6 July 2007 @ 5am

Luis, desde luego que en ocasiones toca ser “prácticos” sobre todo en las épocas en los que sistemas están todavía un poco verdes (aunque funcionando), pero también es fundamental mantener la “ambición” y no “perder el norte” pensando que con el apaño ya salgo del paso y a otra cosa (cosa bastante frecuente en este nuestro mundillo). Muchas veces las soluciones temporales cómodas y prácticas nos permiten “jugar” y experimentar fácilmente, pero corren el riesgo de convertirse en los grandes problemas permanentes que tendremos que arrastrar en el futuro (la fragmentación de la Web en nichos aislados en este caso) si no somos conscientes de los verdaderos objetivos.

En definitiva creo que el uso del subdominio m.loquesea que comentas no es mas que una pequeña sutileza que, aunque los grandes productos estén llenos de pequeñas sutilezas, no ataja el verdadero problema: la transparencia al usuario. Así pues, tenemos que ser muy cautos y no utilizar al Usuario como “escudo humano” confundiendo lo que él realmente desearía (transparencia total, adaptación contextual y una web única) con lo que a nosotros nos resulta mas sencillo (un dominio o subdominio dedicado en lugar de una transformación transparente y contextualizada a la que se accede mediante una única dirección)

Saludos,
CI.

Posted by Carlos on 7 July 2007 @ 6am

Cambio lo de simplona por simple y añado contextualizada: versión simple, reducida y contextualizada. Que por otra parte a mi no me parece mal.
Lo que planteo es el peligro de dedicar sólo a las versiones .m los recursos para “movilizarse” y no pensar nada en los dispositivos que también son móviles y que tienen capacidad aceptable para visualizar las versiones habituales.

Totalmente de acuerdo en el resto de lo que comentas, aunque a lo mejor sería un poco más papista, cuando dices: “completamente aplicable en la Web Móvil” ya estás haciendo una diferenciación o división: ¿una web también para los navegadores parlantes, para las televisiones, para los quioscos multimedia?. Aunque imagino que estarás de acuerdo conmigo en que no es el camino, lo digo un poco con cierto ánimo de polemizar.

Y siguiendo con el ánimo de polemizar, te recuerdo que el XMLHttpRequest y el innerHTML que están en la base del Now Big Thing son hijos de la guerra de navegadores, implementados primeramente en el ie 5.0, y no son estándares oficiales. No me importaría que los de Apple o Nokia sacaran unas especificaciones MOM (Mobile Object Model) para poder acceder que si al GPS, o la agenda, o el ajedrez…

Saludos ;)

Posted by Anonymous on 9 July 2007 @ 10am

Cambio lo de simplona por simple y añado contextualizada: versión simple, reducida y contextualizada. Que por otra parte a mí no me parece mal.
Lo que planteo es el peligro de dedicar sólo a las versiones .m los recursos para “movilizarse” y no pensar nada en los dispositivos que también son móviles y que tienen una capacidad aceptable para visualizar las versiones habituales.

Totalmente de acuerdo en el resto de lo que comentas, aunque a lo mejor sería un poco más papista, cuando dices: “completamente aplicable en la Web Móvil” ya estás haciendo una diferenciación o división: ¿una web también para los navegadores parlantes, para las televisiones, para los quioscos multimedia?. Aunque imagino que estarás de acuerdo conmigo en que no es el mejor camino, lo digo un poco con cierto ánimo de polemizar.

Y siguiendo con el ánimo de polemizar te recuerdo que el XMLHttpRequest y el innerHTML que están en la base del Now Big Thing son hijos de la guerra de navegadores, implementados primeramente en el ie 5.0, y no son estándares oficiales. No me importaría que los de Apple o Nokia sacaran unas especificaciones MOM (Mobile Object Model) para poder acceder que si al GPS, o la agenda, o el ajedrez…

Saludos ;)

Posted by juan on 9 July 2007 @ 11am

Creo que las opciones de “m.dominio” ó “dominio.mobi”, son sólo formas de indicar a los usuarios que en teoría, esa web se puede navegar desde un dispositivo móvil más o menos moderno. Pros y contras… hay en las dos opciones, y ya se han dado buenos argumentos en el artículo y los comentarios, con los que coincido. Pero también creo que no hay que olvidarse de un vínculo, preferiblemente al principio de la página, para poder ir de la versión “móvil” a la de “pantalla grande”.
También está claro que hay que hacer trabajo en el servidor para mostrar las diferentes versiones: las hojas de estilos personalizadas por tipos de dispositivos tampoco pueden hacer milagros, aunque son muy útiles. Creo que hay que utilizar siempre todas las que puedan resultar útiles (sobre todo si son páginas estáticas).
Pero con la programación en el servidor, se pueden hacer maravillas: Incluso se puede llegar a modificar el tamaño de las imágenes en el servidor, mediante una librería de PHP5, para adaptarse al tamaño de la pantalla del dispositivo (como por ejemplo en Mobile Web Toolkit, un proyecto que de momento consiste en un plugin para wordpress, pero que quiere ampliar horizontes). Wordpress tiene tres o cuatro plugins para “movilizar” un blog,

Por otro lado, algo que no has comentado en el artículo y que me parece muy interesante el proyecto: Wireless Universal Resource File, un fichero XML que tiene información sobre capacidades y características de muchos dispositivos móviles. Sobra decir que es muy útil para optimizar contenidos y presentación desde el servidor.
Y ya que cito a un proyecto de Luca Passani (WURF), uno de los que más sabe sobre Web Móvil, también sería bueno contar otro de sus iniciativas: las Global Authoring Practices for the Mobile Web, una alternativa más universal y prágmática que las citadas Mobile Web Best Practices 1.0 del W3C-MWI, que están pensadas para dispositivos con unas características bastante elevedas, en cuestión de memoria y procesador.
Para terminar, me alegro de que hayas “movilizado” el contenido de alzado. El resultado es muy bueno, y ha servido como inspiración para este buen artículo, je je.

Posted by Gonzalo on 12 July 2007 @ 2am

Ups, se me olvidaba. Hay una traducción de Resumen de Principios: Buenas Prácticas en Web Móvil 1.0, una traducción de resumida de Mobile Web Best Practices 1.0.
Por cierto, subraya los vínculos en los comentarios, que no se distinguen :)

Posted by Gonzalo on 12 July 2007 @ 2am

Gonzalo, mil gracias por tus comentarios. Hay varias cosas que desconocía como el Wireless Universal Resource File, por eso no lo comenté. ;-) Muchas gracias.

Mi cacharreo se basaba en, cómo hacer una versión web para móvil en una tarde, usando ingredientes conocidos, y entre ellos mi Nokia patatero. (Mi Hosting no tiene aún PHP5). Esta es mi receta, basada en prácticas de terceros, para la experimentación y también para el desastre… ya iremos viendo en qué queda. :-S

Lo de los enlaces me acabo de dar cuenta. Glups!;-)

Posted by Luis Villa on 12 July 2007 @ 5am

Me alegro de que te haya aportado algo :) Si quieres más… puede que en Web es móvil encuentres una o dos cosas interesantes (el resto… sobra, je je).
Lo bueno de lo que cuentas en este experimento… es eso, en una tarde te pones, y haces algo bastante bueno. Probablemente el ratio resultado/tiempo es excelente, algo muy positivo para fomentar la web móvil.
Para terminar… desde mi punto de vista lo que puede haber dado un gran impulso a la web móvil es la existencia de navegadores como Opera Mini, que ya mencionas. La de hora que he perdido investigando por culpa de este navegador ;)

Posted by Gonzalo on 12 July 2007 @ 7am

[...] La gente verá sus páginas con muy diferentes configuraciones. Créelas en consecuencia.» [...]

Posted by blojer » Blog Archive » Otro ladrillo en el muro on 23 July 2007 @ 8am

[...] Si se dieron el tiempo de visitar los sitios de arriba se darán cuenta que la promesa que hacia Apple de navegar realmente por la Web no es tan así. Yo creo que el tema no pasa por crear otra plataforma para ver la Web, teniendo en cuenta que ya tenemos sitios WAP (pocos, pero aun perduran), o las versiones para palms… yo lo veo como un desafió (”Luis Villa explica en su blog“) para crear experiencias mobiles y que algunos verán sólo como dolores de cabezas para los desarrolladores que ahora no solo tendrán que lidiar con los navegadores sino con las plataformas. [...]

Posted by Nicolás Orellana, Entre viajes y Orelworks! » Blog Archive » El giro de la web móbil gracias a Apple on 6 September 2007 @ 2am

[...] Luis Villa habla sobre cómo diseñar para la web móvil. [...]

Posted by Itákora » Blog Archive » Lecturas recomendadas (4) on 23 December 2007 @ 5am

[...] Cómo diseñar para la web móvil. Una aproximación práctica Cómo diseñar para la web móvil. Una aproximación práctica (tags: css design webdev) [...]

Posted by Kiwihaus » iA Notebook » links for 2008-04-19 on 3 August 2008 @ 8am

Leave a Comment

Arquitecturas Twitter, Pownce y… Jaiku