Responsive Design: la misma página web para ordenadores, smartphones e Ipads

El móvil a partir del año que viene ocupará el primer puesto en cuanto a visitas a páginas web en comparación con ordenadores normales. Por eso es importante diseñar páginas webs también para móviles o por ejemplo IPADs. Para eso ya no hace falta crear una aplicación separada. Hoy en día es posible aprovechar la misma página web para pantallas grandes y móviles pequeños.

Responsive Design responde a la tendencia de ver una página web en muchas resoluciones en muchos diferentes dispositivos. Un móvil como el Iphone 4 tiene una resolución de 640×960 píxeles. La pantalla media de un ordenador tiene una resolución de 1280 x 800 pixeles y el IPAD tiene, como muchas pantallas más antiguas, una resolución de 1024×798 pixeles. Las páginas web suelen ser diseñadas con 960 pixeles de ancho para que quepa al menos en una pantalla normal.

No se trata solamente de la resolución, sino también del tamaño real de la pantalla; dos cosas que muchas veces se toman por la misma. En el caso de un Iphone caben casi 13 píxeles en un millimetro, en caso del ordenador con qué trabajo yo caben solamente 3,6 píxeles en un millímetro. Quiere decir que se ve la misma página web, sin hacer zoom, en un Iphone casi 4 veces más pequeña. Además de eso usamos el smartphone en el tren o metro y navegamos con solo un dedo. Son razones de dedicarle tiempo al diseño y usabildad de una página.

Hay algunas ‘plantillas’ (themes) en Drupal, Adaptive Theme en Omega, que te pueden servir para empezar hacer una página web en Drupal con Responsive Design. Nuestra página web tiene Responsive Design, a base de la plantilla Omega. Puedes ver el efecto haciendo más pequeña la pantalla.