La internet puede ser accedida de varias formas, la más común y esperada de ellas es a través de una computadora. Pero también existe la posibilidad de acceder a través de un celular, smartphone, PDA… podríamos resumirlo como “cualquier dispositivo portable con capacidad de acceder a internet”

En el caso de los smartphones más recientes, la internet para ellos es simplemente la internet… la cual debe ser observada de cerca para poder experimentar en su verdadera naturaleza. Es como si tuviésemos un monitor normal, pero tuviésemos que ver las cosas a través de un rectángulo de 12cm*6cm. En otros casos, el “zoom” no ocurre. Y en el caso de celulares mas viejos que usan WAP, la página puede ni siquiera verse.

Frente a la realidad de que nuestro sitio web puede ser accedido por celulares, tenemos básicamente 4 opciones:

1. No hacer nada
2. Sacar los estilos CSS y entregar XHTML inalterado
3. Usar CSS especifico para handhelds
4. Generar una página aparte específica para usuarios handheld

Cada situación tiene sus pros y sus contras que pueden leer a fondo en la segunda parte del artículo Mobile Web Design: Methods to the Madness de Cameron Moll.

En este artículo vamos dar una introducción a la tercera opción: Usar CSS especifico para handhelds.

A qué nos referimos con CSS especifico para handhelds? Una de las capacidades de CSS es de ser orientado a diferentes medios. Como dijimos antes, la información de la internet puede ser accedida de diferentes formas. Uno puede generar CSS para todos los medios, o puede especificar para que medio desea que las declaraciones en particular que estamos dando se apliquen. Medios posibles a los cuales se puede orientar CSS son all, screen, print, handheld, braille, embossed, projection, speech, tty, tv; siendo los primeros 4 los mas usados. (mas sobre el tema)

Esto nos permite tener un mismo contenido (XHTML) y poder presentarlo de diferentes formas según sea accedido. Por ejemplo, ya no es necesario tener un link que diga “versión para imprimir” ya que podemos declarar CSS para print y nos ahorramos la duplicación del contenido.

Lo que debemos hacer para lograr que nuestra página este estilizada específicamente para handhelds consiste en modificar nuestros archivos XHTML y crear nuestro archivo CSS.

Modificación de los XHTML

Lo que debemos hacer es agregar

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

Al head de nuestro documento, después de la declaración de la hoja de estilo normal. Es importante aclarar que a nuestra hoja de estilo previa debemos especificar su media, es decir que si antes teníamos

<link href="style.css" rel="stylesheet" type="text/css" />

Ahora, especificando nuestra media que sería screen, nos queda:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

Bien, este sería la única modificación necesaria a nuestros archivos XHTML! Ahora es momento de enfocarnos en crear nuestra hoja de estilo.

Creación de la hoja de estilo CSS

Aquí es donde esta el verdadero trabajo. Debemos tomar consideraciones importantes de layout y distribución, y las dos mayores razones son la falta de espacio en pixeles y la necesidad de acaparar varias resoluciones con un solo layout.

Aprontando nuestro canvas

Es al menos mi tendencia codear en dreamweaver y observar los resultados en Firefox. Sin embargo, para diseñar nuestro CSS handheld va a resultar mucho más practico observar los resultados en Opera, gracias a su practico “small screen” rendering. Si bien en Firefox podemos hacer lo mismo con el addon Web Developer Tooblar, al refrescar la pantalla (F5) vuelve a su estado normal, lo cual no resulta práctico.

Ahora vamos a abrir 4 ventanas diferentes de opera, y en las cuatro vamos a elegir View > Small screen, además también vamos a ir a Tools > Preferences > Advanced > Browsing y hacemos “tick” en Show web page dimensions in title bar

Ahora tenemos que llegar al resultado de ver nuestra página en cada una de estas resoluciones:

• 240×320
• 320×240
• 400×240
• 480×320

Esta tarea se nos simplifica gracias a poder ver el tamaño de cada ventana en el titulo de ventana. Si bien puede parecer una tarea sencilla, no es tan directo como simplemente resizear nuestras ventanas hasta que cada una llegue a una de las resoluciones mencionadas anteriormente. El chrome de nuestro explorador ocupa cierto espacio de la resolución mostrada, asi que lo que tenemos que lograr es llegar a los tamaños “reales” a los cuales nuestras resoluciones se muestran pixel por pixel en pantalla. Haciendo algunas impresiones de pantalla y algunos cálculos, en mi caso llegué a estos resultados:

• 256×354
• 336×274
• 416×274
• 496×354

Todo lo que mencionamos, agregando una página de referencia del original en Firefox con Firebug y nuestro código en Dreamweaver, puede parecerse a esto.

Ahora que ya tenemos nuestro workspace definido, podemos empezar a codear.

Layout fluido

Como vimos antes, no todos los celulares tienen la misma resolución. Una de las mejores soluciones en este caso es aplicar un layout flexible (tema brevemente mencionado en 800×600, resoluciones de pantalla y el ancho de la Internet)

Tenemos que dejar de pensar en pixeles para nuestros anchos y empezar a pensar en porcentajes. Nuestros html, body y wrapper van a ahora tener un width: 100%; y los elementos en página tendrán posiciones dependientes del ancho de la página.

Selección de contenido

No todo lo que se puede mostrar en un espacio de 1024px se puede mostrar en 240px, esto significa que debemos elegir que es importante ser mostrado en pantalla. Por ejemplo, si nuestro layout consiste de dos columnas, quizás la segunda no sea tan necesaria y podríamos darle la propiedad de display: none.

Linearización del contenido

Un layout de 3 columnas no va poder ser mostrado en el espacio que tenemos. Quizás decidimos ocultar una columna y nos quedan dos. Ahora tenemos que linearizar el contenido, es decir, probablemente la segunda columna simplemente va a seguir al contenido principal en vez de sentarse a su derecha o izquierda.

Una galería de imágenes que consiste de divs flotados probablemente va a verse mejor perdiendo la propiedad de flotar y además adquiriendo anchos en porcentajes, presentándose de forma linear, una debajo de la otra.

Optimización de imágenes

Diseñando para handheld debemos ser aún mas conscientes del tamaño de nuestro contenido. Elementos que se repiten en todas las páginas, como headers, deben ser cambiados por versiones mas pequeñas y livianas. Esto es bastante fácil si las imágenes de nuestros headers o elementos a cambiar están asignados por background-image desde CSS.

Como ejemplo, en la página principal de Pixeina, al cambiar header “normal” por una versión para handheld, se ahorraron 9,26kb. En el caso del carousell de index.html se cambiaron todas las imágenes que lo componen por una única imagen estática, ahorrando 68,51kb

Consideraciones tipográficas

El soporte de CSS puede no ser tan extenso en algunos celulares. Tenemos que tratar de minimizar nuestras declaraciones tipográficas. Una opción segura es limitarnos a declarar simplemente font-size y para enfatizar font-weight:bold;

Si por ejemplo nos aventuramos a declarar propiedades como font-variant:small-caps; podemos encontrarnos con resultados que no sean exactamente lo que esperamos.

Llamar por teléfono desde la página

Existen dos tipos particulares de links que son realmente útiles en el contexto móvil. De la misma forma que podemos usar mailto:somemail@place.com también podemos usar tel:098765432 y sms:098765432, puestos en contexto tendríamos algo así:

<a href="tel:098765432">call me!</a>
<a href="sms:098765432">send me an sms!</a>

Cuando el usuario móvil accede a estos links, el celular directamente intenta llamar o mandar un sms. Claro que esto es útil solamente en el contexto handheld, lo más útil sería hacer algo como:

<a href="tel:098765432" class="hHeld">call me!</a>
<a href="sms:098765432" class="hHeld">send me an sms!</a>

Y por css declaramos a.hHeld{display:none;} en nuestra hoja de estilo para screen asi un usuario que accede desde una computadora no ve estos links.

Benchmarking

Debemos probar nuestro diseño en diferentes tipos de celulares para asegurarnos que el layout y la tipografía se vean de la forma correcta. Tratar de conseguir celulares que cumplan con tener las resoluciones que vimos anteriormente.

Si bien en nuestro proceso de adaptación pudimos ver nuestro diseño en 4 resoluciones diferentes, esto no es una emulación sino mas bien una referencia.

Conclusión

Este fue un acercamiento a adaptar una página web a handheld usando CSS y no pretende ser una explicación extensiva del proceso. Tampoco hay una serie de pasos predefinidos para lograr este resultado, como tampoco los hay en el diseño web.

Si bien actualmente pocas páginas están adaptadas a handheld, se debe reconocer que el acceso a internet por móviles será cada vez mayor y es algo a tener en cuenta. Además nos da la excusa de poder codear un poco más :)

Espero que esta introducción les sirva en su adaptación y si tienen alguna duda pueden comentarlo en este mismo artículo.

Este artículo fue publicado el Sábado, Abril 25th, 2009 a las 9:26 pm y es de la categoría CSS, XHTML, Internet, Tutoriales. Podes mantenerte al tanto de las respuestas a este artículo a traves del RSS 2.0 feed. Podes dejar un comentario, o un trackback desde tu sitio.