Le design adaptatif (Responsive design)

Design adaptatif Design adaptatif (responsive design) Le site affiche les pages de manière optimale selon l'appareil utilisé. Basé sur le spécification CSS media query.

Design adaptatif Un grand nombre de types d'ecrans: Donc impossible de choisir une résolution spécifique Solutions Créer plusieurs sites WEB spécifiques à chaque support . Trop coûteux Responsive design  Stratégie: Penser  mobile d'abord Un seul URL, un contenu identique, un code unique (HTML5/CSS3).

Media queries Des règles conditionnelles: Si la résolution de l'écran est inférieure à n pixels, appliquer les propriétés CSS suivantes Les règles concernent les résolutions d'écran, le type d'écran, le nombre de couleurs, l'orientation de l'écran, etc. Permet de changer l'apparence du site selon ces règles. Contenu adaptable à l'écran Largeur standard desktop Largeur mobile

Tailles typiques d'écran 320 x480 px: Smartphone 480 x 320 px: Smartphone orientation paysage (landscape) 768 x 1024 px: iPad/tablet 1024 x 768 px: iPad orientation paysage (landscape) Plus grand : Desktop/laptop Plus petit: cellulaires.

Media query Un requête consiste en : Synatxe: Exemple: Un type de média (optionnel) et expressions de caractéristiques du médium visé Une spécification de style Synatxe: @media not|only type and (aspect du médium), … {     Specification CSS; } Exemple: @media (max-width: 600px) { .banniere { display: none; } }

Media query Types de médias visés: all Tous les types de média. aural Synthétiseur de voix (Obsolète). Braille Appareil tactiles pour Braille (obsolète) handheld Appareils portables (Obsolète). print Imprimantes. projection Présentation en diapos (Obsolète). screen Pour écrans d’ordinateurs, tablettes, téléphones, ... tty Terminaux à caractères de taille fixe (Obsolète). tv ecrans de télé (Obsolète).

Application des media queries Deux façons d'ajouter les règles. Utiliser plusieurs fichiers CSS spécifiques: <link rel="stylesheet" href="standard.css" /> <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petits_ecrans.css" /> Mettre des règles dans un même fichier CSS et utiliser la directive @media: Propriétés CSS pour le cas standard suivis de @media screen and (max-width: 1280px) { … Propriétés CSS …}

Exemples <style> @media (max-width: 600px) { .banniere { display: none; } } </style> <link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href="mobile.css" /> <style> @media screen { body {background: #ff0000;} } </style>

Requête de média Les requêtes média utilisent des caractéristiques de l'appareil: Largeur et hauteur de l'affichage Largeur et hauteur de l'appareil L'orientation (landscape ou portrait) La résolution #logo { background: url(logo.png); width: 600px; border: 1px solid red; } @media only screen and (max-device-width: 480px) { #logo { background: url(mobile.png); width: 440px; } }

Les parameteres de requete Les paramètres inclus dans les conditions de la requête sont: min-width: La règle est appliquée à un fureteur avec une largeur plus grande que cette largeur. max-width: La règle est appliquée à tout fureteur ayant une largeuer plus petite que cette largeur. min-height: La règle est appliquée à tout foureteur ayant une hauteur plus grande que cette largeur.

Les parameteres de requete max-height: La règle est appliquée à tout fureteur ayant une hauteur plus petite que cette largeur. orientation=portrait: La règle est appliquée à tout fureteur avec hauteur plus grandes ou égale à la largeur. orientation=landscape La règle est appliquée à tout fureteur avec largeur plus grandes ou égale à la hauteur Les plus utilisés sont:  min-width, max-width, min-height, et max-height.

Combinaison de conditions On peut combiner des expressions avec des opérateurs logiques. and: combine des caractéristiques des média et des types de média: Exemples: @media (min-width: 700px) { ... } @media (min-width: 700px) and (orientation: landscape) { ... } @media tv and (min-width: 700px) and (orientation: landscape) { ... }

Combinaison de conditions Listes d'expressions (or) Séparées par des virgules, elle se comportent comme l'opérateur or. Si une des requêtes retourne vrai, le style dans la requête est appliqué. Exemples: @media (min-width: 700px), handheld and (orientation: landscape) { ... }

Combinaison des règles @media screen and (max-width: 1280px Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px @media all and (min-width: 1024px) and (max-width: 1280px) Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px @media tv Sur les écrans de télévisions @media all and (orientation: portrait) Sur tous types d'écrans orientés verticalement

Exemple /* divs en bleu par défaut */ div { color: blue;} /* Règles si la fenêtre fait moins 1024px de large */ @media screen and (max-width: 1024px) { div { color: red; background-color: black; } Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Exemple <body> <div id="mobile">Ce texte s'affiche pour les petits écrans</div> <div id="logo">Le logo</div> <ul id="navigation"> <li><a href="">Accueil</a></li> <li><a href="">Sports</a></li> <li><a href="">Musique</a></li> <li><a href="">Voyages</a></li> <li><a href="">Sciences</a></li> </ul> <div style="clear: both"> <div id="droite">Colonne droite.</div> <div id="principal">Corps.</div> <div id="bas">Bas de page.</div> </div> </body>

Exemple: Style de base #navigation { float: right; list-style: none; margin-bottom: 0px;padding: 0px; } img {width: 90px; padding: 10px; } #navigation { float: right; list-style: none; margin-bottom: 0px;padding: 0px;} #navigation li { float: left; padding: 4px 5px; background-color: #aaaaaa; margin-left: 4px; } #droite { width: 290px; min-height: 400px; background: #666666; float: right; padding: 10px; } #principal { height: 400px; background: #666666; margin-right: 320px; padding: 10px;} #bas { text-align: center; margin-top: 10px; background: #dddddd; padding: 10px; } #mobile { display: none; } #navigation li a { color: #fff; text-decoration: none}

Exemple – Style adaptatif @media screen and (max-width: 480px) { #logo { float: none; } #navigation { float: none; width: auto;} #navigation li { float: none; margin-bottom: 4px; margin-left: 0; } #principal { width: auto; margin-right: 0; margin-top: 0; min-height: 200px;} #droit { width: auto; float: none; min-height: 0; margin-bottom: 10px; } #mobile { display: block; } }

Exemple rwd1.html rwd2.html

La grille adaptative Proposition de structure de pages formé de 12 colonnes et un nombre indéterminé de lignes Permet d'organiser le contenu de la page Favorise l’intégration CSS

La grille adaptative

Le Bootstrap Librairie publique, outil de design adaptatif On peut télécharger l'archive bootsrap.zip du site http://getbootstrap.com/2.3.2/ On décompresse l'archive: bootstrap.css et bootstrap.min.css : les classes de base bootstrap-responsive.css et bootstrap-responsive.min.css : les classes de base pour le responsive design ; bootstrap.js et bootsrap.min.js: fonctions JavaScript des composants de bootstrap ; glyphicons-halflings.png et glyphicons-halflings-white.png: des icônes Les fichiers "min" contiennent les codes en version compressée.

Structure d'une page <!doctype html> <head> ... <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="monStyle.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> … </head>

La grille de 12 colonnes Le système de grille de Bootstrap's permet jusqu'à 12 colonnes sur la page. On peut grouper les colonnes pour créer des colonnes plus larges. Par exemple: Span 1 Span 1 Span 1 Span 1 Span 1 Span 1 Span 1 Span 1 Span 1 Span 1 Span 1 Span 1 Span 4 Span 4 Span 4 Span 4 Span 8 Span 3 Span 9 Span 12

La grille de 12 colonnes Une classe CSS row pour définir des lignes Des classes CSS de la forme col-*- pour définir les colonnes. Bootstrap propose des colonnes selon la taille de l'écran: xs : Extra small devices ~ Phones (< 768px) sm :Small devices ~ Tablets (>= 768px) md :Medium devices ~ Desktops (>= 992px) ld : Large devices ~ Desktops (>= 1200px) <div class="container"> <div class="row"> <div class="col-xs-4 col-ld-6">Colonne 1</div> <div class="col-xs-8 col-ld-6">Colonne 2</div> </div> <div class="row"> … </div>

La grille de 12 colonnes On ajoute des lignes avec la classe .row et des colonnes avec la classe col-*-* en fonction de l'appareil visé pour le design adaptatif. <div class="container"> <div class="row"> <div class="col-ld-6">Texte de colonne 1</div> <div class="col-ld-6">Texte de colonne 2</div> </div> <div class="col-xs-4">Texte de colonne 1</div> <div class="col-xs-4">Texte de colonne 2</div> bs1.html Ligne pour les cellulaires. On divise la vue en 3 colonnes.

Eléments de base de Bootstrap Plusieurs éléments de style responsifs ont été définis: Listes, tableaux, boutons, formulaires, images <table class="table table-bordered"> <thead> <th>Nom</th> <th>Ville</th> <th>Age</th> </thead> <tbody> <tr> <td>Jean</td> <td>Montreal</td> <td>25</td> </tr> <tr> <td>Pierre</td> <td>Sherbrooke</td> <td>30</td> </tr> … </tbody> </table>

Éléments de navigation Les éléments de navigation partagent la classe .nav. Le style de menu est défini par les classes .nav-tabs, .nav-pills. L'empilement des éléments se fait avec .nav-stack. On peut présélectionner un élément avec .active ou le désactiver avec .disabled. <ul class="nav nav-pills [nav-stacked nav-justified]"> <li class="active"> <a href="#"> Accueil </a> </li> <li> <a href="#"> Chimie </a> </li> <li> <a href="#"> Informatique</a> </li> <li class="disabled"> <a href="#"> Electronique</a> </li> <li> <a href="#"> Environement</a> </li> <li> <a href="#"> Physique</a> </li> </ul> <div class="container"> ... </div> bs3.html

Les menus déroulants Un menu déroulant est spécifié dans un item de liste (<li>) de classe .dropdown et une liste (<ul>) de classe .dropdown-menu. <ul class="nav nav-tabs"> <li class="active"> <a href="#"> Accueil </a> </li> <li> <a href="#"> Chimie </a> </li> <li> <a href="#"> Informatique</a> </li> <li class="disabled"> <a href="#"> Electronique</a> </li> <li> <a href="#"> Physique</a> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Environement </a> <ul class="dropdown-menu"> <li><a href="#">Ecologie marine</a></li> <li><a href="#">Ocenographie</a></li> <li><a href="#">Toxicologie</a></li> </ul> </li> bs4.html

Les barres de navigation Les barres de navigation (de classe .navbar) sont des composants <nav> responsifs. Leur couleur de fond est .navbar-default ou .navbar-reverse. On peut avoir un entête .navbar-header dans un <div> . On peut ajouter un nom de marque (brand) avec .navbar-brand.

Les barres de navigation <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Sciences UQAM</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Accueil</a></li> <li><a href="#">Chimie</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Environement </a> <ul class="dropdown-menu"> <li><a href="#">Ecologie marine</a></li> <li><a href="#">Ocenographie</a></li> <li><a href="#">Toxicologie</a></li> <li class="divider"></li> <li><a href="#">La climatologie</a></li> <li><a href="#">Les GES</a></li> </ul> </li> </div> </nav> bs5.html

Les images On peut inclure des images avec des nouvelles classes: .img-rounded, .img-circle, .img-responsive. <body> <div class="container"> <img src="obaid.jpg" class="img-responsive"> <img src="obaid.jpg"> </div> bs7.html <body> <div class="container"> <img src="obaid.jpg" class="img-rounded" width="300"> <img src="obaid.jpg" class="img-circle" width="300"> </div> bs6.html