RWD - Back to Basics par Ruben Pieraerts

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

Un exemple :www.ozmoz.be

(merci Thomas)

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

Un exemple :www.ozmoz.be

(merci encore Thomas)

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