Pautas ampliadas de las Buenas prácticas para la web móvil 1.0
La semana pasada el W3C publicó una nota, Extended Guidelines for Mobile Web Best Practices 1.0 (‘Pautas ampliadas de las Buenas prácticas para la web móvil 1.0’), en la que añaden comentarios a los principios de las MWBP 1.0, y proponen una metodología de evaluación de la calidad de un sitio desarrollado para dispositivos móviles.
Coincidiendo con la publicación de la nueva Recomendación de XForms, el pasado día 20 de octubre el grupo de trabajo de las MWBP publicó una nota en la que comentan y amplían buena parte de los enunciados de la especificación de las buenas prácticas para la web móvil, concretamente 37 de los 60 recogidos en el documento MWBP 1.0.
Las prácticas indicadas se analizan comentando qué característica de un dispositivo móvil es relevante para su observación, ofreciendo una interpretación de la práctica, y en algunos casos indicando las pruebas del MobileOK relacionadas. Adicionalmente, el documento define un conjunto de pruebas para cada práctica que podrían emplearse como una metodología de evaluación de la calidad de un sitio web móvil. Como en el caso de la valoración de la accesibilidad de un sitio web, no todas las pruebas son automatizables.
Lo que presentamos a continuación es un resumen de las pautas que el documento recomienda tener presentes a la hora de crear un sitio web dirigido a dispositivos móviles.
Generales
- Aplicar mejoras progresivas: Que los agentes de usuario móviles tengan más limitaciones que los agentes de escritorio no significa que se deba crear un sitio móvil pensando en el mínimo denominador común. Si es posible detectar las posibilidades avanzadas de un dispositivo —soporte de JavaScript, de CSS avanzado, etc.—, se debría ofrecer características acorde a estas.
- Ofrecer el contenido en el mejor formato posible: Si por medio de encabezados HTTP se puede establecer algunas de las preferencias del agente de usuario, el contenido se debería ajustar a ellas.
- Emplear cookies: Si el agente las soporta, es bueno utilizarlas para evitar que el usuario tenga que introducir datos de manera redundante o para aplicar preferencias que haya seleccionado en algún momento.
- Restringir al máximo el peso de cada documento: El ancho de banda en los dispositivos móviles es restringido, por lo que las páginas deben ser lo más ligeras posible para reducir el tiempo de carga y el gasto de recursos. En la descripción del DDC (Default Delivery Context, ‘contexto de entrega por defecto’) se recomienda un peso máximo de 20Kb.
- Procurar que los URL sean lo más breves posibles, en especial para la página inicial: Como en todos los casos de entrada de texto, se busca reducir el número de pulsaciones exigidas al usuario.
Contenido
- El contenido principal debe ser rápidamente visible: El usuario debería poder juzgar por el primer contenido cargado si se trata del que está buscando. Por ello, el contenido de cada documento o un identificador del mismo —por ejemplo, un encabezado— debería estar lo más cercano al comienzo del documento posible. Por ello no son aconsejables ni los menús de navegación demasiado extensos, ni una maquetación en varias columnas, sobre todo si el contenido no se encuentra en la de la izquierda.
- Adaptar el contenido para ajustarlo al medio y hacerlo claro: Como nos encontramos en un medio donde lo que abundan son las pantallas reducidas, las primeras líneas del texto que se encuentre el usuario deben contener toda la información relevante, aunque posteriormente se amplíe. Además, la redacción debería ser directa, sintética y breve.
- Asegurar que los contenidos sean comprensibles sin hojas de estilos: Debido al soporte inconsistente de hojas de estilo y la variedad de dispositivos, se debe asegurar que nada del sentido de la información transmitida dependa de la CSS asociada. Eso incluye desde la composición de la página hasta las fuentes, incluídas variantes como la itálica o la negrita.
- Asegurar el orden lógico de tabulación: En general, el orden de los contenidos debe ser lógico, pero en el caso de los menús de vínculos y —sobre todo— de los controles de los formularios es imprescindible que sea el correcto.
- Proporcionar alternativas textuales a los contenidos no textuales: Puesto que la limitación de algunos dispositivos móviles no permite confiar en su soporte para objetos incrustados, plug-ins o incluso imágenes, todos estos componentes necesitan de una alternativa textual. Sobre esto, no viene mal repasar la pauta 1.1 de las WCAG 2.0.
- No confiar en objetos incrustados ni en scripts: Similar al anterior, se refiere más a la operabilidad de un documento que a su contenido. Toda función o resultado que pueda obtenerse del documento por medio de scripts u objetos incrustados debe mantenerse cuando el soporte de estas tecnologías esté desactivado.
Marcado
- El marcado debe ser válido y los elementos deben emplearse según su semántica: Cada página debe de ser conforme a la DTD elegida. Para un sitio web móvil puede ser la de XHTML Basic 1.0, XHTML Basic 1.1, XHTML-MP 1.0, XHTML-MP 1.1 o XHTML-MP 1.2.
- Emplear
accesskey: Para facilitar la navegación por un sitio móvil es conveniente que las opciones del menú de navegación principal cuenten con una tecla de acceso. También se indica que lo mejor sería que en caso de que el agente de usuario no soportase esta característica, la indicación de la tecla no fuera visible.
- Proporcionar un
title breve y descriptivo: El título de una página sirve como elemento de identificación del documento y de orientación. No debería repetirse en diversos documentos a menos que el contenido sea una unidad que se haya paginado debido a su extensión. Tampoco debería ser demasiado largo para no volverse totalmente inútil si en la pantalla del dispositivo se trunca.
- Emplear tablas lo menos posible, y nunca para dar formato al contenido: La limitación del ancho de pantalla y la posibilidad de que el dispositivo no soporte el marcado de las tablas sugiere que si es posible se elija una presentación alternativa a los datos tabulares. Por descontado, no se deben emplear para crear la composición de una página.
- Etiquetar correctamente los campos de los formularios: Como no se puede confiar en el aspecto con el que el agente de usuario represente los contenido de un documento, lo ideal es que además de un marcado correcto los
label de cada elemento se encuentren en una secuencia lógica respecto a los campos a los que identifican.
Presentación
- Reducir el tamaño de las hojas de estilo: Dado que su peso se añade al del documento, deben ser lo más ligeras posibles. Como pruebas de calidad se incluyen comprobar que más de un cuarto del contenido de los documentos de CSS no consistan en espacios en blanco, y que no incluyan reglas que no se apliquen en ningún documento del sitio.
- Evitar combinaciones de color de bajo contraste: Las imágenes o los colores del fondo y el texto deben tener suficiente contraste como para ser legibles.
- No emplear imágenes para lograr efectos de composición: No se deben emplear imágenes para conseguir efectos como márgenes o sangrados; no sólo daña la semántica del documento, sino que además aumenta los tiempos de carga.
- Eliminar el scroll horizontal siempre que sea posible: No debería darse a menos que el contenido no pueda reducirse o distribuirse sin que se vuelva inservible.
Interacción
- Proporcionar el mínimo indispensable de vínculos en la navegación principal al comienzo de cada página: De nuevo, la idea es facilitar el acceso lo más directamente posible al contenido. Además, si se emplea un menú horizontal, sería bueno que éste ocupase como máximo una línea del DDC.
- Proporcionar mecanismos de navegación consistentes: Para que se identifiquen clara y rápidamente, en cada documento del sitio la navegación debería tener el mismo aspecto y ocupar la misma posición.
- Equilibrar la cantidad de contenido de las páginas y el número de vínculos que el usuario debe seguir para localizar un contenido: Si las páginas contienen demasiados vínculos para que se pueda alcanzar cualquier contenido, se ralentiza el avance del usuario por medio de la cruceta cuando quiera hacer scroll por un documento. Por otra parte, repartir esos mismos vínculos en un número excesivo de páginas intermedias con las que ir filtrando la búsqueda de un contenido incrementa el tiempo de respuesta del sitio debido al exceso de documentos a cargar. Se trata de lograr un equilibrio entre ambas.
- Identificar los destinos de los vínculos: No sólo el marcado de los vínculos debe de ser semántico —por ejemplo, añadiendo los atributos
hreflang o type donde corresponda—, sino que el texto del vínculo debe indicar claramente el destino al que dirige.
- Evitar las entradas de texto libre en los campos de formulario: Dado que el usuario puede tener limitada su interfaz a un teclado numérico, es preferible que se ofrezcan opciones —radiobotones o casillas de verificación— siempre y cuando sea posible.
- Minimizar las pulsaciones: Se debe reducir el número de pulsaciones que el usuario necesite para interactuar con una página. Si lo indicado antes sobre las opciones no es viable —y el lenguaje de marcado lo permite— se debería restringir el modo de entrada de datos libre en un formulario, por ejemplo mediante
inputmode.
- Proporcionar valores por defecto en los formularios: Si presentar un conjunto de opciones ha sido posible para sustituir la entrada libre, preseleccionar las respuestas más comunes puede agilizar aún más la interacción con el formulario.
- Ofrecer un vínculo a una página sin autorefresco: En caso de que el contenido de la página se actualice automáticamente, se debería ofrecer un vínculo a una versión en la que el refresco sea a petición del usuario, debido a que algunos dispositivos pueden tener un ancho de banda muy limitado.
- Proporcionar buenos mensajes de error: El contenido de la página debe explicar de forma clara el problema, y ofrecer al menos un vínculo a la página principal del sitio, un vínculo que devuelva a la página anterior y —si es pertinente— otro que permita recargar el vínculo seguido con el que se ha llegado a la página de error.
Esta entrada se publicó el 28 de octubre de 2009, se archivó en Accesibilidad, Usabilidad, y fue etiquetada como w3c, web móvil. Autor: Saúl González Fernández. Aún no hay comentarios ›.
RSS
Digital Icon
Comentarios
Aún no hay comentarios
¿Algún comentario?