Facbook viewat  Flickr
Accueil du site > Tutoriels > Responsive Design pour les images

JQUERY / HTML5 / CSS3

Responsive Design pour les images

Webapp Mobile (IPHONE / IPAD / ANDROIS)

3 votes

Publié le vendredi 8 juin 2012

La notion de responsive Design peut être interprétée comme une notion de flexibilité de l’interface qui doit s’adapter à tous les types d’écrans et de supports.

Ainsi il n’est en théorie pas possible de faire s’adapter une image en permanence en largeur en fonction de la largeur d’écran du navigateur.

La prise en compte des différentes résolutions et orientations des mobiles et tablettes

Afin de ne pas multiplier les images et les formats, nous allons déterminer un modèle d’analyse et de regroupement d’écrans nous permettant de gérer les configurations suivantes :

  • Mobile en mode portrait
  • Mobile en mode Paysage / tablette en mode portrait
  • Tablette en mode Paysage

Le schéma ci-dessous illustre les regroupements de famille de taille d’écran retenus.

PNG - 180.5 ko
Groupement des résolutions d’écrans tablettes et Mobiles

En conséquence, nous devrons fournir à chaque fois 3 images différentes afin de gérer :

  • Les tailles d’écrans
  • Les débits de bande passante : inutile de charger une image de 1Mo pour un téléphone mobile en 3G

Le redimensionnement automatique des images fluides avec Jquery

Afin que l’image puisse être redimensionnée en permanence en fonction de la largeur de l’écran nous allons utiliser deux scripts Jquery :

  • jquery-picture-min.js
  • modernizr.js

Les deux scripts sont dans l’archive ci-dessous :

Zip - 5.7 ko
Scripts Jquery pour le responsive design d’images

Il faut maintenant les inclure dans sa page HTML ou dans la page de sa webapp :

<script type="text/javascript" src="javascript/modernizr.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script type="text/javascript" src="javascript/jquery-picture-min.js"></script>

Ensuite on initialise le Jquery après la balise head [1] :

$(function(){
   $('figure.responsive').picture();
});

Ensuite on lui précise les différentes tailles d"images qui vont s’adapter en fonction des résolutions :

  • une image à 370px de large
  • une image à 520px de large
  • une image à 640px de large
<figure class="responsive" data-media="assets/images/small.png" data-media440="assets/images/medium.png" data-media600="assets/images/large.png" title="A Half Brained Idea">
   <noscript>
       <img src="assets/images/large.png" alt="A Half Brained Idea">
   </noscript>
</figure>

Pour tester ses développements :

Pour tester son responsive design en ligne : http://www.gd6d.fr/responsive/

Voir en ligne : Exemple de Responsvive Design mobile / tablette avec le guide de l’été

Notes

[1] A noter que le script javascript s’exécute indépendamment sur les balise HTML5 <figure> ou <picture>

Répondre à cet article

Plan du site | Contact | Suivre la vie du site RSS 2.0