Buscando la inspiración para diseñar una web responsive

Cuando hace ya casi un año hice un tutorial de acercamiento hacia el Responsive Design, el diseño adaptativo era una opción codiciada por muchas webs y apps.

Media Queries

Por aquel entonces, hablar de HTML5/CSS3 era hablar de un futuro lejano (se esperaba especificación para 2021), algo que ha cambiado en estos últimos meses. En este tiempo, los navegadores han avanzado (incluso IE, :)), y poco a poco se están dejando de lado los antiguos condicionales (<!—[if lt IE 7]>) y los modos de compatibilidad, olvidando por tanto el soporte para navegadores anticuados, y centrándose en el diseño y desarrollo para plataformas actuales.

A día de hoy, Responsive Design es más que un requisito para triunfar en un mercado donde los dispositivos móviles con diferentes pantallas y posiciones están barriendo al monitor de toda la vida.

Y como en todo, la mejor manera de aprender es viendo el trabajo de otros, en especial de aquellos que han sabido dar con chic, y ofrecer una experiencia de usuario amoldada a las prestaciones de cada dispositivo.

Tanto desarrolladores frontend, como diseñadores gráficos y de UIX, encontrarán interesante MediaQueri.es (el nombre lo dice todo), una suerte de directorio visual con ejemplos de proyectos adaptativos para el deleite (y aprendizaje) de la comunidad.

Cada página ofrece cuatro versiones de la misma, coincidentes con su vista gráfica en smartphones verticales (320px), tablets (720px), pantallas antiguas convencionales (1024px) y escritorio panorámico (1600px). Por supuesto, este control se hace mediante Media Queries, el método de consulta al dispositivo y su acelerómetro (si cabe) para conocer la distribución espacial de la pantalla (horizontal, vertical, dimensiones, navegador, compatibilidades).

P.D.: se me hace raro hablar de 1024 px como pantalla de netbook, cuando hace apenas un par de años se consideraba el estándar de página web 850px ¡Cómo pasa el tiempo!