Web Móvil: Pantallas

>echo El problema de hacer una web que se vea bien en dispositivos móviles, principalmente teléfonos, es ajustar tanto la estructura, como el contenido, a las pequeñas pantallas/resolución de estos aparatos.
No es fácil detectar mediante el navegador (o un script por ejemplo) las caracteristicas de todos los terminales. Y tampoco es fácil implementar esta técnica.

Para alguien que quiera desarrollar una web para el móvil, por ejemplo, y no tenga mucha experiencia en programación o los medios para aplicar las técnicas necesarias, una buena idea es hacer una versión generalista. Es decir, pensar en una media de la resolución más usada por su público objetivo y hacer que la web se adapte bien a ella, eso, si permitiendo algunso ajustes, para quien no tenga esa resolución concreta.
Para hacerlo, se pueden usar porcentajes -Si es posible-, en vez de pixels fijos. Igual con los tamaños de las fuentes, por ejemplo.

Resoluciones típicas
Mostrar algo, una imagen o una web, en tanta variedad de resoluciones posibles puede ser muy complicado. Observad que variedad de posibilidades, tomando solo las posibilidads más comunes.

Resoluciones típicas de móviles y PDAs
Resoluciones típicas de móviles y PDAs

El primer número es el ancho de la pantalla, estando esta en vertical (uso normal del móvil/PDA). Algunos dispositivos/navegadores permiten cambiar la orientación de la pantalla para facilitar la navegación. El ancho es un punto muy importante, para evitar le scrolling horizontal, mucho más molesto que el vertical, incluso cuando navegamos en un PC.

  • A: 176×220. Esta es la resolución de las gamas medias-bajas de móviles y PDAs.
  • B: 240×320. Esta es la resolución de las gamas medias-altas de móviles y PDAs
  • C: 256×192. Esta es la resolución de cada una de las pantallas de la Nintendo DS
  • D: 320×480: Esta es la resolución de la pantalla del Iphone / iPod Touch
  • E: 480×272: Esta es la resolución de la pantalla de la PSP
  • F: 480×640: Esta es la resolución de los móviles y PDAs de gama alta.

Hay algunas resoluciones mayores, como 480×800, em algunos dispositivos nuevos y de gama muy alta. Por lo que tardarán en popularizarse. Quizás la que ahora sea más común y/o útil al proposito de diseñar una web para el móvil, sea la resolución de 240×320. Esta medida está bastante extendida y se puede ajustar una web para las resoluciones inmediatamente superior e inferior, sin demasiados problemas, ampliando la gama de dispositivos en los que nuestra web podría mostrarse. Además 240×320 es la mitad de 480×640, lo que le da una relación directa, por ejemplo a la hora de escalar imágenes (o usar porcentajes). Y tambien guarda cierta proporcionalidad con el ancho de otros dispositivos, como la PSP.

UPDATE: Al parecer 320×480 es también la resolución del nuevo (y primer) telefono con Google Android, el T-Mobile G1.