Consejos para diseñar pensando en 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 Safa.

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.

Etiquetas: ,

btemplates