Imágenes responsive: Picturefill.

Buenos días,
Para estrenarme con las aportaciones al blog voy a hablaros del polyfill Picturefill. Un polyfill es un javascript que permite implementar una funcionalidad que no es soportada en navegadores antiguos. De esta manera podremos utilizar la etiqueta <picture>  con seguridad de cumplir con nuestros navegadores. Picturefill permite servir al usuario la imagen adecuada según una variedad de condiciones tales como tamaño de pantalla, tamaño de la ventana, resolución, etc. Ahorramos un montón de transmisión de datos dándole al usuario móvil una imagen de resolución y tamaño adecuado sin sacrificar a los usuarios de sobremesa o de retina, y todo usando el mismo código.

pandas

Es por eso que necesitaremos generar tantas imágenes como breakpoints tengamos.

En el momento de escribir esta entrada la última versión estable es la v 3.0.2 y podemos encontrarla en: “@RECURSOS\JQUERY\Picturefill o en la web del proyecto: http://scottjehl.github.io/picturefill/ para comprobar cuál es la versión mas actualizada.

 

Generación de imágenes

Si tomamos como referencia los breakpoints necesarios para bootstrap tenemos que generar imágenes para las horquillas de dimensiones:

0 > 480px > 768px  > 992px  > 1200px  > ∞

Es decir, tendremos la misma imagen en 5 dimensiones diferentes.

¿Qué tamaño tiene que tener cada imagen?

Para generar las imágenes utilizaremos de referencia la más grande por cada breakpoint; Por ejemplo, si tenemos una imagen que va al 100% tendríamos las siguientes dimensiones:

pandabp

Además, tendremos que generar las imágenes para dispositivos fullHd o retina; La densidad de píxeles de estas pantallas es el doble de las habituales, por lo que también tendremos que generar las imágenes al doble de tamaño a lo que corresponde en cada breakpoint para servir a estos dispositivos. Siguiendo el anterior ejemplo:

pandabpx2

En total habremos generado 10 imágenes, dos por cada horquilla de breakpoint.

Implementación

Ejemplo funcional: @RECURSOS\JQUERY\Picturefill\examples\demo-pandas.html

Lo primero que debemos hacer es incluir el js en el <head>

<head>
    <script src="picturefill.js"></script>
</head>

Con esto sería suficiente, sin embargo, añadiendo un método javascript nos aseguramos que los navegadores antiguos detecten la etiqueta picture antes por si a nuestro js no le ha dado tiempo a cargarse:


<head>
  <script>
    // Picture element HTML5 shiv
    document.createElement( "picture" );
  </script>
  <script src="picturefill.js"></script>
</head>

Ya tenemos la página lista para detectar nuestras etiquetas;

Explicando el MarkUp

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="image/img3000.jpg, image/img6000.jpg 2x" media="(min-width: 1200px)">
    <source srcset="image/img1200.jpg, image/img2400.jpg 2x" media="(min-width: 992px)">
    <source srcset="image/img992.jpg, image/img1984.jpg 2x" media="(min-width: 768px)">
    <source srcset="image/img768.jpg, image/img1536.jpg 2x" media="(min-width: 480px)">
  <!--[if IE 9]></video><![endif]--> 
  <img srcset="image/img480.jpg, image/img960.jpg 2x" alt="..."> 
</picture>

Tenemos un contenedor con la etiqueta <picture> que contiene una etiqueta <img> y una serie de etiquetas <source>. Además, para que funcione en IE9 necesitamos utilizar una etiqueta <video> para engañar al contenedor de los <picture>.

En <source> cargaremos cada una de las imágenes según su horquilla, que indicaremos con el media query. En el siguiente ejemplo, estamos cargando la imagen que aparece cuando tenemos como mínimo un ancho de 769px, es decir, que la imagen que carguemos será visible a partir de 769px y hasta 992px, que es el siguiente corte. Por lo que pondremos la imagen mas grande que admite esa horquilla, es decir la de 992px de ancho:

<source srcset="image/img992.jpg" media="(min-width: 769px)">

Si además queremos cargar una imagen para retina en ese breakpoint, añadiremos un nuevo source indicando que es para retina (2x) tal que así:

<source srcset="image/img992.jpg, ..image/img1984.jpg 2x" media="(min-width: 769px)">

En <img> cargaremos la imagen por defecto,  la más pequeña (si estamos montándolo usando el media query min-width) y añadiremos el alt=””.

<img srcset="image/img480.jpg" alt="Imagen de muestra">

Hay que tener en cuenta que el primer source que cumpla las condiciones dadas por el usuario será el que se descargue, por lo que primero pondremos las imágenes mas grandes cuando utilicemos el condicional min-width y las imágenes mas pequeñas primero cuando utilicemos  max-width.

Si queremos que una imagen no aparezca

Por diseño en uno de los breakpoints no queremos cargar ninguna imagen; Con un simple display:none podemos no verla, pero no evitar que se descargue. Así que podemos pedir una imagen de 1x1px y minimizamos la carga (aunque no evitamos la petición).

<source srcset="image/1x1.jpg" media="(min-width: 480px)">

En resumen; Es una herramienta muy sencilla para que el usuario reciba imágenes con su tamaño optimizado. Mejoramos velocidad de carga, uso de datos y visualización. 

 

Menú Responsive Accesible

Aunque existen muchas ofertas de menús responsive, os quería compartir este que me ha parecido muy completo, fácil de implementar y que, además, cumple con las pautas de accesibilidad AA, tanto para desktop como para móvil.

El recurso original lo podéis encontrar en http://www.smartmenus.org/ pero en la carpeta de recursos de Babel Creativa podéis encontrar una adaptación simplificada muy fácil de integrar.

Podéis acceder a él en esta ruta:  @RECURSOS\MENUS\Menú responsive accesible

Las características que cumple son:

  • Menú basado en listados anidados.
  • Toggle en el botón del menú en versión responsive.
  • Adaptativo, manteniendo el cumplimiento de las pautas de accesibilidad:
    • WAI-ARIA y roles dinámicos.
    • Foco visible.
    • Se proporciona acceso a toda la funcionalidad mediante el teclado en desktop y móvil.

Pasos para implementar en el HTML:

  • Enlace a menu.css 
  • Incluir las siguientes clases / id en el <ul> principal:
    <ul id=”main-menu” class=”sm menu collapsed” role=”menubar”>
  • Enlaces a los ficheros js<!–Código JS–>
    <script src=”../js/jquery-1.11.3.js” type=”text/javascript”></script>
    <!– SmartMenus jQuery plugin –>
    <script src=”../js/jquery.smartmenus.js” type=”text/javascript”></script>
    <script>
    $(function() {
      $(‘#main-menu’).smartmenus();
    });
    </script>

¡Espero que os sea útil!

Debug responsive desde tu smartphone Android

remote-debug-banner

¿Cuántas veces hemos escuchado eso de “Ójala se pudiera hacer debug desde el movil” para tus sitios responsive?

Pues esto ya no es un problema. Android y Chrome nos lo ponen fácil. Sólo hay que seguir estos sencillos pasos:

  1. Abrimos cualquier URL desde el chrome de nuestro smartphone Android.
  2. Conectamos nuestro smartphone Android por USB a nuestro PC.
  3. Desde Settings > Developer options., activamos el Debug por USB
    1. En Android 4.2 o superiores, para acceder a las Developer options hay que entrar en Settings > About phone y hacer tap 7 veces en Build number
  4. Ahora nos vamos a nuestro PC, abrimos Chrome y pulsamos F12. En las opciones abrimos Inspect Devices y activamos Discover USB Devices.
  5. ¡Listo! ¡Ya tenemos la navegación de nuestro Smartphone y nuestro PC sincronizada!

Ahora, si navegamos por cualquier site con nuestro smartphone (hay que usar chrome) podremos hacer debug desde nuestro PC.  A partir de aquí lo mejor es probarlo por tí mismo porque es muy sencillo.

El resultado final será algo parecido a esto:

 

 

A debugear!!

El maravilloso mundo del Email Responsive

img

Hola, tenemos que maquetar este email responsive… NOOOOOO!!!

Todos los que nos enfrentamos a este reto, sabemos la gran cantidad de variables que existen a la hora de maquetar un email responsive para que se visualice bien en la gran mayoría de los proveedores de correo; que si Outlook no soporta margins, que si las app de Gmail para iOS y Android  no soporta media-queries…

Os dejo un post donde nos explican cómo solucionar la mayoría de problemas y que nuestros emails se visualicen correctamente. http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries–cms-23919

Espero que os sea útil.

 

Consejos, trucos y ayudas para tus diseños y desarrollos Responsive

Aquí os dejo un enlace con 13 vídeos (duración total de una hora y media aproximadamente ) muy interesantes de Vitaly Friedman de Smashing Magazine sobre aspectos básicos a tener en cuenta en nuestros diseños e implementaciones Responsive. También si sois más de leer que de ver, os dejo una presentación también de Vitaly al respecto.

Espero que los disfrutéis