Y llegó el momento. Veremos cómo aplicar el principio “Mobile First” del diseño adaptable (“responsive design”) y aprovecharemos las ventajas que nos brinda la propiedad CSS “flex” para lograr que nuestro sitio se muestre correctamente en cualquier dispositivo conectado a Internet: smartphones (o iPhones), tablets (o iPads), ordenadores portátiles (notebooks, laptops), ordenadores de escritorio y otros dispositivos con pantallas más grandes.

Las hojas de estilos

Boilerplate nos brinda dos hojas de estilos ubicadas en la carpeta templates/miplantilla/css.

El archivo normalize.min.css contiene muchos estilos predefinidos que sirven para uniformizar o “estandarizar” la forma en que cada navegador mostrará el contenido de nuestro sitio. Como Boilerplate ya hizo el “trabajo sucio” por nosotros, no necesitamos modificar el contenido de este archivo.

El archivo main.css también contiene algunos estilos predefinidos que podemos modificar y nos brinda dos zonas donde podemos escribir nuestras propias reglas CSS.

Las reglas de estilo generales las colocaremos en la zona titulada como “Author’s custom styles” (en la figura, inicialmente a partir de la línea 64). Las reglas de estilos adaptables (o “responsive”) las colocaremos en la zona titulada como “Media queries” (en la figura, inicialmente a partir de la línea 82).

El principio “Mobile first”: empezar desde 20em

Se considera una buena práctica empezar a maquetar nuestro sitio desde la vista en dispositivos móviles (smartphones o iPhones) cuyo ancho de pantalla es 320px (equivalente a 20em). Según los requisitos de nuestro proyecto, el esquema es el siguiente:

Considerando que todo elemento HTML es una caja, lo primero que haremos es garantizar que el contenido de todos los elementos se ajuste al borde de su caja. De esta manera, no tendremos que realizar ¿complicados? cálculos aritméticos para establecer los márgenes (margin y padding) y evitar que aparezca esa desagradable barra de desplazamiento horizontal (scroll) cuando las dimensiones de nuestra web sobrepasa los límites del ancho de la pantalla.

Para fines didácticos, aplicaremos un color de fondo a cada sección del sitio según el esquema mostrado líneas arriba.

Inicialmente, nuestro sitio debe verse así en un dispositivo móvil:

De aquí en adelante y cuando sea conveniente, aprovecharemos las ventajas que nos brinda el uso de las “cajas flexibles” (o “flexbox”) para obtener un diseño adaptable (o “responsive”).

Si aplicamos la propiedad CSS “flex” a un elemento HTML, éste se convierte en un “contenedor flexible” de manera que los otros elementos HTML que se encuentran dentro de él ajustarán sus dimensiones para llenar el espacio disponible.

La propiedad CSS “flex” es relativamente nueva y ya es compatible con todos los navegadores modernos.

Continuemos con la maquetación. El <header> es un contenedor flexible cuyos elementos <div class=”logo”> y <nav class=”mainmenu”> deben situarse en una columna (verticalmente) ocupando todo el ancho de la pantalla.

Hemos asignado al <div class=”logo”> una altura de 80px (que es la misma altura de la imagen), hemos centrado el contenido y con el “overflow” ocultamos las etiquetas <h1> del título y <p> del eslogan.

El módulo del menú principal es una lista desordenada <ul> que se encuentra dentro de la etiqueta <nav class=”mainmenu”>. Por lo tanto, dicha lista <ul> actuará también como contenedor flexible cuyos elementos de lista <li> deben ubicarse en una fila (horizontalmente) justificados al centro del contenedor.

Se ha ocultado el título <h3> del módulo del menú principal mediante una regla CSS. Sin embargo, también es posible hacerlo desde el panel de administración al momento de configurar el módulo.

Ahora nuestro sitio se mostrará así desde 320px (o 20em):

Primer media-query: desde 35em

Según los requerimientos del proyecto, el sitio debe mostrarse en tablets o iPads en posición vertical (o “portrait”) según el esquema de la figura:

Observamos que los módulos de las posiciones “left” y “right” deben colocarse en una fila (horizontalmente) ocupando la mitad del ancho de la pantalla.

El <section class=”main”> será un contenedor flexible y sus elementos deben acomodarse de la siguiente manera:

• El <article class=”content”> ocupará todo el ancho de la pantalla.
• Los <aside class=”left”> y <aside class=”right”> se desplazarán debajo del <article class=”content”> y ocuparán el 50% del ancho de la pantalla.

Nuestro sitio debe verse así en una tablet o en un iPad en posición vertical (o “portrait”) desde los 560px (o 35em).

Segundo media-query: desde 48em

Nuestro sitio debe mostrarse según el siguiente esquema en tablets o iPads en posición horizontal (o “landscape”) desde los 768px (o 48em).

Ahora el <div class=”logo”> y el <nav class=”mainmenu”> deben ubicarse en una fila (horizontalmente). Será suficiente orientar los elementos del contenedor flexible <header> en una fila y centrarlos verticalmente.

Nuestro sitio se verá así en una tablet o en un iPad en posición horizontal (o “portrait”) desde los 768px (o 48em).

Tercer media-query: desde 60em

Ahora tenemos que lograr que nuestro sitio se vea según el siguiente esquema en ordenadores portátiles.

Los elementos del contenedor flexible <section class=”main”> deben colocarse horizontalmente en una misma línea. El <aside class=”left”> debe ubicarse a la izquierda del <article class=”content”> y el <aside class=”right”> debe estar a la derecha. También debe modificarse los anchos de los tres elementos de manera que el ancho del <article> sea el doble del ancho de cada <aside>.

Nótese que la propiedad CSS “order” nos permite cambiar el orden en que se muestran los elementos del contenedor flexible sin necesidad de modificar la estructura HTML.

En la siguiente imagen se muestra el aspecto que tendrá nuestro sitio en ordenadores portátiles desde los 960px (o 60em).

Último media-query: desde 80em

Veremos cuál será el aspecto de nuestro sitio en ordenadores de escritorio y pantallas más grandes.

El ancho máximo del <header>, <section class=”main”> y <footer> será de 80em (o 1280px) y todo el sitio se mostrará centrado horizontalmente. El ancho del <article class=”main”> debe ser el triple del ancho de cada <aside>.

Nuestro sitio ahora se verá así en un ordenador de escritorio y en dispositivos con pantallas más anchas desde los 1280px (u 80em).

En la siguiente figura se muestran todas las modificaciones que hemos hecho en la hoja de estilos css/main.css.

Finalmente, nuestra plantilla cumple con todos los requerimientos del proyecto: está optimizada para verse correctamente en cualquier navegador web y se adapta a cualquier dispositivo conectado a Internet. En otras palabras, hemos logrado crear una plantilla “responsive” para el front-end de nuestro sitio en Joomla!

El trabajo “pesado” ya está hecho y es obvio que todavía tenemos que ajustar los estilos del componente y los módulos de Joomla! para que nuestro sitio tenga un aspecto más atractivo. Pero eso lo dejamos para el próximo artículo de esta serie.

Hasta la próxima. ¡Abur!