Responsive Web Design

1
Responsive Web Design
Guillaume Noguera
BTS SIO SESSION 2013-2015
2
Plan

1. Définition du Responsive Web Design
2. Les avantages et inconvénients
3. Historique
4. Fonctionnement actuel
5. Les outils
6. Evolutions
7. Flux de données

3
Le Responsive Web Design

• On appelle Responsive Design ou Responsive Web
  Design (littéralement conception web adaptive) la
  faculté d'un site web à s'adapter au terminal de
  lecture.
• Modification dynamique de laffichage dune page
  en fonction de la taille de lécran.
• Ne pas confondre avec ladaptative
• Design (Responsive design Server Side)

4
Avantages

• Très peu de maintenance
• Un retour sur investissement plus intéressant
• URL unique
• Les colonnes et les images  sajustent
  automatiquement selon la résolution décran
• Conservation du référencement naturel
• Meilleur indexation
• Exploitation des fonctionnalités du T-commerce et
  du M-commerce

5
Inconvénients

• Le temps de téléchargement est plus long
• Le développement demande plus de temps de
  réflexion
• Demande davantage de compétences techniques
• Une phase de test conséquente
• La créativité est limitée

6
Historique

• 2007 Création de Viewport avec lIphone
• 2010 Premier site en Responsive par Ethan
  Marcotte
• 2011 Publication de  Responsive Web Design 
• 2012 CSS3 / HTML5 et apparition des Medias
  Queries
• 2012 Responsive Web Design classé deuxieme des
  design de site web

7
Fonctionnement

• Technologie Viewport
• Meta Balise Viewport
• Media Queries
• Breakpoints ou Grille fluide

8
Fonctionnement
Device-width / viewport scale 320 / 980
0,33 Scale 0,33
Scale 1,0
320px
device-width
980px
viewport
Iphone4
9
Fonctionnement

• La balise se déclare à lintérieur de la balise
   head .
• ltheadgt
• ltmeta name "viewport" content
  "widthdevice-width initial-scale 1.0 gt
• lt/headgt

10
Fonctionnement

• Les Media Queries sont des spécifications de CSS3
  qui permettent d'attribuer des propriétés CSS en
  fonction de conditions particulières (exemple
  largeur de l'écran).
• _at_media (min-width 360px) and (max-width 720px)
• body
• width 500px

11
Fonctionnement

• Breakpoints (points de rupture)

• Grille fluide

12
Fonctionnement

• Breakpoints (points de rupture)

• Grille fluide

13
Outils

• Emulateur de Google Chrome
• Emulateur de Firefox

14
Frameworks

• Base

• Bootstrap

• Skeleton

15
Evolution

• Disparition de la balise meta Viewport
• Nouvelle norme CSS
• _at_viewport
• width device-width
• zoom 1.0

16
Evolution

• CSS4
• _at_media (pointer)  présence d'un dispositif de
  pointage
• _at_media (hover)  support de l'événement de survol
• _at_media (luminosity)  mesure de la luminosité
  ambiante
• _at_media (script)  support ou non de javascript

17
Flux de données

• Wikipédia
• World Wide Web Consortium (W3C)
• Smashing Magazine
• Google actualité (Alertes)
• Apple (Viewport)

18
FIN