CSS3 Media Queries o cómo hacer un diseño adaptativo según el terminal
0. Índice de
contenidos.
1. Entorno
Este tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core
i7, 8 GB
DDR3) - Sistema Operativo: Mac OS X Snow Leopard 10.6.4
- Smultron (Bloc de notas)
2. Introducción y solución al problema
Como desarrolladores si no teniamos poco con la maldita guerra para que tu página web se vea igual en todos los navegadores, ahora también nos tenemos que preocupar de que cada uno de los dispositivos móviles del mercado. La diferencia fundamental y que más nos afecta de estos dispositivos es el tamaño de su pantalla y que nuestro diseño se ajuste a él para que se pueda visualizar de una forma agradable al usuario para no estropear su experiencia de navegación y que quiera acceder a nuestro sitio web desde cualquiera de los dispositivos que maneje: ordenador, portátil, móvil, ipad, …
Hasta el momento las CSS nos ofrecían la posibilidad de aplicar una hoja de estilo distinta en función del agente de usuario (terminal) que se conectará a nuestro sitio web, indicándolo en el atributo ‘media’ de la etiqueta ‘link’.
Aquí mostramos un ejemplo de su sintaxis:
<link type="text/css" rel="stylesheet" media="screen,print" href="screen_print.css" />
Es fácil deducir que para los agentes de usuario de tipo screen y print se va a aplicar la CSS screen_print.css.
Los distintos tipos de media que se soportan son:
- all: versión para todos los dispositivos.
- braille: versión para dispositivos lectores de braille para invidentes.
- embossed: versión para dispositivos que imprimen braille.
- handheld: versión para terminales con pantalla pequeña y ancho de banda limitada (móviles).
- print: versión para impresiones de página.
- projection: versión para proyectores.
- screen: versión para pantallas de ordenador.
- speech: versión para sintetizadores del habla.
- tty: versión para dispositivos para discapacitados, teletipos y terminales.
- tv: versión para dispositivos de televisión.
En la actualidad esto es totalmente insuficiente ya que más importante que el tipo de dispositivo es el tamaño de su pantalla que al fin y al cabo es donde se tiene que visualizar correctamente la información de nuestro sitio web.
Por este motivo CSS3 incluye el concepto de Media Queries, que nos permite definir una serie de condiciones en función de las características particulares de un dispositivo. De esta forma ahora podemos definir que queremos aplicar una hoja de estilo concreta cuando el agente de usuario tenga un ancho de pantalla específico, de la siguiente forma:
<link rel="stylesheet" type="text/css" media="screen and (min-width: 700px)" href="hoja.css"/>
En este caso la hoja de estilo se va a aplicar cuando el agente de usuario sea una pantalla y tenga mínimo un ancho de 700px. Tenéis un listado de las distintas propiedades que se pueden utilizar en la siguiente página: http://www.w3.org/TR/css3-mediaqueries/
3. Vamos a probarlo
Para hacer una prueba rápida de esta funcionalidad vamos a crear una hoja de estilo llamada prueba_1.css con el siguiente contenido:
body{
background-color: red;
}
Y otra llamada prueba_2.css con este otro contenido:
body{
background-color: blue;
}
Ahora creamos una página HTML que incluya las dos hojas de estilo con las restricciones del tamaño de la pantalla, de esta forma:
<!DOCTYPE html> <html> <head> <title>Prueba de Media Queries by Autentia</title> <link rel="stylesheet" type="text/css" media="screen, only screen and (max-device-width: 700px)" href="prueba_1.css"/> <link rel="stylesheet" type="text/css" media="screen and (min-width: 701px)" href="prueba_2.css"/> </head> <body> <p>Esto es una prueba de Media Queries by Autentia</p> </body> </html>
Al cargar la página en cualquier navegador que soporte CSS3 veremos que al reducir el tamaño de la ventana del navegador por debajo de 700px se vuelve rojo y por encima se vuelve azul.
De esta forma podemos conseguir visualizar el contenido de nuestra página perfectamente adaptado a los agentes de usuario que se conecten, un ejemplo real de esto, lo encontramos en la página principal de Liferay, donde si hacéis más grande o más pequeña la pantalla del ordenador veréis la página completamente adaptada al tamaño. Bastante más espectacular que nuestro ejemplo de andar por casa.
Cualquier duda o consulta a la zona de comentarios.
Saludos.
Gracias por la aportación Rubén.
Comentar que a esta variedad de posibles clientes, abría que añadir además un nivel más de dificultad indicando si la orientación del dispositivo está en modo Portrait o Landscape.
De todas formas siempre será mejor de cara a la usabilidad generar una vista adaptada al tipo de cliente usando framework especificos en la parte de la vista… a nadie le gusta estar ampliando y disminuyendo la pantalla para ver una información.. se pierde usabilidad (A esto hay que sumarle JS e imagenes adaptadas),..
Saludos
Tienes razón Carlos, esa podría ser una buena solución pero creo que está es más limpia porque permite mantener el principio de mejora continua de la página (Progressive Enhancement). Tienes un solo contenido HTML que puedes mostrar de la forma que te interese, pero lo importante es que no hay generación especifica ni duplicación del contenido.
Lo que comentas se puede hacer con la propiedad \\\’orientation\\\’ de las Media Queries: http://www.w3.org/TR/css3-mediaqueries/#orientation
Saludos y gracias por el comentario.
Generar el mismo HTML con distinta CSS es más barato, pero es un error (usabilidad baja)… Por ejemplo, entra por ejemplo al pais.es y verás como no te genera la misma vista.
Si lo que quieres es usabilidad de cara al usuario no se puede pretender generar el mismo HTML para un PC que para un Tablet… hace ya 7 años creé mobiletest y el acceso via móvil era con HTML Mobile Profile: http://www.youtube.com/v/Sex_0S-WFuk
Saludos
Esta solución está mas orientada hacia sitios web estáticos donde el contenido es el HTML y debería ser el mismo contenido independientemente del agente de usuario con el que se acceda. Para adaptar la visualización al dispositivo lo correcto es utilizar las CSS y para añadir funcionalidad extra (usabilidad) utilizamos Javascript.
De esta forma, nos aseguramos que el contenido de nuestro sitio web va a llegar a todo el mundo independientemente de como acceda; de esto es de lo que habla el concepto de Progressive Enhancement, primero creas el contenido (HTML), luego lo pones bonito (CSS) y lo último le añades la funcionalidad (Javascript) que le aporte un valor añadido a aquellos agentes de usuario que lo soporten. Por ejemplo, la utilización de un acordeón para evitar tener que hacer scroll, si tienes Javascript perfecto, pero si no lo tienes al menos se tiene que mostrar el acordeón totalmente desplegado para que todo el mundo pueda acceder al contenido del sitio web.
Tu solución es totalmente correcta pero está más orientada hacia sitios dinámicos como MobileTest que no tienen porque tener en cuenta el problema de la accesibilidad y los principios del diseño universal.
Saludos.
Hola, muchas gracias por el post, tengo un problema con el responsive en una pantalla, ya que en la pantalla donde diseño se ve bien y en otra mas pequeña (imagino que de menor resolución) se me ve mal el responsive de una foto. POr más que toco las medias queris no consigo apañarla. Es una imagen que va a full y al hacerse pequeña se corta, no consigo que se haga pequeña entera sin cortarse.
gracias