Introducción CSS3 Media Queries – Parte 2

En esta segunda parte, pondremos en práctica lo que aprendimos en la parte uno de este tutorial: Uso de Media Queries, para entregar diferentes estilos en dispositivos móviles, tabletas y computadoras de escritorio.

Aprenderás como aplicar estilos básicos a una página muestra y después usar Media Queries para sobreescribir esos estilos con estilos optimizados para diferentes anchos de pantalla. Navegadores viejos, incluyendo Internet Explorer (IE) 6-8, no soporta Media Queries, así que se necesitan vincular los estilos básicos de la página de manera normal. Incluso tendrás que agregar una etiqueta <meta> especial para prevenir que dispositivos móviles nuevos, re-escalen la pagina e ignoren los Media Queries. Estas instrucciones no son específicas de Dreamweaver. El HTML y estilos CSS, se pueden modificar en cualquier editor de texto.

¿Escritorio o Dispositivos Móviles primero?

Con el uso de Media Queries para crear Diseño Responsivo apropiado para un rango de diferentes tamaños de pantalla, el Diseñador se enfrenta a una gran decisión. ¿Qué debería ser primero, la versión de escritorio o móvil? Ya que el desarrollo web ha sido un actividad de nicho recientemente, sospecho que la mayoría de los proyectos empiezan con la versión de escritorio y se adaptan a dispositivos móviles en un segundo planteamiento. Sin embargo, el consejo de muchos expertos es: iniciar con la versión móvil primero. Haciendo esto, se asegura que el contenido esencial es accesible a usuarios móviles. Después se pueden hacer mejoras progresivas para optimizar la versión de tabletas y computadoras de escritorio.

El diseño para la pagina muestra de este tutorial, se encuentra en el libro Adobe Dreamweaver CS5.5 Studio Techniques: Designing and Developing for Mobile with jQuery, HTML5 y CSS3 (Adobe Press). En este libro, el proceso inica con el diseño de escritorio y posteriormente adapta la versión móvil. Este tutorial tiene una perspectiva opuesta, Diseñar primero para para dispositivos móviles y adaptar los estilos para tabletas y computadoras de escritorio.

Por supuesto, no siempre es buena esta aproximación. La versión de escritorio puede ya existir. Puedes ver ejemplos prácticos de como adaptar un diseño de escritorio a dispositivos móviles en el tutorial HTML5 y CSS3 en Dreamweaver CS5.5.

Examinar el Layout Básico

Para mantener las cosas simples, los archivos fuente, contienen una sola página. No voy a describir cada detalle de las reglas de los estilos, sino me voy a concentrar en explicar las características relacionadas con el uso de Media Queries y el despliegue de la página en diferentes tamaños de pantalla.

1.- Si aún no han descargado los archivos, bajen los archivos para este tutorial y guárdalos en el escritorio o en un sitio conveniente.

2.- Abre el archivo dining.html en un navegador y re-escala la ventana del navegador aproximadamente a 320pixeles de ancho. Puedes usar alternativamente Live View en Dreamweaver CS5.5 y seleccionar View>Window Size>320 x 248 Smart Phone. La página debe verse como en la Figura 1.

Figura 1. El diseño básico ha sido optimizado para un dispositivo móvil.

3. Re-escala la ventana del navegador aproximadamente a 480 pixeles de ancho. La página debe verse como en la Figura 2. El diseño aún consiste de una sola columna, pero la imagen del plato de sashimi es más grande y la columna aún ocupa la mayor parte del ancho de la ventana del navegador. Esto, eso por que los estilos usan diseños flexibles.

Figura 2. El mismo diseño básico se conserva a 480 pixeles de ancho.

4. Re-escala el navegador a un tamaño típico de escritorio como 1280 x 800. Como muestra la Figura 3, el diseño se ve un poco raro, pero no ha perdido uniformidad. Con algunos pequeños ajustes, se puede adaptar a un layout de dos columnas que se ajuste mejor a una pantalla más grande.

Figura 3. El diseño necesita ajustarse a una pantalla más grande.

5. Abre el archivo dining.html en Dreamweaver o un editor HTML, y cambia a vista de código. Las primeras líneas de HTML deben verse así:

6. Inserta una nueva línea inmediatamente antes de la etiqueta <title>, y agrega el siguiente código:

Agregar la etiqueta viewport <meta> con estos parámetros, asegura que smartphones y tabletas, respeten los ajustes de Media Queries. Definir initial-scale a 1, también asegura que el iPhone, iPad y iPod touch apliquen los ajustes correctamente en una orientación landscape.

Nota: La hoja de estilos basic.css está vinculada con la pagina sin ningún Media Query. Esto significa que los estilos se van a aplicar por todos los navegadores, aunque no entiendan Media Queries.

7. Ve al primer párrafo de la página. La imagen tiene definido un ancho, pero no un alto:

También se omite la altura de la imagen del quinto párrafo. Omitir la altura, permite re-escalar las imágenes a una pantalla menor sin distorsiones.

Examinar los Estilos Básicos

La hoja de estilos basic.css, está vinculada sin un Media Query, así, los estilos se aplican a todos los navegadores. Posteriormente vas a sobre escribir algunos estilos al agregar hojas de estilo dedicadas para tabletas y computadoras de escritorio. Primero vamos a ver las características principales de los estilos básicos.

Abre basic.css. La primer regla de estilo se ve de esta manera:

Esto es muy directo, asigna un valor de cero, al margen y al padding del <body> de la página, y define colores para la fuente y el background. Incluso define las fuentes básicas de uso en la página y define font-size al 100%. Cuando se diseña para dispositivos móviles, se recomienda usar porcentajes para definir el tamaño de las fuentes. Ajustar la base al 100%, asegura que otros porcentajes sean interpretados correctamente. Con está opción la mayoría de los navegadores despliegan el texto a 16px.

La siguiente regla de estilo controla el wrapper <div>, que encierra el contenido de la página. Se ve de está manera:

Esto define el ancho del wrapper al 100%, con un máximo de 980 pixeles. Los márgenes horizontales son automáticos. Como resultado, la página rellena el ancho completo de teléfonos y tabletas, pero se hace de un ancho fijo al centro, en pantallas mayores a 980 pixeles.

La imagen de fondo es de 480 pixeles de ancho, pero la propiedad CSS3 background-size se ha definido como: contain. Esto, escala la imagen de background al tamaño requerido de ancho y alto sin distorsión para rellenar el fondo. De hecho, encoge la imagen cuando el viewport es menor a 480 pixeles de ancho. En una pantalla más grande, se expande la imagen, hasta pixelearse, pero se usará una versión más grande para tabletas y computadoras de escritorio, con el uso de Media Queries.

El siguiente estilo (#header h1) ajusta el tamaño de la fuente al 225%, que es el equivalente a 36 pixeles. El texto es centrado, pero se agregaron 40 pixeles de padding a la izquierda para alejarlo de los caracteres chinos de la izquierda de la imagen de fondo.

La siguiente regla de estilo de interés, es para las clases floatleft y floatright, que son aplicadas a las imágenes indentadas. Se ve de esta manera:

Ajustar el ancho de una imagen en CSS, sobre escribe el ancho en la etiqueta HTML. Como resultado, en pantallas pequeñas, las imágenes se re-escalan al 95% del ancho de elemento que las contiene. En la página de ejemplo, ambas imágenes son de 400 pixeles de ancho, así que la propiedad max-width previene que se desplieguen a un mayor tamaño del original. Obviamente, si tu diseño contiene imágenes de diferentes tamaños, vas a necesitar varias clases para manejarlas. Las imágenes flotarán en pantallas grandes, pero las reglas básicas ajustan la propiedad display a block y los márgenes horizontales a auto– en efecto, centrando las imágenes en la página.

Las reglas de estilo para el menú de navegación dan a nav una lista desordenada con un ancho y alto fijo. El uso de un ancho, hace imposible centrar el menú al ajustar los márgenes horizontales a auto. La altura se necesita para empujar el siguiente contenido debajo de la página, ya que los elementos individuales del menú están flotando a la izquierda. Hay cinco elementos en el menú, y el final está centrado con la siguiente regla:

Está usa la pseudo-clase de CSS3:last-child, para agregar un margen al elemento final del menú. Este valor fue calculado teniendo el total del ancho de cada elemento, incluyendo el padding horizontal y márgenes (152px).

Agregar Estilos para Tabletas

Un layout de una sola columna se mantendrá para tabletas con un rango de 481 a 768 pixeles (el límite superior es el ancho del iPad en posición vertical). Sin embargo el menú de navegación requiere ajustarse y las imágenes indentadas pueden flotar a la izquierda y a la derecha para que el texto fluya a su alrededor. Se va añadir una imagen de fondo al sake <dv> al pie de la página.

1. Crea una nueva hoja de estilo con el nombre tablet.css en el foder de estilos.

2.- Vincula la nueva hoja de estilo al documento dining.html con el uso de un Media Query que ajuste ancho mínimo a 481px y el máximo a 768px. La etiqueta <link> para la nueva hoja de estilo tiene que ir después de existente, ya que los nuevos estilos van a sobre escribir a los de basic.css. Las dos hojas de estilo se tienen que vincular de la siguiente manera:

3. Agrega el siguiente bloque de código a tablet.css

Esto define un ancho mínimo para wrapper <div> de 700px y sustituye a una versión mayor de la imagen de fondo, que también tiene 700 pixeles de ancho. No hay necesidad de repetir los valores heredados del archivo basic.css, así el wrapper aún llena el ancho completo de la pantalla si es menor a 700 pixeles. Si es más grande, los márgenes horizontales heredados, aseguran que el <div> permanezca en el centro.

4. El tamaño y la posición del encabezado principal se tiene que ajustar. Agrega los siguientes estilos:

5. Para tratar el menú de navegación, requerimos dos acercamientos. Uno, una tableta grande, como un iPad, los 5 elementos del menú se pueden desplegar en una sola columna. Pero, en una pantalla más pequeña, se tiene que dividir el menú en dos columnas. Vamos a tratar pantallas pequeñas más adelante. Primero, agrega los siguientes estilos para el menú de navegación.

Esto, ajusta el menú de navegación a un ancho de 660px y reduce la altura. Hay cinco elementos del menú, así que esto crea 132 pixeles de espacio entre cada uno (120 pixeles, más 1 pixel del margen horizontal y 5 pixeles de padding horizontal de cada lado). Esto ya no es necesario, así que la pseudo clase :last-child reinicia el margen izquierdo al igual que los otros elementos del menú.

6. El siguiente conjunto de reglas, trata a las imágenes indentadas:

Las clases floatleft y floatright, desplazan las imágenes en su dirección relevante y agregan márgenes para separarlas del texto. El margen izquierdo en floatleft, tiene un valor de cero, para mantener el flujo con el texto. De igual manera, el margen derecho de floatright, tiene un valor de cero. El último estilo, block, agrega un drop shadow a las imágenes, con el uso de la propiedad box-shadow con formato de color RGBa. Los tres primeros valores separados por comas, definen el color negro y el valor final, específica transparencia al 30%.

7. Con las siguientes reglas, agrega una imagen de fondo a sake <div> al pie de página:

La propiedad backgroudn-position, tiene dos valores, el primero, define la posición horizontal de la imagen a 440 pixeles a la izquierda del <div>. Los párrafos dentro del <div>, tienen un ancho de 400 pixeles, dejando espacio para la imagen de fondo, como muestra la figura 4.

Figura 4. La imagen es meramente decorativa, así que se agrega como imagen de fondo.

Tabletas con pantallas más pequeñas

El menú de navegación es de 660 pixeles de ancho, así que necesitas separar reglas para tabletas con pantallas más pequeñas. En lugar de crear otra hoja de estilos, es más eficiente envolver reglas adicionales al bloque Media Query @media dentro de tablet.css. El bloque @media, también necesita algunos ajustes para los estilos gobernantes de las imágenes indentadas y el tamaño de las fuentes.

1. Al final del archivo tablet.css, agrega el siguiente bloque al Media Query @media:

Todas las reglas dentro del bloque @media, se aplican sólo a pantallas entre 481 y 680 pixeles de ancho. La primera regla, utiliza una fuente ligeramente más pequeña  para el encabezado de la página principal, y reduce el padding superior.

2. Ahora vamos a agregar las reglas para el menú de navegación. Tienen que ir dentro del bloque @media indicadas como en el paso anterior.

Este conjunto de reglas cambia el ancho y el alto del menú de navegación para acomodar en dos columnas los elementos del mismo. Tres en la columna superior y dos en el inferior. Se da un margen inferior de 2 pixeles a los elementos para separar las columnas. Como hay menos elementos en la segunda columna, la pseudo clase :nth-child(), se dirige al cuarto elemento y da un margen izquierdo de 66 pixeles para centrar los últimos dos elementos, como se muestra en la figura 5.

Figura 5. El menú se divide en dos columnas para pantallas más pequeñas.

Nota: Si no estas familiarizado con la pseudo clase :nth-child(), puedes aprender más sobre está y selectores avanzados de CSS3 en Getting to know your CSS selectors – Part 2.

3. Los estilos en el archivo tablet.css, flotan las imágenes indentadas a la derecha o izquierda, pero en una pantalla más pequeña, aún queremos que estén centradas ya que hay suficiente espacio para que el texto fluya a su alrededor. Agrega la siguiente definición de estilo al bloque @media.

Esto sobre escribe la regla previa en el archivo tablet.css que flotaba las imágenes. Si embargo, las propiedades width, max-width y display se heredan del archivo basic.css. Como resultado, las imágenes indentadas se centran de la misma forma que en el layout del teléfono móvil.

4. El layout más estrecho también requiere un ajuste menor a los estilos de sake <div>. Agrega las siguientes reglas dentro del bloque @media, para reposicionar la imagen de fondo y ajustar el tamaño de los párrafos proporcionalmente.

El bloque @media, se ve de esta manera:

Agregar una función cosmética para tabletas más grandes.

Los estilos en el archivo tablet.css define un ancho máximo de 700 pixeles para wrapper <div>. Pero el Media Query que vincula la hoja de estilos a la página, aplica los estilos a pantallas con un ancho de hasta 769 pixeles de ancho. Para agregar un toque sutil al diseño para pantallas más grandes, crea el siguiente bloque @media al final del archivo tablet.css

Esto añade un borde de ambos lados del wrapper <div>.

Agregar los Estilos de Escritorio

Crear los estilos para la versión de escritorio, involucra el mismo proceso que para las tabletas. Necesitas vincular una hoja de estilos con un Media Query enfocado a pantallas más anchas de 768 pixeles, y sobre escribir reglas en el archivo basic.css. No necesitas preocuparte por los estilos en el archivo tablet.css ya que los navegadores que entiendan Media Queries, los ignorarán si la pantallas e mayor a 768 pixeles y navegadores que no entiendan Media Queries van a ignorar el archivo tablet.css sin importar el tamaño de la pantalla.

Como IE 6-8 no entiende Media Queries, necesitas vincular los estilos de escritorio a la página dos veces: una con el Media Query y la segunda con el comentario condicional de IE.

1. Crea una nueva hoja de estilos llamada desktop.css en la carpeta de estilos.

2. Vincula desktop.css a dining.html dos veces: Primero con el parámetro de Media Query min-width a 768px, y después envuelve el comentario condicional de IE. El nuevo estilo se tiene que vincular después de la etiqueta <link> a basic.css. De otra manera, los estilos no se aplicarán correctamente. Debes tener las siguientes etiquetas <link> dentro del <head> de la página:

Aunque estas vinculando desktop.css dos veces a la página, se descarga sólo una vez. El comentario condicional de IE, será ignorado exceptuando por IE 6-8.

3. Agrega las siguientes reglas a desktop.css al estilo de wrapper <div> y al encabezado principal.

El layout de escritorio utiliza diseño fijo de 980 pixeles de ancho. Estas reglas sustituyen una imagen de fondo más grande y el tamaño de del encabezado principal. Las propiedades del borde son las mismas usadas en el bloque @media en tablet.css, pero necesitan repetirse aquí para que se apliquen en pantallas más grandes.

4. Todos los elementos del menú de navegación se ajustan a una sola columna. Las nuevas reglas de estilo simplemente incrementan el ancho de los elementos del menú y sobre escriben propiedades en basic.css:

La pseudo clase :last-child, remueve el gran margen izquierdo al elemento final del menú de la misma manera que en tablet.css

5. La pantalla más ancha, hace posible convertir la página a un layout de dos columnas flotando la clase izquierda content-medium y agregando un margen más amplio a la clase aside, de esta manera:

Como indica el comentario, la propiedad display, de la columna flotante, se define como inline. Esto arregla el bug en IE 6 y 7, que duplica el margen de un elemento si lo flotas del mismo lado que el margen. Afortunadamente, esto no tiene efecto en otros navegadores.

6. Para flotar las imágenes indentadas, necesitas agregar la misma regla en tablet.css:

7. Las reglas de las imágenes en tablet.css agregan un drop shadow, pero en una pantalla más grande el drop shadow también se ve bien en el contenido principal y en sidebar. Así, puedes agrupar un selector para aplicar las mismas propiedades a todos, de esta manera:

Pude haber agregado esta regla de estilo a basic.css para añadir un drop shadow a estos elementos en todos los dispositivos. Sin embargo, en pruebas, los drop shadows no siempre se ven bien en pantallas de dispositivos móviles.

8. Finalmente, necesitas cambiar la imagen de fondo de sake <div>. Ya que la etiqueta <div> se ha convertido en en un sidebar, la imagen usada por tablet.css ya no es apropiada. Añade el siguiente estilo de bloque a desktop.css:

Esto posiciona una imagen diferente en la parte inferior de sidebar, y agrega una mayor cantidad de padding al para que haya espacio.

Con estos cambios, la página debe verse como en la Figura 6, en una computadora de escritorio.

Figura 6. El layout de dos columnas usa una imagen de fondo diferente para sidebar.

Consolidando las reglas de los Estilos

Aunque los Media Queries son una manera efectiva para usar el mismo HTML para diferentes dispositivos con estilos ajustados para su propio ancho de pantalla, necesitas tener en mente que los navegadores normalmente descargan las hojas de estilos aunque el ancho de pantalla este fuera del rango especificado por un Media Query. Esto es para que el navegador pueda responder de manera inmediata a las dimensiones de la ventana por si cambian. Una investigación por Greg Rewis, revela que, esto sucede incluso aunque no haya forma de que los estilos puedan ser aplicados. Por ejemplo, una iPad, va a descargar una hoja de estilos aunque el ancho máximo este ajustado a 700 pixeles.

Por esta razón, debes considerar combinar todas las reglas de estilos en una sola hoja y envolver aquellos para anchos específicos de pantalla en bloques @meida como estos:

Puedes ver esta aproximación en acción en el documento dining-combined.html y combined.css en los archivos de ejemplo. La página se despliega exactamente de la misma manera en teléfonos móviles, tabletas y computadoras de escritorio. Sin embargo, aún necesitas vincular desktop.css con una condicional de comentario IE, para IE 6-8.

Combinar las reglas de estilo en un solo archivo, reduce el número de peticiones al servidor, esto debe resultar en una experiencia marginalmente más rápida en un dispositivo móvil. La descarga resulta en una hoja de estilo más grande, que puede ser más difícil de mantener.

A donde ir a partir de aqui

Este tutorial de dos partes ha cubierto la teoría y práctica de diseño web responsivo con Media Queries, que te permiten utilizar estilos optimizados para diferentes dispositivos dependiendo de sus características. Los Media Queries tienen soporte por todos los navegadores modernos y dispositivos móviles. No tienen soporte para IE 6-8, pero puedes resolver esta limitante al crear estilos básicos de uso para todos los navegadores y con el uso de Media Queries para navegadores más recientes. Incluso puedes usar una condicional de comentario para IE para vincular estilos dedicados a versiones viejas de IE.

Puedes encontrar útiles los siguientes recursos para aprender más sobre Media Queries y diseño para dispositivos móviles:

Greg Rewis: CSS3 Media Queries? Download Answers

Ethan Marcotte: Responsive Web Design

Scott Jehl: Responsive Images: Experimenting with Context-Aware Image Sizing

Scott Jehl: Responsive Images

Chris Converse: Customizable starter design for multiscreen development

Media Queries (una colección de sitios con uso de Media Queries)

W3C: Mobile Best Practices 1.0

W3C: Mobile Web Application Best Practices

El contenido original de este tutorial esta publicado en Adobe Devnet bajo licencia Creative Commons y traducido en nuestro blog gracias a nuestro instructor Juan de Dios @juandediosleon. Si quieres aprender más sobre estas técnicas te invitamos a nuestro curso de HTML5, donde se cubre el tema de CSS3.