En el día de hoy les traemos la segunda parte del tutorial sobre diseño adaptable con Foundation Zurb. Siguiendo el anterior artículo donde hablábamos del menú adaptable para tu web, en esta oportunidad queremos que también puedas hacer que tus imágenes sean adaptables, con lo cual mejorarás la velocidad de la carga de la web en los distintos dispositivos, ya que la imagen mostrada será definida por la pantalla del dispositivo.
Aprendiendo diseño adaptable con Foundation Zurb: imágenes
El diseño adaptable con Foundation Zurb es excelente gracias a un componente javascript llamado Interchange. Lo que hace este componente es que, dependiendo de los puntos de rupturas (media queries), intercambia la imagen correspondiente al tamaño de la pantalla del dispositivo.
Ventajas de esta implantación
- No se necesita hacer cálculos adicionales adentro de tu javascript para saber qué imagen cargar o cuál corresponde a la resolución.
- Dejarías de utilizar un plugin o componente externo ya que estaría integrado en tu mismo Foundation.
- No tienes que preocuparte por el soporte en distintos navegadores para el elemento imagen de tu html.
- Lo mejor es que desde tu código de backend solo necesitas saber al menos cuáles son tus tres URLs de imágenes para las resoluciones (movil – tablet – desktop).
¿Por qué utilizar diferentes imágenes?
Es bastante simple: ¿para qué quieres que tu visitante en su móvil con 3G descargue una imagen de peso de 200KB cuando puede descargar una imagen equivalente pero de solo 30KB? Para él la experiencia en el sitio será excelente, otra razón para usar el diseño adaptable con Foundation Zurb.
¿Cómo funciona el componente Interchange?
Vamos a tomar este código como ejemplo para realizar la explicación paso a paso:
<img data-interchange="[/path/to/imagen-normal.jpg, (only screen and (min-width: 1px))], [/path/to/imagen-grande.jpg, (only screen and (min-width: 1280px))]">
Ahora detallemos el atributo data-interchange: tiene una estructura en donde estamos indicando el primer punto de quiebre (min-width: 1px), esto nos indica que si el ancho del dispositivo es mayor a 1px debe cargar la imagen llamada «imagen-normal.jpg» pero a la vez si el ancho del dispositivo alcanza 1280px o mayor deberá cargar la imagen llamada «imagen-grande.jpg». Ya con esto queda más claro para realizar un ejemplo simple que viene a continuación.
Implementación de Interchange para Imágenes Responsive con Foundation
<!doctype html> <html class="no-js" lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interchange | Foundation </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css"> </head> <body> <div class="large-9 medium-8 columns"> <h1 id="interchange">Foundation Interchange</h1> <div id="component-name" name="Interchange"></div> <h3 class="subheader"> Interchange utiliza media queries para cargar dinámicamente el contenido sensible que sea apropiado para los navegadores de los diferentes usuarios</h3> <hr> <p><img data-interchange="[http://foundation.zurb.com/docs/assets/img/examples/space-small.jpg, (small)], [http://foundation.zurb.com/docs/assets/img/examples/space-medium.jpg, (medium)], [http://foundation.zurb.com/docs/assets/img/examples/space-large.jpg, (large)]"></p> <noscript><img src="https://foundation.zurb.com/docs/assets/img/examples/space-default.jpg"></noscript> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.interchange.js"></script> <script> $(document).foundation(); </script> </body> </html>
Conclusión
En este segundo tutorial sobre diseño adaptable con Foundation Zurb hemos aprendido la forma correcta de implementar en nuestro sitio las imágenes de manera responsive a distintas resoluciones, para lo cual hemos usado el componente Interchange. Recuerda que el principal objetivo es que la navegación de nuestro usuario final sea la mejor, y al utilizar este complemento que nos brinda Foundation lograremos que nuestro sitio funcione de una manera más rápida en los distintos dispositivos.
¿Tienes alguna duda sobre este tutorial de diseño adaptable con Foundation Zurb? Si es así, por favor déjanos un comentario aquí abajo.
