responsive web design

Responsive Web Responsive Web

Guillaume Verstraete

04/05/12

DesignDesign

Guillaume aka versguiGuillaume aka versgui

Développeur web & multimédia freelance(passionné)

http://versgui.frversgui@gmail.com

@versgui

Comment accéder au Web en 2012 ? Comment accéder au Web en 2012 ? 

TV(set-top box, TV connectées...)

PC Bureau(ou Mac, on sait, c'est pareil)

Tablettes Smartphones

Des résolutions en pagailleDes résolutions en pagaille

1024x768(50%)

800x600(30%)

Les autres(20%)

2005

1366x768(16%)

1280x800(14%)

« Gott verdammi ! »(50%)

Les autres(20%)

2012

2 méthodes d'intégration...2 méthodes d'intégration...jusqu'à aujourd'hui ! jusqu'à aujourd'hui ! 

✔ Conception à largeur fixe

● Pas adapté aux grandes et petites résolutions● Peu évolutif

✔ Conception à largeur variable

● Un peu mieux, mais la navigation n'est pas optimisée et ce n'est toujours pas adapté aux résolutions extrêmes

Mais les choses changentMais les choses changent

2007

NEW

On peut mieux faire...

Une application !(une pour Android, une pour iOs, une pour Blackberry, une pour Windows Mobile...)

Un site dédié pour smartphone !(un joli site supplémentaire à maintenir)

Une application ! Une application ! 

MAUVAISE IDEE

RESPONSIVE

WEB DESIGN

Grille flexible

Grille flexibleGrille flexible(mise en page réactive)(mise en page réactive)

100%

15% 75%

Grille flexibleGrille flexible(mise en page réactive)(mise en page réactive)

Quelques frameworks

CSSGrid.net

RESPONSIVE

WEB DESIGN

Grille flexible

Images flexibles

Images flexiblesImages flexibles

img { max-width: 100%; }

RESPONSIVE

WEB DESIGN

Media Queries (CSS3)

Grille flexible

Images flexibles

Media Queries Media Queries

@media handleld, screen and (max-width: 640px) { /* Un peu de CSS pour iPhone (entre autres) */ }

RESPONSIVE

WEB DESIGN

Media Queries (CSS3)

Grille flexible

Images flexibles

Une grille flexible (avec des images flexibles) qui incorporentdes « media queries » pour créer une mise en page réactive et adaptive.

- Ethan Marcotte, 2010

Des questions ? Des questions ?