Responsive Web Design : back to basics
description
Transcript of Responsive Web Design : back to basics
![Page 1: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/1.jpg)
Responsive Web DesignBack to Basics
par Ruben Pieraerts / Alinoa@ruben_pieraerts@alinoa
![Page 2: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/2.jpg)
![Page 3: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/3.jpg)
En 2012,environ 15 % des sites sont optimisés pour le mobile
![Page 4: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/4.jpg)
Ruben Pieraerts(homme / 30 ans / Bruxelles)
• Alinoa : Designer, manager• Prof : Web design, identité visuelle (Design Innovation / technocité)
![Page 5: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/5.jpg)
3 concepts :
![Page 6: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/6.jpg)
3 concepts :1. Qu’est-ce que le Responsive Web Design ?
![Page 7: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/7.jpg)
3 concepts :1. Qu’est-ce que le Responsive Web Design ?2. Quels sont les outils à notre disposition ?
![Page 8: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/8.jpg)
3 concepts :1. Qu’est-ce que le Responsive Web Design ?2. Quels sont les outils à notre disposition ?3. Deux approches ? Laquelle choisir ?
![Page 9: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/9.jpg)
![Page 10: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/10.jpg)
En 2001:
![Page 11: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/11.jpg)
En 2005:
![Page 12: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/12.jpg)
En 2010:
![Page 13: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/13.jpg)
Au jeu des prédictions...
En 2009...
Il était prévu que les ventes de smartphones dépassent celles d’ordinateurs en 2012
...
Cela s’est produit en 2010 !
![Page 14: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/14.jpg)
Que faire ?
![Page 15: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/15.jpg)
• Développer un site pour chaque plate-forme ?
• Développer une application native par plate-forme ?
• Ne faire qu’un seul site avec un design "xe ? (et tant pis pour les autres)
![Page 16: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/16.jpg)
Sur le même temps...
Le tra"c Internet sur mobilea explosé de + de 600 %.
![Page 17: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/17.jpg)
ResponsiveWebDesign
?
![Page 18: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/18.jpg)
![Page 19: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/19.jpg)
![Page 20: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/20.jpg)
Site Responsive Web Design
=
Site capable d’a#cher le même contenu dans deux contextes di$érents
![Page 21: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/21.jpg)
Exemple : Amazon
![Page 22: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/22.jpg)
Exemple : Boston Globe
![Page 23: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/23.jpg)
Exemple : shun.kaiusaltd.com
![Page 24: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/24.jpg)
Comment mettre en oeuvre le Responsive Web Design
![Page 25: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/25.jpg)
3 techniques à connaitre :
![Page 26: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/26.jpg)
3 techniques à connaitre :1. Grille %uide
![Page 27: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/27.jpg)
3 techniques à connaitre :1. Grille %uide2. Images et médias %exibles
![Page 28: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/28.jpg)
3 techniques à connaitre :1. Grille %uide2. Images et médias %exibles3. Media queries
![Page 30: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/30.jpg)
1.Grille %uide
![Page 31: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/31.jpg)
Grille
=
Système qui permet d’organiser de manière rationnelle une mise en page
![Page 32: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/32.jpg)
![Page 33: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/33.jpg)
![Page 34: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/34.jpg)
Grille %uide
=
Grille proportionnelle
![Page 35: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/35.jpg)
Formule magique :
cible / contexte = résultat
![Page 36: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/36.jpg)
![Page 37: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/37.jpg)
cible / contexte = résultat
960px / 1024 px = 0,9375
soit 93,75%
![Page 38: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/38.jpg)
![Page 39: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/39.jpg)
![Page 40: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/40.jpg)
![Page 41: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/41.jpg)
2.Imageset médias%exibles
![Page 43: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/43.jpg)
cela marche aussi pour les vidéos,...
![Page 44: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/44.jpg)
3.Mediaqueries
![Page 45: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/45.jpg)
• Introduit depuis CSS 3• Supporté par les bons navigateurs• Pour les autres (IE 6 à 8) : respond.js https://github.com/scottjehl/Respond
![Page 46: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/46.jpg)
Avec la grille %uideet les images %exibles :
le design s’a#che sur tous les supports
![Page 47: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/47.jpg)
Mais la mise en pagen’est pas adéquate
![Page 48: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/48.jpg)
media queries
=
permet d’appliquer un style de manière conditionnelle
![Page 49: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/49.jpg)
![Page 50: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/50.jpg)
Récapitulatif des caractéristiques pour les medias queries
color support de la couleur (bits/pixel)
color-index périphérique utilisant une table de couleurs indexées
aspect-ratio ratio du périphérique de sortie (par exemple 16/9)
device-aspect-ratio ratio de la zone d'a�chage
device-height dimension en hauteur du périphérique
device-width dimension en largeur du périphérique
grid périphérique bitmap ou grille (ex : lcd)
height dimension en hauteur de la zone d'a�chage
monochrome périphérique monochrome ou niveaux de gris (bits/pixel)
orientation orientation du périphérique (portait ou landscape)
resolution résolution du périphérique (en dpi, dppx, ou dpcm)
scan type de balayage des téléviseurs (progressive ou interlace)
width dimension en largeur de la zone d'a�chage
![Page 51: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/51.jpg)
Proposition de poins de ruptures
320 pixels Appareil à petit écran comme les téléphones en mode portrait.
480 pixels Appareil à petit écran comme les téléphones en mode paysage.
600 pixels Petites tablettes comme le Kindle d'Amazon (600 * 800) et le Nook de Barnes & Nobles (600 * 1024) en mode portrait.
768 pixels Tablette de 10 pouces comme l'iPad en mode portrait.
1024 pixels Tablette de 10 pouces comme l'iPad en mode paysage, ainsi que certains netbook, ordinateurs portable et ordinateurs de bureau.
1200 pixels Ecrans larges, principalement ceux des ordinateurs portables et de bureau.
![Page 52: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/52.jpg)
Responsivedégradation
ou
Mobile "rst
![Page 53: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/53.jpg)
Responsive dégradation :
=
Mise en page classique.On dégrade (enlève) des contenus à basse résolution.
![Page 54: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/54.jpg)
+• Partir de l’existant (en théorie)• Même méthode de travail
![Page 55: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/55.jpg)
-• Site plus lourd
![Page 56: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/56.jpg)
Mobile "rst :
=
On ré%échit d’abord au mobile.On ajoute ensuite des contenus pour enrichir.
![Page 57: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/57.jpg)
+• Oblige à faire des choix de contenus• Allège le site
![Page 58: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/58.jpg)
-• On change les méthodes de travail.• Importance du couple designer / intégrateur.
![Page 59: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/59.jpg)
Conclusion(s)
![Page 60: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/60.jpg)
Epoque imprévisible
->
Miser sur le RWD =se prémunir des évolutions
![Page 61: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/61.jpg)
RWD
=
Complément des applications mobiles-> On y présente pas les mêmes contenus
![Page 62: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/62.jpg)
Pour aller plus loin
![Page 63: Responsive Web Design : back to basics](https://reader034.fdocuments.net/reader034/viewer/2022042713/54828d49b4af9f690d8b47e5/html5/thumbnails/63.jpg)