Diseñar para dispositivos móviles

Pautas que aconsejan como realizar páginas web aptas para dispositivos móviles
Cuando se habla de Web Móvil se está haciendo referencia a una Web en la que el usuario puede acceder a la información desde cualquier lugar, independientemente del tipo de dispositivo que utilice para ello.

En la mayoría de la ocasiones, la experiencia del usuario es poco satisfactoria al encontrarse con numerosos problemas para acceder a la Web desde los dispositivos móviles.

El W3C, con el objetivo de convertir el acceso a la Web desde un dispositivo móvil en algo tan sencillo y cómodo como lo es desde los equipos de escritorio, ha puesto en marcha la "Iniciativa de Web Móvil" que busca resolver los problemas de interoperabilidad y usabilidad que actualmente dificultan el acceso a la misma desde ellos y hacer así posible uno de los objetivos principales de la organización que consiste en alcanzar una Web única.

En el sitio de W3C se habla de “Candidate Recommendation”, “Candidato a recomendación” lo que significa que el próximo paso, una vez que se haya recibido suficiente información sobre la implementación de estas prácticas, será el de Recomendación (es decir, oficialmente aprobado por el W3C).

Hoy hay un total de 60 pautas, que nos aconsejan cómo hacer páginas Web aptas para pequeños dispositivos conectados a Internet, como por ejemplo teléfonos móviles, monitores, PDA, terminales de texto, Web TV, navegadores parlantes...

Referencia: En DesarrolloWeb.com hemos publicado un Manual de diseño web para móviles en el que se discuten muchos asuntos que tienen que ver con el desarrollo para dispositivos, y también sobre asuntos relacionados con la usabilidad en aplicaciones web para dispositivos o los consejos para crear formularios fáciles de usar en móviles.

A continuación ofrecemos una traducción de varias de las pautas que aparecen en esa lista:

  • Como en el mundo de las PC de escritorio, hay navegadores que no respetan las intenciones del proveedor del contenido. Hay diferencias en la interpretación entre los navegadores y hay también deficiencias en la puesta en práctica. Por deficiente nos referimos al no poder soportar las características obligatorias de un estándar o una recomendación relevante como otros bugs o errores en la puesta en práctica.
  • Se recomienda testear el sitio Web desarrollado en los navegadores que utilizan los dispositivos móviles y sobre los dispositivos móviles reales, ya que los emuladores de navegadores móviles en la práctica no funcionan exactamente igual que dentro del propio dispositivo.
  • Se recomienda también definir URLs cortas, debido a la dificultad de tipeo sobre dispositivos móviles. Evitar tener que hacer entrar al usuario a un subdirectorio dentro de un dominio por la misma dificultad.
  • Proporcionar solamente una navegación mínima en la parte superior de la página. Cualquier otro elemento de navegación secundario se puede poner al pie de la página si realmente es necesario. Es importante que los usuarios puedan ver el contenido de la página de una vez cuando la misma haya cargado sin la necesidad de realizar scroll.
  • Proporcionar los links básicos en una sola línea.
  • Proveer mecanismos de navegación consistentes, incluir atajos de teclado para dispositivos sin “pointing device” así el usuario podrá saltar grupos de contenidos. Informar sobre links que apunten a contenido en otro formato, de modo que los usuarios no se descarguen contenido que su dispositivo no puede visualizar o interpretar.
  • No utilizar los mapas de imagen a menos que el dispositivo los soporte con eficiencia.
  • Arriba, abajo, izquierda, derecha y “enter” están disponibles en la mayoría de los dispositivos móviles, aún si no cuentan con “pointing device”.
  • No generar cambios de ventana o “pop ups” sin avisarle al usuario. Muchos dispositivos móviles no pueden soportar más de una ventana abierta.
  • Asegurarse de que el tamaño total de la página sea apropiado a las limitaciones de la memoria del dispositivo. Si las páginas son demasiado pesadas pueden tomar mucho tiempo para cargarse. Además, los dispositivos móviles en general tienen restricciones para visualizar páginas grandes.
  • No usar imágenes para espaciar. El mecanismo popular de utilizar 1 píxel no funciona en una variedad de pantallas.
  • Asegurarse que la información proporcionada a color es decodificada correctamente en pantallas monocromáticas. Asegurarse también de proporcionar un buen contraste entre figuras y fondo. Los dispositivos móviles a menudo no tienen buen contraste de color y se utilizan en general en condiciones de la iluminación poco ideales.
  • No utilizar “frames”, ya que muchos dispositivos móviles no los interpretan.
  • No utilizar tablas, a no ser que se sepa de antemano que el dispositivo las soporta.
  • Muchos dispositivos móviles no soportan “embedded objects” o “scripts” y en muchos casos no es posible que los usuarios descarguen el “plug-in” correspondiente. El contenido se debe diseñar con esta limitación en mente. Aún cuando el dispositivo soporte “scripts”, no lo utilizarlos a menos que no haya otra manera de lograr sus objetivos. Los “scripts” aumentan el consumo de energía disminuyendo la vida de la batería.
  • Evitar las medidas absolutas para permitir que el navegador se adapte el contenido a la medida de pantalla.
Esta guía de buenas prácticas será tan importante como actualmente lo son en el diseño Web en general las demás establecidas por el W3C. De hecho, al igual que ya existen herramientas de validación para comprobar nuestros documentos CSS, HTML, etc., no tardará en aparecer un validador de contenidos móviles.

Para más información sobre este tema recomiendo visitar los siguientes sitios:

Autor

Serviweb

Diseño web Murcia

Compartir

Comentarios

versae

18/7/2007
Buenas, he leído el artículo y debo hacer unas anotaciones. Si bien el W3C mantiene unas pautas a seguir para la elaboración de contenidos móviles, también es importante destacar el papel de mTLD, la empresa registradora de dominios .mobi, la extensión creada para tal fin. Ellos también tienen un sello, el mobileOK, unas Best Practices y disponen de herramientas de ayuda al desarrollador, como emuladores (http://emulator.mtld.mobi/) o validadores (http://ready.mobi). Más información en http://dev.mtld.mobi. Se dispone incluso de un constructor básicos de sitios web móviles que cumplen las normas.

Pero si necesita mayores necesidades para su web móvil, para ayudar a la creación de webs multidispotisivos sin que la tarea se convierta en un infierno existe un framework de desarrollo que facilita enormemente la tarea. Invito a que prueben MyMobileWeb.

dr_loc

19/11/2008
Buenas,

Estoy haciendo la web de mi empresa ([url=www.navento.com]http://www.navento.com[/url]) en versión móvil y la parte que tengo de html me va fetén, pero a la hora de llamar a un aspx, me da error. El aspx es un formulario de web móvil, es decir, con la cabecera

<%@ Register TagPrefix=\"mobile\" Namespace=\"System.Web.UI.MobileControls\" Assembly=\"System.Web.Mobile\" %>

pero cuando lo ejecuto en el ordenador (en móviles sólo dice \"Formato incorrecto\"), me da el siguiente error:

[color=red]System.Exception: La página debe contener al menos un formulario.[/color]

He incluido el contenido de la página dentro de un <form> para probar, y después dentro de un <mobile:Form runat=\"server\"> que es lo que te pone por defecto, pero me sigue saliendo el error.

Alguien sabe cómo solucionar esto?

Nota: antes tenía la página aspx como formulario web normal, y en móviles un poco avanzados me entraba bien. Pero en móviles con un navegador pobre me decía lo de \"Formato incorrecto\". Alguien sabe si hay alguna forma de que el aspx, cuando se le devuelve al servidor, sea con extensión .html???

Gracias de antemano!

Un saludo

JOSE LUIS

31/1/2013
Duda!
Hola como están quiero que me ayuden con una duda. Tengo una web pero también quiero crear una para dispositivos móviles y la pregunta es como hago para saber desde que dispositivo están visitándome para visualizar la web correcta.
Por ejemplo en algunas paginas cuando entro desde mi celular puedo notar que si bajo al pie de pagina hay un link que dice Ver versión clásica o de escritorio y cuando entro desde el PC de escritorio Dice ver vercion movil.