Diseño de páginas web para móviles

Que el iPhone es una revolución está fuera de cualquier duda, y que el futuro de internet pasa por los móviles es algo que me temo irremediable. Si tenemos en cuenta que aquí quien marca el camino a seguir es Apple (no hay más que ver la cantidad de clones que le han salido al iphone) tenemos un resultado claro, «tenemos que aprender a diseñar webs para iPhone«.

El requisito fundamental para comenzar a diseñar una web para móvil es que las páginas han de desarrollarse en código separado del diseño, usando XHTML + CSS.

Normalmente diseñamos para resoluciones de 1024 de ancho, por lo que para que no nos de scrol, hacemos webs de 980px de ancho, así con la barra lateral no sobrepasamos los 1024px máximos.

En el caso del iPhone como sabéis podemos inclinar la pantalla y verlo en modo apaisado, los dos anchos máximos pues (retrato y apaisado) son 320px y 480px siendo la resolución de 160 dpi.

A continuación vamos a ver cómo configurar la apariencia en pantalla para iphone:

VIEWPORT – iPhone tiene una particularidad, podemos hacer zoom sobre la página, pues bien, la forma de configurar este zoom es la siguiente:

<meta name = "viewport" content = "
width = 1100,  <!-- Indicamos el tamaño inicial, por defecto es 980. El rango es de 200 a 10.000 -->
user-scalable = yes,  <!-- Indica si el usuario puede ampliar las fotos yes/no -->
initial-scale = 0.4,  <!-- Indica la escala inicial con la que entramos. -->
maximum-scale = 1 <!-- factor máximo de escala. El rango es de 0 a 10 -->
minimum-scale = 1 <!-- factor mínimo de escala. El rango esd de 0 a 10 -->
"/>

Si queremos adaptar el ancho de la página al ancho del dispositivo, usaremos el siguiente valor width = device-width

Para hacer la navegación más fluida, aunque exista la posibilidad de navegar con zoom, se aconseja no hacer botones menores de 40x40px. Por supuesto que estos botones igual que las imágenes han de ser ligeros de peso para una rápida descarga y separarlos adecuadamente para no ser accionados por error.

También tenemos que tener en cuenta que por defecto el usuario va a usar su iphone en vertical, no forzarle a que tenga que colocarlo horizontal para poder ver el contenido.

Bueno, como veis son sólo un par de pinceladas, únicamente para mostrar que ante nosotros hay un campo enorme de posibilidades. Por un lado las aplicaciones que podemos diseñar, en las que hay que diseñar no sólo interface si no que además tenemos la posibilidad de ir más allá y diseñar también los movimientos de esa interface. Por otro lado tenemos todo un reto a la hora de diseñar webs en formato para móviles, teniendo en cuenta las conexiones más lentas, el ancho de pantalla,…. En definitiva, un campo de investigación muy interesante y lleno de futuro.

Para que vayáis viendo vuestros primeros resultados, os dejo dos aplicaciones para comprobar cómo se verá vuestra web en un iPhone (no es un emulador de iphone), para Mac www.marketcircle.com/iphoney/ y para usuarios Windows iphonetester.com