Requisitos para la web móvil datos.gob.es En colaboración con Las opiniones recogidas en este documento no se corresponden, necesariamente, con las de ninguno de los organismos públicos participantes en esta iniciativa. Contenidos 1 BUENAS PRÁCTICAS PARA LA WEB MÓVIL ........................................................... 2 1.1 2 3 Objetivo ................................................................................................................................. 2 REFERENCIA TÉCNICA ............................................................................................. 2 2.1 Web única ............................................................................................................................. 3 2.2 Buenas prácticas para la web móvil ...................................................................................... 3 REQUISITOS PARA LA WEB MÓVIL ......................................................................... 5 3.1 Diseñar para la Web única .................................................................................................... 6 3.2 Utilizar los estándares Web .................................................................................................. 7 3.3 Evitar los riesgos conocidos .................................................................................................. 8 3.4 Recordar las limitaciones ...................................................................................................... 9 3.5 Optimizar la navegación ...................................................................................................... 10 3.6 Comprobar gráficos y colores ............................................................................................. 12 3.7 Minimizar ............................................................................................................................. 13 3.8 Economizar el uso de la red ................................................................................................ 14 3.9 Facilitar la entrada de datos ................................................................................................ 15 3.10 Considerar el uso real de la Web ........................................................................................ 16 1 1 BUENAS PRÁCTICAS PARA LA WEB MÓVIL Al hablar de Web móvil se hace referencia a la Web de la que una persona puede extraer información de forma independiente del lugar en el que se encuentre, del contexto en el que haga el acceso y del dispositivo que utilice para ello. La demanda creciente por parte de los usuarios de la disponibilidad de la Web no siempre es respondida de forma eficaz por el mercado, pues actualmente, a pesar de que la oferta de dispositivos móviles está en clara expansión, la mayor parte de estos poseen desventajas frente a los equipos tradicionales de escritorio. A consecuencia de esta situación, la experiencia de usuario en el acceso a la web suele resultar pobre y en general poco satisfactoria. 1.1 Objetivo Si el contenido se adapta a dispositivos móviles los usuarios podrán acceder a la información independientemente del dispositivo usado y desde cualquier lugar. Existen importantes diferencias en el tipo de contenido que pueden manejar los dispositivos móviles, derivadas de la cantidad de información que pueden manejar y mostrar de forma eficiente (capacidad de descarga y visualización limitada), las capacidades técnicas de estos dispositivos (pantallas pequeñas, falta de soporte de algunas tecnologías) y el contexto en el cual el usuario recibe el contenido (en la calle, en transportes públicos, etc.). En este documento se recogen los requisitos de independencia de dispositivo y adaptación a la Web Móvil que deberá cumplir la plataforma para cumplir con los requisitos establecidos. Estos requisitos son complementarios a los establecidos en las Guías adicionales de Recomendaciones de Carácter General sobre estándares y Requisitos de Accesibilidad a los Contenidos. 2 REFERENCIA TÉCNICA Para resolver estos problemas de interoperabilidad y usabilidad relacionados con los dispositivos móviles el W3C ha puesto en marcha la Iniciativa de Web Móvil1, cuyo trabajo se centra principalmente en dos áreas: generación de buenas prácticas y descripción de dispositivos móviles. El Grupo de Trabajo de Buenas Prácticas en Web Móvil fue creado para desarrollar pautas, puntos de verificación y buenas prácticas con el objetivo de ayudar a los proveedores de contenido a desarrollar contenido Web que funcione correctamente en dispositivos móviles y hacer posible uno de los objetivos principales del consorcio: la Web única. Buenas Prácticas para la Web Móvil: http://www.w3.org/TR/mobile-bp/ 1 The Web and Mobile Devices: http://www.w3.org/Mobile/ 2 El Grupo de Trabajo de Descripción de Dispositivo guía el desarrollo de mecanismos de descripción de dispositivos, es decir, bases de datos de descripciones que los desarrolladores de contenido podrán utilizar para adaptar los contenidos a los diferentes dispositivos. La adaptación de los contenidos a la Web Móvil puede alcanzarse también, en vez de mediante diferentes versiones del portal adaptadas a los diferentes dispositivos de acceso, a través de aplicaciones que hagan la adaptación del contenido existente de forma dinámica según las necesidades del usuario. 2.1 Web única El concepto de Web única (One Web) surge como punto de partida para la Web móvil y su intención es la de ofrecer contenidos, funcionalidades y servicios de forma independiente al dispositivo que se esté utilizando en el acceso. Un mismo contenido es ofrecido a las personas que lo soliciten independientemente de que el acceso lo realicen desde un ordenador de sobremesa o desde un teléfono móvil. No obstante, la Web única no es un concepto rígido que impida que haya variaciones en diferentes entornos de acceso. Los dispositivos pueden presentar determinadas características que en unos casos pueden limitar (por ejemplo, soporte para determinadas tecnologías) y en otros enriquecer (pantallas táctiles, tecnologías de localización, etc.) los contenidos y funcionalidades accesibles desde la web. Adaptar los contenidos sorteando las limitaciones y aprovechando la potencialidad de determinadas características permitirá mejorar la experiencia de uso de la cada vez más extendida web móvil. Desde el punto de vista de la adaptación de los contenidos a la web móvil, existen varias alternativas, si bien, las más recomendables tienen en común el llevar implícito el reconocimiento de las características del dispositivo en el que se van a mostrar. 2.2 Buenas prácticas para la web móvil El conjunto de buenas prácticas para la web móvil se plantea a partir de las siguientes premisas: La web móvil presenta problemas de presentación a causa de las limitadas capacidades de los dispositivos (dimensión de pantalla, soporte para estilos, etc.) La entrada de datos es un factor limitante que dificulta el uso de la web en los dispositivos móviles El consumo de ancho de banda tiene un coste, además de incidir de forma directa sobre los tiempos de carga de las páginas Los terminales móviles poseen determinadas limitaciones que pueden interferir en la forma en que se van a ofrecer los contenidos de la web No obstante, los terminales móviles también poseen capacidades que pueden suponer una mejora en la experiencia de uso por parte de los usuarios 3 1.1.1 Consideraciones previas Existen también una serie de consideraciones previas que debemos asumir como situación de partida para el objetivo que perseguimos: El objetivo es la Web única. El conjunto de buenas prácticas persigue conseguir que una misma web cubra las necesidades de los usuarios/as independientemente del dispositivo desde el que se conecten (equipos de escritorio, portátiles, terminales móviles, etc). Buscar la mejor experiencia de usuario/a. El usuario/a que accede a la web, lo hace con un objetivo claro, cubrir una necesidad (obtener información, solicitar un servicio, etc.). El sitio web al que acceda para ello ha de ofrecerle la posibilidad de satisfacer dicha necesidad, y ha de hacerlo de la forma que le resulte satisfactoria (previniendo que se cometan errores, evitando contenidos innecesarios, facilitando la navegación relevante, etc.). Para ello, se habrá de diferenciar entre los distintos tipos de acceso que tiene la web: Uso repetitivo. Es el que se realiza con frecuencia para acceder periódicamente a la misma información. Uso indiferente. Tipo de uso que carece de un objetivo claro en la navegación. Uso urgente. Es el que se da cuando se requiere de información puntual en el momento. Partir de un contexto de envío por defecto. Teniendo en cuenta que existe una amplia variedad de dispositivos móviles, es importante considerar que también existirá una amplia variedad de características técnicas y de capacidades. No todos los dispositivos accederán a los contenidos de la misma manera, e incluso, no todos podrán acceder a todos los contenidos y/o funcionalidades. Por este motivo, es necesario establecer un umbral de características técnicas en la web que permitan garantizar el acceso desde los dispositivos menos capaces (en términos de formatos de imagen admitidos, soporte para estándares, etc.). El contexto de envío mínimo por defecto es: ◦ ◦ ◦ ◦ ◦ ◦ Ancho de pantalla usable: 120px Marcado: XHTML Basic 1.1 (application/xhtml+xml) Codificación: UTF-8 Imágenes: JPEG, GIF Peso del documento: 20KB Hojas de estilo: CSS Nivel 1, con soporte de @media para handheld y all de CSS Nivel 2 ◦ HTTP: 1.0 o 1.1 ◦ Sin soporte de lenguajes de script por parte del cliente 4 3 REQUISITOS PARA LA WEB MÓVIL Las buenas prácticas se pueden clasificar en función del ámbito que poseen (comportamiento, navegación y enlaces, layout y contenido, definición de página y entrada de datos por parte del usuario), si bien, también se clasifican en base a un conjunto de principios generales: 1) Diseñar para una Web única. Al diseñar el contenido y la funcionalidad teniendo en cuenta los diferentes dispositivos que podrán utilizarse en su acceso, se reducen costes, siendo más flexible el conjunto y cubriendo las necesidades de un mayor número de usuarios/as. 2) Utilizar los Estándares Web. En un mercado tan fragmentado y diverso como el de los dispositivos y navegadores, el uso de estándares es la mejor garantía de interoperabilidad 3) Evitar los riesgos conocidos. Un diseño bien planificado reduce problemas de usabilidad causados por pantallas y teclados pequeños, o por otras características de los dispositivos móviles 4) Recordar las limitaciones. Cuando se elige una tecnología Web concreta, hay que tener en cuenta que los dispositivos móviles pueden tener limitaciones en su soporte o diferencias en la interpretación la misma. 5) Optimizar la navegación. Simplificando la navegación y reduciendo la necesidad de uso del teclado, se mejora la experiencia de uso al ser factores limitantes cuando se utilizan pantallas y teclados de reducidas dimensiones, o cuando se dispone de un ancho de banda limitado. 6) Comprobar gráficos y colores. Las imágenes, los colores y el estilo destacan el contenido y pueden facilitar su comprensión. No obstante, el bajo contraste de algunas pantallas, así como las condiciones de iluminación en las que se realiza el acceso móvil, pueden dificultar el acceso visual a los contenidos problemas de compatibilidad con algunos formatos. 7) Minimizar. La reducción del tamaño del sitio web repercute positivamente en la experiencia de usuario al suponer un ahorro de tiempo en la descarga de los contenidos. 8) Economizar el uso de la red. Algunas funciones de los protocolos web pueden mejorar la experiencia de uso al reducir los retrasos y los tiempos de espera en la red 9) Facilitar la entrada de datos. En los dispositivos móviles, el uso del teclado y demás métodos de introducción de datos puede resultar tedioso para el usuario. Es por esto necesario que el diseño sea eficaz, permitiendo minimizar su utilización, facilitando el acceso a los contenidos y mejorando la experiencia de uso. 10) Considerar el uso real de la web. La información ha de estar suficientemente sintetizada y optimizada, dado que los usuarios de la Web móvil suelen realizar el acceso en situaciones en las que se dispone de poco tiempo o en las que existen distracciones externas. A continuación se detallan los requisitos específicos para cada uno de los principios, así como las referencias correspondientes al estándar de referencia: 5 3.1 Diseñar para la Web única RWM 1 - Mantener la consistencia temática del recurso identificado por una URI 5.1.1 Thematic Consistency of Resource Identified by a URI: http://www.w3.org/TR/mobile-bp/#tc El acceso al contenido debe ser posible de forma independiente de las capacidades o del mecanismo de acceso del dispositivo que se utilice, de tal manera que no exista dependencia respecto a una familia de dispositivos concreta. El acceso a una misma URI debe ser consistente desde cualquier dispositivo. RWM 2 - Aprovechar las características de los dispositivos 5.1.2 Exploit Device Capabilities: http://www.w3.org/TR/mobile-bp/#lcd La necesidad de que el sitio web sea tal que permita el acceso a dispositivos con características limitadas no implica que no se pueda enriquecer para aprovechar las características de los dispositivos más avanzados. Siempre que sea apropiado, se debe facilitar el contenido y la funcionalidad adaptada al dispositivo para proporcionar una experiencia de uso satisfactoria en los dispositivos más avanzados. Ejemplos: Enlace activo para llamada telefónica Enlaces que se asocien a funcionalidades propias del dispositivo o a aplicaciones instaladas. Ubicación actual etc. RWM 3 - Adaptarse a las limitaciones de los dispositivos 5.1.3 Work around Deficient Implementations: http://www.w3.org/TR/mobile-bp/#d0e704 La existencia de múltiples dispositivos lleva implícita la existencia de diferencias en la interpretación que hacen los navegadores de determinadas características del sitio. Dado que no resulta sencillo el corregir las diferentes formas de interpretar contenidos, resulta indispensable adaptarlos para que resulten igualmente accesibles (o funcionales). Recomendación: dado que generalmente las deficiencias en interpretación suelen ocurrir sobre elementos que incluyen los sitios web para la mejora de la experiencia de usuario (por ejemplo, el uso de javascript), la solución recomendable pasa por reconocer los dispositivos que no las soportan y eliminarla en ellos, manteniéndola en aquellos que si la soporten (aprovechando así las características de los dispositivos). Para que esto sea posible es necesario seguir las recomendaciones de carácter general en cuanto a scripting (ver documento PLANCISP-RCG-01) RWM 4 - Realización de test 5.1.4 Testing: http://www.w3.org/TR/mobile-bp/#test 6 Se deben realizar pruebas de acceso al sitio web desde múltiples navegadores y desde diferentes dispositivos. Estas pruebas se pueden y deben llevar a cabo tanto en dispositivos móviles como en emuladores creados para tal fin. 3.2 Utilizar los estándares Web RWM 5 - Código válido 5.4.7 Valid Markup: http://www.w3.org/TR/mobile-bp/#d0e1584 Se deben crear sitios web acordes a las gramáticas formales publicadas, lo cual previene resultados impredecibles (tanto en funcionalidad, como en contenidos y aspecto). RWM 6 - Tipo de contenido 5.4.11 Content Types: http://www.w3.org/TR/mobile-bp/#d0e1770 Se debe procurar enviar el contenido en un formato que sea soportado por el dispositivo y, siempre que sea posible, se debería enviar el contenido en el formato preferido por este. Para ello se puede analizar la petición que hace el navegador, enviando el contenido de forma acorde con esta e indicando el tipo y codificación en las cabeceras HTTP de la respuesta. Recomendación: En caso de duda acerca del formato a utilizar, se recomienda usar XHTML servido como application/xhtml+xml RWM 7 - Codificación de caracteres 5.4.12 Character Encoding: http://www.w3.org/TR/mobile-bp/#d0e1821 El contenido no debería ser enviado al dispositivo en un formato que no sepa utilizar. Para ello se ha de asegurar que este está codificado en un juego de caracteres soportado, el cual ha de estar indicado en la cabecera HTTP Content-Type. La identificación de la codificación soportada por el dispositivo se puede extraer del propio dispositivo o a partir de la cabecera HTTP Accept-Charset RWM 8 - Hojas de estilo 5.4.9 Style Sheets: http://www.w3.org/TR/mobile-bp/#style Toda la información que se utilice para controlar la disposición y presentación de los contenidos ha de incluirse mediante técnicas de CSS. Estas se relacionarán a través de hojas de estilo enlazadas, el uso del elemento STYLE incluido en la cabecera de los documentos y/o el uso de los atributos style. Recomendación: si bien para la web de escritorio se considera recomendable incluir los estilos mediante hojas de estilo enlazadas, para la versión móvil se recomienda incluirlos preferentemente mediante el elemento STYLE. Para evitar la necesidad de implementar ambos estados por separado sobre una misma web, se recomienda utilizar mecanismos que realicen esta adaptación en función del dispositivo que realiza la petición. Asimismo, se ha de tener en cuenta que el sitio web ha de poder ser leído sin hojas de estilo, puesto que el dispositivo puede poseer un soporte deficiente para este. Esto se traduce en que la 7 estructura lineal de los contenidos de cada página debería adaptarse a la estructura visual que se pretende conseguir, y no alterar el orden mediante el uso de propiedades de CSS. RWM 9 - Elementos estructurales 5.4.3 Structural Elements: http://www.w3.org/TR/mobile-bp/#sm Se deben utilizar los elementos que facilite la gramática del documento para aportar estructura (encabezados, listas, etc.) y se deben utilizar de forma apropiada y no únicamente para conseguir efectos presentacionales. Se debe evitar el uso de propiedades de presentación que únicamente aportan estructura de forma visual. RWM 10 - Mensajes de error 5.4.13 Error Messages: http://www.w3.org/TR/mobile-bp/#d0e1875 A pesar de que unos sistemas de navegación bien planteados y de que los contenidos puedan resultar adecuados, es inevitable que en determinados casos se produzcan errores en el acceso (errores de uso, página web no encontrada, etc.). En estos casos los mensajes de error han de ser suficientemente claros e informar de cual puede haber sido el origen que los provocó. Para ello, las páginas de error deberán: Utilizar el mismo idioma que el resto de la web o que los contenidos a los que se estaba tratando de acceder. Deben ser legibles (aunque también puedan incluir el código de error) Detallar si el problema es temporal, si puede resolverlo el propio usuario, etc. Incluir sistemas de navegación para volver a la página anterior, reintentar, ir a la home, etc. 3.3 Evitar los riesgos conocidos RWM 11 - Pop ups 5.2.8 Refreshing, Redirection and Spawned Windows: http://www.w3.org/TR/mobile-bp/#d0e959 Se debe evitar la apertura de ventanas emergentes. Esta situación, además de desorientar al cambiar de ventana, puede provocar resultados impredecibles en aquellos dispositivos que no soporten la apertura de más de una ventana. RWM 12 - Tablas 5.4.4 Tables: http://www.w3.org/TR/mobile-bp/#d0e1374 El uso de tablas en los dispositivos móviles puede afectar negativamente a la experiencia de uso al poder provocar la aparición de scroll horizontal y al no estar suficientemente soportadas. Al aumentar la complejidad, debe evitarse el uso de tablas anidadas, así como de tablas para controlar la maquetación (tarea que ha de corresponderle a las técnicas de CSS). RWM 13 - Imágenes 5.3.5 Graphics: http://www.w3.org/TR/mobile-bp/#d0e1219 No se deben utilizar imágenes en blanco para crear espacios y posicionar elementos. 8 RWM 14 - Marcos 5.4.2 Frames: http://www.w3.org/TR/mobile-bp/#d0e1321 Dado el escaso soporte para este tipo de elementos que tienen los dispositivos móviles, así como el comportamiento problemático que se origina en otros, no se deben utilizar marcos (FRAME e IFRAME) en la web móvil. RWM 15 - Mapas de imagen 5.2.7 Image Maps: http://www.w3.org/TR/mobile-bp/#d0e911 A no ser que se reconozca el soporte para los mapas de imagen por parte del dispositivo, se debe facilitar un mecanismo alternativo de navegación. Asimismo, en aquellos casos en los que los mapas de imagen impliquen el uso de imágenes de gran tamaño, se debe recurrir a dividir la imagen en secciones más pequeñas y/o incluir un mecanismo alternativo. Recomendación: se recomienda no incluir mapas de imagen en la web móvil. Dado que este sistema de navegación ha de cumplir un grupo de requisitos mínimos para ser accesible, se recomienda aprovechar estos para la versión móvil. Sustituirlas por listas de enlaces 3.4 Recordar las limitaciones RWM 16 - Cookies 5.4.14 Cookies: http://www.w3.org/TR/mobile-bp/#d0e1925 Se debe evitar el uso de cookies cuando no sean soportadas por los dispositivos. En su lugar se puede recurrir a la gestión de sesiones por URI, teniendo en cuenta no exceder la longitud máxima que esta pueda tener para ser interpretada correctamente por el dispositivo. RWM 17 - Object y script 5.4.5 Non-Text Items: http://www.w3.org/TR/mobile-bp/#d0e1433 Una amplia variedad de dispositivos carecen de soporte para objetos embebidos y para scripts, pudiendo resultar imposible para los usuarios el añadir el plug-in correspondiente para ello. En otros casos, a pesar de existir soporte, el comportamiento no siempre resulta como está previsto (eficacia de respuesta, soporte parcial, etc.). Por este motivo, se debe procurar no supeditar la funcionalidad y los contenidos a la presencia de este tipo de elementos. RWM 18 - Tablas 5.4.4 Tables: http://www.w3.org/TR/mobile-bp/#d0e1374 Dado que las tablas pueden provocar la aparición de scroll horizontal, y al no estar ampliamente soportadas por todos los dispositivos, se debe evitar el utilizarlas a no ser que se tenga la certeza de que existe soporte para ellas y que no originan el mentado scroll. Asimismo, se recomienda sustituir la presentación tabular de datos por alternativas que tengan amplio soporte y que puedan reflejar la misma estructura. 9 RWM 19 - Tipografía 5.4.16 Fonts: http://www.w3.org/TR/mobile-bp/#fonts La mayoría de los dispositivos móviles poseen un reducido número de fuentes, además de un soporte limitado para tamaños de fuente y efectos tipográficos (negrita, cursiva, etc.). Por este motivo, se debe procurar no confiar en que exista soporte pleno para los estilos aplicados a la tipografía del sitio web. RWM 20 - Uso del color 5.3.6 Color: http://www.w3.org/TR/mobile-bp/#d0e1240 Es necesario comprobar que toda la información que se facilita en la web esté también disponible por mecanismos alternativos. Esta consideración se ha de hacer porque no todos los dispositivos tienen el mismo soporte para las gamas cromáticas y porque las condiciones de entorno en las que se realiza el acceso pueden afectar negativamente (por ejemplo, la iluminación directa). 3.5 Optimizar la navegación RWM 21 - Barra de navegación simplificada al comienzo 5.2.2 Navigation Bar: http://www.w3.org/TR/mobile-bp/#d0e773 Si es necesario, incluir una barra de navegación básica al comienzo de la página y, de existir, enviar el resto de la navegación al final del documento. El objetivo que se persigue es facilitar el acceso al contenido de la página una vez que se haya cargado y sin necesidad de desplazamiento mediante el scroll. Recomendación: Se recomienda tener presente que en determinadas páginas suelen tener como objetivo la navegación (por ejemplo, la home suele ser la vía de acceso al resto de páginas del sitio web), con lo que en estas, la pauta debería adaptarse, considerando prioritario incluir dicha navegación tan pronto se realice la carga. RWM 22 - Facilitar mecanismos de navegación consistentes 5.2.4 Navigation Mechanisms: http://www.w3.org/TR/mobile-bp/#d0e804 Utilizar mecanismos de navegación que sean consistentes y coherentes a lo largo de todo el sitio web. De esta forma se mejora la usabilidad de la web móvil al permitir a los usuarios identificar fácilmente las pautas de navegación y se previene la posible desorientación. Recomendación: Se recomienda utilizar una metodología drill-down, es decir, un sistema de navegación que permita acceder de forma directa a los contenidos que jerárquicamente se encuentran inmediatamente por debajo y por encima del actual sin la presencia de enlaces que desplacen hacia contenidos no relacionados en esa jerarquía. De esta manera, además de optimizar la navegación, se mejora la experiencia de uso al disminuir el contenido real presente en el documento. 10 RWM 23 - Identificación del destino de los enlaces 5.2.6 Link Target Identification: http://www.w3.org/TR/mobile-bp/#d0e864 Identificar claramente cuál es el destino de los enlaces permitirá a los usuarios de la web móvil reconocer si este es de su interés, pudiendo decidir seguirlo o no. En el entorno móvil esto resulta de especial relevancia, pues uno de los factores limitantes es el tiempo de conexión, y de esta manera el usuario no ha de recorrer los enlaces para saber si el destino es de su interés. Por este motivo, los enlaces en la web móvil han de ser claros, concisos y suficientemente descriptivos respecto a su destino, informando de las características de este cuando no posea un formato web o se reconozca que el formato no está soportado correctamente por el dispositivo (peso del recurso, formato, etc.). RWM 24 - Accesskeys 5.2.5 Access Keys: http://www.w3.org/TR/mobile-bp/#d0e831 Asignar teclas de acceso rápido (accesskey) a los principales enlaces y funcionalidades del sitio web, y asignar siempre las mismas, facilita la navegación al disminuir la necesidad de realizar repetidas pulsaciones (por ejemplo para recorrer los enlaces hasta llegar al enlace deseado). Recomendación: Se recomienda facilitar visualmente la información acerca de la accesskey que se asocia a cada enlace. De esta manera, el usuario reconocerá de forma rápida su presencia sin necesidad de incluir dicha información en documentos independientes. Asimismo, dado que las accesskey carecen de sentido en aquellos dispositivos carentes de teclado real (por ejemplo, gran cantidad de los dispositivos táctiles), se recomienda incluso eliminarlas (o al menos no mostrarlas) en estos, tras reconocer cuáles son las características del dispositivo. RWM 25 - URL 5.2.1 URIs of Site Entry Points: http://www.w3.org/TR/mobile-bp/#d0e742 Dado que introducir URI en los dispositivos móviles puede resultar tedioso y presentar dificultades, se deben mantener las direcciones de acceso lo más cortas posibles, configurando el sitio para que el acceso se pueda realizar sin necesidad de especificar subdominios como parte de esta. RWM 26 - Estructura equilibrada 5.2.3 Balanced Structure: http://www.w3.org/TR/mobile-bp/#d0e790 Es necesario equilibrar entre la necesidad de navegar a través de numerosos enlaces para llegar a un destino y ofrecer múltiples enlaces en una misma página. La solución pasa por mantener los enlaces a aquellas secciones/contenidos que más frecuentemente se visitan y trasladar a otras páginas los que se corresponden con contenidos menos utilizados. De esta manera se disminuye la necesidad de un largo scroll para llegar al enlace deseado, equilibrando el coste que puede suponer alargar la navegación. De forma general se ha de optimizar la navegación, priorizando los enlaces por popularidad o importancia. 11 3.6 Comprobar gráficos y colores RWM 27 - Redimensión de las imágenes 5.4.6 Image Size: http://www.w3.org/TR/mobile-bp/#ImageSize Redimensionar las imágenes en el servidor teniendo en cuenta que se van a mostrar en un dispositivo móvil permite optimizar el ancho de banda consumido, reduciendo sensiblemente su consumo y mejorando los tiempos de descarga. Recomendación: Se considera recomendable adaptar las dimensiones de las imágenes a las características del dispositivo que las va a mostrar. De esta manera se previene la necesidad de aparición de scroll horizontal, optimizando el resultado bajo demanda. RWM 28 - Imágenes de gran tamaño 5.3.5 Graphics: http://www.w3.org/TR/mobile-bp/#d0e1219 Se debe evitar el uso de imágenes de gran tamaño y/o de gran resolución, pues su uso, además de provocar dificultades en su presentación en los dispositivos móviles, provoca un consumo de banda mayor del necesario. Recomendación: En el caso de no poder evitarse su uso por razones de contenido, se recomienda mostrar una imagen adaptada al dispositivo y crear un enlace a la versión a tamaño real de la imagen (indicando las características del destino). De esta manera se previene que la descarga se realice sin que haya sido solicitada por el propio usuario. RWM 29 - Tamaño de las imágenes 5.4.6 Image Size: http://www.w3.org/TR/mobile-bp/#ImageSize Especificar el tamaño de las imágenes en el código. De esta forma se informa al navegador del espacio que ha de reservar para ellas y se previenen los desplazamientos que su carga pueden provocar en el contenido. Recomendación: Dado que gran variedad de formatos de imagen incluyen sus dimensiones de forma implícita, se recomienda añadir esta información antes de servir la página. RWM 30 - Elementos no textuales 5.4.5 Non-Text Items: http://www.w3.org/TR/mobile-bp/#d0e1433 La descargar de recursos gráficos vía móvil consume ancho de banda y, por extensión, supone un gasto para el usuario. Este podría optar por desactivarla, con lo que perdería la información gráfica que estos aportan. Por ese motivo, se considera necesario añadir alternativas textuales para cada imagen presente en el contenido y que aporte cualquier tipo de información y/o funcionalidad. RWM 31 - Uso del color 5.3.6 Color: http://www.w3.org/TR/mobile-bp/#d0e1240 Es necesario asegurar que el contraste entre el color empleado de primer plano y el fondo es suficiente para no perder información. En el acceso móvil, tanto la iluminación exterior, como la 12 capacidad del propio dispositivo, son factores limitantes en la percepción del color. Por este motivo, es importante alcanzar unos niveles mínimos de contraste que permitan el acceso pleno a los contenidos. Recomendación: Se recomienda respetar los umbrales de contraste propuestos en WCAG 22 RWM 32 - Imágenes de fondo 5.3.7 Background Images: http://www.w3.org/TR/mobile-bp/#d0e1272 Resulta necesario comprobar y garantizar que, en el caso de utilizar imágenes de fondo, el contenido siga siendo legible, desde los dispositivos móviles, tanto cuando las imágenes están cargadas, como cuando no se realiza dicha carga. En ambas situaciones, el principal factor a tener en cuenta es el contraste entre el contenido y el fondo. RWM 33 - Unidades de medida 5.4.8 Measures: http://www.w3.org/TR/mobile-bp/#me El uso de unidades de medida absolutas o de pixels en la declaración de dimensiones y de propiedades del texto provoca que el contenido no se adapte a la pantalla del dispositivo, pudiendo dificultar la presentación y disminuyendo la calidad en la experiencia de uso. Por este motivo se debe recurrir siempre al uso de unidades relativas. Esta norma es aplicable a todos los elementos de la página excepto para las imágenes, para las cuales, como ya se indicó, es necesario definir sus dimensiones exactas en pixels. Recomendación: De forma general se debe recurrir a unidades relativas, si bien, es posible utilizar dimensiones en unidades absolutas cuando se conozcan las características del dispositivo y se trate de dimensiones que no afectan negativamente al resultado visual final, no provocan la aparición de scroll horizontal y no provocan la aparición excesiva del scroll vertical. 3.7 Minimizar RWM 34 - Código de la página 5.4.10 Minimize: http://www.w3.org/TR/mobile-bp/#d0e1733 Utilizar código eficiente para minimizar el tamaño de las páginas, eliminando el marcado innecesario y aplicando los efectos de estilo mediante el uso de técnicas de CSS adecuadas. Recomendación: Se recomienda eliminar el pretty-print del código fuente, eliminando de esta manera gran cantidad de espacios en blanco innecesarios. RWM 35 - Tamaño de la página 5.3.2 Page Size: http://www.w3.org/TR/mobile-bp/#d0e1099 Dado que la memoria de determinadas familias de dispositivos es limitada, únicamente pueden mostrar páginas con un tamaño reducido. Por este motivo, se ha de controlar el tamaño y peso de las páginas y adaptarlas a las características del dispositivo que la va a mostrar. 2 WCAG 2.0 – Contrast (minimun): http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast 13 RWM 36 - Hojas de estilo 5.4.9 Style Sheets: http://www.w3.org/TR/mobile-bp/#style Al igual que el tamaño de la página ha de limitarse en función de las características de los dispositivos, el tamaño de las hojas de estilo también ha de mantenerse optimizado. Recomendación: se recomienda utilizar las formas abreviadas en la declaración de propiedades de CSS y evitar la presencia de estilos que no se apliquen. De esta forma se minimiza la descarga que estás implican y se mejoran los tiempos de renderizado y el consumo de memoria por parte del dispositivo. RWM 37 - Scroll 5.3.3 Scrolling: http://www.w3.org/TR/mobile-bp/#d0e1146 Dadas las limitadas dimensiones de las pantallas de los dispositivos móviles, resulta prácticamente inevitable la aparición de barras de scroll. En el caso de ser necesarias, se debe evitar la aparición de ambas barras y limitar el scroll a una única dirección. Recomendación: Se recomienda limitar el scroll al desplazamiento vertical, evitando la aparición del horizontal. Para ello se puede recurrir a controlar el ancho de la página, redimensionando las imágenes que lo sobrepasen (en función del dispositivo). 3.8 Economizar el uso de la red RWM 38 - Autorefresco y redirección 5.2.8 Refreshing, Redirection and Spawned Windows: http://www.w3.org/TR/mobile-bp/#d0e959 Se debe evitar crear páginas que se autorefresquen periódicamente. El autorefresco, además de ser origen de problemas de accesibilidad, supone un coste al usuario al implicar la descarga repetida de recursos sin que este lo haya solicitado expresamente. Al ser un recurso que provoca que la navegación se ralentice, también se debe evitar hacer redirecciones de cliente. En el caso de ser necesarias, no debería haber más de una por página y se debería limitar el número de páginas que las requieren. Recomendación: En el caso de requerir del uso de redirecciones, es importante tener en consideración el mecanismo que se va a emplear para provocarla debido al soporte que pueda tener en dispositivo para ello. En general, las menos recomendables son las realizadas con javascript, debido al posible deficiente soporte que pueda tener el dispositivo, siendo preferible en cualquier caso el realizarlas del lado del servidor. RWM 39 - Recursos externos 5.2.9 Externally Linked Resources: http://www.w3.org/TR/mobile-bp/#el Cada recurso enlazado (tanto desde el propio documento como desde la hoja de estilos) supone un elemento a descargar, lo cual se traduce en tiempo de carga para la página y coste para el usuario. Por este motivo se ha de mantener al mínimo el número de recursos enlazados. 14 RWM 40 - Caché 5.4.15 Cache Headers: http://www.w3.org/TR/mobile-bp/#d0e1945 Utilizar información de caché de forma efectiva y eficaz, de tal manera que se pueda reducir la necesidad de descargar de forma innecesaria recursos repetidos tales como hojas de estilo, imágenes y páginas completas. De esta manera se aumenta la eficiencia de la página, se mejoran los tiempos de acceso a los contenidos y se reducen costes. Recomendación: Se recomienda facilitar información de caché en las cabeceras, utilizando: ◦ Cache-Control: public para permitir el cacheo entre dispositivos ◦ Cache-Control: private para cacheo por sólo por parte del dispositivo que realiza la petición ◦ Cache-Control: nocache para evitar el cacheo 3.9 Facilitar la entrada de datos RWM 41 - Limitar las pulsaciones al mínimo 5.5.1 Input: http://www.w3.org/TR/mobile-bp/#d0e2028 Se ha de evitar al usuario de la web móvil la necesidad de introducir valores. Para ello se puede recurrir a eliminar controles de formulario innecesarios, sustituir elementos por otros que requieran menos pulsaciones (por ejemplo, se pueden utilizar controles de selección en lugar de campos de texto), incluir valores por defecto, etc. Asimismo, se debe facilitar información (tanto para el usuario como en código) del formato de datos a introducir. Esto resulta de especial interés en aquellos campos en los que el formato es restringido (por ejemplo formato numérico). RWM 42 - Tabulación 5.5.2 Tab Order: http://www.w3.org/TR/mobile-bp/#d0e2100 Es necesario que todos los elementos de interacción posean un orden lógico de tabulación a lo largo del documento. Esto se consigue facilitando que el orden del documento sea el que controle el propio layout y la tabulación RWM 43 - Controles de formulario 5.5.3 Labels for Form Controls: http://www.w3.org/TR/mobile-bp/#d0e2133 Es necesario etiquetar todos los controles de formulario mediante el elemento creado para ello (label en el caso de HTML, con el correspondiente atributo for asociado al id del campo), siendo igualmente importante que su contenido sea suficientemente claro acerca del control al que acompaña y que su disposición permita reconocer la relación entre ambos. 15 3.10 Considerar el uso real de la Web RWM 44 - Título de la página 5.4.1 Title: http://www.w3.org/TR/mobile-bp/#d0e1294 Facilitar un título descriptivo de la página permite una identificación rápida de esta. Es importante tener en cuenta que los dispositivos móviles ofrecen un reducido espacio para mostrar el título, con lo que este deberá ser breve y suficientemente claro en su significado. RWM 45 - Claridad 5.3.1 Page Content: http://www.w3.org/TR/mobile-bp/#cl Los usuarios de la web móvil generalmente requieren de información específica y no realizan una navegación de carácter general a lo largo del sitio, lo cual no implica que no necesiten información adicional o complementaria. Esto se traduce en la necesidad de ofrecer en primer lugar los contenidos de carácter prioritario y mantener en un segundo orden el resto (generalmente por debajo del contenido principal). Esto se ve complementado con la tendencia altamente demandada de redactar los contenidos en un lenguaje sencillo y claro, evitando ofrecerlos en un estilo discursivo. De forma general se debe sintetizar la información, ofreciéndola como principal elemento en la página y haciendo que sea lo más clara posible, y siempre limitar el contenido a lo que el usuario ha solicitado, pues la información innecesaria supone un consumo de banda no deseado por parte del usuario, además de un retardo en la carga total de la página. RWM 46 - Tamaño usable de la página 5.3.2 Page Size: http://www.w3.org/TR/mobile-bp/#d0e1099 En el entorno de la web móvil, resulta fundamental limitar el tamaño de la página a lo estrictamente necesario para cubrir las necesidades de información que los usuarios pudieran tener. Esto no se plantea únicamente desde el punto de vista del consumo de ancho de banda y de los tiempos de carga, sino que un tamaño excesivo de página afecta directamente a su uso al requerir de un mayor desplazamiento de scroll, además de poder tener como handicap la capacidad del dispositivo. Por este motivo, en la web móvil es indispensable limitar el tamaño de la página a porciones usables de información, y si es necesario, dividirla en páginas de menor tamaño. 16