Web en Dispositivos Móviles parte 4

Bueno ahora la parte 4 de este tema interesante y para darle continuidad al post: Web en Dispositivos Móviles parte 3.  En este último les comenté referente a una presentación que tiene como base la utilización de @media queries.

Ahora bien, continuando con la investigación para llevar un sitio web a un dispositivo móvil que fue lo que detonó toda esta secuencia, me topé con una referencia más para @media con anotaciones referentes a iPhone 4 y iPad que creo importantes compartir.

Es importante resaltar que @media es una propiedad de CSS3. Como lo menciona en: CSS3 Media Queries. En este artículo se muestra un DEMO donde al cambiar de tamaño el browser se producen cambios de color que están definidos por los CSS.

Para iPhone
@media screen and (max-device-width: 480px) {
    .class { background: #000; }
}

Para iPhone 4
Es necesario establecer un CSS específico:
<link href="iphone4.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" rel="stylesheet" type="text/css">

Para iPad
Detectar cuando es landscape o portrait
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Ya el diseño depende de cada quien, al final del día esto sigue siendo código y más formas de hacer que el código sea interpretado de forma correcta. Pero tal vez algunos de ustedes, al igual que yo, tengan sitios muy grandes además de tienen muchas monerías (flash) en ellos, que el sólo hecho de pensar en como hacer que se vea bien en un móvil produce dolores de cabeza.

Tuve chance de leer CSS Media Query for Mobile is Fool’s Gold que me parece muy interesante y mas si recordamos la segunda presentación Rethinking the Mobile Web. No podemos tomar un sitio que fue diseñado para computadoras normales y tratar de apretarlo o apachurrarlo hasta que quepa en un dispositivo móvil.

Es mejor, tal vez sea más trabajo, considerar la creación de un sitio paralelo que sea enfocado 100% a los dispositivos móviles. Partiendo del principio que no se lee igual, no debe tener tanto contenido, ni debe tener flash y mucho menos perros bailando en la portada.

De esta manera el sitio original permanecerá intacto, cumpliendo con el objetivo: verse bien en Safari, Fire Fox, Opera, Chrome, IE6, IE7, IE8 y hasta IE9 (todos estos para el caso de México). Y un sitio exclusivo para: iPhone, iPhone 4, iPad, Blackberry, Android, etc. Cada uno con diferente sitemap y contenidos enfocados al tipo de lector.

Saludos