...

Concepts généraux sur le développement de sites responsive

Qu'est ce que le responsive web design ? C'est une technique qui permet de concevoir des sites qui s'adaptent automatiquement à l'espace disponible sur l'écran. Ainsi, d’un support à l’autre, et simplement via des règles CSS, certains éléments du site peuvent être masqués, ajoutés et changés de place pour optimiser l’expérience utilisateur. Voici un exemple qui met en évidence la différence entre : statique, liquide, adaptatif et responsive.

...

<div id="header" class="wrapper"></div>

 <div class="wrapper">

    <div class="content"></div>
    <div class="menu"></div>
</div>

<div class="footer" class="wrapper"></div>

 Le

...

.wrapper {
   width: 1200px;
}
.content { 
   width: 900px;
}
.menu {
   width: 300px;
}

Dans le cas d'un développement de site responsive, il n'est pas possible d'utiliser des unités figées tel que le pixel , : il faudra faut donc se tourner vers d'autres unités dites relatives, comme %, vh, em,... et dans ce cas le code associé deviendra ceci : 

.wrapper {
    max-width: 1200px; /* le site peut prendre n'importe quelle taille entre 0 et 1200px */
}

.content {
    width : 75%; /* 900/1200 = 75% */
}

.menu {
    width: 25%; /* 300/1200 = 25% */
}

Grâce aux quelques modifications apportées avec dans le petit bout de code CSS ci-dessus, nous avons maintenant un site dit "fluide" quand on le redimensionne en largeur.

Les medias queries

CIl s'agit d'est une spécification CSS3 éditée par le W3C qui permet d'exécuter des règles CSS conditionnelles en fonction de la largeur de la fenêtre du terminal client, de son orientation , et/ou de ses capacités. 

La syntaxe est très simple : 

@media@media screen and (max-width : 1000px) {
    p {
        color: red;
    }
}

p {
    color: blue;
}

Dans ce cas, tous les paragraphes seront bleus, sauf pour les écrans qui ont une taille comprise entre 0 et largeur inférieure à 1000 pixels.

La communauté Alsacréations à a publié un article très complet à ce sur le sujet.

Pour reprendre Reprenons notre example exemple précédent. Si, on remarque que lorsque la page fait moins de 600px, le menu de droite n'est pas assez large, on va donc nous allons lui appliquer une règle CSS conditionnelle pour afin de lui permettre de faire prendre toute la largeur de la page quand la page fait moins de 600px.

@media screen and (max-width: 600px) {
    .menu,
    .content {
        width: auto;
    }
}

Dans ce cas, la valeur auto permet de dire que la div doit div doit reprendre son comportement initial par rapport à la propriété propriété width, et comme cette div est un élément HTML de type "bloc alors ", elle prendra alors 100% de la largeur de la page. Pour plus d'informations sur le "pourquoi du /comment, " cet élément HTML prend toute la largeur de la page un , consultez cet article intéressant portant sur le contexte de formatage block.

...

L'un des enjeux du responsive web design est sans nul doute la vitesse d'affichage du site et la fluidité lors de son utilisation. Le poids moyen d'une page web est d'environ 1,2Mo. Les contraintes qu'apportent les mobiles nous obligent à repenser la façon de développer et forcent les développeurs à faire attention aux différentes librairies utilisées. 

Pour cela, il devient nécessaire d'analyser la pertinence des scripts utilisés, peut... Peut-on par exemple se passer de jQuery ? Tout dépend l'utilisation que l'on en fait dans le contexte... , mais il toujours intéressant de se poser la question.

Depuis quelques temps on découvre de nouveaux outils basés sur NodeJS qui permettent d'apporter un niveau d'automatisation très intéressant pour le développement front-end. Cela permet de gérer beaucoup de tâches rébarbatives fastidieuses et/ou répétitives de façon automatique et de s'assurer par la même occasion d'avoir un haut niveau de qualité. On pense par exemple notamment à GruntJS ou Gulp, qui vont permettre permettent par exemple de concatener tous les fichiers CSS insérés dans une page et "minifier" cette nouvelle feuille de style, et plus encore...

...