Cuando pensamos en CSS para Responsive Web Design nos vienen a la cabeza multitud de herramientas disponibles en el lenguaje. Quizás aquello que más resulta representativo sean las Media Queries y es cierto que éstas son las que nos permiten hacer la mayor parte de la "magia" para conseguir sitios web que se adaptan a todo tipo de pantallas. Sin embargo, el mundo de las CSS es enorme y debemos aplicar muchas otras técnicas y estilos para conseguir producir sitios responsivos. En este artículo vamos a repasar unas cuantas.

No pretendemos ofrecer técnicas en orden de importancia o en el orden que las debes de conocer, tampoco explicar acerca de flujos de trabajo, pues de todo eso ya se habla en detalle en otra serie de artículos del Manual de Responsive. Más bien se trata de exponer una lista de propiedades de estilo, a modo de cajón desastre.

Como casi siempre que hablamos de diseño responsive, los consejos que encontrarás en este artículo se pueden aplicar, y se deben aplicar, para un mejor diseño web en general, así que las debes tener presentes incluso si no estás haciendo sitios adaptables.

Variaciones del modelo de caja entre los navegadores

Una de las primeras cosas que debemos entender, y aprender, cuando nos incursionamos en el mundo de las CSS es el modelo de caja. Supongo que si estás leyendo este texto algunas nociones debes de tener. Lo que no sé si sabes son las diferencias que existen entre los navegadores, principalmente las versiones antiguas de Internet Explorer.

El atributo box-sizing, aparecido en la especificación CSS3, nos permite indicar cómo deseamos que se interprete el modelo de caja, evitando que cada navegador lo entienda a su modo.

En concreto nos sirve para alterar el modo en el que los navegadores calculan las dimensiones de una caja (un elemento de la página en términos generales), es decir, su altura y anchura. El problema es que unos navegadores para hacer ese cálculo tienen en cuenta el padding y otros no, así como las dimensiones del borde. Si no definimos un box-sizing de manera global para todo el sitio web, corremos un serio riesgo que las páginas del sitio se vean de manera diferente en cada navegador, lo que generalmente no es deseable.

Obviamente, estas diferencias son muy importantes a la hora de maquetar. Básicamente porque si no las tienes en cuenta puede que tengas que rehacer mucho trabajo cuando pruebas tu página en otros navegadores. Esto es porque generalmente vamos maquetando y probando la página en un navegador y luego, cuando probamos la página en otro navegador que no entiende el modelo de caja de la misma manera, vemos que muchas cosas quedan fuera del lugar donde les corresponde.

No es nuestro objetivo explicar detenidamente las distintas alternativas de box-sizing, pero sí te indicamos cuál es la recomendación:

box-sizing: border-box

Ese atributo lo tendrás que especificar para todos los elementos de la página, así que puedes usar el selector * para seleccionarlos a todos.

Las posibilidades de display table para maquetación

Ese titular no significa que estemos apoyando la maquetación con tablas, ni mucho menos. Una cosa es el display:table de CSS y otra bien distinta las tablas de HTML realizadas con la etiqueta TABLE. La recomendación sigue siendo la misma, usar TABLE para mostrar información tabulada, sin embargo display: table nos sirve para facilitar las posibilidades de las tablas tradicionales en el uso de HTML semánticamente correcto.

Como esto ya lo hemos explicado en otras ocasiones no tiene sentido que lo volvamos a repetir aquí, simplemente recomendar la lectura del artículo sobre display table.

Maquetación Flexbox

Otra de las cosas nuevas que nos trae CSS y que sirven para maquetar de manera mucho más versátil, rápida y evitando muchos de los problemas habituales del posicionamiento de elementos, es usar las técnicas Flexbox.

Flexbox está con nosotros desde hace tiempo, el problema es que navegadores muy antiguos no lo soportan todavía. En concreto y como suele ocurrir, Internet Explorer es el que da los problemas, puesto que sólo se encuentra disponible Flexbox a partir de la versión 10. Aunque dicho sea de paso, IE10 todavía te obliga a trabajar con prefijos propietarios "ms-" y tiene un soporte parcial. El estándar de maquetación Flexbox lo disfrutarás desde Internet Explorer 11 y de manera global en todos los otros navegadores del mercado. Si ese no representa un problema para ti, lo mejor para maquetar es aprovechar Flexbox porque te ofrece unas posibilidades increíbles hasta el momento.

Para saber más de Flexbox te recomiendo verte una clase en directo en la que explicamos las posibilidades de este estándar.

Atributos min-width y max-width / min-height y max-height

Estos atributos están disponibles desde hace mucho tiempo en las CSS así que deberías conocerlos. Son especialmente útiles en los diseños responsive porque los contenedores se estiran y se encogen, para adaptarse a las dimensiones de las ventanas o pantallas. Generalmente es el comportamiento deseado, lo que ocurre es que en muchos casos no deseas que ese encoger o agrandar llegue hasta ciertos límites.

Estás diseñando una web y muchas veces no deseas que la anchura llegue al límite posible de un monitor de alta resolución, por ejemplo 2.500 píxeles. No digo que no se deba hacer, es una decisión de diseño.

.dimensiones-maximas{
    max-width: 1600px;
}

A veces se trata de una columna que no debe medir más que unas dimensiones de anchura, quieres que al hacer grande la ventana se estire, pero que no llegue a pasar de un valor determinado. O una imagen que se adapta al ancho de un contenedor pero no quieres que llegue a ser tan grande que se sobrepase su resolución.

.img-banner-aside{
    width: 100%;
    max-width: 300px;
}

Con alturas pasa un poco lo mismo, aunque en este caso no se agrandan debido a cambios en las dimensiones de la pantalla o ventana, sino debido al contenido que tienen. A veces tienes un listado de artículos, por ejemplo. El propio navegador hará que las cajas donde los coloques sean de la altura necesaria para que quepa la descripción del artículo, pero unos tienen más texto que otros y por tanto puede ocurrir que las alturas queden descompensadas. Muchas veces no significará un problema, sobre todo cuando están uno debajo del otro, pero si queda uno al lado del otro y las cajas tienen un color de fondo puede que el efecto sea más feo (Ese problema se soluciona con Flexbox o con display table). Incluso, aunque estén uno debajo del otro, a veces si unos tienen texto muy pequeño, la caja queda con tan poca altura que se ve ridícula en comparación con otras y por ello quieres que tenga una altura mínima.

.article-home{
    background-color: #ddd;
    min-height: 225px;
}

En definitiva, en todos esos casos y muchos más que te puedas encontrar, conviene tener a mano los atributos max-width y min-width, así como max-height y min-height.

Conclusión

En este artículo hemos comentado diversos criterios de CSS y herramientas del lenguaje que se usan mucho para los diseños responsive. Por supuesto no son los únicos! solo unos cuantos que debes usar sí o sí, y sin llegar a la complejidad y potencia de las Media Queries que te solucionan los problemas de una manera diferente.

En el próximo artículo tenemos que hablarte de otro elemento fundamental cuando trabajas con diseños responsive. No es un CSS, sino una etiqueta META que es necesaria para que tu página se adapte completamente a la pantalla de un móvil: el Viewport.