Con este artículo presentamos la tercera y última grabación de las sesiones sobre Responsive Web Design realizadas en directo por Daniel Martínez, @Wakkos. En esta ocasión dedicaremos el tiempo a explorar las Mediaqueries de CSS3, explicando las maneras de aplicar estilos CSS que solo afecten a aquellos dispositivos que tienen determinadas características.

Las Mediaqueries, como nos explicará @Wakkos, son básicamente condicionales. A través de una sintaxis determinada podemos definir enunciados que se pueden cumplir -o no- en determinados casos, como que el área disponible del navegador tenga unas dimensiones mínimas o unas máximas, o como que el dispositivo que nos visita esté posicionado en "portrait" (vertical) o "landscape" (horizontal), o que se esté imprimiendo la página en la impresora o visualizándose en la pantalla de un ordenador.

Por medio de esas características definidas en el condicional de los mediaqueries podemos luego asignar estilos CSS para aplicarse en casos tan concretos como se desee y básicamente es lo que nos permitirá diseñar sitios web que se adapten a todos los dispositivos que podrían llegar a visitarlos. Pues bien, eso es básicamente sobre lo que ronda toda esta sesión, en la que se ofrecerán diversos ejemplos que nos ayudarán a entender la potencia de estos enunciados condicionales disponibles desde CSS3.

Se verán varios ejemplos de Mediaqueries afectando a diversos casos típicos que se podrían necesitar en Responsive Web Design. Lo más normal es definir los estilos CSS para anchos máximos y mínimos de la pantalla del dispositivo, pero existen otras posibilidades que también se comentarán.

Pero aparte del propio código CSS y todo lo relacionado con el desarrollo del sitio, Daniel también nos ofrece algunos consejos que tienen más que ver con el modo de encarar el trabajo cuando deseamos diseñar una web adaptable. Responderá a preguntas tales como ¿Debo hacer una hoja de estilos para cada resolución? ¿A qué resoluciones debo optimizar un sitio web? ¿Las mismas soluciones aplicadas para una web son adecuadas para otras? Todo eso y mucho más se contestará en este vídeo, así como muchas más preguntas realizadas por los asistentes a la charla en vivo.

Como en todas las charlas anteriores, también se ofrecieron muchos recursos interesantes, como un listado de dispositivos y las características de los mismos, que nos ayudarían a definir mediaqueries específicas para cada uno. O un script del lado del cliente que nos puede permitir cargar el contenido de una capa, o no, atendiendo a determinadas circunstancias.

También veremos por encima otro de los elementos esenciales cuando queremos diseñar webs para móviles, el Viewport. En este caso no se profundizó mucho, pero sí lo suficiente para darnos cuenta que tanto mediaqueries como viewport trabajan en conjunto para hacer webs adaptables.

Luego pasamos a la clásica ronda de preguntas en la que se realizaron la más variada gama de cuestiones relacionadas con el diseño web y que Daniel contestó gentilmente para todos los interesados. Sin duda, cualquier persona podrá obtener mucho provecho no solo de la charla de Daniel, sinto también a través de las respuestas a las dudas de los asistentes.

Con esta entrega se finalizaron las sesiones gratuitas de Responsive, pero estaremos con vosotros con mucha más información en un curso que Daniel estará impartiendo a partir del día 15 en EscuelaIT.