Como adaptar una web para el iPhone paso a paso

Antes de nada

Antes de nada, conviene saber que el iPhone OS  no ejecuta un mini navegador web, sino que ejecuta Safari Mobile, un navegador completo con algunas modificaciones el cual utiliza el motor de renderizado de Safari. Por tanto, cualquier página que se visualice correctamente en Safari para Windows o Mac, se visualizará correctamente en el iPhone sin hacer ninguna modificación.

Sin embargo, podemos optimizar y mejorar la navegación de nuestra web para el iPhone.

El iPhone tiene una pantalla pequeña, por tanto es necesario ocultar elementos innecesarios de la página. Mientras más elementos existan, más tiempo pasará el usuario moviendose por la página y haciendo zoom para ver mejor los elementos.

Lo mejor es adaptar nuestra página para mostrar toda la información en una sola columna.

Otro punto a tener en cuenta es que los usuarios que nos visiten desde el iPhone lo harán casi siempre a través de una conexión 3G. Por tanto será conveniente optimizar las imágenes para que ocupen lo menos posible y en la medida de lo posible no situarlas en la parte superior, ya que de esta forma el usuario tendrá que hacer scroll para encontrar el contenido. Una excepción a esto son las galerías de fotos.

Puntos a evitar

Al diseñar una web para iPhone (y en general para los dispositivos móviles) hay que evitar una serie de elementos:

• Flash:

Safari Mobile al igual que otros navegadores de dispositivos móviles no soporta Flash. Por tanto hemos de evitarlo en nuestras páginas.

• Frames:

Los frames son una tecnología obsoleta, pero además, tenemos que tener en cuenta siempre el reducido tamaño de la pantalla, lo cual los hace inmanejables y la ausencia de barras de desplazamiento en los frames en el navegador Safari Mobile.

• Tablas:

Es mejor usar bloques, ya que las tablas hacen que la página cargue más lentamente, puesto que el navegador tiene que descargar todo el contenido de la tabla antes de empezar a renderizarla.

• Tamaños fijos en los elementos:

Es mejor usar tamaños relativos, ya que el contenido debe adaptarse a nuestro viewport (más abajo) y hemos de tener en cuenta que su tamaño puede variar si cambiamos de posición el iPhone.

Medidas en SafariMobile

En posición vertical el area visible que nos ofrece Safari Mobile es de 320x356, mientras que en posición horizontal (o apaisada) el area visible es 480x208.



Normalmente el cuadro de busqueda no se muestra a menos que el usuario desplace el viewport, así que esto nos ofrece 60px más de alto.

Viewport

El viewport es el tamaño que el iPhone le da una página normal. Determina como se muestra una página y el texto. Este viewport puede ser mayor o menor que el area visible de la pantalla.

Anchura de Viewport = 980px

Anchura de Viewport = 320px

Al hacer zoom el usuario lo que hace es escalar el viewport, pero no cambiar su tamaño. Sin embargo, al variar la orientación del iPhone se ajustará automaticamente la altura y la anchura del viewport.

Anchura de viewport = 320px y escala = 1.5

El ancho por defecto del viewport es de 980 pixeles y utiliza esta anchura para deducir la altura de la página. Safari Mobile nos da una forma de cambiar el tamaño del viewport para ajustarlo a nuestras necesidades y será una de las primeras cosas que haremos al diseñar una página para el iPhone.

Más información sobre el viewport

Hoja de estilos optimizada para el iPhone

Existen varias formas de adjuntar estilos para la navegación en el iPhone, sin que afecten al resto de navegadores. Básicamente se engloban en dos, usando el User Agent y CSS.

Con el User Agent se puede añadir hojas de estilo usando javascript o utilizar las condiciones en la sección head de la página. Sin embargo es preferible utilizar las capacidades de CSS3 para especificar estilos u hojas de estilo especiales para Safari Mobile. Por ello es la técnica que vamos a usar en este tutorial.

Usando la propiedad "media" de CSS podemos especificar reglas y estilos que sean específicos para el iPhone.

Así podemos usar la expresión "max-device-width: 480px" para indicar que una hoja de estilos se muestre únicamente en dispositivos de pantalla cuya anchura máxima sea 480 pixeles. Utilizamos 480 pixeles porque es la anchura máxima en pixeles que muestra un iPhone en posición horizontal.

Así, incluiremos todos nuestros estilos personalizados en una hoja de estilos especial y la incluiremos en el "head" de la siguiente forma:

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

De la misma forma podemos especificar que una hoja de estilos se muestre en dispositivos cuya pantalla sea anchura superior a 480 pixeles usando la expresión "min-device-width: 481px":

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

O, por otro lado podremos añadir las reglas de estilo en la propia página o en otra hoja de estilos usando bloques de CSS:

<style type='text/css'  media='screen'>
....
@media screen and (max-device-width: 480px) { 
  p{
    ...
  }
}
....
</style>

Adaptando una página web

En este tutorial voy a mostrar los pasos realizados para optimizar el blog de TheProc.es para el iPhone. Puedes ver el resultado directamente accediendo desde tu iPhone o iPod Touch a esta misma dirección.

Nuestro diseño antes del proceso es el siguiente:

Posición vertical

Posición horizontal

Sin hacer nada se visualiza perfectamente en el iPhone.

Configurando el viewport

Usaremos el meta tag "viewport" para cambiar la anchura del viewport para que se ajuste a la pantalla de iPhone automáticamente, ya sea en posición vertical o en posición horizontal. Además, vamos a bloquear el zoom, ya que no será necesario en el nuevo diseño.

Añadiremos en la sección head de la página:

<meta name="viewport" content="width=device-width, user-scalable=no">

Adjuntando la hoja de estilos

Lo siguiente es crear una hoja de estilos personalizada para ser utilizada únicamente por el iPhone (o cualquier dispositivo móvil cuya pantalla tenga una anchura de máximo 480 pixeles).

Añadimos la siguiente linea en la sección "head":

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

Es importante que esta linea esté al final de la sección head, ya que si añadimos otra hoja de estilos después de esta nuestros estilos podrías ser sobreescritos.

Además hay que tener en cuenta la especificidad de nuestros selectores.

Por si acaso voy a incluir !important en cada propiedad de la hoja de estilos iphone, para que esta prevalezca sobre las demás.

Estructura de la página

A partir de ahora ya podemos añadir propiedades de css en la hoja de estilos iphone.css.

Primero observamos la página y decidimos que elementos vamos a mostrar y cuales no:



Para limpiar la página, eliminaremos el menú de categorías, el pié de página y la barra lateral.

Añadiremos lo siguiente a la hoja de estilos "iphone.css":

/* Eliminamos las categorías */
  #cat-nav{
  display:none !important; 
}

/* Eliminamos la barra lateral */
#sidebar{
  display:none;
}

/* Eliminamos el pié de página */
#footer{
  display:none;
}

No queremos que sea incomoda de leer así que vamos a usar una propiedad de CSS implementada por Safari Mobile para aumentar el tamaño del texto, -webkit-text-size-adjust. Si no decimos nada su valor será auto, es decir, el tamaño normal que tenga la página. Pero podemos especificarle un valor relativo. En nuestro caso vamos a duplicar su tamaño.
Añadimos lo siguiente:

html{
  -webkit-text-size-adjust: 200% !important;
}

También vamos a expandir el contenido, es decir, el listado de artículos. Para ello modificaremos el tamaño del listado y eliminaremos bordes, margenes y rellenos. Añadimos lo siguiente:

/* Eliminamos rellenos */
#main-inner{
  padding:0 !important;
}

/* Expandimos el contenido, eliminamos bordes, margenes y rellenos. */
#content{
  width:100% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

Nuestro objetivo es reducir el contenido visible y eliminar espacios innecesarios. Recordad que la pantalla del iPhone tiene 480px de máximo. No queremos desperdiciar pixeles dejando espacios en blanco.

El siguiente paso es expandir los artículos.



Lo que vamos a hacer es eliminar la imágen del enlace, el número de comentarios y el botón de leer más.

Añadiremos:

/* Ocultamos imágen */
.preview .post_image{
  display:none !important;
}

/* Ocultamos número de comentarios */
.preview .coment_numero{
  display:none !important;
}

/* Ocultamos enlace de leer más */
.preview .read-more-link{
  display:none !important;
}

Y ahora expandimos los elementos del artículo. Tambien aumentaremos un poco el tamaño del texto:

/* Expandimos el título */
.preview h2.title{
  float:none !important;
  width: 100% !important;
  line-height: 100% !important;
}

/* Aumentamos el tamaño de la información del autor */
.preview p.autor{
  font-size: 125% !important;
}

/* Aumentamos el tamaño de la introducción */
.preview div.text{
  font-size: 150% !important;
}

Resultado

A continuación se puede ver el resultado:

Posición vertical

Posición horizontal

Eso es todo, podeis acceder a http://theproc.es desde un iPhone o iPod Touch y ver el resultado final.