Conception Adaptative "Responsive Web Design"

Dimension: px

Commencer à balayer dès la page:

Download "Conception Adaptative "Responsive Web Design""

Geoffrey Chrétien
il y a 8 ans
Total affichages :

1 Conception Adaptative "Responsive Web Design" Construire des interfaces web qui s'adaptent aux spécificités des terminaux sur lesquelles elles sont vues

2 RWD in the wild quelques exemples :

3 bon alors...qu'est-ce qu'on a vu?? des éléments fluides, dont la taille est variable selon la largeur du viewport des points de rupture, qui provoquent des réorganisations de la mise en page des médias (images, vidéos) fluides et dont la taille est variable

largeur du viewport des points de rupture, qui provoquent des

4 I. éléments fluides pour avoir des éléments fluides utiliser des tailles fluides (! ) c'est à dire des blocks dont toutes les dimensions sont exprimées en taille proportionnelle : % largeur totale largeur des colonnes largeur des goulottes éviter de définir les hauteurs ou gérer les débordements

) c'est à dire des blocks dont toutes les dimensions sont exprimées en

5 II. points de rupture changer la mise en forme en fonction de la place disponible pour l'affichage : taille du viewport ici : 3 mises en page différentes = 2 largeurs de basculement

6 les média-query css outil de base pour la définition des basculement et l'adaptation au média permettent de décrire des règles css conditionnées à des caractéristiques du terminal placées à l'intérieur des feuilles de styles

décrire des règles css conditionnées à des

7 [screen print projection tv...] and (<cond>=val) and, (<cond>=val) and { /* css rules */ body, p { } h1 { } a:hover { } }

8 les conditions média de sortie : screen print projection tv... tailles du viewport (en em ou px) orientation : orientation : landscape portrait format du viewport : width, min-width, max-width height, min-height, max-height aspect-ratio : 4/3 16/9 : tailles du terminal device-width, min-device-width device-height, min-device-height

format du viewport : width, min-width, max-width height, min-height, max-height

9 quelques screen (min-width: 25em) body {font-size: 1em ; } } screen (min-width: 25em) and (orientation:landscape) { body {font-size: 1.2 em ; } screen (min-width: 25em) and (orientation:landscape), (min-width: 25em) and (aspect-ratio:16/9) { body {font-size: 1.2 em ; } }

10 en pratique <body> <section> <article>lorem ipsum.. </article> <article> Vivamus arcu... </article> </section> <aside> Maecenas porta </aside> </body> section, article, aside { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside { padding: 10px;}

11 on ajoute 1 rupture section, article, aside { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside { padding: screen and (min-width: 35em) { section, aside { display: inline-block; vertical-align: top; } section { width:66%; margin-right: -0.25em; } aside { width: 34%; } } A partir de 35em, affichage en 2 colonnes : section : 2/3 aside : 1/3, à gauche

{ section, aside { display: inline-block; vertical-align: top; } section { width:66%; margin-right: -0.

12 2ème rupture section, article, aside { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside { padding: screen and (min-width: 35em) { section, aside { display: inline-block; vertical-align: top; } section { width:66%; margin-right: -0.25em; } aside { width: 34%; } } media screen and (min-width: 60em) { article { display: inline-block; width: 50%; vertical-align: top;} section article:first-child { margin-right: -0.25em;} } A partir de 60em, affichage en 3 colonnes

13 remarque 1 les réorganisations sont contraintes par la structure de l'arbre html ordre du flux imbrication et conteneurs

14 remarque 2 comment sont évaluées les valeurs width, min-width height, min-height dans les conditions des screen and (min-width: 35em) { réponse : par rapport au viewport taille de la zone d'affichage utilisée par le navigateur variable sur un navigateur desktop fixe sur un navigateur mobile

@media screen and (min-width: 35em) { réponse : par rapport au viewport

15 attention, piège n 1! 1) le viewport dépend du navigateur et pas du terminal! 2) les navigateurs mentent sur la taille du viewport et annoncent une valeur beaucoup plus grande que la réalité! Android 1, 2 et 3 : 800px Android 4 : 980px Opera mini : 850px Opera mobile : 980px Safari mobile : 980px Internet Explorer mobile : 1024px mais pourquoi mentir comme ça? pour afficher les vieux sites en dé-zoomant

16 exemples image 400x300 site largeur 930px

17 pour éviter le problème fixer le viewport à la taille du terminal : technique actuelle : dans le document html <head> <meta charset="utf-8"> <title>minipage responsive</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="resp_1.css" /> </head> dans le futur : dans la css ( déjà présent dans opera mobile, IE10 mobile, { } width: device-width; /* largeur du viewport */ zoom: 1; /* zoom initial 1.0 (et clin d'oeil aux fans d'ie6/7) */

0"> <link rel="stylesheet" href="resp_1.

18 le résultat image 400x300 écran du galaxy S : 480x800! et pourtant l'image est trop grande #@!!@#

19 viewport sucks! (piège n 2) device-width!= largeur d'écran en pixels largeur d'écran ou surface réelle nombre physique de pixels device-width ou surface logique nombre de pixels virtuels que le terminal pense avoir sur les écrans HD, 1px (css) = 1 / 1,5 / 2 / 3 px réels pixel ratio ou pixel density : px réel / px virtuel écran laptop/desktop : 1 ios : 1 / ios-retina : 2 android : 1, 1,5, 2 sony xperia Z : 3 voir

surface logique nombre de pixels virtuels que le terminal pense avoir sur les écrans HD, 1px (css) = 1 / 1,5

20 III. adaptation des médias images, vidéo : un certain nombre d'éléments risque de déborder de leur conteneur lorsque la largeur du viewport diminue max-width : 100% ; /* fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */ img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100%; } /* conserver les proportions pour une image */ img { height: auto; width: auto; } d'après

td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100%; } /* conserver les proportions pour une

21 problème spécifique aux images Il serait intéressant de pouvoir livrer des images de dimensions différentes selon le terminal éviter de transférer une image HD 2560x1440 sur une téléphone pour les images en background c'est possible, mais oblige à.img_cont { dimensionner les conteneurs background-image: url("4_l2.jpg"); background-size: contain; width:70%; height:50%; screen and (min-width: 35em) {.img_cont { background-image: url("4l10.jpg") ; }}

22 pour les img html : par défaut le navigateur les charge toutes éviter de charger de grosses images sur un téléphone certaines images supportent mal une forte mise à l'échelle : lorsque l'image est rétécie, on préfère une image recadrée

23 (d'après Smashing Magazine)

24 (d'après Smashing Magazine)

25 bref, on aimerait choisir l'image à afficher en fonction du terminal

26 situation actuelle et solution solution html/css en cours de définition : <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>texte accessible</p> </picture> en attendant : PictureFill : polyfill pour <picture> HISRC : plugin jquery Adaptive Image : solution apache/php

27 un peu de lecture le viewport : le point sur les techniques : modèles, ressources et actus

28 retour au calme : quelques principes de conception I. Faire des maquettes papier en prévoyant les affichages mobile/tablette/desktop et définir la chorégraphie du contenu II. Identifier les dimensions pour les ruptures en fonction du contenu, et les exprimer en em III. Mobile first : commencer la conception et le développement par la version mobile puis élargir IV. Connaitre quelques principes et modèles d'adaptation

29 source:

30 Identifier les points de rupture Principe : se baser sur le contenu à afficher (et non pas sur la largeur des terminaux, trop variable) 1 paragraphe avec du texte à lire : mini 25em 1 court texte : 12em 1 option de menu : 8-10em 1 menu vertical : 10em médias : à comparer aux éléments précédents etc...

31 12em 25em 12em media query sceen and (min-width: 60em) {...

32 60em correspondent à environ 960px rupture réelle sur ce site : 1024px

33 intérêts définition des média-query indépendante des terminaux résiste à des changements de tailles de polices de la part de l'utilisateur un utilisateur utilisant 1 police 32px au lieu de 16px verra son affichage adapté par les média-query ATTENTION : on continue à définir les tailles des éléments en % pour garder la fluidité

34 mobile-first commencer votre css par la version mobile les média-query prennent en compte les élargissement, et utilisent des conditions "minwidth" pourquoi? parce-que : ce qui fonctionne sur un petit écran, d'un point de vue ergonomique et d'un point de vue technique, fonctionnera sur un grand écran l'inverse n'est pas vrai

35 quelques principes typographie et fontes : sur mobile, on peut diminuer la taille des fonts faire des essais, variable selon la fonte et le contenu zones cliquables sur mobile : agrandir et isoler si possible attention : :hover inopérant sur touch screen

36 le layout d'après

37 le layout "off-canvas" Principe : l'espace principal doit être occupé par le contenu principal d'après

38 les menus le plus simple : dans le header ou footer en css plus compliqué (js) toggle :

39 conclusion ça ira mieux avec CSS level 4

Documents pareils

UN SITE WEB RESPONSIVE EN UNE HEURE?

UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N