Consultas de Elemento: El Futuro del Diseño Web Adaptativo

Spanish (Español) translation by Miguel Sánchez (you can also view the original English article)

Las consultas de medios ('media queries') son una parte vital del diseño web moderno, pero no siempre son perfectas. En este artículo echaremos un vistazo a la idea de las "consultas de elemento", lo que muchos plantean como el futuro del diseño web adaptativo.

En Los Comienzos

El artículo de Ethan sobre Diseño Web Adaptativo cambió la forma en la que construimos sitios web, para siempre. Su artículo inspiró y fue rápidamente adoptado por diseñadores web y desarrolladores. Han surgido planteamientos tales como "Móvil Primero", "Escritorio Primero" e "Independiente del Dispositivo", se han desarrollado patrones de diseño desde entonces, se han introducido nuevos estándares como el elemento picture y ahora tenemos infinidad de opciones de entornos de referencia ('frameworks') que hacen más fácil desarrollar un sitio web adaptativo.

Ya no construimos sitios web para un determinado tamaño de pantalla, navegador o dispositivo. En cambio, los construimos para que sean igualmente agradables en cualquier dispositivo y tamaño de pantalla. Hacemos esto utilizando consultas de medios ('media queries'), sin olvidar la etiqueta meta viewport.

Consultas De Medios ('Media Queries')

Las consultas de medios están diseñadas para permitirnos moldear reglas de estilo respecto a un entorno específico. Uno de los usos más comunes de las consultas de medios es cambiar estilos dentro de cierto rango de anchos de ventana. El siguiente código, por ejemplo, oculta la barra lateral cuando se accede al sitio web a través de una ventana de visualización de hasta 720px de ancho.

.site-sidebar {
  display: flex;
	flex: 1 1 320px;
}
@media ( max-width: 720px ) {
	.site-sidebar {
    	display: none;
    }
}

Las consultas de medios se desarrollaron, junto con los dispositivos, con varias funciones adicionales como orientation (la orientación) y resolution (la resolución). El ejemplo siguiente muestra cómo podríamos utilizar una de estas características para servir un mayor tamaño de imagen en una pantalla de alta resolución.

.site-logo a {
	display: inline-block;
	background: url( images/logo.png ) no-repeat;
}
@media screen and ( min-resolution: 2dppx ) {
	background: url( images/logo@2x.png );
}

Las consultas de medios se han convertido en un componente básico para ofrecer una experiencia adaptativa. Ponte al día leyendo estos artículos, tutoriales y consejos para aprovechar las consultas de medios, tanto en nuestras publicaciones anteriores en Tuts+ como en todo Internet.

Sin Embargo

Las consultas de medios no son la panacea para cada situación de diseño web adaptativo. De hecho, nunca fue esa la intención.

Hoy en día hay una gran variedad de dispositivos en el mercado en varios tamaños y características, difuminando la línea entre "móvil" y "escritorio" (os miro a vosotros "ordenadores portátiles híbridos"). Por esta razón, mantener la estética de un sitio web, una gran experiencia de usuario y el rendimiento, nunca ha sido más difícil.

En el Google IO de 2015, Google facilita a los desarrolladores la comprobación de su sitio web en más de 100 dispositivos diferentes.

Y una vez añades a la mezcla cosas como anuncios, tablas y contenido preexistente, la situación puede ser aún peor. Pronto te encontrarás con los aspectos "no tan buenos" de las consultas de medios.

Consultas De Medios: Lo "No Tan Bueno"

Considera el siguiente ejemplo. Tenemos un componente de interfaz de usuario (UI) para mostrar nuestro perfil de miembro de equipo. Queremos utilizar este componente en un par de lugares diferentes en nuestro sitio web. Este ejemplo muestra cómo la interfaz de usuario (UI) se presenta en un ancho de ventana de 780px.

En la página de "Perfil de usuario", ponemos el avatar de usuario a la izquierda y el nombre de usuario, así como la biografía, a la derecha.

Composición del perfil de usuario en el perfil "Usuario".

En la página "Equipo" en nuestro sitio web, sin embargo, la composición cambia. La imagen del avatar de usuario ahora se coloca en la parte superior, y el nombre de usuario, así como la biografía, está por debajo. El tamaño de fuente también podría ser algo más pequeño.

Composición de perfil de usuario en la página "Equipo".

Esta situación puede solucionarse con consultas de medios. Por ejemplo, podemos escribir el CSS como sigue:

/**
 * Profile
 */
.team-profile {
	text-align: center;
}
.team-profile .bio {
	margin-top: 20px;
	font-size: 14px;
}
@media ( min-width: 480px ) {
	.team-profile {
		text-align: left;
		display: flex;
	}
	.team-profile .avatar {
		flex: 0 0 120px;
	}
	.team-profile .bio {
		font-size: 16px;
		flex: 0 1 580x;
	}
}

/**
 * Profile card.
 */
.team-profile-card {
	text-align: center;
}
.team-profile-card .bio {
	margin-top: 20px;
	font-size: 14px;
}

/**
 * Probably, some overrides
 */
.page .team-profile-card { ... }

Se puede corregir mientras utilicemos algunas clases de identificación adicionales: .user-profile y .user-profile-card.

Sin embargo, también va en contra de nuestra interfaz de usuario que sea un componente reutilizable; una interfaz de usuario que se puede colocar en cualquier parte del sitio web y sea capaz de adaptarse a su entorno.

En este ejemplo queremos que la composición de nuestro componente se adapte cuando esté incluido en un recipiente pequeño, en vez de cuando es reducido por la ventana del navegador. Así que, en lugar de depender del tamaño de la vista de navegador para cambiar la composición, ¿por qué no lo hacemos a nivel de elemento?

Consultas de Elemento (Contenedor)

La idea de las consultas de elemento surgió en torno a principios de 2012; un par de años después de que el Diseño Web Adaptativo se convirtiese en la metodología convencional. Por desgracia, probablemente no había muchas razones convincentes para plantearlo como un estándar web en aquel momento. El mundo aún estaba acostumbrándose a ser flexible de nuevo.

@ianstormtaylor sí, las "consultas de elemento" aparecen una y otra vez
— Paul Irish (@paul_irish) 24 de enero de 2012

Comunidades web comenzaron iniciativas por su cuenta. RICG (Grupo Comunitario sobre el Asunto Adaptativo), el mismo grupo que inició el elemento <picture>, eventualmente añadió las consultas de elemento a su lista de asuntos, mientras otros desarrolladores construyeron una biblioteca de JavaScript, como EQCSS, para emular esta funcionalidad.

Las consultas de elemento funcionan similarmente a las consultas de medios; excepto que escuchan al tamaño del elemento en lugar de al de la ventana del navegador. Esto nos permite construir un sistema de interfaz de usuario (UI) realmente modular sobre el fundamento de no repetir código ('DRY: Don't Repeat Yourself'). Dado el mismo ejemplo, podríamos reescribir los estilos de nuestro componente de interfaz de usuario con EQCSS, como sigue:

.team-profile {
    text-align: center;
}
.team-profile .bio {
	margin-top: 20px;
	font-size: 14px;
}
@element ".team-profile" and ( min-width: 480px ) {
	.team-profile {
		display: flex;
	}
	.team-profile .avatar {
		flex: 1 1 120px;
	}
	.team-profile .bio {
		text-align: left;
		font-size: 16px;
		flex: 1 1 580x;
	}
}

Aquí no nos preocupa cuál es el ancho de la ventana. Como puedes ver arriba, mientras la interfaz de usuario (UI) se estira a 480px o una anchura mayor, mostramos juntos .avatar y .bio. Cuando el ancho de la interfaz de usuario se contrae por debajo de 480px, dejamos .avatar y .bio apilados y el contenido alineado al centro.

Concluyendo

Sólo como aclaración, no digo que usar consultas de medios sea malo, en absoluto. Las consultas de medios son maravillosas y así lo hemos visto en muchos sitios web construidos hoy en día. Las consultas de medios y las de elemento pueden ciertamente coexistir. Sin embargo, hay muchos escenarios de diseño donde utilizar consultas de elemento tendría más sentido que usar consultas de medios.

Lamentablemente, las consultas de elemento tienen aún un largo camino por recorrer antes de que finalmente se aprueben como un estándar web; nuestra esperanza en esto se apoya en toda la gente buena de RICG.

Mientras esperamos, podemos explorar el potencial de consultas de elemento a través de una biblioteca de JavaScript como EQCSS. Y eso es exactamente lo que vamos a hacer en el siguiente tutorial. ¡Estad atentos!

Más Lecturas

Consultas de Contenedor: Una Vez Más En La Brecha por Mat Marquis
Trabajando Alrededor De La Falta De Consultas De Elemento por Scott Jehl
Las Consultas De Medio No Son La Respuesta: Consulta De Elemento Para Navegadores Que No La Soportan ('Polyfill') por Tyson Matanich