TP 9: Responsive Web Design

IUT RT Rouen 2014-2015
TP 9: Initiation au Responsive Web Design (RWD)
1 Introduction
Le Responsive Web Design est une technique r´ ecente (2012) consistant ` aadap-
ter le rendu d’une page web ` a la cible. Celle-ci est en g´ en´ eral un ´ ecran, mais sa
r´ esolution peut-ˆ etre tr` es variable (´ ecran d’ordinateur, tablette, mobile, . . . ). La cible
peut ´ egalement ˆ etre du papier, en cas d’impression, ou un p´ eriph´ erique d´ edi´ e` a
l’accessibilit´ e aux handicap´ es sensoriels (p´ eriph´ erique de synth` ese vocale, tablette
braille, . . . )
L’objectif est de permettre la consultation confortable quel que soit le m´ edia.
Cette adaptation peut jouer sur les attributs classiques d’une page (taille des
´
elements, caract` eres ou images), mais aussi sur leur disposition relative, voire
mˆ eme leur pr´ esence. Par exemple, les bandeaux de navigation n’ont que peut
d’int´ erˆ et sur la version imprim´ ee, et on pourra donc les supprimer pour cette cible.
2 Sp´ecification d’un style selon le m´edia de rendu
Reprendre les cinq fichiers du TP4 (mini-diaporama de 4 images). Les
quatre pages disposaient d’un bandeau de navigation. Afin de pouvoir cibler
pr´ ecisemment ce bandeau, lui ajouter un attribut id avec la valeur nav.
Via le navigateur, lancer la commande ”Aperc¸u avant impression”. Le bandeau
de navigation apparaˆ ıt-il ?
Ajouter dans l’en-tˆ ete la ligne suivante :
<link rel="stylesheet" type="text/css" href="print.css" media="
print">
Cette ligne indique au navigateur qu’il doit charger un fichier css
suppl´ ementaire en cas d’impression. Cr´ eez ce fichier css et saisissez-y le style sui-
vant :
@media print {
div#nav {
display :none ;
}
}
Recharger la page, et visualisez le r´ esultat de l’aperc¸u : le bandeau est-il im-
prim´ e ?
Dans le fichier CSS, remplacer le style par visibility: hidden; . Quelle
diff´ erence observez-vous ?
Travail `a effectuer Ajouter une r` egle CSS de fac¸on ` a ce que tous les textes soient
en noir et avec une taille augment´ ee de 20%.
3 Adaptation du rendu selon les propri´et´es du m´edia
En dehors de la pr´ esence ou l’absence des ´ elements, on doit aussi g´ erer la
r´ esolution des ´ ecrans. Il y a encore quelques ann´ ees il ´ etait fr´ equent de rencon-
trer sur des sites une mention site optimis´e pour Internet Explorer version XX en 800
×600. Aujourd’hui, un ´ editeur se doit de rendre son site accessible quel que soit
le media utilis´ e. Il faut donc pouvoir d´etecter les capacit´ es d’affichages du client
et transmettre une mise en page adapt´ ee ` a sa r´ esolution. Ces techniques portent le
nom de media queries et sont un sujet en plein d´ eveloppement.
3.1 Principe
La technique consiste ` a pr´ evoir des r` egles CSS qui vont s’appliquer ou pas selon
le r´ esultat d’une expression conditionnelle, fonction du m´ edia du client. Le style
s’appliquera selon que cette expression sera vraie ou fausse.
Par exemple, on pourra pr´ evoir un style valable uniquement pour des ´ ecrans
de largeur inf´ erieure ` a 400 pixels avec la r` egle suivante :
@media screen and (max−width : 400px ){
div .classe1 /∗s´ electeur classique ∗/
{. . . /∗un style CSS ∗/}
}
Ces expressions sont compos´ ees du m´ edia vis´ e (print,screen) et d’une des
propri´ et´ e de ce m´ edia ` a laquelle on sp´ ecifie une valeur (minimale ou maximale).
Par exemple : max-width,min-width, etc. On pourra trouver la sp´ ecification
compl` ete sur http://www.w3.org/TR/css3-mediaqueries/
M1106 1 TP9

IUT RT Rouen 2014-2015
3.2 Adaptation du positionnement-1
R´ ecuperer depuis le disque r´ eseau le fichier rwd 1.html.
Cr´ eer la feuille de style r´ ef´ erenc´ ee dans le fichier et ajouter les sp´ ecifications CSS
n´ ec´ essaires pour avoir le style suivant si la r´ esolution de l’image est inf´ erieure ` a
500 pixels :
— Suppression du bandeau gauche
— Couleur : noir sur fonc blanc, sauf pour le bandeau de titre, qui garde sa
couleur de fond.
— Taille de la police d’affichage augment´ ee de 10 %
Vous devrez au pr´ ealable analyser les styles CSS pr´ ed´ efinis dans la page, de
fac¸on ` a les adapter au rendu d´ esir´ e. Ne rien modifier au fichier html !
3.3 Adaptation du positionnement-2
R´ ecup´ erer depuis le disque r´ eseau le fichier rwd 2.html, o ` u le bandeau de
droite est remplac´ e par un menu de navigation.
Cr´ eer la feuille de style r´ ef´ erenc´ ee dans le fichier et y ajouter les mentions CSS
n´ ecessaires pour avoir le menu en ligne en haut de l’´ ecran. Ce menu devra rester
en permanence sur l’´ ecran mˆ eme en cas de scrolling (il faut utiliser la propri´ et´ e
position:fixed;)
Pour transformer une liste ` a puce en liste ”en ligne”, voir le TP 8.
M1106 2 TP9