¿Cómo funciona el Responsive design?

Una vez aclarada la duda¿Qué es Responsive Design?nos adentramos en cómo funciona esta forma de diseñar y desarrollar páginas web para que se adapten a la presentación en cualquier dispositivo.

En la actualidad donde cada vez se utilizan más los dispositivos móviles y tabletas, donde tan pronto estamos utilizando la televisión o el ordenador para navegar por Internet, el diseño adaptable es fundamental para llegar hasta nuestros usuarios.

Podéis comprobar las estadísticas de vuestro Blog y verificar cómo hay cada vez un mayor porcentaje de usuarios que decide utilizar su "tablet" para leer vuestros contenidos cómodamente desde su cama antes de dormir o que apurado por la mañana con las prisas para ir al trabajo aprovecha su móvil para ver vuestras actualizaciones. Luego con más calma esa misma persona consulta desde un ordenador los contenidos o incluso desde su televisor en la comodidad de su hogar.

El usuario actual utiliza Internet desde múltiples dispositivos con distintas resoluciones y formas de mostrarnuestros contenidos, no preparar nuestra web o Blog a tal efecto supone perder visitas y posicionamiento en los buscadores cuando se nos trata de localizar por dispositivos móviles.

Conceptos previos:

Antes de nada, si no tienes experiencia en programación o diseño de páginas web, debes leer y entender estas guías para comprender los conceptos que vamos a tratar:

Como es norma en Diarios de la nube, voy a simplificar al extremo la parte más técnica para facilitar la comprensión de los conceptos tanto a las personas más noveles como a los usuarios más expertos.

La clave del responsive design reside en la utilización de las hojas de estilo. En Blogger, como en cualquier publicación web, existen unas hojas de estilo que sirven para que podamos darle presentación a cada componente que mostramos en nuestras páginas web.

Se trata de que la parte principal de nuestra página no deba cambiar en ningún punto y sólo el código que se dedica a la presentación, el de las hojas de estilo, se adapte a la resolución del dispositivo donde se va a mostrar la página.

Como vimos en la anterior entrega,los móviles y los ordenadores poseen pantallas de diferentes tamaños. No es lo mismo ver una pantalla en el ordenador que visualizarla en un móvil. Esto es porque al disponer de mayor tamaño los monitores de ordenador también la resolución a la que muestran los contenidos suele ser mayor que la de los móviles (aunque cada vez hay menos diferencias entre unos y otros).

Nuestras hojas de estilo deben manejar "magnitudes" o "tamaños" bien distintos cuando tratamos de mostrar las páginas web que las utilizan en un móvil que en un ordenador. Para no tener que generar "código extra" para cambiar los estilos dependiendo de si estamos mostrando nuestra web en un dispositivo u otro, utilizamos las "Media Queries". Éstas no van a permitir variar los parámetros de presentación de nuestras hojas de estilo sin necesidad de cambiar el código de la zona principal de nuestra página web.

¿Qué son las "Media Queries"?

Evitando complicaciones técnicas, una "Media query" es una consulta que se puede realizar desde una página web al dispositivo sobre el que ésta se presenta, para saber qué estilos aplicar en función de los parámetros técnicos que el aparato puede tener.

Hagamos un ejemplo con el que se comprenda al instante: Dos problemas, el tamaño y la resolución.

Primero el tamaño:Imaginemos que nuestra web queremos que se muestre en el ordenador con un tamaño del tipo de letra de 12 píxeles. El ordenador posee una pantalla de 24 pulgadas (razonablemente grande), con lo que 12 píxeles de tamaño para la letra se leen perfectamente. Ahora pensemos que es misma página web queremos que se vea en el móvil, pero éste sólamente tiene 4 pulgadas de tamaño... la letra a 12 píxeles no se podrá leer con facilidad.

Después la resolución: el monitor de 21 pulgadas del ordenador es capaz de presentar 1920 píxeles de ancho por 1080 píxeles de alto. La "pantallita" de 4,5 pulgadas del móvil sólo puede presentar 1024 píxeles de alto por 768 de ancho (puesto en vertical, en horizontal 1024 de ancho por 768 de alto). Los 12 píxeles del tamaño de la letra no van a "ocupar" lo mismo si se tienen que presentar en una pantalla con hasta 1920 píxeles de ancho que en una donde sólo entran 1024... ¿qué podemos hacer?, hacer que el tamaño del tipo de letra sea distinto en función de la resolución del dispositivo donde se va a mostrar la página web. Para saber qué tipo de dispositivo y qué resolución puede tener, utilizamos las "media queries".

¿Cómo utilizamos las "Media queries" para conformar nuestro "Responsive design"?

En nuestras hojas de estilo escribimos algo tan sencillo como esto (funcionará en todos los navegadores):

@media only screen and (max-width:1080px) {

dentro podemos variar los parámetros de tamaño de las reglas de presentación de la hoja de estilos.

}

De esta manera, en la propia hoja de estilos estamos indicando "Si el dispositivo (media) que se utiliza para ver mi web tiene una resolución de 1080 píxeles" entonces "todo lo que hay entre llaves { } son los parámetros que debes de utilizar para dibujar la página en esta clase de dispositivos.

Así pues, podremos variar los "anchos y altos" de distintos componentes de nuestra página con respecto a distintas resoluciones:

@media only screen and (max-width:1080px) {#header-wrapper, #outer-wrapper, #footer-widgets, .container, #featuresticker, #featuredhome-wrap {width: 960px;}
@media only screen and (max-width:637px) {#header-wrapper, #outer-wrapper, #footer-widgets, .container, #featuresticker, #featuredhome-wrap {width: 310px;}}

Estamos indicando que si la resolución del dispositivo donde se presenta la web es de 1080 píxeles de ancho, todos los contenedores de la página principal midan de ancho 960 píxeles. Si se presenta la página web en un dispositivo de 637 píxeles de ancho, entonces ponemos todo el contenido de la página principal delimitado a 310 píxeles de ancho.
Es decir, en proporción a la resolución, aplicamos unos parámetros de presentación en la hoja de estilos que van en proporción a la resolución del dispositivo donde se muestran.

¿Qué media queries puedo hacer?:

Las "Media queries" permiten consultar por muchos más parámetros que simplemente la resolución. Lo que sucede es que la resolución es un "indicativo" ideal para posicionar los componentes de una web en un tablero y "presupone" un mínimo tamaño que puede cuadrar con un perfil de dispositivo dado.

Podéis ver muchos más ejemplos de datos que pueden extraerse de "Media queries"aquí