Con la salida del Ipad a los diseñadores Web se nos ha encomendado otra tarea: Hacer un Site compatible para este nuevo dispositivo, como ya lo hicimos para Iphone y otros dispositivos. Seguramente te estarás preguntando, es realmente necesario adaptar el día de hoy mi sitio a este nuevo dispositivo? Las respuestas pueden ser variadas por el SÍ o por el NO.

ipad Consejos para diseñar pensando en Ipad

Tengamos en cuenta que en el mercado hispano la incidencia del Ipad no sera notable hasta (me animaría a decir) en un par de años. Al día de hoy solo se han despachado cerca de 300.000 dispositivos, por lo que esta incidencia global es mínima.

Por otro lado esta la usabilidad, esa palabrita que tanto molesta (a varios). No hay nada mas frustrante que entrar a una pagina con X navegador o dispositivo y tener que hacer malabares para poder leer una entrada. Es aquí donde diseñar user-friendly trae sus méritos: Brindar soporte para la mayoría de los navegadores y dispositivos (en este caso).

Aspectos técnicos de Ipad

Ipad cuenta con una resolución de 1024×768 en landscape y con su respectiva resolución al rotarlo. Lo cual es un punto a nuestro favor, ya que la mayoría diseñamos Sites teniendo en cuenta esta resolución de pantalla.

Otra cosa muy importante que debemos saber, que Ipad, como su hermanito Iphone no soportan Flash. Se acuerdan cuando decía que teníamos que alejarnos lo más posible de esta tecnología? Bueno, si me hicieron caso, esto no nos demandara mayor esfuerzo alguno, ya que no usamos Flash. Pero si no me hiciste caso y estas trabajando en Flash, es un buen momento para que te hagas amigo de HTML5 CSS3 y Javascript

Primeros pasos

Si diseñaste tu sitio siguiendo las practicas modernas: XHTML, CSS3, HTML5,etc. probablemente no tengas que arreglar nada ya que tu sitio es perfectamente amigable. Lo único que debes tener en cuenta es el ancho de tu container principal, que no debe exceder el viewport de Ipad. Muchos de nosotros nos guiamos trabajando con un sistema de grilla, donde nuestro container es de 960px, pixeles mas pixeles menos.

Tambien tenemos que tener mucho cauidado al usar al propiedad position:fixed dado que no se comporta de manera uniforme dentro de Safari

Ipad y la orientacion

Aquí es donde comienzan los primeros dolores de cabezas, son pequeños, pero dolores al fin. Al ser un dispositivo que permite rotación de pantalla, tenemos que tratar a Ipad como dos dispositivos completamente distintos, pero iguales. Como hacemos esto? Fácil, con lo que se llaman CSS3 media queries, para aplicar distintas reglas dentro de una misma hoja de estilo con @media o haciendo una llamada condicional dentro de nuestro header.

Usando el método @media, dentro de nuestra hoja de estilo podemos hacer el siguiente markup

@media only screen and (max-width: 999px) {
  /* aquí reglas donde el ancho es menor a 1000px */
}
 
@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* reglas para Ipad en modo landscape (768px) */
}
 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* reglas iPhone, Android y otros dispositivos */
}

Estos condicionales indican que si se trata de un agente donde su viewport es menor a 1000px (Ipad en landscape) se aplique las reglas dentro de esta querie. De tratarse de un agente con un viewport de 768px (Ipad en su rotacion para este ejemplo), esas reglas, y el mismo procedimiento para dispositivos donde el width es igual o menor a 320px.

De esta forma nos aseguramos de brindar un estilo determinado para cada viewport.

Recursos

Si no dispones de Ipad tenemos un par de opciones para emular este dispositivo en nuestro escritorio. Una de las formas mas simple es dirigirnos a Ipadpeek e ingresar la dirección de nuestro sitio y tendremos una idea de como se ve nuestro sitios, junto con la opción de rotar el dispositivo.

Otra forma más completa y recomendable a la hora de diseñar pensando en Ipad, es cambiar nuestro user agent, es decir que el navegador que estamos utilizando nos reconozca como si estuviéramos navegando con Ipad.

El user agent para Ipad es el siguiente

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Dentro de Safari solo tenemos que crear un nuevo user agent con los datos brindados mas arriba, desde la pestaña de Desarrollo. Y en el caso de Firefox podemos usar el plugin User Agent Switcher para lograr la emulación.

Links recomendados

Si queres leer un poco sobre este tema, te dejo los siguientes links donde encontraras mucha información para desarrollar pensado en Ipad.

Espero que encuentren esta información útil y se animen a comenzar a diseñar pensando en las tecnologías del día de hoy