Diseñando sitios amigables para el iPhone

Publicado el 12 de Febrero, 2008

El iPhone se está convirtiendo en el gadget del momento, ganando cada día más terreno en navegadores móviles. ¿Estás listo para diseñar un sitio amigable para el iPhone?

iPhone El iPhone ha sido una gran innovación, no solo por todas las características como teléfono y semi-PDA que es, sino por que finalmente tenemos un navegador móvil (una versión reducida de Safari) con el cual la navegación es mucho más cómoda y la mayoría de sitios existentes se pueden consultar desde este sin mayores impedimentos.

Para saber cuan amigable es un sitio para el iPhone, podemos definir cinco niveles de compatibilidad:

Incompatible

Sitios que no funcionan en el iPhone porque usan Flash, SVG o alguna otra tecnología que MobileSafari no soporta. Estos sitios no pueden ser vistos desde el iPhone, o resultan muy tediosos de leer porque tiene columnas muy anchas.

Compatible

La mayoría de sitios que están hechos “como debe ser” serán compatibles con el iPhone, si no presenta alguno de los problemas mencionados anteriormente. El hecho de que sea compatible con el iPhone se refiere a que por lo menos sea usable, pero aún así se necesite hacer zoom en ciertas áreas para leer la letra pequeña.

Amigable

Usando algunas técnicas un sitio puede mejorar la forma en que este se despliega en el iPhone, entre ellas encontramos:

Establecer el ancho máximo de la página (usando un viewport).
No usar columnas más anchas que 320 píxeles para una vista en vertical, o 480px para una vista en horizontal.
Acomodar las columnas en bloques de tamaño apropiado.
Mejorar algunos estilos y tamaños de letra para el iPhone.
Usar enlaces apropiados que el iPhone soporta.

Optimizado

Sitios que detectan el iPhone según las cabeceras HTTP, enviando un CSS diferente o incluso una página diferente solo para el iPhone. El iPhone soporta CSS3 y unas gráficas especiales de Safari 2 y 3, llamadas Canvas, de las cuales se puede tomar provecho.

Webapp

El mayor nivel en el que se puede lograr que un sitio sea amigable para el iPhone, es con una Webapp. Una Webapp imita la funcionalidad y apariencia de las aplicaciones nativas del iPhone, limitan el tamaño de la página a 320×480px (o 480×320px), hace uso de Canvas, y muchas funciones AJAX.

Con una webapp estaremos dedicando una parte del sitio para que sea exclusivamente para el iPhone. Según estas definiciones y el tipo de sitio web que tengamos, podemos decidir hasta qué punto queremos llegar. Obviamente hacer una Webapp requiere mucho más tiempo y esfuerzo que hacer un sitio amigable con el iPhone.

Recursos para hacer un sitio Amigable u Optimizado

Existen diferentes técnicas con las cuales podemos mejorar la experiencia del usuario del iPhone en nuestro sitio, la primera de ellas es definir el tamaño del Viewport de la página. El Viewport se refiere al área donde será mostrado el documento (en el caso del iPhone, la pantalla de 320×480px).

El Viewport que típicamente usaremos para el iPhone será:

<meta name="viewport" content="width=320;
     initial-scale=1.0; minimum-scale=1.0;
     maximum-scale=1.0; user-scalable=1;"
/>

El siguiente paso será detectar si el agente se trata de un iPhone y modificar la página o el CSS que vamos ha generar. Lo podemos conseguir desde las cabeceras HTTP, como este ejemplo en PHP:

if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
       /* iPhone user */
}

También podemos usar una expresión CSS3 para que el iPhone use otra hoja de estilos:

<link media="only screen and (max-device-width: 480px)"
	href="iPhone.css" type="text/css" rel="stylesheet" />

Al enviar un CSS especial para el iPhone, debemos pensar en que el estilo de nuestra página sea bastante sencillo y legible, evitar saturar de elementos, y hacer los enlaces lo suficientemente grandes para que el usuario no tenga problemas para seguirlos. Siempre hay que tener en cuenta las dimensiones y el área real de contenido que disponemos en Safari.

Nuestro siguiente paso será aprender a usar algunos enlaces especiales que el iPhone reconoce, los eventos javascript que podemos usar, los tipos de letra disponibles, y probablemente los tipos de archivos que MobileSafari puede manejar.

iUI, Framework para desarrollar una Webapp

Si nuestro interés es el desarrollar una Webapp, la mejor herramienta que podemos utilizar es iUI un framework gratuito que nos permite imitar la interface y la funcionalidad de las aplicaciones nativas del iPhone.

La gran ventaja de iUI es que este se encarga de dar los estilos a la página, manejar las peticiones AJAX y eventos que sucedan mientras el usuario navegue; lo único que debemos hacer es generar el código HTML necesario para que iUI reconozca las diferentes partes de nuestra Webapp.

Básicamente tenemos que generar ciertas estructuras con DIVs y ULs, junto a ciertos nombres de clases que darán los estilos necesarios y permitirán al iUI decidir qué acción tomar.

Existen 2 ejemplos que demuestran las capacidades de iUI, un mockup de Digg y un reproductor de música que nos muestran como cargar páginas adicionales por medio de peticiones AJAX, crear la navegación a la partir de una lista y la barra de herramientas, usar diálogos y formularios.

Desarrollar y diseñar sitios para el iPhone no es complicado si sabemos lo básico, con un poco de tiempo y esfuerzo podemos hacer que un sitio se vea bien en el iPhone; o incluso desarrollar una Webapp que aproveche todas las características del iPhone.