En el anterior artículo comentábamos que es diseño adaptativo. En este quisiéramos exponer qué entendemos por responsivo y cómo pueden complementarse ambas técnicas para mejorar la visibilidad de nuestros sitios web en Joomla en los diferentes dispositivos que nos permiten navegar por Internet.

La palabra inglesa es Responsive que según el Diccionario de la Real Academia se traduciría como Responsivo. “adj. Perteneciente o relativo a la respuesta”. lo que viene a significar a nivel tecnológico, que es una respuesta según a la pantalla a la que se dirija la información

En esta técnica se expone el uso de las @media-queries, los tamaños en porcentajes, el uso de la meta-tag Viewport y poco más, normalmente todo con CSS.    

La gran ventaja de esta técnica es que al instante se reajusta la web, ya sea desde el navegador haciendo la pantalla más pequeña o con el móvil girando la pantalla, pero esto tiene una gran desventaja que reside en el tamaño en kb del sitio web.    

Cuando vemos un sitio web desde un PC, normalmente vemos todo con el tamaño ideal, pero al verlo en un móvil o una tableta pequeña, vemos imágenes reducidas, pero siguen ocupando lo mismo que en el PC y eso genera un tráfico extra en nuestro móvil, que hará que la carga sea más lenta. Y al igual que pasa con las imágenes también pasa con los scripts.

Usar en un sitio web jQuery, por poner algún ejemplo del uso de un framework, para un slider que en los móviles se oculta, es un gran incremento de recursos innecesarios. ¿Por qué? Pues porque el slider a pesar de que no se ve, esta consumiendo recursos y ancho de banda. Es decir, el usuario a pesar de que no ve el slider si que lo está cargando, por lo que está consumiendo recursos y tiempo innecesariamente.

Las técnicas

Media Queries

El principal concepto a tener en cuenta en esto son los CSS Media Queries. Una herramienta que nos permite activar y desactivar partes del CSS de nuestro diseño según el tamaño de la pantalla:

@media screen and (max-width: 980px) {
/* CSS ventanas de menos de 980px */
}
@media screen and (max-width: 650px) {
/* CSS ventanas de menos de 650px */
}
@media screen and (max-width: 480px) {
/* CSS ventanas de menos de 480px */
}
@media screen and (max-width: 360px) {
/* CSS ventanas de menos de 360px */
}Mediante la etiqueta @import podemos cargar archivos de CSS externos:

<style>
@import url(tablet.css) screen and (min-width: 650px);
</style>

CSS Media Queries funciona con todos los navegadores modernos.

Porcentajes

Otro de los pilares básicos responsive design es trabajar con porcentajes en vez de con pixels. Los grids de tu plantilla deben ser flexibles y poder adaptarse. Query también puede ayudar de forma notable a los diseños sensibles. Una regla, ni una medida en pixeles, todo en porcentajes y relaciones.

Meta-tag Viewport

Comencemos por entender qué es el viewport. El concepto muy sencillo, la imagen se corresponde con el área que está disponible en la pantalla del navegador.

El viewport en un navegador, es igual al área útil donde se mostrará la página web.

Cuando se ven las páginas web en un dispositivo a menudo se reducen los contenidos, para conseguir que se ajusten al espacio de la ventana del navegador. Es decir, se hace un escalado de la página web, de modo que se ve todo más pequeño.

El viewport cuando estamos hablando de dispositivos móviles, no corresponde al tamaño real de la pantalla en píxeles, sino al espacio de la pantalla que está emulando, tiene. Por ejemplo, en un móvil, aunque la pantalla en vertical tenga unas dimensiones de 320 píxeles, en realidad el dispositivo está emulando tener 980 píxeles.

Mediante código se puede alterar el viewport que viene configurado en el navegador, lo que resulta necesario si se quiere que nuestra página web se vea correctamente en dispositivos móviles

Es Muy recomendable cambiar la etiqueta viewport para conseguir que el navegador se comporte como desees, especialmente en el caso de las páginas que estamos diseñando para verse correctamente en pantallas pequeñas.

Para ello contamos con los parámetros siguientes en la etiqueta META.

• Width: anchura virtual (emulada) de la pantalla o anchura del viewport.

• Height: altura virtual de la pantalla o anchura del viewport.

• Initial-scale: la escala inicial del documento.

• Minimum-scale: la escala mínima que se puede poner en el documento.

• Maximum-scale: la escala máxima configurable en el documento.

• User-scalable: si se permite o no al usuario hacer zoom.

Un ejemplo de etiqueta viewport sería el siguiente:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1"> 

Con width=device-width conseguimos que el viewport sea igual a la anchura real de la pantalla del dispositivo, de modo que veremos los píxeles reales.

Con initial-scale=1 conseguimos que no se haga zoom sobre el documento. Es bien simple, ni se agrandará, ni se hará más pequeña.

¿Cómo probarlo?

Podemos encontrar varias herramientas que nos ayudarán a probar como se ve en diferentes vistas. Las hay gratuitas y de pago, pero aquí pondremos las que son gratuitas.

• Firefox: En el menú Herramientas -> Desarrollador web, hay una opción llamada “Vista de diseño adaptable” es una herramienta sencilla, pero que la tienes siempre a mano.
• ResizeMyBrowser resizeMyBrowser
• Responsive Test http://responsivetest.net/#u=http://www.zootemplate.com|1024|768 de ZOO Template
• Designmodo http://designmodo.com/responsive-test/
• Screefly de Quirk tools http://quirktools.com/screenfly/

Desde luego, estas no son todas las herramientas que hay para probar, pero les dejamos que busquen la que más les guste por si mismos :-)

Herramientas que te pueden ayudar:

• Fit Text: plugin jQuery para adaptar el tamaño de tu letra.
• Can I use CSS3 Media Queries? sitio web que ofrece una referencia sobre versiones de navegadores que soportan (o no) las media-queries,
• Imagenes flexibles mejorar la visión de las imágenes y su peso.
• http://quirktools.com/ una colección de harramientas muy interesantes.
• Bootstrap Utilidades Responsivas framework que utiliza Joomla! en la actualidad.

Sitios web responsivos

• Creativogroup: http://thecreativogroup.com/es/ vale la pena ver las diferentes secciones.
• Grupo Publips http://www.grupopublips.com/ grupo de comunicación y publicidad.
• Ilustre Colegio de Abogados de Valencia http://es.icav.es/
• Food sense http://foodsense.is/ Una forma de ver la cocina vegetariana.