Les comparto los consejos de las fichas que me sirvieron de guía y también la versión renovada para aprender sobre este tipo de consideraciones.
Introducción
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
http://www.w3.org/Mobile
Traducción realizada por http://www.w3c.es
©2007 W3C (ERCIM, Keio University, MIT)
No hay comentarios:
Publicar un comentario