Regreso de la Hoja de Estilos Móvil

por Dominique Hazaël-Massieux. Original en inglés, traducido al español por Nils Tellería.

El último par de años ha visto surgir numerosos dispositivos móviles con capacidades web, incluyendo el iPhone de Apple y su navegador Safari, la creación de la plataforma Android de Google y su navegador basado en Webkit, el surgimiento de los llamados navegadores “web completos” (S60 de Nokia, Opera Mobile y Opera Mini, entre otros), los primeros desarrollos de la versión móvil de Firefox, y más. Estos navegadores móviles mejoran la experiencia de usuario, dándoles acceso a sitios web anteriormente fuera de los límites de la mayoría de los dispositivos móviles. En efecto, como destacó un reporte de 2008 de Nielsen Media Research, los dispositivos móviles han incrementado el tráfico en un promedio de 13% a través de varios sitios web populares.

Idealmente, los autores de los sitios deberían ser capaces de satisfacer la demanda creciente de una experiencia móvil de calidad sin cambiar una línea de código. Pero la realidad es que un sitio diseñado específicamente con la movilidad en mente siempre proveerá una mucho mejor experiencia de usuario a usuarios móviles, aun cuando estén equipados con el dispositivo du jour. No es meramente una cuestión de costos y demoras de red o limitaciones de memoria y CPU. Más bien, la experiencia móvil amerita su propio diseño, como se ha discutido en un creciente cuerpo de literatura, incluyendo las muy propias Mejores prácticas de la Web Móvil del W3C, liberado en julio del 2008 como una Recomendación de la W3C. La fórmula para una experiencia móvil provista por Little Springs Design recapitula el objetivo muy bien: moviliza, no miniaturices. Los usuarios móviles operan en un contexto de uso muy diferente al de los usuarios de PC, y proveerlos con una experiencia personalizada a sus necesidades es posiblemente el mejor servicio que tú puedes ofrecerles.

Si tú estás precisamente comenzando con diseño móvil, podrías enfrentar un número de obstáculos, incluyendo el costo o reto técnico de diseñar y mantener un segundo sitio — o la simple falta de entendimiento de cómo la gente en movimiento podrían usar tu sitio. Este artículo discute un primer paso en pos del diseño móvil que utiliza CSS para maximizar la interoperabilidad entre plataformas. Si comienzas con algo simple, puedes proveer una experiencia inicial decente, solicitar retroalimentación de los usuarios, e iterar hacia un diseño más amigable con el entorno móvil. Este es el enfoque que estamos siguiendo en nuestro rediseño del sitio del W3C.

Allá por el 2004, Elika Etemad y Jorunn Newth ofrecieron orientación en “Pocket-Sized Design”, valiéndose del handheld de las hojas de estilos para solucionar algunos desafíos de usabilidad de los dispositivos móviles. Por ejemplo, su solución intenta eliminar el desplazamiento horizontal, que puede ser tedioso en un dispositivo pequeño.

Navegadores recientes tienden a evitar ese problema ofreciendo una interfaz de zoom que permite a los usuarios enfocarse en una parte específica de la página. Estas capacidades de zooming ciertamente ofrecen ventajas, especialmente para usuarios que ya están familiarizados con el sitio web. Sin embargo, hacer zoom in y zoom out lanza un desplazamiento en el viewport, el cual puede confundir a los usuarios y no resuelve el problema de los que visitan la página por primera vez.

Debido a estas dificultades con el zoom, y quizá más importante, las dificultades con el scroll o desplazamiento que los usuarios de navegadores móviles más antiguos es probable que encuentren, ofrecer una vista lineal (en lugar de un esquema multi-columna) continúa siendo un buen consejo. Desafortunadamente, descansar solo en el handheld de las hojas de estilo para obtener ese efecto no es suficiente en la reciente evolución del mercado de los navegadores móviles.

El screen de las hojas de estilo contrataca

Tan temprano como 1998, la especificación de HTML4 ofreció formas de enlazar a diferentes hojas de estilo en dependencia del dispositivo específico, incluyendo medios handheld:

<link rel=”stylesheet” href=”screen.css” media=”screen”/>
<link rel=”stylesheet” href=”handheld.css” media=”handheld”/>

CSS incluyó una característica similar via @media:

@media screen { /* reglas para pantallas de PC */ }
@media handheld { /* reglas para dispositivos handheld */ }

y a través de un parámetro con @import:

@import “screen.css” screen; @import “handheld.css” handheld;

Muchos navegadores móviles han implementado estas características, pero en formas diferentes:

1. Algunos leen solo el handheld de las hojas de estilo.
2. Algunos leen solo el handheld de las hojas de estilo si hay uno, pero sino por defecto leen la hoja de estilos screen.
3. Algunos leen ambos la hoja de estilos handheld y la screen.
4. Algunos leen solo la hoja de estilos screen.

El último de estos apenas puede ser llamado una interpretación de la especificación. Es de mi entendimiento, basado en discusiones con algunos de los proveedores que implementan este esquema, que lo hicieron así porque creen que las hojas de estilo handheld fueron menos correctamente diseñadas y mantenidas que sus contrapartes screen, y proveen una experiencia inferior a los usuarios.

Recientemente, los navegadores móviles Opera (Mobile y Mini), dos implementaciones de la muy convincente opción 2 arriba, cambiaron el modo por defecto para usar las hojas de estilo screen, dejando a configuración del usuario utilizar el comportamiento anterior.

La mayoría (sino todos) de los navegadores móviles más nuevos, como parte de sus consignas “full web”, simplemente ignoran la hoja de estilos handheld, dejando afuera a aquellos con esperanzas en el enfoque CSS. O eso parece.

Media queries: una nueva esperanza

Versiones recientes de Safari y Opera implementan CSS Media Queries, una especificación que todavía está en desarrollo en el W3C. CSS Media Queries ofrece más que una simple lista de Tipos CSSMedia. Permite a los autores personalizar una hoja de estilos basado en algunas propiedades bien conocidas, como el tamaño de la pantalla que está rendereando la página.

Por ejemplo, el siguiente código especifica una hoja de estilo a ser usada por el navegador del iPhone y no por ningún navegador de PC (como fue presentado por Craig Hockenberry en A List Apart):

<link rel=”stylesheet” href=”handheld.css” media=”only screen and (max-device width:480px)”/>

Hay buenas razones para esperar que el número de navegadores móviles recientes que soporten esto se va a incrementar, aunque solo sea debido a la visibilidad del iPhone.

Cómo se comportan los navegadores

La siguiente tabla resume como varios navegadores web móviles populares se comportan hoy. La mayor parte de la información viene de los datos originales que coleccionan las pruebas móviles del W3C en cómo los navegadores móviles reaccionan a los CSS media types y las media queries.

Cómo varios navegadores reaccionan a los CSS Media Types

Dada esta diversidad, inmediatamente te preguntarás cuántas hojas de estilo necesitarás para crear una experiencia de usuario móvil-amigable. ¿Y cómo uno puede acomodar a la mayor cantidad de usuarios que acceden al sitio web mediante dispositivos móviles que en alguna forma implementan la técnica de los CSS Media Types?

“Estas no son las hojas de estilo que estás buscando”

Yo propongo una técnica para usar hojas de estilo que asegure que la mayoría de los navegadores móviles usarán las reglas destinadas a dispositivos móviles y evitarán las reglas que no son adaptadas para estos. Los navegadores de PC leerán las hojas de estilo diseñadas para ellos. La observación para el primer caso es que no funciona con los navegadores móviles que aplican solo las hojas de estilo screen y no implementan las CSS Media Queries. Va a funcionar con todas las versiones de Opera (ambas Mobile y Mini), Safari en iPhone, navegador Blazer de las Palm, IEMobile, y con un número razonable de otros navegadores (más detalles en su suporte debajo).

Las propiedades CSS asequibles a no-móviles típicamente incluyen:

• float y display: porque estas propiedades son tradicionalmente usadas para crear esquemas multi-columnas, tienden a requerir que los usuarios móviles hagan desplazamientos o zoom,
• padding y margin: dado que el estado real de la pantalla es limitado en dispositivos móviles, tú querrás reducir o eliminar la mayoría de esto en pantallas móviles, y
• background-image: imágenes usadas para decorar un sitio web para navegadores PC tienden a ser muy grandes y tener uso limitado en contextos móviles, por lo que estas probablemente deberían ser eliminadas o reemplazadas para navegadores móviles.

La idea es similar a la técnica de restablecimiento de Eric Meyer:

• define una hoja de estilo screen.csspara navegadores PC,
• define una hoja de estilos antiscreen.css para cancelar cualquier efecto asequible a no-móvil establecido en screen.css,
• asocie estas dos hojas de estilo juntas en una hoja de estilo core.css, à la:

@import url(“screen.css”);
@import url(“antiscreen.css”) handheld;
@import url(“antiscreen.css”) only screen and (max-device-width:480px);

• Define una hoja de estilo handheld.css con estilo adicional para navegadores móviles, y
• enlácelos en el documento como sigue:

<link rel=”stylesheet” href=”core.css” media=”screen”/>
<link rel=”stylesheet” href=”handheld.css” media=”handheld, only screen and (max-device-width:480px)”/>

(o a través de bloques@media o directivas @import similares).

Comportamiento de los navegadores

Los navegadores móviles que solo leen la hoja de estilo handheld nunca verán las propiedades CSS potencialmente perjudiciales definidas en screen.css. Navegadores móviles que leen las hojas de estilo screen y handheld u hojas de estilo media queries no serán afectadas por las propiedades perjudiciales en screen.css, dado que son canceladas por antiscreen.css. Finalmente, los navegadores PC ignorarán felizmente ambas antiscreen.css y handheld.css.

Queda un problema práctico: si tu hoja de estilo screen.css es larga y modificada regularmente, la creación y mantenimiento de antiscreen.css puede ser todo un desafío. ¿Quién quiere encontrar cuál regla CSS incluye una de las propiedades señaladas entre los miles de propiedades potencialmente puestas en una hoja de estilos enriquecida? ¿Y quién quiere mantener una lista así manualmente?

Afortunadamente, las computadoras lo hacen. Si tu navegador soporta la especificación DOM Level 2 Style, tú puedes usar un script ejecutado desde tu navegador en una página dada para identificar cuales hojas de estilo en la página quieres cancelar.

“Señor, la posibilidad de usar el campo mobile user-agent satisfactoriamente es aproximadamente 3720 a 1”

Esta técnica aborda las necesidades de un número razonable de navegadores móviles, incluyendo algunos de los más populares. ¿Pero qué puede ser hecho para navegadores móviles que no lean hojas de estilo handheld, o parseen CSS Media Queries? Aparte de ignorar estos casos, hay dos opciones.

1. Usar JavaScript para forzarlos a leer hojas de estilo handheld (dado que los navegadores en esta categoría son bastante recientes, es muy probable que tengan un nivel razonable de soporte de JavaScript).
2. O, descansar en técnicas del lado del servidor para darles la hoja de estilo handheld cuando soliciten la screen.

En ambos casos, el principal inconveniente –y la razón por la que yo no recomiendo tratar de usar esta técnica para todos los dispositivos móviles– es que tendrás que emparejar explícitamente el encabezado user-agent enviado por el navegador. El encabezado user-agent es el nombre que el navegador (móvil o no) envía al servidor web cuando solicita una página dada, y el cual usualmente identifica un navegador dado en una plataforma dada. Puedes ver una lista bastante extensa de estos encabezados user-agent en user-agents.org.

El problema con depender de este encabezado es que hay muchos proveedores de diferentes navegadores, y muchas diferentes versiones de los navegadores. Mantener una lista exhaustiva de agentes de usuario es tediosa y propensa a errores, dado que nuevos dispositivos y navegadores son liberados todo el tiempo. Hay soluciones existentes que permiten a los desarrolladores web usar fuentes externas para este tipo de dato (e.j., a través de la API del Repositorio de Descripción de Dispositivos del W3C), pero dado que nuestro objetivo es mantener esto simple, ello claramente sale del alcance de este artículo.

En nuestro caso, necesitamos hacer coincidir solo un número bastante limitado de navegadores y, con suerte, ese número no crecerá mucho con el tiempo, siempre que las personas usen CSS Media Queries. Johann Burkard provee un ejemplo de cómo lograr ese efecto con JavaScript basado en una prueba en la propiedad navigator.userAgent.

Para lograr un efecto similar con tecnologías del lado del servidor en un servidor Apache, usamos una Regla Rewrite:

# Esta regla rewrite debe ser aplicada en el directorio
# de la hoja de estilo screen.css
# Para los navegadores Series60
RewriteCond {HTTP:User-Agent} Series60
# redireccionames screen.css al stylesheet handheld
RewriteRule
^screen.css$ /path/to/handheld/stylesheet/
handheld.css [R=permanent,L]
# Establecemos el encabezado Vary en screen.css
# para asegurarnos que HTTP Cache preste atención
# al encabezado User-Agent tal y como es requerido
# según la especificación HTTP.
Header add Vary User-Agent

El tamaño no importa. Mírame. Júzgame por mi tamaño, ¿lo haces?

En resumen …

• los navegadores móviles se han ido volviendo más fuertes y su uso se ha ido extendiendo,
• hay aún una plenitud de navegadores móviles no tan potentes, e incluso los potentes crean retos de usabilidad,
• aunque una experiencia de usuario específica de móviles cubrirá mejor las necesidades de tus usuarios, un sitio web amigable con el entorno móvil es mejor que nada, y
• la técnica antiscreen(combinada con un script para generarla) te permite crear hojas de estilo amigables con el entorno móvil que funcionará a lo largo de un número grande de navegadores móviles.

¿Tú conoces de algunas otras técnicas CSS que aborden las restricciones espcíficas de los navegadores web móviles? Por favor compártelas en los comentarios, en la lista de correo pública de desarrolladores web para móviles del W3C public-mobile-dev@w3.org, o de forma privada con el autor en dom@w3.org.