Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Diseñar para dispositivos móviles (1ª parte)

Datos de búsqueda

Diseñar para dispositivos móviles (1ª parte)

Advertencia: este artículo se basa en experiencias propias, por lo que es posible que haya algun que otro error, o que algún asunto quede incompleto.

En los últimos años han surgido dispositivos móviles (PDA, Pocket PC, teléfonos móviles, etc.) con la capacidad de visualizar sitios web. En la imagen una fotografía (un poco mala) de como se ve Outbook (sin haber hecho ningún cambio) en el navegador de un teléfono móvil (concretamente un NEC e242, compatible con WML y XHTML).

Su ventaja: navegar por Internet casi en cualquier sitio. La primera desventaja: en ocasiones, sobre todo en teléfonos móviles, los navegadores son muy limitados. Y la segunda desventaja: las reducidas dimensiones de las pantallas.

Debido a esas desventajas los diseños basados en tablas o que no se ajusten a los estándares están contraindicados en el caso de que se pretenda que el sitio web se vea en este tipo de dispositivos.

Por ello la mejor alternativa es, como he insistido en otras ocasiones, la separación de presentación y contenidos. Pero aun separando presentación y contenido podemos encontrarnos con algún que otro problema de usabilidad.

¿Y a que problema me refiero? El orden en el que aparecen los textos. Supongamos que en la estructura de la página tenemos cuatro elementos, como en Outbook: encabezamiento, barra de navegación, contenido de la página y pie de página. Cada uno, en principio, debería estar formado por una capa (en el código fuente las etiquetas DIV).

Para ver en que orden quedan estos elementos debemos ver la página en un dispositivo móvil. O en un navegador, habiendose desecho previamente de la hoja de estilo. En Internet Explorer esto es complicado. Pero en Firefox o en Opera es muy sencillo. En Firefox hay que ir al menú “View” (lo pongo en inglés porque tengo los navegadores en inglés, y no estoy seguro de como sale en la versión en español), seleccionar “Page style” y marcar “no style”. En Opera hay dos formas: lo mismo que en Firefox (View > Style > User mode), o bien, la opción más adecuada, “View > Small Screen”.

El lector del sitio probablemente esté interesado en leer el contenido de la página. Pero si en el código va antes la capa de la barra de navegación que la de contenido, el lector se encontrará primero con la de navegación. Si la barra de navegación no es muy larga no supone problema. Pero cuando si lo es, si puede ser un inconveniente. En este caso creo que habría que situar antes la capa de contenido.

En cuanto al encabezamiento y el pie de página se pueden quedar al principio y al final, respectivamente.

Algo con lo que hay que llevar mucho cuidado es el código fuente. No hay que meter complicaciones, como Java, Javascript, Flash, etc. Y si se mete, al menos se deberá proporcionar una alternativa de solo texto. Y si se puede, también ha de evitarse meter mucho texto en cada página: se podría hacer incómoda su lectura e incrementar demasiado el coste de navegación para el usuario (este tipo de acceso suele ser por GPRS, que no es demasiado económico). Lo mismo para las imágenes: que ocupen pocos Kbytes y poner solo las imprescindibles.

Y para finalizar, las soluciones para evitarse estos engorros: crear versiones alternativas para dispositivos móviles, en WML o en XHTML sencillo.

Como veis, cada alternativa tiene desventajas propias.

En la web del W3C hay un documento que habla de XHTML sencillo para los dispositivos móviles. Leer documento.

Continuar hacia la segunda parte.

Modificado 2005-07-06 12:07

Tags: , , , , , , , , .

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “Diseñar para dispositivos móviles (1ª parte)”

Yavannna dice:

Fecha de comentario: 2005/06/29 13:37

Alucinando me dejas… ni se me había pasado por la cabeza la posibilidad del visionado por otro soporte que no fuese el ordenador… pero es algo a tener en cuenta, por supuesto!!! (tanta usabilidad web y no se suele pensar en los dispositivos que mentas)

Información del sitio