Espacio limitado para recursos
Hay que tener cuidado y no creer que esto de diseñar para diferentes pantallas significa que tenemos que poner recursos gráficos para todos los tamaños. Eso resultaría en una aplicación demasiado grande.
Tampoco se trata de colocar todo el diseño al centro de la pantalla, con un ancho máximo de 320 pixels. Lo único que lograrás es que los usuarios con pantalla grande se pregunten por qué se ve todo tan chiquito si se dispone de un gran ancho de pantalla para usar.
Qué hago entonces?
Ahora más abajo vas a ver algunas capturas que dan ideas. Pero lo principal a tener en cuenta es la distribución de los elementos en la pantalla, según el ancho de la misma. Cuanto más reducida es, los elementos se tienden a apilar uno arriba de otro y a quitar lo que no es tan relevante.
Cuando tienes una pantalla más grande, ya puedes ordenar algunos de tus elementos de forma horizontal en vez de vertical.
Y cuando tienes una pantalla más grande (por ejemplo, una tablet de 10 pulgadas vista apaisada, o tal vez una PC) entonces usas el mismo diseño que el mencionado antes pero le agrandas los márgenes y colocas elementos de ayuda en pantalla que no suelen entrar en los otros dos espacios.
Aplicación Calendario
en pantalla pequeña.
Misma aplicación Calendario en una pantalla
mediana (los títulos de los campos van al costado y no arriba)
Misma aplicación Calendario pero en una pantalla todavía más grande.
Es el mismo diseño de una pantalla mediana pero los márgenes son mayores.
A continuación, pongo algunas capturas de pantalla que muestran como resolver la distribución de la información a medida que cambia la pantalla. Y todo con un mismo código.
Paneles múltiples - Comprimir
La idea es comprimir el tamaño de los paneles si la pantalla es más angosta. Y agrandarlos si hay espacio. No es la idea usar valores fijos sino porcentajes.
Paneles múltiples - Apilar
Esta idea soporta pantallas realmente pequeñas. Y lo que se hace es apilar los elementos a medida que se hace más angosta la pantalla. Y expandir cuando es más grande.
Paneles múltiples - Expandir / Colapsar.
En este caso la información tiene siempre el mismo tamaño pero es capaz de colapsar a medida que el ancho de la pantalla es menor. Y se expande cuando se hace más grande.
Paneles múltiples - Mostrar / Esconder.
En este caso, decidimos esconder la información que no consideramos tan relevante para el usuario y le dejamos un botón o enlace para que cuando quiera la muestre.
Otros ejemplos...
"Patterns" Application
"Pocket" Application
"TED Talk" Application
Related link on this blog.
UPDATE
Excelente tutorial en español sobre cómo iniciar un diseño usando esta técnica.
Sites with demos on this technique.
Twitter framework for Responsive Design (kind-of).
Adjust automatically Video static image for Youtube, Vimeo and more...
