View
1.162
Download
4
Category
Preview:
DESCRIPTION
Alinoa a présenté lors d'une conférence organisée par la Feweb le 05/03/2013, les fondamentaux de l'approche Responsive Web Design.
Citation preview
Responsive Web DesignBack to Basics
par Ruben Pieraerts / Alinoa@ruben_pieraerts@alinoa
En 2012,environ 15 % des sites sont optimisés pour le mobile
Ruben Pieraerts(homme / 30 ans / Bruxelles)
• Alinoa : Designer, manager• Prof : Web design, identité visuelle (Design Innovation / technocité)
3 concepts :
3 concepts :1. Qu’est-ce que le Responsive Web Design ?
3 concepts :1. Qu’est-ce que le Responsive Web Design ?2. Quels sont les outils à notre disposition ?
3 concepts :1. Qu’est-ce que le Responsive Web Design ?2. Quels sont les outils à notre disposition ?3. Deux approches ? Laquelle choisir ?
En 2001:
En 2005:
En 2010:
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 !
Que faire ?
• 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)
Sur le même temps...
Le tra"c Internet sur mobilea explosé de + de 600 %.
ResponsiveWebDesign
?
Site Responsive Web Design
=
Site capable d’a#cher le même contenu dans deux contextes di$érents
Exemple : Amazon
Exemple : Boston Globe
Exemple : shun.kaiusaltd.com
Comment mettre en oeuvre le Responsive Web Design
3 techniques à connaitre :
3 techniques à connaitre :1. Grille %uide
3 techniques à connaitre :1. Grille %uide2. Images et médias %exibles
3 techniques à connaitre :1. Grille %uide2. Images et médias %exibles3. Media queries
1.Grille %uide
Grille
=
Système qui permet d’organiser de manière rationnelle une mise en page
Grille %uide
=
Grille proportionnelle
Formule magique :
cible / contexte = résultat
cible / contexte = résultat
960px / 1024 px = 0,9375
soit 93,75%
2.Imageset médias%exibles
cela marche aussi pour les vidéos,...
3.Mediaqueries
• Introduit depuis CSS 3• Supporté par les bons navigateurs• Pour les autres (IE 6 à 8) : respond.js https://github.com/scottjehl/Respond
Avec la grille %uideet les images %exibles :
le design s’a#che sur tous les supports
Mais la mise en pagen’est pas adéquate
media queries
=
permet d’appliquer un style de manière conditionnelle
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
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.
Responsivedégradation
ou
Mobile "rst
Responsive dégradation :
=
Mise en page classique.On dégrade (enlève) des contenus à basse résolution.
+• Partir de l’existant (en théorie)• Même méthode de travail
-• Site plus lourd
Mobile "rst :
=
On ré%échit d’abord au mobile.On ajoute ensuite des contenus pour enrichir.
+• Oblige à faire des choix de contenus• Allège le site
-• On change les méthodes de travail.• Importance du couple designer / intégrateur.
Conclusion(s)
Epoque imprévisible
->
Miser sur le RWD =se prémunir des évolutions
RWD
=
Complément des applications mobiles-> On y présente pas les mêmes contenus
Pour aller plus loin
Recommended