En este blog de diseño web, hemos tratado alguna vez el diseño enfocado a Smartphones, en concreto a iPhone. En esta ocasión pretendo hacer un post que pueda ser un recopilatorio y fuente de documentación para el diseño para iPhone e iPad.

Además de consejos de diseño, podréis descargaros plantillas para diseñar tanto en iPhone como en iPad.

DISEÑO PARA IPHONE E IPAD

El diseño web para iPhone y iPad tiene unas particularidades que le hacen distinto del diseño online convencional. Esta diferencia viene marcada sobre todo por la distinta configuración de resolución a la que nos enfrentamos.

El tamaño de pantalla es menor, esto significa que tenemos que cuidar mucho más los espacios, la forma de colocar la información, la forma de navegar, incluso tenemos que tener en cuenta que los enlaces se activan con el dedo, no con un cursor, por lo que además tenemos que tener en cuenta que los botones tienen que tener un tamaño mínimo para poder ser accionados.

Las reglas básicas son las mismas, seguiremos haciendo nuestros diseños en photoshop a una resolución de 72 ppp, sin embargo en lugar de contar con un ancho estándar de 990px de ancho (para que no provoque scroll en resoluciones de pantalla de 1024px), nos tendremos que adaptar a las nuevas medidas que aquí os apunto:

Configuración de Pantallas

iPhone 3.0

• Resolución de pantalla: 72 ppp
• Tamaño de pantalla: 320 x 480 px
• Tamaño de icono: 57 x 57 px

iPhone 4.0

• Resolución de pantalla: 72 ppp
• Tamaño de pantalla: 640 x 960 px
• Tamaño de icono: 114 x 114 px

iPad

• Resolución de pantalla: 72 ppp
• Tamaño de pantalla: 768 x 1024 px
• Tamaño de icono: 72 x 72 px

 

Gráficos e imágenes

Las conexiones de alta velocidad, nos han hecho olvidar «un poco» el peso de las imágenes y hemos podido ver como imágenes de tamaño hasta hace poco impensable, cubren los backgrounds de numerosas webs.

Sin embargo, cuando se trata de diseñar para móviles o tabletas, el abuso de peso de imágenes puede originarnos serios problemas.

Existe una gran variedad de velocidades de conexión, planes de acceso limitados, etc. Esto unido al tamaño más reducido de pantalla, ha generado un tipo de usuario muy distinto al habitual. Se trata de usuarios más propensos a disculpar una navegación más lenta y desgraciadamente habituados a ser «expulsados» de numerosas webs, por no estar preparadas para estos dispositivos.

Aunque iPhone gracias a su Safari, se traga prácticamente todo, la navegación en una web que no está adaptada a estos tamaños puede llegar a ser una muy mala experiencia.

Tenemos pues dos principales motivos para hacer las cosas bien, optimizar los pesos por culpa de las conexiones, y adaptar los tamaños a las resoluciones más pequeñas.

El tamaño mínimo para poder accionar un botón, tanto en iPhone como en iPad debe ser lo suficientemente grande como para no dar problemas al usuario a la hora de activarlo. En cualquiera de los diferentes tipos de dispositivo, Apple recomienda que nunca el tamaño de un botón sea menor de 44 x 44 px

¿Podríamos hacer tamaños más pequeños?, por supuesto que si, pero en ese caso tendríamos que dejar alrededor de dicho botón el espacio suficiente como para no accionar por error otro botón con el dedo.

¿Qué formato de archivo debo utilizar para los gráficos?

Todos los elementos gráficos que utilizaremos para construir una aplicación  se exportan en Portable Network Graphics (. PNG).

Técnicamente, el iPhone puede mostrar otros formatos de archivo, pero los PNG se optimizan automáticamente el SDK de iOS, por lo que se convierte en el formato perfecto.

Esto se aplica a todos los elementos (botones de navegación, barras, etc) y cualquier otro tipo de imagen que coloquemos en la aplicación.

Si se trata de una web, seguiremos los mismos criterios que hasta ahora, jpg, gif y png.

Contenidos para iPhone

Debido fundamentalmente a las lentas y caras conexiones (al menos en España) y al reducido tamaño de pantalla, el contenido para este tipo de dispositivos debe de estar adecuado a su tamaño. Evidentemente no es lo mismo un iPhone que un iPad, este último tiene prácticamente las mismas características que un netbook, por lo que el contenido no tiene por qué ser distinto.

El contenido web de un sitio pensado para iPhone o cualquier smartphone, tiene que ser más conciso y directo que en una web normal. El usuario de este tipo de terminal suele navegar por necesidad, para encontrar o utilizar algo.

Así mismo, el contenido publicitario queda reducido a la mínima expresión en comparación con una web convencional. Normalmente se está utilizando una página de inicio que muestra la publicidad y que bien automáticamente, pasados unos segundos, o a través de un botón cerrar, da paso al contenido principal. También se está usando mucho los faldones a pie de diseño, de modo permanente o como una ventana que se muestra y se esconde.

En definitiva, podemos decir que tanto la publicidad como los contenidos son más escasos que en el formato convencional, sin embargo, al ser más directos, las empresas obtienen un canal importantísimo para difundir sus servicios.

Detección de dispositivo iPhone, iPad, iPod

No podemos dar una dirección al usuario para ver la web normal y otra para ver la web para iPhone, lo que hacemos, es colocar un código en la web para detectar el tipo de terminal que está intentando conectarse. De ese modo, podemos, cuando se trata de un terminal iPhone, redirigirle a su página especial.
En este blog de diseño web, podréis encontrar un post específico con el código necesario para poder detectar la navegación con iPhone, iPad o iPod.

 

Descárgate GRATIS las plantillas del iPhone 4 e iPad

• PLANTILLAS PARA IPHONE 4  –  DESCARGAR PLANTILLA
• PLANTILLAS DE ELEMENTOS PARA IPHONE 4 – DESCARGAR PLANTILLA
• PLANTILLAS PARA IPAD –  DESCARGAR PLANTILLA
• PLANTILLAS DE ELEMENTOS PARA IPAD – DESCARGAR PLANTILLA