1. Diseñar para dispositivos móviles

1.1. Diferencias entre diseñar para la web y diseñar para dispositivos móviles

Gracias a los avances de estandarización de los lenguajes de desarrollo de páginas web para  dispositivos móviles, las diferencias a la hora de realizar webs para distintos dispositivos se han reducido sensiblemente.

Sin embargo, aunque técnicamente sea muy similar realizar páginas para un móvil (o una PDA) y para un ordenador de sobremesa, hay que considerar otros aspectos a la hora de realizar los diseños para un móvil:

• Tamaño de la pantalla

• Estructura de navegación

• Contenido y forma de escribir

• Accesos rápidos

1.2. Tamaño de la pantalla

La diferencia más evidente a la hora de realizar un sitio web para dispositivos móviles es sin duda, el tamaño de la pantalla. Mientras que en una página web normal, nos movemos con tamaños de pantalla de 800×600, 1024×768 o 1280×1024 píxeles, en dispositivos móviles los tamaños de la pantalla varían desde 128×160 hasta 320×320.

Estos tamaños, obviamente, imponen ciertas restricciones y formas de hacer a la hora de utilizar imágenes, tablas, enlaces… y de situarlos en pantalla. Al igual que ocurre en una web normal, hay que tratar de que nuestra web se vea correctamente en la mayoría de los dispositivos, por eso es recomendable no sobrepasar el tamaño de 200×250 píxeles a la hora de diseñar la web.

Igual que en una web normal, lo realmente importante a la hora de situar los elementos de la web es el ancho de la misma, por lo que, esos 200px serán nuestra principal referencia, aunque dependiendo del perfil de usuario al que nos dirijamos podemos adoptar otros tamaños y, además, siempre podemos utilizar un diseño flexible que se adapte correctamente a los diferentes tamaños de pantalla.

 

1.3. Estructura de navegación

La navegación en un teléfono móvil es sensiblemente diferente a navegar por la web utilizando un ordenador o algún otro dispositivo que disponga de ratón y teclado. Además, cuando estamos navegando utilizando un móvil, las esperas, el no encontrar el contenido deseado o el tener que dar clics de más es especialmente frustrante. Por ello, a la hora de definir la navegación de nuestra página web, hay que realizarse una pregunta fundamental: ¿qué es lo que el usuario viene a buscar a nuestra web? Esa información que el usuario busca, hay que presentársela en el menor lapso de tiempo posible.

Como hemos comentado, navegar desde un dispositivo móvil es más costoso que desde un ordenador. Hay que seguir una serie de consejos a la hora de plantear la navegación:

• Limitar en número de opciones. Más opciones no siempre significa mejor. El usuario puede desorientarse y sentirse frustrado al no encontrar lo que busca y tener que navegar más de lo debido: presentar pocas opciones y de forma clara.

• Evitar los enlaces vacíos. Hay que proporcionar siempre un contenido a todos los enlaces. Pinchar en una categoría para encontrarnos con un listado de subcategorías sin información útil no es recomendable.

• Limitar los enlaces por página a un máximo de 10. Los dispositivos que sólo disponen de teclado numérico (la mayoría de los móviles) nos permiten utilizar las teclas 0-9 como accesos rápidos a los enlaces. Hay que aprovechar esta circunstancia y asignaraccesskey a todos los enlaces de la página, por eso conviene limitarlos a 10.

• Priorizar los enlaces. Los primeros enlaces siempre deben ser los más evidentes, a los que el usuario accede normalmente. No siempre es sencillo saber que enlaces priorizar, hay que realizar pruebas y considerar los pros y contras del orden elegido.

• Proporcionar siempre un acceso al menú principal. Siempre hay que permitir al usuario volver al menú principal sin obligarle a retroceder, de página en página, por el árbol de navegación.

Teniendo en cuenta estas consideraciones, es recomendable elaborar un árbol de navegación en el que representemos las distintas páginas de nuestra web y como se accederá a ellas.

También hay que considerar, que en un dispositivo móvil, los números actúan de enlace, así que es conveniente colocar siempre el número de teléfono de nuestra empresa o negocio para que el usuario lo pueda guardar en su agenda.

 

1.4. Contenido y forma de escribir

Si se tiene una web ya hecha, es normal tener la tentación de hacer un refrito para crear una versión para dispositivos móviles, o quizácambiar simplemente los estilos para ajustarse a los criterios técnicos necesarios. Si pretendemos que nuestra web resulte útil, esto es un error.

Si estamos accediendo a una web desde un dispositivo móvil, un teléfono por ejemplo, esperamos encontrar una información concreta y ajustada; cuando uso un teléfono móvil para navegar por Internet, estoy buscando información útil y que me permita realizar alguna acción con ella. Es impensable poner páginas en las que el usuario tenga que hacer scroll más de una vez, y eso en un dispositivo de 250px de alto, significa ajustar mucho el contenido que hay que presentar y la forma de hacerlo.

Estas limitaciones, imponen un trabajo de análisis previo a la realización de la página web muy importante. Hay que saber perfectamente qué parte de la información va a quedar fuera de nuestra web .mobi y cuál resulta relevante y útil como para ponerla en nuestra versión para los dispositivos móviles. No hay que tratar de ponerlo todo, sólo lo que sea realmente útil para un usuario que vaya a entrar desde su dispositivo móvil. Siempre se pueden añadir referencias a la versión normal de nuestra web en aquellos apartados en los que se considere.

 

1.5. Accesos rápidos

Ya hemos comentado la importancia de los accesos rápidos en dispositivos sin teclado alfanumérico, que son la mayoría de los dispositivos móviles. Lo que en una web normal puede no ser tan importante, aquí se convierte en fundamental. Elaborar un menú limitado a un máximo de 10 elementos para que el usuario pueda acceder a ellos con un sólo clic es indispensable. De igual forma, cada vez que haya un enlace es importante acostumbrarse a asignarle accesskeys del 0-9.

 

1.6. Plantillas: disposición de los elementos

Las limitaciones de las que hemos estado hablando, imponen una estructura de web menos flexible de lo que se estila si estuviéramos viéndola desde una pantalla de ordenador. En un móvil, la navegación debe ser considerada siempre de forma vertical (excepto para aquellos dispositivos de gran resolución de pantalla), por lo que lo común es presentar plantillas como la siguiente:

 

1.7. XHTML Mobile Profile / XHTML Basic

Se ha avanzado mucho en los procesos de estandarización de los protocolos de web móvil desde que había que escribir en WML las páginas web para móvil, lo que ha provocado que escribir código para un dispositivo móvil sea prácticamente igual que escribirlo para una web típica. Si no hay una necesidad de ajustarse a dispositivos antiguos, cualquier móvil actual interpreta correctamente páginas escritas enXHTML-Mobile Profile y que usen Wireless CSS.

XHTML-Mobile profile, es un subconjunto de XHTML y, actualmente, XHTML Basic 1.1 y XHTMLMobile Profile 2.0 son prácticamente idénticos. Por lo tanto, si se sabe XHTML, sólo hay que tener en consideración unas mínimas limitaciones.

Wireless CSS es también un subconjunto de CSS y soporta la mayoría, aunque no todos los atributos de CSS. De nuevo, si mantenemos el CSS lo más simple posible, no tendremos ningún problema de que nuestras páginas se vean correctamente.

Para más información:

• W3C: XHTML Basic 1.1 (http://www.w3.org/TR/xhtml-basic/), CSS-MP

(http://www.w3.org/TR/css-mobile/)

• OMA: XHTML-MP, Wireless CSS© 2011 – Copyright Arsys Internet S.L.

2. XHTML: Recomendaciones

Te mostramos las bases y algunas recomendaciones para la creación de páginas XHTML para dominios .mobi.

• Tipo de codificación de caracteres (encoding)

Si no indica un tipo correcto para la codificación de los caracteres en su página, puede que ésta muestre caracteres extraños al visualizarse en el dispositivo móvil. El tipo de codificación debe aparecer siempre en la primera línea de su página web. Se recomienda usar codificación UTF-8:

• Tipo de documento (DOCTYPE)

El tipo de documento indica al navegador cómo visualizar la página (qué reglas deben aplicarse, etc…). Te recomendamos usar el siguiente código:

• Escribir en lenguaje XHTML sintácticamente correcto

El código de una página web debería estar conforme al tipo de documento indicado (doctype) y seguir las reglas del lenguaje usado (estar bien escrito sintácticamente en XML). Te recomendamos revisar los siguientes apartados:

o Todas las etiquetas deben cerrarse con “/>”. Ejemplo: <br /> (también admitido <br></br>).

o Las etiquetas deberían estar bien posicionadas, con inicio y fin. Ejemplo: <p><em><strong>Texto</strong></em></p>

o Las imágenes deben incorporar siempre el atributo “Alt”. Ejemplo: <img src=”imagen.gif” alt=”Descripción de la imagen”/>

o Los textos deben ir dentro de un párrafo (y no directamente en el body). Ejemplo: <body><p>Texto</p></body>

o Los atributos deben entrecomillarse. Ejemplo: <img src=”dirección-imagen” alt=”Descripción” />

o Usar siempre minúsculas para las etiquetas y sus atributos. Ejemplo: <p class=”destacado”>Texto destacado</p>© 2011 – Copyright Arsys Internet S.L.

NOTA: Recuerda que existen numerosas herramientas online para validar la sintaxis de tus páginas web.

• Usar títulos de página cortos y significativos

Los títulos son importantes porque favorecen la identificación del contenido de la página y son utilizados por los buscadores para su indexación. Se recomienda usar títulos de página cortos y descriptivos, teniendo en cuenta que el navegador del dispositivo móvil puede truncar su contenido en la mayoría de las ocasiones. Un título con estas características, seguido opcionalmente del nombre de su web, suele ser la opción más adecuada. Ejemplo:

• Evitar el uso de tablas para la disposición de los elementos o el contenido

Las tablas, en pantallas pequeñas, suelen dar problemas de visualización. Te recomendamos evitar usarlas, ya sea para la disposición de los elementos en la página o como contenido dentro de las mismas. Para el contenido:

• Haz uso de la etiqueta <dl> (lista de definición) en vez de <table> para mostrar datos.
• Si no tienes más remedio, usa tablas de pocos elementos (con dos o tres columnas máximo).

Para la disposición de los elementos en la página:

Utiliza la etiqueta <div> para organizar los contenidos de forma lógica y luego darle el estilo que desees para controlar su presentación. Por ejemplo, si queremos mostrar un texto entre una cabecera y un pie de página podríamos indicar algo como:

• Menú de navegación en el cuerpo de la página, listas ordenadas y accesskey

Debido a la orientación vertical del diseño, no se recomienda tener un menú fijo de navegación en cada página (a diferencia de lo que ocurre en las páginas web normales). Eliminando el menú fijo de la página, reducimos el scroll y el peso de la misma. Por este motivo, debemos incluir la navegación dentro del cuerpo de la página, mostrando solo los enlaces que sean de mayor importancia.

Para facilitar la navegación mediante el teclado y evitar el scroll, es recomendable el uso de listas ordenadas a las que incorporar un acceso rápido mediante el teclado (a través de las accesskey). Por ello se recomienda no usar más de 10 enlaces por página (para asignar valores del 0 al 9 a cada enlace).

Ejemplo:

Una de las ventajas del uso de un dispositivo móvil es que hay un acceso rápido a la realización de llamadas. A través del uso de enlaces para los números de teléfono permitimos al visitante efectuar una llamada de forma directa al teléfono mostrado o almacenarlo en su agenda (para posterior uso). Aunque se puede indicar un texto en el enlace, se recomienda siempre poner directamente el número de teléfono enlazado, para que sea más claro. Ejemplo:

• Evitar el uso de formularios

Es evidente, que la inserción de datos en un terminal telefónico puede resultar una labor muy complicada y tediosa. Por este motivo se recomienda no usar formularios en las páginas diseñadas para dispositivos portátiles en la medida de lo posible. Como en otros casos, si no hay más remedio, reduce la inserción de datos al máximo, tratando de hacerlo lo más sencillo posible.

• Reducir al máximo el tamaño de las imágenes (y, en general, de las páginas)

Debido a las reducidas dimensiones de las pantallas de dispositivos móviles, debes reducir el tamaño de las imágenes utilizadas lo máximo posible. Recuerda que aunque el ancho recomendado son 200px, muchos terminales no superan los 120px por lo que si insertas imágenes, haz que tu ancho no supere dicha medida. Y no olvides insertar el atributo “alt” en todas tus imágenes.

3. Referencias

• Dot Mobi: http://pc.mtld.mobi/

• W3C: http://www.w3.org/

• OMA (Open Mobile Alliance): http://www.openmobilealliance.org/

• Patrones de diseño: http://patterns.littlespringsdesign.com