Picturefill

Hace unas semanas Pepe me comentó que echase un vistazo a la librería de jquery Picturefill (http://scottjehl.github.io/picturefill/), cuyo contenido descargable podéis encontrar en GitHub (https://github.com/scottjehl/picturefill).

Esta librería te permite cargar diferentes imágenes dependiendo de la resolución de la pantalla en que se visualice la web. De este modo, tenemos la opción de usar siempre la misma imagen, pero en diferentes versiones, reducida de tamaño (por lo tanto, reducida de peso). El código es muy sencillo de implementar, no son más que unas cuantas líneas (tantas como imágenes queramos utilizar). El rollo: tener que crear la misma imagen para varias resoluciones…

Después de echarle un ratillo e investigarla un poco, me ha convencido. Creo que deberíamos implementarla en nuestros sitios.

Si echáis un ojo al código, veréis que enlaza dos librerías de jquery (“picturefill.js” y “matchmedia.js“) y en el código HTML coloca un span dentro del cual se ponen diferentes span, uno por imagen que queramos implementar.

       
           
           
           
           

           
           
       

En primer lugar coloca la imagen sin “data-media” (propiedad que Internet Explorer 8 e inferiores no saben interpretar) y a continuación el resto de imágenes con un “data-media” diferente en cada caso (dentro de este atributo se mete el mediaquery que queramos aplicarle a la imagen en cuestión). Al final del todo, pone un código para cargar una imagen en caso de que no funcione el jquery en ciertos navegadores.

Podeis ver el ejemplo de cómo queda en el link de antes: http://scottjehl.github.io/picturefill/. Si reducís el tamaño del navegador, podréis ver que la imagen va cambiando (cada imagen tiene un tamaño-peso diferente, en la esquina superior derecha aparece su tamaño). Sin embargo, en IE8 siempre carga la imagen pequeña, y no queremos eso…

He corregido este error que podría “complicarnos la vida” en Internet Explorer 8 e inferiores. Para ello, existen dos formas:
1.- Poner un condicional que diga que cuando estemos en IE8 te cargue una imagen concreta:

   
       
       

       

       
       
   

2.- Modificar el orden de las imágenes, poniendo primera la grande (sin el “data-media” que IE8 desconoce) y cambiando el min-width de los mediaquery por un max-width:

       
           
           
           
           

           
           
       

Pros:
– 100% accesible, valida tanto HTML como accesibilidad (incluso desactivando javascript tienes opción de indicarle qué imagen cargar)
– Al darte la opción de cargar imágenes más pequeñas, las webs que visualicemos en dispositivos móviles irán más fluidas, lo cual es una ventaja y un punto a favor para la navegación vía móvil que a veces se hace pesada a cuenta del peso de los elementos de las web.
– Podemos añadir una clase a cada imagen, por lo que podríamos darle diferente apariencia si fuera necesario.
– Para dispositivos de retina, podemos poner mediaquerys a doble pixel ratio:

   

Contras:
– Hay que crear varias versiones de la misma imagen, lo cual puede convertirse en un trabajo tedioso si queremos optimizar el peso de todas las imágenes de un portal con muchas imágenes.

He subido el código al FTP para que podáis echar un vistazo tanto en desktop como en diferentes dispositivos:
    www.a.babelcreativa.es/picturefill

Dejo una copia del código HTML en el disco, con los errores que os comentaba corregidos:
    Z:@RECURSOS@JQUERYpicturefill

Font-size | Maquetar responsive con rem

Elegir la unidad de medida para el font-size a la hora de maquetar una página Responsive no es tan sencillo. Tenemos los problemas de compatibilidad (y antiguedad) de navegadores que a veces nos limita a la hora de utilizar las tecnologías más actuales. En este post no nos centraremos demasiado en explicar los pros y contras de cada unidad pero mostraremos el método que creemos ser el más sencillo para la actualidad.

1. ¿Qué unidades tenemos disponibles para el font-size?

Absolutas: px y pt
Son unidades de tamaño fijo (1 punto = 1 pixel de la pantalla / no escalables) lo que afecta la accesibilidad, empeorando cuando utilizados en dispositivos pequeños con grande resolución.

Relativas: %, em, rem, vh, vw, vmin, vmax
Dependen de un valor previo.

Nota: las unidades vh, vw, vmin y vmax son aun demasiado actuales y todavía soportadas por un porcentaje bajo de dispositivos, lo dejaremos para un post posterior.

2. ¿Que medidas usar?

¡Las relativas! Son muy utiles porque permiten de una forma sencilla determinar el tamaño de una tipografía (para cada dispositivo), con tan solo cambiar en la css el valor de su primero contenedor… dos demás se cambiarán proporcionalmente en cascada.

a) Los em, ¿no? Son medidas que cualquier dispositivo puede interpretar y, como son medidas relativas (también dependen del tamaño de fuente predefinido por el usuario para su dispositivo) las hace accesibles. Por norma los dispositivos vienen configurados como 1em = 16px, pero el usuario puede configurar el tamaño de fuente de su dispositivo. El problema en usar este tipo de unidad (que tiene un comportamiento igual que el %) es que va en función del tamaño determinado de sus contenedores. Es decir, una

con 0.8em dentro de un

con 2em no es lo mismo que una

con 0.8em dentro de un

con 2em que va dentro de un

con 2 em. ¿Confuso? Pues aqui está el problema de usar unidades em (¡demasiado complicado!). Si trabajas con documentos html estaticos, que tu (que eres un experto) puedes controlar a lo mejor te apañas, pero cuando entran gestores de contenidos y diferentes usuarios y/o personas maquetando se convierte en el infierno.

b) ¿Que alternativa tenemos a los em? ¡Los rem (root em)! Son también unidades relativas, lo unico es que dependen solamente del valor definido en la raiz (en el ). Pero… ni todos los dispositivos interpretan este valor. Ver aquí cuales lo soportan: www.caniuse.com.

3. ¿Cómo aplicar los rem sin olvidar los navegadores que no los suportan?

¡A través de fallback! Consiste en darle una alternativa en caso de que no funcione el rem; básicamente especificar las medidas en dos unidades. En primero lugar viene la medida en px (sí, px no es una medida relativa, pero se verá en un numero reducido de dispositivos… creo que nos podemos permitir a ese “lujo”) y luego despues en rem. Los dispositivos que entiendan rem se quedan con esta medida y si no, se quedan con la medida anterior (px).

Para complementar el proceso, y para simplificar nuestro labor de maquetación, podemos “resetear” el valor del rem en el root () para que este se acerque al valor de px (así tenemos una referencia de los tamaños que estamos usando). Si el body {font-size: 100%)  entonces 16px = 1rem, entonces body {62.5%} 16px = 1.6rem.

Ejemplo:

html { font-size: 62.5%}
h1 {font-size:24px; font-size:2.4rem;}
h2 {font-size:18px; font-size:1.8rem;}
p {font-size:12px; font-size:1.2rem;}