Basics of Responsive Web Design
-
Upload
infographie-sup -
Category
Documents
-
view
1 -
download
0
Transcript of Basics of Responsive Web Design
Ruben Pieraerts(homme / 30 ans / Bruxelles)
• Alinoa : Designer, manager• Prof : Web design, identité visuelle (Design Innovation / technocité)
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 ?
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 !
• 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)
• Introduit depuis CSS 3• Supporté par les bons navigateurs• Pour les autres (IE 6 à 8) : respond.js https://github.com/scottjehl/Respond
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.
Responsive dégradation :
=
Mise en page classique.On dégrade (enlève) des contenus à basse résolution.