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!"
“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.
Y no lo digo como locura... sino como realidad.
Diseñador hace diseño para 320px de ancho, developer usa ese jpg y lo hace en 320px pero con em y % para todo... cuando usuario lo use en 480 se vera bien, manteniendo espacios y proporciones (cosas que son muy importantes para el diseño)
Por Alivan el 23 de Mayo de 2014
http://foundation.zurb.com/ y por sifuera poco ya tiene las medidas em listas en sus medias querys
Ejemplo facil, diseño estandar de 2 columnas (un blog), una para contenido y otra para sidebar. Ambas flotan, contenido principal a la izquierda, sidebar a la derecha.
En el breakpoint de 1024px (ipad landscape) el sitio esta envuelto en wrapper de 980px para corregir scrollbars y bordes de ventana del browser; Ese valor de 980px va en porcentaje, y su calculo es (980/1024*100) (nos da 90.70%). Con eso hacemos el wrapper fluido y manteniendo su proporcion con respecto a la pantalla (que la pantalla es variable).
Ahora, el sidebar tiene 300px de ancho (por publicidades) y el contenido tiene 650px de ancho. Haciendo las mismas cuentas, pero tomando como base 980px (que es el ancho del contenedor). Contenido 650/980*100 = 66.32% y Sidebar 300/980*100 = 30.61%.
Con esto tenemos un layout para 1024, donde en 1024 cada valor tendra esos pixeles que dijimos, y en 1180px se agrandara proporcionalemente a la pantalla. Con esto abarcaremos todo el ancho de la pantalla y no una parte de ella.
Ahora, el contenido tiene un padding de 14 pixeles; ese padding puede ser en porcentaje sin embargo es aconcejable que sea un poco mas fijo ya que en resoluciones grandes sera mucho padding. Como lo necesitamos fijo y no podemos usar pixeles (esta prohibido en responsive) usaremos em.
Aca viene un gran problema ¿cuanto es 1em?. Por lo general 1em son 16px (solo por ahora asumiremos eso). La cuenta es simple: 14/16 = .875em. Usando ese valor de em siempre vamos a tener la PROPORCION correcta, en algunos dispositivos sera de 14px y otros puede ser 16px, o de 13px, la verdad no importa porque lo correcto es la PROPORCION.
Incluso si el usuario es miope y setea en su browser que 1em es igual a 32pixeles, nuestro padding sera de 28pixeles, y se vera bien porque la proporcion se mantuvo; si hubiesemos puesto 14px el texto estara demaciado cerca del contenedor y no sera lo que el diseñador buscaba.
Espero haber aclarado un poco el panorama.
Cuando tienes elementos que aparecen y desaparecen en pantalla, o Web dinamicas, como forms o animations.. ufff a ver ahora si calcula la proporcion.
No es imposible solo que es algo muy conceptual, solo teniendo orden puedes hacer un responsive fluido, el EM, el PX, el REM o la medida que sea lo importante es que tu trabajo cumpla el objetivo, no importa que unidades utilices.
elporfirio :
Cuando tienes elementos que aparecen y desaparecen en pantalla, o Web dinamicas, como forms o animations.. ufff a ver ahora si calcula la proporcion.
Si utilizas SASS o algun prepropresador de css, es extremadamente facil.
Ejemplo:
Código :
Tienes la formula y sabes de que es cada valor, y cuando se compila tienes esto
Código :
Por el 30 de Mayo de 2014
LINK BORRADO: MX
Por alejo el 04 de Junio de 2014
alejo-blog :
En que parte del artículo dice eso?? hay algo importante a la hora de leer: "comprensión básica de textos".
saludos
alejo-blog :
Alejo, Mariux y yo NO somos "diseñadores web medio pelo". Mariux es Diseñadora web y es muy buena en ello, mira su portfolio si tienes dudas.
En cuanto a mi, me considero un Front-End developer, formo parte del equipo que maqueto http://tn.com.ar, aparte de eso hace poco sacamos un especial del mundial http://mundial.tn.com.ar/ donde podras apreciar un diseño responsive SIN px como plantea Mariux en el articulo.
En cristalab hay un muy buen nivel de profesionales.
edgcoren :
si estás haciendo páginas web en flash vas por mal camino...eso dejó de hacerse hace 10 años
edgcoren :
ninguna en el mercado de páginas web. por otro lado, muchos siguen usando flash para la creación de videojuegos.
Por Pablo el 15 de Julio de 2014
Por Alivan el 17 de Julio de 2014
Pablo-blog :
No es que esté mal, pero está mejor que uses em en las media queries.
Por Pley el 03 de Agosto de 2014
Por baus el 05 de Agosto de 2014
Corregidme si me equivoco, pero el uso de em en media queries se aconseja para que al hacer zoom se aplique el media query que le corresponda y no que solo amplíe el texto. Pero desde hace un tiempo, los navegadores ya aplican los media queries al hacer zoom aunque estén en píxeles.
Un saludo.