Transcript
Page 1: Responsive Web Design : back to basics

Responsive Web DesignBack to Basics

par Ruben Pieraerts / Alinoa@ruben_pieraerts@alinoa

Page 2: Responsive Web Design : back to basics
Page 3: Responsive Web Design : back to basics

En 2012,environ 15 % des sites sont optimisés pour le mobile

Page 4: Responsive Web Design : back to basics

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

3 concepts :

Page 6: Responsive Web Design : back to basics

3 concepts :1. Qu’est-ce que le Responsive Web Design ?

Page 7: Responsive Web Design : back to basics

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

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
Page 10: Responsive Web Design : back to basics

En 2001:

Page 11: Responsive Web Design : back to basics

En 2005:

Page 12: Responsive Web Design : back to basics

En 2010:

Page 13: Responsive Web Design : back to basics

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

Que faire ?

Page 15: Responsive Web Design : back to basics

• 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

Sur le même temps...

Le tra"c Internet sur mobilea explosé de + de 600 %.

Page 17: Responsive Web Design : back to basics

ResponsiveWebDesign

?

Page 18: Responsive Web Design : back to basics
Page 19: Responsive Web Design : back to basics
Page 20: Responsive Web Design : back to basics

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

Exemple : Amazon

Page 22: Responsive Web Design : back to basics

Exemple : Boston Globe

Page 23: Responsive Web Design : back to basics

Exemple : shun.kaiusaltd.com

Page 24: Responsive Web Design : back to basics

Comment mettre en oeuvre le Responsive Web Design

Page 25: Responsive Web Design : back to basics

3 techniques à connaitre :

Page 26: Responsive Web Design : back to basics

3 techniques à connaitre :1. Grille %uide

Page 27: Responsive Web Design : back to basics

3 techniques à connaitre :1. Grille %uide2. Images et médias %exibles

Page 28: Responsive Web Design : back to basics

3 techniques à connaitre :1. Grille %uide2. Images et médias %exibles3. Media queries

Page 29: Responsive Web Design : back to basics

Un exemple :www.ozmoz.be

(merci Thomas)

Page 30: Responsive Web Design : back to basics

1.Grille %uide

Page 31: Responsive Web Design : back to basics

Grille

=

Système qui permet d’organiser de manière rationnelle une mise en page

Page 32: Responsive Web Design : back to basics
Page 33: Responsive Web Design : back to basics
Page 34: Responsive Web Design : back to basics

Grille %uide

=

Grille proportionnelle

Page 35: Responsive Web Design : back to basics

Formule magique :

cible / contexte = résultat

Page 36: Responsive Web Design : back to basics
Page 37: Responsive Web Design : back to basics

cible / contexte = résultat

960px / 1024 px = 0,9375

soit 93,75%

Page 38: Responsive Web Design : back to basics
Page 39: Responsive Web Design : back to basics
Page 40: Responsive Web Design : back to basics
Page 41: Responsive Web Design : back to basics

2.Imageset médias%exibles

Page 42: Responsive Web Design : back to basics

Un exemple :www.ozmoz.be

(merci encore Thomas)

Page 43: Responsive Web Design : back to basics

cela marche aussi pour les vidéos,...

Page 44: Responsive Web Design : back to basics

3.Mediaqueries

Page 45: Responsive Web Design : back to basics

• 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

Avec la grille %uideet les images %exibles :

le design s’a#che sur tous les supports

Page 47: Responsive Web Design : back to basics

Mais la mise en pagen’est pas adéquate

Page 48: Responsive Web Design : back to basics

media queries

=

permet d’appliquer un style de manière conditionnelle

Page 49: Responsive Web Design : back to basics
Page 50: Responsive Web Design : back to basics

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

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

Responsivedégradation

ou

Mobile "rst

Page 53: Responsive Web Design : back to basics

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

+• Partir de l’existant (en théorie)• Même méthode de travail

Page 55: Responsive Web Design : back to basics

-• Site plus lourd

Page 56: Responsive Web Design : back to basics

Mobile "rst :

=

On ré%échit d’abord au mobile.On ajoute ensuite des contenus pour enrichir.

Page 57: Responsive Web Design : back to basics

+• Oblige à faire des choix de contenus• Allège le site

Page 58: Responsive Web Design : back to basics

-• On change les méthodes de travail.• Importance du couple designer / intégrateur.

Page 59: Responsive Web Design : back to basics

Conclusion(s)

Page 60: Responsive Web Design : back to basics

Epoque imprévisible

->

Miser sur le RWD =se prémunir des évolutions

Page 61: Responsive Web Design : back to basics

RWD

=

Complément des applications mobiles-> On y présente pas les mêmes contenus

Page 62: Responsive Web Design : back to basics

Pour aller plus loin

Page 63: Responsive Web Design : back to basics

Top Related