Compatibilidad en el Diseño web – IV

Escrito en Servicios web | Comentarios desactivados en Compatibilidad en el Diseño web – IV | 29-09-2010

Si en los anteriores post nos paramos mucho más en explicar un poco de historia, las diferencias entre navegadores, en cómo variaban ciertos códigos html o en los problemas con el CSS. Hoy nos centraremos un poco más en la compatibilidad con el Diseño web móvil.

Actualmente la cantidad de dispositivos móviles que encontramos en el mercado es asombrosa, y la cantidad de dispositivos que salen día a día nos hace temer a la hora de adquirir un nuevo terminal. Y es que cada vez más la mayoría de teléfonos móviles incluyen la opción de navegar en internet a través de diferentes tecnologías, WAP, WAP2, GRPS, UMTS, WIFI, que fueron evolucionando hasta llevarnos la experiencia de la navegación web del PC al móvil.

Vale, todo esto está muy bien, pero y ¿a la hora de diseñar? ¿cómo podemos lidiar con modelos tan distintos de móviles?, ¿existe algún estándar que podamos seguir para la elaboración de páginas web en dispositivos móviles?. La respuesta la encontramos de mano del World Wide Web Consortium (W3C) con su estándar de buenas prácticas para la web móvil, que podemos encontrar en Mobile Web Best Practices 1.0.

Bueno vale, seguimos eso y ya está, pero… es muy largo!, ¿no nos puedes dar unos consejos para no chapar la cantidad de hojas del estándar?. Pues sí, y vienen de parte del W3C otra vez, este propone 10 consejos y pautas a seguir que a la mayoría de vosotros les resultará familiares, aunque si quieres evitar problemas, lo mejor es contratar con una empresa de diseño web como Invbit que se tiene muy «estudiado» la temática de los estándares. Los consejos son:

  1. Diseñar para una web única: Si se diseña el contenido teniendo en cuenta los diferentes dispositivos se minimizan los costes, la página web será más flexible y se satisfarán las necesidades de más personas.
  2. Confiar en los estándares web: En un mercado tan segmentado como el de dispositivos y navegadores, los estándares son la mejor garantía de interoperatibilidad, por ello, entre otras cosas, el desarrollador ha de tener en cuenta que el documento generado ha de ser válido según las gramáticas formales y ha de poseer una estructura lógica, los formatos de los contenidos han de ser compatibles con los dispositivos y hay que usar de forma correcta las hojas de estilo.
  3. Evitar los riesgos conocidos: No usar ventanas emergentes y no cambiar de ventana sin avisar previamente al usuario, no usar tablas anidadas y no emplear tablas para maquetar, no utilizar marcos, no usar imágenes para espaciar contenidos y evitar los mapas de imágenes.
  4. Ser prudente con las limitaciones de los dispositivos: Hay que tener en cuenta que los dispositivos móviles tienen funciones muy diversas, para ello siempre hay que desarrollar con independencia del dispositivo y nunca depender de objetos o scripts integrados, buscar alternativas a las tablas para la presentación tabular, organizar los documentos para que puedan ser leídos sin las hojas de estilo, asegurarse de que la información transmitida a través de los colores esté disponible también sin color y no confiar en la compatibilidad con los tipos de letra.
  5. Optimizar la navegación: Es importante que la barra de navegación sea lo más corta posible y se encuentre en la parte superior de la página, que el mecanismo de navegación sea coherente en todas las páginas, identificar claramente el destino de cada enlace, asignar teclas de acceso rápido a las opciones de menú y a las funciones más utilizadas.
  6. Comprobar gráficos y colores: Redimensionar las imágenes, evitar gráficos grandes, proporcionar alternativas a los elementos no textuales, asegurarse de que exista un contraste de color suficiente entre el color de fondo y el de primer plano, no usar medidas en píxeles ni en valores absolutos.
  7. Hacerlo en pequeño: Minimizar el etiquetado, el tamaño total de la página ha de ser el apropiado para las limitaciones de memoria del dispositivo, las hojas de estilo han de ser pequeñas, limitar el desplazamiento de la página a una sola dirección.
  8. Economizar el uso de la red: Evitar las actualizaciones periódicas automáticas, no redirigir los contenidos a través del etiquetado, reducir el número de enlaces externos.
  9. Facilitar la entrada de datos: En los dispositivos móviles, los teclados y otros métodos de introducción de datos pueden resultar tediosos para el usuario; para ello conviene reducir el uso del teclado al mínimo, evitar la introducción de textos por parte del usuario, establecer valores por defecto, crear un orden lógico de tabulación, asociar explícitamente e implícitamente las etiquetas con los controles de formulario.
  10. Pensar en los usuarios de la web móvil: Los usuarios, al disponer de poco tiempo, prefieren la información lo más esquematizada posible, para ello el título de la página ha de ser corto y significativo, el lenguaje usado ha de ser claro y sencillo, el contenido más importante ha de estar localizado al principio de la página, dividir las páginas en secciones manejables.