Versión Original (Inglés)

Buenas Prácticas en Web Móvil

Introducción

Las “Buenas Prácticas en Web Móvil 1.0" son un Estándar Web del W3C cuyo objetivo es ayudar a los desarrolladores Web a diseñar y publicar contenido Web que funcione adecuadamente en dispositivos móviles. Estas tarjetas resumen, en diez puntos clave, las pautas descritas en el estándar. Al cumplirlas, se incrementará el público que puede acceder a los contenidos, creando sitios Web y aplicaciones eficaces y haciendo la navegación en la Web accesible desde más dispositivos.

Más información en: http://www.w3.org/TR/mobile-bp/

10 formas de hacer la Web móvil

Diseña para una Web única

Si diseñas el contenido teniendo en cuenta los diferentes dispositivos, reducirás costes, tu página será más flexible y satisfarás las necesidades de más personas.

Diseña para una Web única

COHERENCIA TEMÁTICA: Asegúrate de que el contenido al que se accede desde una URI aporta la misma información esencial al usuario, independientemente del dispositivo que utilice.

CAPACIDADES: Aprovecha las capacidades del dispositivo para proporcionar al usuario una mejor experiencia.

PROBLEMAS EN LA IMPLEMENTACIÓN: Toma las medidas convenientes para evitar problemas en la implementación.

PRUEBAS: Haz pruebas sobre dispositivos móviles y emuladores.

Confía en los estándares Web

En un mercado tan fragmentado como el de dispositivos y navegadores, los estándares son la mejor garantía de Interoperabilidad.

Confía en los estándares Web

ETIQUETADO VÁLIDO: crea documentos que sean válidos según las gramáticas formales disponibles.

COMPATIBILIDAD DE FORMATO: envía el contenido en un formato que sea compatible con el dispositivo.

FORMATO DE CONTENIDO PREFERIDO: siempre que sea posible, envía el contenido en el formato deseado por el usuario.

COMPATIBLIDAD DE LA CODIFICACIÓN DE CARACTERES: asegúrate de que la codificación de caracteres del contenido es compatible con el dispositivo.

USO DE LA CODIFICACIÓN DE CARACTERES: indica la codificación de caracteres que se está utilizando.

USO DE HOJAS DE ESTILO: utiliza hojas de estilo para la maquetación y presentación del contenido, a no ser que el dispositivo no las admita.

ESTRUCTURA: utiliza las funciones del lenguaje de etiquetado para definir la estructura lógica del documento.

MENSAJES DE ERROR: intenta que tus mensajes de error sean informativos y facilita la forma de regresar al contenido anterior.

Evita los riesgos conocidos

Un diseño bien planificación ayuda a reducir los problemas de usabilidad causados por pantallas y teclados pequeños, u otras funciones de los dispositivos móviles.

Evita los riesgos conocidos

VENTANAS EMERGENTES: Evita las ventanas emergentes, y no cambies de ventana sin informar al usuario.

TABLAS ANIDADAS: No uses tablas anidadas.

DISEÑO CON TABLAS: No uses tablas para maquetar.

GRÁFICOS PARA EL ESPACIADO: No uses gráficos para el espaciado.

MARCOS: No uses marcos.

MAPAS DE IMAGEN: Evita los mapas de imagen, a no ser que sepas que el dispositivo los interpreta eficazmente.

Sé prudente con las limitaciones de los dispositivos

Cuando elijas una tecnología Web concreta, ten en cuenta que los dispositivos móviles tienen funciones muy diversas.

Sé prudente con las limitaciones de los dispositivos

COOKIES: No cuentes siempre con que haya cookies disponibles.

OBJETOS O SCRIPTS: No dependas de los objetos o los scripts integrados.

COMPATIBILIDAD DE LAS TABLAS: No uses tablas a no ser que estés seguro de que el dispositivo es compatible.

ALTERNATIVAS A LAS TABLAS: Siempre que sea posible, utiliza alternativas a la presentación tabular.

COMPATIBILIDAD CON LAS HOJAS DE ESTILO: Organiza los documentos de forma que sea posible leerlos sin hojas de estilo.

TIPOGRAFÍA: No confíes en la compatibilidad de los tipos de letra.

USO DE COLORES: Asegúrate de que la información transmitida mediante colores también puede comprenderse sin color.

Optimiza la navegación

La simplificación de la navegación y del uso del teclado son factores esenciales cuando se utilizan pantallas y teclados pequeños, y se tiene un ancho de banda limitado.

Optimiza la navegación

BARRA DE NAVEGACIÓN: Concentra la navegación en la parte superior de la página y redúcela al máximo.

NAVEGACIÓN: Utiliza mecanismos de navegación coherentes.

IDENTIFICACIÓN DEL DESTINO: Identifica claramente el destino de cada enlace.

FORMATO DEL DESTINO: Indica el formato del archivo de destino, a no ser que sepas con seguridad que el dispositivo es compatible.

TECLAS DE ACCESO RÁPIDO: Asigna teclas de acceso rápido a los enlaces en los menús de navegación y a las funciones más utilizadas.

URIS: Intenta que las URls sean cortas.

EQUILIBRIO: Intenta encontrar un equilibrio entre tener demasiados enlaces en una página y hacer que el usuario vaya de un sitio a otro hasta llegar a lo que está buscando.

Comprueba gráficos y colores

Las imágenes, los colores y el estilo destacan el contenido, pero hay dispositivos con pantallas de bajo contraste o problemas de compatibilidad con algunos formatos.

Comprueba gráficos y colores

REDIMENSIÓN DE LAS IMÁGENES: Redimensiona las imágenes en el servidor si tienen un tamaño intrínseco.

GRÁFICOS GRANDES: Evita imágenes que no puedan ser mostradas desde el dispositivo. Evita las imágenes grandes o de mucha resolución a no ser que, sin ellas, se pierda información valiosa.

TAMAÑO DE IMAGEN ESPECIFICADO: Especifica el tamaño de la imagen en el etiquetado si tiene un tamaño intrínseco.

ALTERNATIVAS A LOS ELEMENTOS NO TEXTUALES: Facilita un equivalente en forma de texto para cada elemento no textual.

CONTRASTE DE COLOR: Asegúrate de que entre el color del fondo y el del primer plano hay suficiente contraste.

LEGIBILIDAD DE LA IMAGEN DE FONDO: Cuando utilices imágenes de fondo, asegúrate de que el contenido sigue siendo legible en el dispositivo correspondiente.

MEDIDAS:No utilices medidas en píxeles ni unidades absolutas en los valores de los atributos del lenguaje de etiquetado, ni en los valores de las propiedades de las hojas de estilo.

Hazlo en pequeño

Un sitio Web de tamaño reducido supondrá un ahorro de tiempo y dinero para los usuarios.

Hazlo en pequeño

MINIMIZAR: Utiliza un etiquetado conciso y eficaz.

LÍMITE EN EL TAMAÑO DE LA PÁGINA: Asegúrate de que el tamaño total de la página es apropiado para las limitaciones de memoria del dispositivo.

TAMAÑO DE LAS HOJAS DE ESTILO: Utiliza hojas de estilo pequeñas.

SCROLLING: Limita el scrolling a una sola dirección a no ser que sea imposible evitar un desplazamiento secundario.

Economiza el uso de la red

Las funciones de los protocolos Web pueden mejorar la experiencia del usuario al reducir los retrasos y los tiempos de espera en la red.

Economiza el uso de la red

ACTUALIZACIÓN AUTOMÁTICA: No crees páginas con una actualización automática periódica, a no ser que hayas informado al usuario y éste pueda desactivarla.

REDIRECCIÓN: No uses el etiquetado para redirigir las páginas automáticamente. En cambio, configura el servidor para que ejecute redirecciones a través de códigos HTTP 3xx.

RECURSOS EXTERNOS: Intenta reducir el número de enlaces externos al mínimo.

CACHÉ: Facilita información para la caché en las respuestas HTTP.

Facilita la entrada de datos

En los dispositivos móviles, los teclados y demás métodos de introducción de datos pueden ser tediosos para el usuario. Un diseño eficaz minimiza su uso.

Facilita la entrada de datos

MINIMIZA EL USO DEL TECLADO: Reduce el uso del teclado al mínimo.

EVITA LA INTRODUCCIÓN DE TEXTO: Siempre que sea posible, evita la introducción de texto por parte de los usuarios.

SELECCIÓN POR DEFECTO: Siempre que sea posible, establece valores preseleccionados por defecto.

MODO DE ENTRADA POR DEFECTO: Especifica un modo de entrada de texto, un lenguaje y/o un formato de entrada, por defecto, si el dispositivo es compatible.

ORDEN DE TABULACIÓN: Crea un orden lógico mediante enlaces, controles de formulario y objetos.

ETIQUETADO DE CONTROLES: Etiqueta todos los controles de formulario adecuadamente y asocia explícitamente las etiquetas con los controles.

POSICIÓN DE CONTROLES: Coloca adecuadamente las etiquetas con respecto a los controles de formulario a los que se refieren.

Piensa en los usuarios de la Web móvil

Los usuarios de la Web móvil necesitan información sintetizada al disponer de poco tiempo y existir distracciones externas.

Piensa en los usuarios de la Web móvil

TÍTULO DE LA PÁGINA: Ponle un título a la página que sea corto pero descriptivo.

CLARIDAD: Utiliza un lenguaje sencillo y claro.

CONTENIDO RELEVANTE: Asegúrate de que el contenido esencial de la página esté antes que el contenido que no lo es.

CONTENIDO LIMITADO: Limita el contenido a lo que el usuario ha solicitado.

ADECUACIÓN: Asegúrate de que el contenido es adecuado para su uso en un contexto móvil.

TAMAÑO PRÁCTICO DE LA PÁGINA: Divide las páginas en secciones manejables pero con un tamaño limitado.

PATROCINADORES de la Iniciativa de Web Móvil del W3C

(Patrocinadores de la MWI)

http://www.w3.org/Mobile

Traducción realizada por http://www.w3c.es

©2007 W3C (ERCIM, Keio University, MIT) - Diseñado por WithYou - Photographs ©gettyimages - ©corbis