Anónimo Anónimo

Diseñar para la web móvil

miércoles, 04 de julio del 2007
obokamanpor obokaman

Daniel AppelquistResumen, anotaciones y conclusiones extraídos de la ponencia de Daniel Appelquist en el marco de Fundamentos Web 2006

Daniel realizó una de las ponencias más interesantes de las Jornadas del año pasado, a mi parecer, bajo el título "Mobile completes the web: a call to action". Como su nombre indica, toda la charla giró alrededor de la necesidad de plantear un enfoque consistente de las aplicaciones web, independiente del dispositivo que se use para acceder a las mismas. Vino a llamar a ese enfoque "La web única".

16029-15206.jpgLa web ÚNICA ( The ONE web )

  • Las URI deben ser intercambiables entre dispositivos, es decir, una misma dirección web debería ser válida tanto para un ordenador de sobremesa como para un móvil, como para una PDA. Debemos ser capaces de identificar y redirigir al usuario a la versión adaptadad de los contenidos.
  • La experiencia de un usuario en un servicio puede diferir en diferentes tipos de dispositivo, pero el contenido debe ser temáticamente consistente.
  • La web única no significa la misma web con la misma experiencia, los mismos elementos de navegación, o las mismas funcionalidades en todos los dispositivos. Significa adaptar los contenidos al contexto y a los interfaces de acceso.

Consejos de diseño para la web ÚNICA

  • Usar xHTML básico
  • Usar CSS
  • Usar el atributo media de CSS
  • Usar la información del dispositivo para determinar y adaptar el contenido a sus capacidades: ¿Qué tamaño de pantalla tiene? ¿Permite el uso de cookies?
  • Realizar el testing en dispositivos reales
  • Tener muy en cuenta aspectos relacionados con la accesibilidad de nuestra aplicación.
  • ¿Entra en juego la internacionalización? Por supuesto.

Más recomendaciones en : http://ww.w3c.org/mobile

El software social es una de las áreas con más potencial en el entorno móvil.

Desafíos en el diseño de interfaces

  • Pantallas pequeñas
  • Operaciones que requieren el uso de una única mano
  • Habitualmente únicamente existe un control de 4 direcciones
  • El usuario puede no prestar el 100% de su atención a la interacción con el dispositivo

Debemos tratar a los usuarios móviles como ciudadanos de primera clase de la web. ¡Debemos diseñar para móvil!

Cómo curiosidad, apuntar que en países menos desarrollados, muchos usuarios optan antes por un móvil o un smartphone antes que un ordenador de sobremesa, por la relación entre el precio y el uso que pueden darle.

Material & Recursos

¿Te pareció interesante este mensaje?

Mensajes relacionados

Comentarios

Un tema muy interessante el de desarrollar para dispositivos mòviles. Todavia esta verde pero lo tenemos a la vuelta de la esquina. Felicidades por el blog.

Más recomendaciones en : http://www.w3c.org/mobile

Le falta una w 

Otro artículo interesante sobre este tema en:

 http://www.grancomo.com/2007/07/04/como-disenar-para-la-web-movil-una-aproximacion-practica/

Un saludo. 

Lo de la Web única es una falacia como un castillo. Y lo digo así de claro para que no existan dudas al respecto de mi opinión.

 Por mucho que se juegue con CSS es INusable, pongamos el caso de esta página, la navegación resultaría tan penosa que te visitarían una vez y no más.

 Aparte que en determinados dispositivos esta página directamente no cargaría como por ejemplo por el exceso de número de enlaces.

Sí al diseño y desarrollo  exclusivo en función del dispositivo, el reaprovechamiento queda bien para la ecología.

Hola Salvador,

gracias por tu comment. Me da a mí que pensamos muy parecido, pero te has leído el artículo en diagonal.

Si te fijas en la mayoría de los puntos, se especifica que los contenidos deben adaptarse al contexto, y que la experiencia puede diferir entre dispositivos, pero el contenido debe ser temáticamente consistente.

No has comentado nada, en cambio, del punto clave: la consistencia en las URI. Las direcciones de los recursos web deberían ser idénticas entre dispositivos, realizándose una detección dinámica para determinar qué tipo de contenido se le mostrará al usuario.

En la práctica, esto significa que, si bien no se compartirá al 100% el código, mucha parte de éste sí puede ser "reutilizable", incluídos sistemas de navegación: seguir buenas prácticas en cuanto a accesibilidad ( enlaces entre menús de navegación internos, anchors para facilitar el acceso directo a los contenidos, etc... ) te permitirá no tener que duplicar código en la mayoría de los casos. Para los módulos que sí deban personalizarse, se realizará una detección de dispositivo.

El código de este blog posiblemente no sigue ni a un 50% de las recomendaciones ( no se realiza detección de dispositivo, no existen CSS dependientes de media, no hay módulos específicos para dispositivo... ), y aún y así su contenido resulta accesible desde cualquier dispositivo móvil, siguiendo unas sencillas pautas de ordenación lógica de los contenidos en el código ( todas las opciones de navegación secundarias se encuentran al final del documento, mientras que el contenido y las opciones principales de navegación están al principio ). Puedes hacer la prueba desde tu móvil, cualquier simulador de browser móvil en internet, o desde la web developer toolbar de Firefox: Miscellaneous > Small Screen Rendering

¡Saludos! 

Deja tu comentario

Deja tu comentario
Necesitas tener javascript activado para poder dejar comentarios

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

De esta forma, además, podrás mostrar tu imagen en los comentarios y no tendrás que rellenar tus datos cada vez.

Sponsors

Comentarios

Plantillas para mail gratis (ana)
holsa ¿como andas? yo bien x suerte bueno chau...(03 sep)
Elegir la mejor combinación de colores, herramientas online gratuitas. (marlyn pavez)
hola sabes kiero que me ayuden por favor compre un living color verde pastel y mi comedor es cafe...(03 sep)
Rediseño de Jquery.com (Oriol)
Ufff! Se les ha ido la mano, creo yo. Me quedo con el diseño anterior....(29 ago)
Crea el código QR de tu web automáticamente (TheDarkLady)
oh, lo intentare, ya habia visto algo parecido en algun sitio, gracias... fue interesante...(28 ago)
Tutorial Photoshop para convertir fotos a ilustraciones POP ART (obokaman)
Lo tienes al final y al principio del artículo, en el enlace ...(27 ago)

Login