Responsive Web design et media queries

Qu’est ce que le Responsive Web Design

Le Responsive Web design est un terme que l’on rencontre de plus en plus souvent dernièrement. Sous ce terme se cache en fait un concept simple : le design d’un site ou d’une application web va s’adapter automatiquement à l’appareil (PC de bureau, Smartphone, IPad, etc) qui est utilisé suivants ses caractéristiques techniques (la taille de l’écran principalement).

Le tutoriel Media Queries

Une des manières de faire du Responsive Web Design : les Media Queries de CSS3. Je vous propose donc un tutoriel sur les Media Queries dans cette article. Je ne vais donc pas détailler tous les aspects des Media Queries (Vous pouvez consulter l’article d’Alsa Creations à ce sujet : Les Media Queries CSS3), le but étant de montrer directement leur utilisation dans un exemple (Voir la page d’exemple de Responsive Web design).

Pour ce tutoriel nous allons donc créer une page qui va s’adapter pour 3 types de résolutions :

  • PC de bureau
  • Tablettes
  • Smartphones

Commençons par le gabarit de notre page HTML. Notre page va se composer d’une bannière, un menu, un contenu principal (texte + images), une liste d’articles et un pied de page. Voici le code :

<!DOCTYPE html>
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
  </head>
  <body>
    <header id="banner">
    </header>
    <menu>
      <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
        <li><a href="#">Lien 3</a></li>
        <li><a href="#">Lien 4</a></li>
      </ul>
    </menu>
    <section id="main">
      <section id="content">
         <h1>Titre</h1>
         <p><img src="img/img.jpg" alt="" class="fl_left" />Mauris viverra augue purus, vitae ornare tortor. Sed fringilla pharetra luctus. Proin vehicula, erat ac egestas dictum, elit lectus pharetra massa, vel consequat massa quam cursus tellus. Integer sed augue arcu. Proin vestibulum urna fringilla mauris convallis pretium. Quisque mattis euismod turpis ut feugiat. Quisque lobortis, magna sit amet convallis lacinia, magna nibh mattis elit, nec mollis orci sapien ultrices lectus. Pellentesque egestas ipsum et libero viverra ut blandit dolor lacinia. Cras eget nulla a nulla tristique ullamcorper. Aenean ut lorem non diam dictum luctus eu vel lorem. Donec interdum rhoncus dui. Fusce ac massa nec augue aliquet interdum. Etiam egestas, justo vel lacinia sagittis, lorem purus rutrum lorem, non tristique massa dui ut erat.</p>

         <p><img src="img/img2.jpg" alt="" class="fl_left" />Mauris viverra augue purus, vitae ornare tortor. Sed fringilla pharetra luctus. Proin vehicula, erat ac egestas dictum, elit lectus pharetra massa, vel consequat massa quam cursus tellus. Integer sed augue arcu. Proin vestibulum urna fringilla mauris convallis pretium. Quisque mattis euismod turpis ut feugiat. Quisque lobortis, magna sit amet convallis lacinia, magna nibh mattis elit, nec mollis orci sapien ultrices lectus. Pellentesque egestas ipsum et libero viverra ut blandit dolor lacinia. Cras eget nulla a nulla tristique ullamcorper. Aenean ut lorem non diam dictum luctus eu vel lorem. Donec interdum rhoncus dui. Fusce ac massa nec augue aliquet interdum. Etiam egestas, justo vel lacinia sagittis, lorem purus rutrum lorem, non tristique massa dui ut erat.</p> 
      </section>
      <section id="right">
        <article>
          <h2>dfdfd</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.
          </p>
        </article>
        <article>
          <h2>dfdfd</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.
          </p>
        </article>
        <article>
          <h2>dfdfd</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, tempor sit amet posuere non, semper non magna. Praesent felis urna, congue quis tempor non, imperdiet id lacus.
          </p>
        </article>
      </section>
      <p class="clear"></p>
    </section>
    <footer>
      <p>Footer</p>
    </footer>
  </body>
</html>

Maintenant commençons avec notre feuille de styles CSS. Nous allons dans un premier temps mettre en place le CSS pour la version bureau, puis nous viendrons ajouter les Media Queries pour les versions tablettes et Smartphones. Voila la feuille de styles de base :

body {
  display: block;
  width: 900px;
  margin: 0 auto;
  font-size: 14px;
}

header {
  background-image: url(img/banner.jpg);
  height: 150px;
  width: 100%;
}

menu {
  height: 30px;
  background: #4d68b3;
  margin: 0;
  padding: 10px; 
}

menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

menu ul li {
  float: left;
  margin-right: 10px;
  background: #fff;
  padding: 5px; 
}

#main {
  background: #a4b9f6;
  padding: 10px;
}

#main #content, #main #right { 
  float: left;
}

#main #content {
  width: 600px;
  padding-right: 10px;
}

#main #right {
  width: 260px;
  clear: after;
}

#main h1 {
  font-size: 22px;
  font-weight: bold;
}

#main h2 {
  font-size: 18px;
  font-weight: bold;
}

#right article {
  border-bottom: 1px solid #4D68B3;
}

.fl_left {
  float: left;
}

img.fl_left {
  padding-right: 5px;
}

footer {
  text-align: center;
  padding: 10px;
  background: #dcdcdc;
}

.clear {
  clear: both;
}

Nous avons les styles de bases qui permettent d’obtenir ce résultat :

resultat1

Passons maintenant aux fameuses Media Queries. Notre site faisant 900px de large nous allons devoir spécifier 2 alternatives de styles :

  • pour les résolutions de largeur entre 900px et 768px (tablettes)
  • pour toutes les résolutions inférieures à 768px (Smartphone)

Pour les résolutions de tablettes nous allons réduire le body à 768px de large, afficher une bannière à la bonne taille, faire en sorte que le contenu principal prennent 100% de la largeur et que les articles de droite s’affichent en dessous. Pour les résolutions inférieures (Smartphones) on donne simplement au body une largeur de 100% pour que tout l’écran soit utilisé et on affiche une bannière encore plus petite. Voila le code CSS Media Queries à ajouter au fichier style.css pour réaliser tout ça :

@media screen and (max-width: 768px) {
  body {
    width: 100%;
  }

  header {
    background: #DCDCDC url(img/banner_mobile.jpg) top left no-repeat;
    height: 104px;
  }

  #main #content, #main #right {
    width: 100%;
    float: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 900px) {
  body {
    width: 768px;
  }

  header {
    background-image: url(img/banner_tablette.jpg);
  }

  #main #content, #main #right {
    width: 100%;
    float: none;
  }
}

On voit que les Media Queries sont très simples à utiliser : on donne les conditions d’applications des styles contenus dans la Media Queries (ici min-width et max-width, mais il existe de nombreux autres paramètres pour les Media Queries. Voir : http://www.w3.org/TR/css3-mediaqueries/)

Voila un petit aperçu du résultat dans Chrome :

Et Internet Explorer dans tout ça ?

Les Media Queries sont supportées par la plupart des navigateur du marché (je n’ai rencontré aucun problème sous FireFox, Chrome, Opera et Safari). Mais comme souvent avec les nouvelles technologies du Web Internet Explorer n’est pas le plus en avance des navigateurs ! Les Medias Queries ne dérogent pas à ce constat car si vous testez sur Internet Explorer 8 cela ne fonctionnera pas. 2 raisons à cela :

  • les versions d’Internet Explorer inférieures à 9 ne prend pas en charge les nouvelles balises HTML5 (section, article, etc)
  • les versions d’Internet Explorer inférieures à 9 ne gère pas les Media Queries

Heureusement il existe des solutions Javascript pour résoudre ces 2 problèmes. Pour qu’Internet Explorer gère les balises HTML5 nous allons utiliser html5shiv et pour les Media Queries Reponsd.js. Ces 2 solutions sont très simples à utiliser puisqu’il suffit d’ajouter un fichier JavaScript pour chacune :

<!--[if lte IE 8]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <script src="respond.min.js"></script>
<![endif]-->

Une fois ceci fait notre Responsive Web Design fonctionne également sous Internet Explorer 8 (6 et 7 aussi normalement, mais je n’ai pas testé).

Voir la page du tutoriel en ligne

Voila ce petit tutoriel est terminé, j’espère qu’il vous aura aidé. Il y a bien sûr beaucoup d’autres aspects des Media Queries que je n’ai pas abordé ici (comme la détection de l’orientation de l’écran par exemple) mais vous connaissez maintenant les bases de leur utilisation. Si vous voulez en savoir plus je vous conseille l’article d’Alsa Creation dont j’ai déjà donné le lien plus haut : Les Media Queries CSS3

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.