Le terme anglais "Responsive Web Design" indique la capacité d’une site web à s’adapter aux surfaces des écrans des utilisateurs, qui vont du petit smartphone au grand écran d’ordinateur, sans pour autant perdre en lisibilité des textes et visibilité des images.
Pour obtenir ce résultat il faut ...
1) Utiliser l’attribut "media" dans les définitions de style de façon à adapter la présentation du site (voir cet article pour plus de détails).
Par exemple, une feuille de style avec le code suivant
@media screen and (min-width: 1px)
{
.widthscreen {width:<script language=javascript>document.write($( window ).width());</script>px;}
}
@media screen and (max-width: 400px)
{
body {background:#aaa;}
.float1 {display:block;float:left;width:98%;margin-left:1%;}
.float2 {display:block;float:left;width:98%;margin-left:1%;}
}
@media screen and (min-width: 401px) and (max-width: 640px)
{
body {background:#bbb;}
.float1 {display:block;float:left;width:48%;margin-left:1%;}
.float2 {display:block;float:right;width:48%;margin-right:1%;}
}
@media screen and (min-width: 641px) and (max-width: 940px)
{
body {background:#ccc;}
.float1 {display:block;float:left;width:48%;margin-left:1%;}
.float2 {display:block;float:right;width:48%;margin-right:1%;}
}
@media screen and (min-width: 941px) and (max-width: 1200px)
{
body {background:#ddd;}
.float1 {display:block;float:left;width:56%;margin-left:1%;}
.float2 {display:block;float:right;width:40%;margin-right:1%;}
}
@media screen and (min-width: 1201px)
{
body {background:#eee;}
.float1 {display:block;float:left;width:64%;margin-left:1%;}
.float2 {display:block;float:right;width:32%;margin-right:1%;}
}permet de :
définir une classe "widthscreen" qui prend dynamiquement la largeur de l’écran de l’utilisateur, à partir de laquelle on peut adapter la largeur de tout conteneur html (ex. :<div class="widthscreen" style="width:80%; margin:0 auto;"> définit un conteneur qui fait 80% de la largeur de l’écran et qui est centré)
définir, à des seuils prédéterminés de largeurs d’écran (ici 400, 640, 940, 1200 pixels), la couleur de fond de la balise "body" et la largeur et le positionnement left ou right de deux classes "float1" et "float2" : appliquées aux conteneurs de deux colonnes du site, cette méthode permet d’en faire varier les largeurs et, surtout, en dessous d’un seuil préfixé (ici de 400 pixels correspondant aux écrans de smartphone en position verticale) de présenter le site sur une seule colonne au lieu de deux.
2) Créer une squelette pour Spip2 comportant uniquement :
des définitions des largeurs en "%" (même pour les "margin" et les "paddings")
des tailles de caractères en "em"
3) Supprimer dans les fichiers html du squelette tous les filtres |image_reduire{xxx,yyy} (qui créent des images de taille fixe).
Le cas particulier des logos d’article (ou de rubrique) peut être traité de deux façons :
soit en conservant le filtre |image_reduire{xxx,yyy} pour des valeurs max d’environ 180 pixels (pour que ça reste un "logo" sur des smartphones à 340 pixels de large)
soit en remplaçant le filtre par une l’expression du type
<div style="width:100%;">
[<img src="(#LOGO_ARTICLE|extraire_attribut{src}|url_absolue)" width="50%" />]
</div>qui générera dynamiquement une image large de 50% de la largeur de l’élément qui l’accueille.
RSS 2.0