Crea sitios optimizados para dispositivos móviles con Media Queries y Dreamweaver CS5.

Escrito por Revista NeoPixel Lunes, 16 de Mayo de 2011 12:12

Diseñar sitios web requiere cada día de mayor atención en detalles y aspectos que hasta hace unos años no eran necesarios. Como todos sabemos hoy en día es muy común navegar y buscar información en internet por medio de dispositivos como teléfonos móviles y tabletas digitales, tipo Xoom, Playbook y iPad por decir algunas. Claro está que este tipo de dispositivos tienen una navegación y características particulares de cada marca, modelo, tamaño y sistema operativo, es decir, que los sitios web que hayamos diseñado para verlos en una computadora, no necesariamente se verán bien en un teléfono celular, en un iPhone o en una iPad.

Media Queries en Dreamweaver

Como diseñadores y/o desarrolladores es necesario asegurarnos que el diseño, la navegación y el funcionamiento de nuestros sitios será el óptimo, independientemente del sistema operativo, navegador, o dispositivo en que se esté viendo. Para el caso de los dispositivos móviles, podemos hacer que nuestras páginas se vean de manera adecuada con ayuda de los Media Queries, es decir que crearemos mediante HTML y CSS3 un diseño específico para cada dispositivo, que se desplegará automáticamente al detectar desde qué tipo de navegador se está accesando.

Los Media Queries son parte de una especificación de CSS3 pero que tienen su inicio en CSS2 como Media Type, por medio del cual creábamos una versión "imprimible" del sitio o de alguna página en específico insertando dentro del HTML una etiqueta que ligaría un archivo CSS de la siguiente forma:

Aquí lo único que estamos haciendo es ligar un archivo .css con diseño específico para darle un formato especial a nuestra página, que sería la versión imprimible.

Ahora es posible utilizar Media Queries para detectar el alto y ancho del navegador, el tamaño del dispositivo donde se está navegando, el Aspect-Radio, el color, la orientación y la resolución.

Aquí podemos ver un ejemplo de como ligar 3 hojas de estilo diferentes: 2 para dispositivos móviles(un teléfono y una tablet) y una para el navegador común en Pc.

Si vemos la sintaxis es básicamente la misma que usábamos en Media Type pero pero pudiendo especificar más de una condición, además de establecer cuál archivo CSS se cargará dependiendo del tamaño de la pantalla del dispositivo. Así phone.css lo cargará únicamente en dispositivos de 0 a 320 pixeles, y tablet.css se utilizará únicamente en dispositivos de 312 a 768 pixeles. En caso de que se navegue en una pantalla con mayor resolución se utilizará el archivo web.css.

Media Queries en Dreamweaver CS5.

Dreamweaver CS5, mediante su panel Multiscreen, nos permite la creación automática de los Media Queries, teniendo que especificar nosotros únicamente el tamaño mínimo y máximo de los dispositivos así como el archivo CSS que corresponderá a cada uno de ellos, y el programa generará el código en HTML que vimos arriba. Lo que sí nos toca a nosotros, es crear cada uno de los archivos CSS que corresponderán al diseño de cada uno de los diferentes tamaños.

Multiscreen Preview en Dreamweaver CS5.

Multiscreen Preview en Dreamweaver CS5.

El panel Multiscreen Preview, en Dreamweaver, nos es muy útil también en la previsualización de nuestros 3 diseños, el de "Desktop" o navegador convencional, el diseño para teléfono móvil y el de "Tablet", ya que en tiempo real nos está mostrando cómo va quedando cada uno de ellos, y así nos evitamos el tener que hacer la prueba en cada uno de nuestros dispositivos, ahorrandonos mucho tiempo en el desarrollo. Otra ventaja es que podemos hacer pruebas es en el mismo navegador de nuestra computadora, basta con agrandar o disminuir el tamaño de la ventana de nuestro navegador y automáticamente el diseño se irá acoplando según las características que hayamos puesto en nuestro CSS.

Visita: http://www.neopixel.com.mx/images/stories2/MediaQueries/mediaqueries.html

Si revisas esta dirección en tres dispositivos de diferentes tamaños verás como automáticamente se ajusta el diseño al tamaño de la pantalla. De igual manera si en tu navegador haces más grande o o reduces el tamaño del navegador verás el mismo resultado.

Versión del sitio en iPad y iPhone/iPod Touch.

Versión del sitio en iPad y iPhone/iPod Touch.

Versión del mismo sitio en un navegador (Safari).

Versión del mismo sitio en un navegador (Safari).

Hasta ahora hemos ligado archivos .css relacionados al tamaño o resolución del dispositivo, pero con Media Queries tenemos además la opción de cambiar el diseño dependiendo de la orientación que tenga el dispositivo, ya sea horizontal o vertical, esto para los dispositivos que tengan soporte para estas características, como el iPhone y el iPad, además de algunos otros smartphones y tabletas que se encuentran en el mercado:

Hasta aquí hemos visto una pequeña introducción a los Media Queries, las ventajas que nos traen y sobre todo lo sencillo que es utilizarlos. Cabe aclarar que por ser parte de CSS3 no tiene soporte en navegadores como Internet Explorer 6 o versiones de Firefox anteriores a la 3.5, sin embargo no le hará daño a tu sitio ya que estos navegadores antiguos solamente los ignorarán, además de que cada día son menos los usuarios que utilizan versiones tan antiguas como IE6 o IE7.