Responsive web design

Responsive web design
Tailles d'écrans (automne 2013)
1920x1200; 0,92
Autres; 11,65
1366x768; 25,05
1152x864; 0,98
1280x768; 1,23
1280x720; 1,57
1024x600; 1,72
1360x768; 2,42
1680x1050; 3,01
768x1024; 4,19
1600x900; 4,78
1024x768; 13,77
1440x900; 5,89
1280x1024; 6,03
1280x800; 9,06
1920x1080; 7,72
Responsive web design
2
Nécessité : tenir compte de cette diversité
Responsive web design
3
Solution 100 % CSS : media queries
Sections CSS dont les règles ne sont appliquées que pour le média
spécifié :
@media screen and (min-width: 600px) and (max-width: 1199px) {
nav {
float: left;
width: 180px;
}
article {
margin-left: 200px;
...
}
...
}
Responsive web design
4
Pas que pour les écrans...
@media print {
aside {
margin: 0 1cm;
page-break-inside: avoid;
...
}
nav {
display: none;
}
...
}
Responsive web design
5
Bonnes pratiques
• Un seul site pour toutes les plateformes
(éviter le site mobile dédié, ex : mobile.example.com)
• “Mobile first” : concevoir d'abord le site mobile
• Amélioration progressive
– Accès aux fonctionnalités/contenu de base pour tous
– Ajout de fonctionnalités en fonction de la plateforme
Responsive web design
6
Conclusion générale
• Ensemble de technologies vues en cours → la plateforme web
• Que peut-on construire avec ?
– Des sites web (ex : Wikipédia)
– Des applications web (ex : GMail)
– Des applications mobiles (cf. Firefox OS, PhoneGap)
– Des applications desktop (cf. Windows 8)
• Vers une hégémonie de la plateforme web ?
Responsive web design
7
Programme 2013-2014
5 nov.
12 nov.
26 nov.
3 déc.
10 déc.
17 déc.
7 jan.
14 jan.
Intervenants :
Introduction
HTML et CSS
Christophe Jacquet
Cécile Hardebolle
JavaScript et DOM
jQuery + Projet
XML, JSON + Projet
AJAX et Web Services + Projet
Node.js + Projet
Namespaces, XPath et XSLT + Projet
Conclusion + Projet
Mineure Applications Web
3 fév.
Examen : présentation de projet
8
Présentations du 3 février
Déroulement :
• 15 minutes de présentation
– description du projet
– présentation de 2 technologies
intéressantes mises en œuvre
• 5 minutes de démo
• Questions
Tout le monde peut assister
aux présentations
10.00
10.30
11.00
11.30
Fang
Rum - Jin
Chantreau - Parisot
Giuly
13.30 Rostov - Song
14.00 Blondel - Dupuy
14.30 Bayssières
15.10 Turckheim - Woo
15.40 Liu - Bain
Mineure Applications Web
9