Diseño de Interfaces » Especificaciones técnicas de diseño para dispositivos móviles

El móvil como plataforma

(Fling, págs. 13-26)

Los contenidos que puede mostrar y gestionar un dispositivo siempre son soportados por una plataforma y un sistema operativo específicos, sobre los cuales se ejecuta el framework, las aplicaciones y los servicios disponibles en el dispositivo.

Plataforma

La plataforma es el lenguaje de programación en el que todo el software del dispositivo móvil está escrito. Hay tres categorías de plataformas:

Licenciadas:
Se distribuyen en varios tipos de dispositivos con el objetivo de generar una plataforma de desarrollo de aplicaciones que funcione de manera parecida en todos ellos. Las plataformas licenciadas actuales son las siguientes:
- Java Micro Edition (Java ME), más conocida como J2ME. Es la más extendida actualmente.
- Binary Runtime Environment for Wireless (BREW). Permite ejecutar diferentes frameworks, como C/C++, Java o Flash Lite.
- Windows Mobile. Es una versión compacta del sistema operativo de Windows, combinada con aplicaciones para dispositivos móviles basadas en Microsoft Win32 API.
- LiMo. Es una plataforma basada en Windows. Incluye SDK para crear aplicaciones Java, nativas o web utilizando el framework WebKit.
Propietarias:
Están diseñadas y desarrolladas por los mismos productores de móviles para ser utilizadas en exclusiva en sus dispositivos.
- Palm utiliza tres plataformas propietarias diferentes. La más extendida es la Palm OS, basada en C/C++, pero también soporta una plataforma basada en Windows Mobile, y la webOS, que es la más reciente.
- BlackBerry. Tiene una plataforma propietaria basada en Java.
- iPhone. Utiliza una versión propietaria de MAC os X, basada en Unix. Se encuentra en los iPhone, iPod y iPad.
Código abierto:
Son plataformas gratuitas que se pueden descargar, editar y modificar. Android es probablemente la más extendida.

Sistema operativo

Los sistemas operativos permiten a las aplicaciones comunicarse las unas con las otras, así como compartir datos o servicios. Los más extendidos son los siguientes:

Symbian. Sistema operativo de código abierto, en general asociado a dispositivos Nokia.
Windows Mobile. Funciona sobre la plataforma Windows Mobile.
Palm OS.
Linux.
IOS 6 (utilizado en los iPhone, iPod y iPad).
Android. La plataforma Android tiene su propio sistema operativo, que puede ser adaptado a medida por operadores y fabricantes de dispositivos.

Framework

Un framework se ejecuta sobre un sistema operativo y permite compartir servicios centrales, como mensajes, gráficos, posición, Secure, autentificación y otros. Los frameworks más extendidos son los siguientes:

Java ME. Las aplicaciones escritas en Java ME se pueden distribuir en la mayoría de dispositivos basados en Java.
S60. Es un framework de código abierto para el sistema operativo Symbian. Las aplicaciones para S60 se pueden crear en Java, Symbian C + + o Flash Lite.
BREW.
Flash Lite.
Windows Mobile.
Cocoa Touch. Es la API utilizada para crear aplicaciones nativas para iPhone, iPod Touch y iPad. Tienen que ser certificadas por Apple antes de incluirse en la App Store.
Android SDK. Para los dispositivos con plataforma Android. Los desarrolladores pueden escribir aplicaciones en C/C++ o utilizar la máquina virtual Java incluida en el sistema operativo.
Web Runtime (WRT). Nokia, Opera y Yahoo! proporcionan varios Web Runtime o WRT. Basado en estándares web, permite generar widgets para móvil. Tanto los de Opera como los de Nokia cumplen las especificaciones W3C para dispositivos móviles.
WebKit. Es una tecnología de navegador, de modo que las aplicaciones se pueden crear utilizando simplemente tecnologías web como HTML, CSS o Javascript.
Web. La web es el único framework que funciona en prácticamente todos los dispositivos y plataformas. En realidad, es el framework que con más rapidez está extendiendo su uso.

Aplicaciones

El máximo desafío con el que se enfrenta el desarrollo de aplicaciones para móvil es la diversidad de características de los diferentes dispositivos. En general, el coste de desarrollo es muy alto y crece exponencialmente a medida que la aplicación quiere hacerse compatible con diferentes entornos.

La alternativa más común consiste en crear aplicaciones para una sola plataforma, como iPhone o Android, aunque son cada vez más los desarrolladores que ven el desarrollo de aplicaciones web (las soportadas por los navegadores) como la mejor alternativa, puesto que los navegadores permiten gestionar el contenido con independencia del dispositivo, la plataforma o el sistema operativo.

Servicios

Los servicios incluyen tareas básicas en entorno móvil, como el acceso a Internet, el envío de mensajes textuales o la geolocalización.

Tablas

Hay que evitar por completo la maquetación en móvil mediante tablas, en primer lugar porque algunas plataformas no admiten tablas nidadas y, en segundo lugar, por el pequeño tamaño de la pantalla.

Las tablas son útiles para organizar y mostrar datos, pero no para mantener la estructura de la página. No todos los dispositivos muestran las tablas igual ni respetan los tamaños de la tabla, las filas o las columnas.

Si se utilizan tablas para mostrar datos, hay que asegurarse de que su anchura sea siempre inferior a la de la pantalla: no todos los dispositivos permiten desplazarse de izquierda a derecha por la página y algunos de ellos muestran errores de visualización cuando el ancho es del 100% de la página.
Para evitar que haya tablas más anchas que la pantalla, hay que utilizar porcentajes en lugar de tamaños fijos para configurarlas.
Alinear las tablas a la izquierda y utilizar los estilos de fuente de CSS (por ejemplo, el estilo CSS para las cabecera de tabla es negrita y centrado, de modo que no necesita énfasis adicional).
Mantener el número de filas y de columnas al mínimo, ya que incrementan el tiempo de visualización de la tabla en pantalla.
Evitar tablas con elementos que tengan focos, ya que algunos dispositivos obligarán al usuario a desplazarse celda por celda por cada uno de los elementos con focos.
Alinear arriba (top) el contenido de la tabla. La alineación por defecto es la centrada (middle), pero si el texto de la tabla aparece cortado, solo veremos el fragmento central, lo que resultará confuso.
Utilizar CSS para generar un fondo de color alterno entre las filas de la tabla, puesto que agiliza la lectura de los datos. Los colores utilizados tienen que garantizar el nivel de contraste necesario para que los contenidos de la celda sean legibles.
Evitar que haya celdas más altas que la pantalla para no perder el contexto.
Utilizar un solo tipo o grueso de borde por tabla para no generar confusión.

(Extraído de http://patterns.design4mobile.com/index.php/Screen_Design_Basics.)

Listas

Algunos diseñadores evitan por completo las tablas en el diseño para móviles y las sustituyen por listas, que permiten más control, mayor compatibilidad entre navegadores, una descarga más rápida y no requieren CSS sofisticado.

Utilizar ul (unordered lists o listas no ordenadas) para las listas con viñetas.
Utilizar ol (ordered lists o listas ordenadas) para las listas numeradas.
Las listas de definición (dl) se utilizan raramente en los web tradicionales, pero son muy útiles en el diseño para móviles. Todos los navegadores y dispositivos las soportan, y proporcionan al diseñador control sobre el diseño. Permiten generar con facilidad menús en los que haya subelementos (utilizando dt para los elementos de primer nivel y dd para los de segundo nivel, que aparecerán indentados).
Las dl también son muy útiles para listas numeradas en las que sea necesario tener control sobre la numeración (por ejemplo, si tiene que existir un elemento 0, que no hay en las listas numeradas ol).
Evitar los tags div entre elementos de la lista, ya que en algunos dispositivos se genera un salto de línea más entre cada elemento de la lista.

(Extraído de http://patterns.design4mobile.com/index.php/Screen_Design_Basics.)

CSS

El soporte CSS varía ampliamente entre los navegadores disponibles en móviles. Para garantizar que la página se verá correctamente a pesar de las variaciones, hay que tener en cuenta las siguientes recomendaciones:

Mantener los elementos CSS al mínimo. Más elementos significa más tiempo de descarga.
Evitar el uso de abreviaturas para las propiedades CSS, en especial por margin, padding, border-width, border-style y list-style.
Asegurarse de que la página es legible sin CSS. Los dispositivos que no soporten CSS tienen que poder mostrar del mismo modo el contenido.
No incluir imágenes en hojas de estilo externas, ya que aumenta el tiempo de descarga (descarga del archivo http + llamada a CSS + llamada a descarga de la imagen).
Utilizar CSS in-line (elemento style type = “text / css”), puesto que ahorra una llamada http y disminuye el tiempo de descarga de la página.
Evitar el uso de los valores de fuente CSS x-large o xx-large, ya que en realidad los dos valores se mostrarán como 13 píxeles. Una línea de texto de este tamaño puede ocupar un cuarto del espacio vertical de la pantalla de un móvil, lo que aumenta la necesidad de scroll.
No incluir en el CSS estilos que no tengan que ser utilizados, puesto que cada estilo incrementa el tamaño del fichero y el tiempo de descarga.
Limitar el uso del valor CSS “text-decoration: blink”. Un “blink” destaca un elemento, y su uso reiterado puede ser perjudicial para la usabilidad. No tendría que haber más de un elemento con este valor en una página.
Se pueden utilizar diferentes valores para la propiedad “text-decoration”, pero no en la misma declaración CSS. Si se aplica más de un valor en una misma declaración, solo aparecerá uno de los valores.
Cuando sea posible, utilizar reglas en cascada en lugar de atributos de clase, es decir, es mejor utilizar p {align: right} que .right {align: right}. Esto ahorra tener que definir class = “right” cada vez que se utiliza el elemento.
Evitar la utilización de atributos de bgcolor, link y text para el body. Es mejor utilizar hojas de estilo para controlar estos aspectos.
Evitar la especificación del tipo de lista para listas ordenadas. Es mejor utilizar hojas de estilo para controlar este valor.
Evitar el uso de los atributos hspace y vspace para las imágenes. Es mejor utilizar hojas de estilo para controlar estos valores.

Optimización del código

La descarga de datos en un dispositivo móvil es más lenta y más cara que desde un PC (el ancho de banda es todavía muy bajo). Las páginas se han de optimizar al máximo, tanto en los elementos que forman parte de su apariencia como en su código.
Es altamente aconsejable trabajar con CSS, ya que:
- Permite una descarga más rápida (optimiza el código),
- Favorece la accesibilidad, al adaptarse a los diferentes formatos de los dispositivos.
Por la misma razón, se recomienda no utilizar tablas.
Cuando las hojas de estilo o los scripts son compartidos por varias páginas, es mejor vincularlas a las páginas, en lugar de incluirlas.