Hoy en día casi no se concibe una página o aplicación web que no sea Responsive. El Responsive Web Design busca crear diseños web que se adapten de manera automática a diferentes tamaños y resoluciones de pantalla. De esta manera en lugar de tener un diseño diferente para cada tamaño de pantalla (¡o incluso una versión diferente de la interfaz para cada dispositivo!), se busca que un solo diseño, refinado de manera inteligente, sirva para todos los tamaños.
El nombre viene de que el diseño «responde» de manera automática a las diferentes condiciones del entorno de la página, adaptándose automáticamente y en tiempo real a los cambios de tamaño que haya. Puedes verlo en acción si visitas, por ejemplo, la página de campusMVP. Si la abres en una ventana aparte y cambias el tamaño de ésta (el ancho fundamentalmente) verás que a medida que el espacio disminuye el diseño se adapta para que se vea bien incluso con poco espacio. Puedes probarlo no solo en la portada (donde es menos vistoso) sino también en el catálogo en la parte de recursos, donde todavía hay más cambios para poder adaptar el contenido mejor. Este mismo blog también es Responsive.
Lo más interesante de estos efectos es que no se necesita escribir código para conseguirlos. Es suficiente con utilizar CSS puro y duro. Para ello se saca partido, entre otras cosas, a la característica de CSS denominada Media Queries. Éstas nos permiten definir conjuntos de reglas CSS que se aplican únicamente cuando se cumplen ciertas condiciones respecto al medio en el que se visualiza la página.
Por ejemplo, si escribimos:
@media screen and (max-device-width: 480px) and (orientation: landscape) {
/* REGLAS CSS*/
}
Con esto estamos indicando al navegador que si la página se está visualizando en una pantalla (podría ser en otro medio, como por ejemplo en papel porque la imprimimos), cuyo ancho no supera los 480 píxeles (ancho por defecto de una pantalla apaisada de un iPhone hasta la versión 4) y que además la orientación del dispositivo es apaisada (es decir, está en horizontal), entonces que le aplique las reglas CSS específicas para este caso que tenemos dentro de las llaves.
Esto da una libertad enorme para definir diferentes estilos según tamaños, resoluciones de pantalla y otras condiciones, y permite en gran medida la «magia» de los sitios Responsivos.
Ejecución innecesaria de código en páginas Responsive
Un caso habitual es, por ejemplo, querer tener dos menús de navegación completamente diferentes en resoluciones altas y bajas. Así, por ejemplo, si la pantalla es muy grande podemos poner un menú horizontal con botones grandes y fáciles de pulsar, que ocupen mucho a lo ancho. Sin embargo si la pantalla o la ventana es pequeña, podemos ocultar el menú anterior y mostrar uno diferente en forma de lista desplegable o usando un simple control de lista de HTML.
Aquí tienes un caso real con su correspondiente implementación. Lo que se explica en este artículo es cómo convertir mediante JavaScript (o más bien jQuery) un menú CSS puro ancho en control de lista desplegable para el caso de pantallas pequeñas, como la de un teléfono. Como mantener dos menús por separado es propenso a errores porque tarde o temprano dejarán de estar sincronizados si lo hacemos a mano, el ejemplo construye la lista desplegable a partir de los elementos del menú CSS, y así no hay fallo. Luego con Media Queries muestran uno o el otro en función del ancho de la pantalla. Muy fácil y muy útil.
El problema de esto es que el menú desplegable pequeño y todo el código JavaScript que lo genera, se ejecutan siempre, haga falta o no. Lo ideal sería que el código que genera el menú pequeño se ejecutase únicamente cuando sea necesario, y no antes. Pero el JavaScript necesario para conseguirlo se ejecuta siempre nada más cargar la página y solo depende de CSS el mostrar un menú u otro según sea necesario.
Media Matching en JavaScript
Dado que el Responsive Web Design ha sido tradicionalmente más un tema de diseñadores web que de programadores, poca gente conoce que tiene una contrapartida en el lado de código JavaScript. Se trata de una API muy sencilla para verificar la coincidencia de condiciones de Media Queries con el estado actual de la pantalla….
… SIGUE
Lee el post completo en JASoft.org: http://www.jasoft.org/Blog/post/Reaccionar-a-Media-Queries-desde-JavaScript.aspx
