Hoy en día, una página web que no pueda ser vista desde un dispositivo móvil o tablet, tiene varias desventajas con respecto a una página web adaptable. Pero, ¿qué significa que la página web sea “adaptable” o “responsive“?
No hace mucho, el término “diseño adaptable” o “responsive design” era casi inexistente. No obstante, hoy en día sería inimaginable navegar la web sin que este concepto esté presente.
Se entiende por un diseño “adaptable” o “responsive” cualquier diseño el cual se “adapte” y acomode sus diferentes elementos para que puedan ser visualizados correctamente desde dispositivos de diferentes resoluciones y tamaños (y no únicamente desde un ordenador con un monitor grande). Por ejemplo, desde un smartphone, tablet o incluso desde un reloj inteligente con capacidad de navegar la web.
De acuerdo a Statistica, en el 2019, el 61% de todas las visitas a Google fueron desde un dispositivo móvil. Además, en setiembre del 2020, Google anunció que cambiará su algoritmo de búsqueda para priorizar las páginas web adaptables.
Anteriormente al concepto de diseño adaptable, los diseñadores y programadores web tenían que crear dos versiones separadas de una misma página, basándose en código para detectar el tipo de navegador con el cual el usuario accedía y dependiendo de eso redireccionar a la persona a una página o la otra. Fue con la llegada del “viewport” que esto cambió y bastó con una sola línea para que el navegador automáticamente detecte si se está accediendo desde un dispositivo móvil y adecúe la página según la resolución.
A continuación, se presenta la implementación base del “viewport” en HTML:
<meta name="viewport" content="width=device-width,initial-scale=1"/>
Con esta meta-etiqueta en HTML, el navegador sabrá desde qué dispositivo se está cargando la página y podrá mostrarla adecuadamente al usuario. Claro está que hace falta también implementar la página de tal forma que sepa cómo comportarse cuando es cargada desde un celular o desde un ordenador de escritorio y para esto entra CSS y Media Quieres, los cuales veremos a continuación.
CSS Media Queries para diferentes resoluciones y orientaciones
Si eres nuevo en el diseño adaptable, conocer sobre los Media Queries es obligatorio. Los Media Queries te permitirán estilizar los diferentes elementos de una página de acuerdo al ancho de la pantalla.
Una forma popular de diseñar con CSS es primero crear el sitio para que se vea bien en un dispositivo móvil y luego ir creando encima estilos específicos para otras resoluciones más grandes.
Los Media Queries son usualmente utilizados para los elementos de grilla, tamaños de fuente, márgenes y espaciados entre diferentes resoluciones y orientaciones.
A continuación, se muestra un ejemplo de cómo se puede priorizar el desarrollo CSS para dispositivos móviles sobre ordenadores en el cual el estilo por defecto de una columna es un ancho del 100%. En caso se detecte que la pantalla es más grande (por ejemplo, como mínimo 600px de ancho), se cambia el ancho de la misma columna al 50%.
.column {
width: 100%;
}
@media (min-width: 600px) {
.column {
width: 50%;
}
}
El ejemplo anterior es simple pero resulta ser interesante.
- Considerando el diseño primero para móviles, el width de column es de 100%
- Al utilizar el Media Query min-width, definimos las reglas CSS específicas para pantallas con un ancho mínimo de 600px (min-width: 600px). Así que para pantallas más anchas que 600px, column tendrá un width de 50%.
Si bien los Media Queries son esenciales para el desarrollo adaptable, existen más funcionalidades de CSS que nos pueden ayudar a lograr un diseño adaptable. Flexbox es una de ellas.
¿Qué es Flexbox?
¿Qué hace Flexbox? ¿Para qué sirve? Con Flexbox, podemos lograr, por ejemplo, centrar verticalmente un elemento de manera muy sencilla. También nos permitirá crear grillas adaptables al tamaño de la pantalla.
Flexbox nos provee una forma eficiente de disponer los elementos, alinearlos y distribuirlos dentro de un contenedor, incluso cuando su tamaño es dinámico o flexible (de ahí viene el nombre).
A continuación, mostramos un ejemplo donde combinamos Media Queries y Flexbox para crear una grilla adaptable.
<style>
main {
background: #d9d7d5;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
background: #767775;
flex-basis: 100%;
height: 100px;
margin-bottom: 0.5rem;
}
@media (min-width: 600px) {
main {
flex-wrap: nowrap;
}
div {
flex-basis: 33%;
}
}
</style>
<main>
<div></div>
<div></div>
<div></div>
</main>
Con el código mostrado, podemos lograr lo siguiente:
- Establecemos la disposición Flexbox con display: flex en nuestro contenedor principal main.
- Diseñamos para móvil primero. Establecemos el elemento main a flex-wrap: wrap lo cual permite a sus elementos hijo ser envueltos dentro de nuestra disposición flexbox (ver Figura 1). Ponemos flex-basis: 100% en nuestros elementos “div” para asegurarnos que abarquen el 100% del ancho de sus padres in la disposición flexbox.
- Estilizamos para resoluciones más grandes. Utilizamos Media Queries similares a las del ejemplo anterior para poner a nuestro contenedor main en flex-wrap: nowrap. Esto hará que los elementos hijos no estén envueltos y que mantengan el ancho de la columna apropiado. Al poner “div” a flex-basis: 33% dentro del Media Query, establecemos que las columnas tendrán el 33% del ancho de su padre.
- Debido a que definimos display: flex y debido a que no sobrescribimos las reglas dentro del Media Query, tenemos una disposición flexbox para móvil, tablets y ordenadores. La Media Query flex-basis: 33% y la regla heredada display: flex nos darán una disposición flexbox como se muestra en la Figura 2. Anteriormente, para lograr este comportamiento, hubiéramos tenido que crear bastante código CSS complejo.
Un problema bastante común con el cual se topan muchos diseñadores y desarrolladores web, es adaptar el tamaño de las imágenes y vídeos a la resolución en la cual se está viendo la página. Veremos cómo manejar esto problema hacineod uso de herramientas propias de CSS y HTML5.
Imágenes adaptables
Al hacer uso de atributos modernos, podemos acomodar las imágenes a un gran rango de resoluciones y dispositivos.
<style>
img {
max-width: 100%;
}
</style>
<picture>
<source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
<source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
<img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>
En el ejemplo mostrado, hacemos lo siguiente:
- Al definir max-width: 100%, la imagen aumentará o disminuirá dependiendo del ancho del contenedor donde se encuentre.
- Al utilizar una combinación de las etiquetas picture, source e img, estamos renderizando únicamente una imagen y se estará cargando la que mejor se adapte dependiendo del dispositivo de la persona que visita la página.
- El formato WebP es un formato moderno que soporta mayores compresiones de imágenes en la web. Al utilizar source podemos referenciar una imagen WebP para que sea cargada en navegadores que la permitan y source para referenciar a la versión PNG en caso no soporte WebP.
- srcset es utilizado para decirle al navegador qué imagen deberá cargar dependiendo de la resolución del dispositivo.
Herramientas para simular adaptabilidad en páginas web
No es necesario tener físicamente un smartphone o una tablet para poder poner a prueba nuestros diseños adaptables. De hecho, sería bastante incómodo tener que cargar en 3 o 4 diferentes dispositivos la misma página cada vez que hay un cambio pequeño para asegurarnos de que se visualiza bien.
Es por esto que existen diversas herramientas que permiten visualizar nuestro contenido simulando que estamos en diferentes resoluciones de pantallas o dispositivos.
Chrome DevTools
Nos provee con una varidad para simular vistas desde un dispositivo móvil o una tablet. Además, provee una opción de “adaptable” la cual nos permite definir a nosotros mismos el tamaño de nuestra pantalla. Podemos acceder a esta opción con un navegador Google Chrome utilizando el siguiente atajo de teclado: Ctrl+Shift+m.
Sistemas en línea
Tenemos también la alternativa de utilizar diversos sistemas en línea para poder validar nuestro diseño. El único requisito es que nuestro diseño esté subido a la internet en algún servidor público pues estos sistemas tomarán como único parámetro la URL o dirección de nuestra página web.
A continuación, se detallan algunas de estas herramientas:
Conclusión
El diseño web adaptable va a continuar evolucionando y cambiando de una manera muy rápida y debemos mantenernos al tanto y estar pendientes de las nuevas tendencias y mejoras para optimizar la experiencia del usuario en nuestras páginas web.
No solo nuestros usuarios o clientes se verán beneficiados por un diseño adaptable sino que también nuestra página tendrá un posicionamiento mucho mejor en los motores de búsqueda.