Comunidad de diseño web y desarrollo en internet

Diseño Responsive con Media Queries y “em” ¡Muerte a los Píxeles!

Ya hemos hablado acerca de las medidas relativas y las absolutas en el diseño Web. También acerca de cómo usar el Viewport correcto para layouts en responsive. Pero parece que estas buenas prácticas se nos diluyen cuando tenemos que hablar de layouts responsive y de qué medidas usamos todavía para los cambios en los breakpoints. Hablamos de medidas relativas pero configuramos Media Queries en píxeles.

Media Queries relativos al mercado de los dispositivos


Actualmente hay un set de Media Queries en las que se trata de “identificar” el comportamiento del layout de acuerdo a las resoluciones de las pantallas más usadas. ¿Es esto correcto en un mercado donde la vorágine tecnológica nos estampa todos los días nuevos dispositivos y como resultado, nuevas pantallas y resoluciones?



¿Cuándo realmente debo generar un breakpoint con nuevos comportamientos en mi layout?
Stephen Hay responde a esto algo muy particular:

@stephenhay :

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!

“Comienza con la pantalla más pequeña, luego expándela hasta que luzca como la mi*rda. Tiempo de hacer un breakpoint!"


Esto realmente nos deja a los diseñadores un poco con el síndrome de la hoja en blanco. Esta manera de pensar en el diseño corresponde a estar 100% convencidos de que la web es fluída y que los diseños estarán en un constante cambio. Ya no hay más pixel perfect y debemos dejar de pensar que media querie sirve para setear solamente los anchos de los elementos, sino también los márgenes, estilos y hasta comportamiento, como por ejemplo cuándo usamos un ícono responsive o no.

Ok, pero qué uso para Media Queries, "rem" o "em"?


Hace poco hablábamos de las medidas relativas "em" y "rem" y sus diferencias y de cómo la unidad de medida "rem" era tan práctica de usar. Prestando atención en algunos ejemplos de Media Queries relativas me fijé que todas correspondían al par 100% = 1em teniendo como premisa que los navegadores en esas medidas dan un resultado de 16px a 14px de base. Lo que concluye en dos cosas:

Usa "em" para Media Queries, no "rem"


¿Porqué? porque el valor que obtiene "em" en Media Queries es relativo al user agent, no al estilo CSS. Por lo que si usas "rem", que debe tener una base definida en el CSS, nunca tomará esa base definida, sino que siempre tomará la medida 16px o 14px según el navegador.

En la especificación de la W3, sección 6:

W3 :

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘em’ unit is relative to the initial value of ‘font-size’.




Esto significa que las medidas relativas se basan en el valor inicial, por ejemplo 1em toma su valor inicial de 16px. "rem" no nos sirve porque su valor lo debemos declarar, y según la definición Media Queries ignora los valores declarados. Puede ser que el Media Querie en "rem" funcione pero siempre tomará el valor inicial por defecto (16px), por lo que es mejor usar "em".

Esto nos lleva a la segunda cuestión:

No podemos controlar todo


Como diseñadores, o frontends, debemos librarnos a estas premisas, y sabes qué cosas podemos controlar y que cosas no. Muchas veces será el usuario el que termine de realizar ese control final al optar por visualizar el sitio de la manera en la que más sencillo será para él. Pero hay algo seguro, debemos dejar de pensar en píxel perfect cuando diseñamos para Web, y saber que los diseños estarán en constante movimiento literalmente, y es por eso que siempre debemos priorizar el contenido.

Pasar de píxeles a "em" con ish. 2.0


Hay varios conversores, pero está herramienta, ish. 2.0 es muy simpática. Establece las medidas en small, medium, large y full. Tiene una función, HAY! que sirve para generar los breakpoints de tu sitio, dándote la información del valor en píxels y "em". También podés agrandar o achicar manualmente o darle al botón Random. En Disco te muestra en modo random todos los breakpoints que puede haber en el sitio. Es muy útil! podés usarla como demo web o descargar la aplicación en Github.



Si nos fijamos, las medidas no están en tamaños respecto a dispositivos, si no a tamaños: chico, mediano, grande, extra grande, full o completa. Una manera distinta de pensar la aplicación de Media Queries.

¿Creen que esto es más funcional que usar Media Queries en píxeles?

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate