Un site web responsive en une heure ?

Slide 1

Slide 1 text

Raphaël Goetter Raphaël Goetter UN SITE WEB RESPONSIVE EN UNE HEURE ? UN SITE WEB RESPONSIVE EN UNE HEURE ? TOP CHRONO ! TOP CHRONO !

Slide 2

Slide 2 text

alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter Raphaël Goetter Raphaël Goetter

Slide 3

Slide 3 text

EN UNE HEURE, VOUS AVEZ DIT ? EN UNE HEURE, VOUS AVEZ DIT ? SANS DECONNER ?! SANS DECONNER ?!

Slide 4

Slide 4 text

C'EST PAS POSSIBLE ! C'EST PAS POSSIBLE ! KTHXBY KTHXBY

Slide 5

Slide 5 text

AVANT DE SE LANCER... Analyser et comprendre le code existant (template de CMS qui « laisse à désirer ») Identifier les problèmes en amont (largeurs, iframes, points de rupture) Faire un choix de maquette et d'ergo Faire un choix de navigation Penser « Performance Web » Penser « HD » et « Retina » Analyser et comprendre le code existant (template de CMS qui « laisse à désirer ») Identifier les problèmes en amont (largeurs, iframes, points de rupture) Faire un choix de maquette et d'ergo Faire un choix de navigation Penser « Performance Web » Penser « HD » et « Retina » → COMPTER 2 à 4 jours → COMPTER 2 à 4 jours

Slide 6

Slide 6 text

AVANT DE SE LANCER...(bis) Connaître le contexte mobile (navigateurs, moteurs, spécificités) Comprendre le Viewport (device-width, pixel-ratio, viewport) Maîtriser les CSS3 Media Queries (et HTML / CSS en général) Connaître le contexte mobile (navigateurs, moteurs, spécificités) Comprendre le Viewport (device-width, pixel-ratio, viewport) Maîtriser les CSS3 Media Queries (et HTML / CSS en général) → COMPTER... pfiouu → COMPTER... pfiouu

Slide 7

Slide 7 text

PENDANT Produire du code pour écrans multiples (tablettes, smartphones, écrans larges) Produire des adaptations pour 2 orientations Penser « tactile » (positions et largeurs des zones tactiles) Prendre en compte tous les gabarits (home, page-type, formulaires, galeries, etc.) Ajouter / développer du JavaScript dédié Produire du code pour écrans multiples (tablettes, smartphones, écrans larges) Produire des adaptations pour 2 orientations Penser « tactile » (positions et largeurs des zones tactiles) Prendre en compte tous les gabarits (home, page-type, formulaires, galeries, etc.) Ajouter / développer du JavaScript dédié → COMPTER... 3 à 6 jours → COMPTER... 3 à 6 jours

Slide 8

Slide 8 text

ET APRES ? CORRIGER ! Bugs sur tableaux HTML, iframes, vidéos, etc. Bugs CSS ou JS inexpliqués (table-cell, flexbox, événements, touch) Modifier le HTML si nécessaire Problèmes de compatibilités (anciens Android, Blackberry, etc.) Bugs sur tableaux HTML, iframes, vidéos, etc. Bugs CSS ou JS inexpliqués (table-cell, flexbox, événements, touch) Modifier le HTML si nécessaire Problèmes de compatibilités (anciens Android, Blackberry, etc.) → COMPTER... 1 à 3 jours → COMPTER... 1 à 3 jours

Slide 9

Slide 9 text

TOTAL ? TOTAL ? ENTRE 6 ET 12 JOURS ENTRE 6 ET 12 JOURS … OU PLUS … OU PLUS

Slide 10

Slide 10 text

LE RESPONSIVE, C'EST PAS DU « BONUS » ! LE RESPONSIVE, C'EST PAS DU « BONUS » ! ÇA SE DÉCIDE EN AMONT ÇA SE DÉCIDE EN AMONT

Slide 11

Slide 11 text

AgoraCMS « bureau »

Slide 12

Slide 12 text

Zoom nécessaire Navigation aveugle Design « cassé » Mauvaise expérience Zoom nécessaire Navigation aveugle Design « cassé » Mauvaise expérience AgoraCMS « mobile »

Slide 13

Slide 13 text

AgoraCMS « Responsive » ?

Slide 14

Slide 14 text

FACILE !

Slide 15

Slide 15 text

Crédits : flickr.com/photos/bfishadow Crédits : flickr.com/photos/bfishadow BON, ON S'Y MET ?

Slide 16

Slide 16 text

NOTIONS INDISPENSABLES NOTIONS INDISPENSABLES C'EST BIEN PARCE QUE C'EST VOUS C'EST BIEN PARCE QUE C'EST VOUS

Slide 17

Slide 17 text

La surface d'affichage Les Media Queries CSS3 Box-sizing pour vous servir Halte aux débordements La surface d'affichage Les Media Queries CSS3 Box-sizing pour vous servir Halte aux débordements NOTIONS INDISPENSABLES

Slide 18

Slide 18 text

Crédits : flickr.com kalexanderson Crédits : flickr.com kalexanderson LA SURFACE D'AFFICHAGE

Slide 19

Slide 19 text

DES VRAIS ET DES FAUX PIXELS

Slide 20

Slide 20 text

DES VRAIS ET DES FAUX PIXELS 960px 960px 960px 960px

Slide 21

Slide 21 text

640px 640px 640px 640px 320px 320px 320px 320px IPHONE4 IPHONE4 IPHONE3 IPHONE3

Slide 22

Slide 22 text

LARGEUR PHYSIQUE « VRAIS PIXELS » « VRAIS PIXELS » iPhone 3 : 320px Samsung Galaxy S : 480px iPhone 4, iPhone 5 : 640px Nokia Lumia 920 : 768px iPad, iPad Mini : 768px Sony Xperia Z : 1080px Samsung Galaxy S4 : 1080px iPad 3 : 1536px iPhone 3 : 320px Samsung Galaxy S : 480px iPhone 4, iPhone 5 : 640px Nokia Lumia 920 : 768px iPad, iPad Mini : 768px Sony Xperia Z : 1080px Samsung Galaxy S4 : 1080px iPad 3 : 1536px

Slide 23

Slide 23 text

« DEVICE-WIDTH » « FAUX PIXELS » « FAUX PIXELS » iPhone 3, 4, 5 : 320px Nokia Lumia 920 : 320px Sony Xperia Z : 360px Samsung Galaxy S4 : 360px iPad 1, 2, 3 : 768px iPad mini : 768px iPhone 3, 4, 5 : 320px Nokia Lumia 920 : 320px Sony Xperia Z : 360px Samsung Galaxy S4 : 360px iPad 1, 2, 3 : 768px iPad mini : 768px

Slide 24

Slide 24 text

« VIEWPORT » « FAUX PIXELS » « FAUX PIXELS » Safari : 980px Opera mini : 850px Opera mobile : 980px Android 1 : 800px Android 2 : 800px Android 3 : 800px Android 4 : 980px IE mobile : 1024px Safari : 980px Opera mini : 850px Opera mobile : 980px Android 1 : 800px Android 2 : 800px Android 3 : 800px Android 4 : 980px IE mobile : 1024px

Slide 25

Slide 25 text

www.mobitest.me

Slide 26

Slide 26 text

640px 640px 640px 640px IPHONE4 IPHONE4 320px 320px 320px 320px 980px 980px 980px 980px DEVICE-WIDTH DEVICE-WIDTH VIEWPORT VIEWPORT LARGEUR PHYSIQUE LARGEUR PHYSIQUE

Slide 27

Slide 27 text

IPHONE4 IPHONE4 320px 320px 320px 320px 980px 980px 980px 980px DEVICE-WIDTH DEVICE-WIDTH VIEWPORT VIEWPORT Niveau de zoom : 320 / 980 = 0,33x Niveau de zoom : 320 / 980 = 0,33x

Slide 28

Slide 28 text

Crédits : flickr.com st3f4n Crédits : flickr.com st3f4n FORCER LE VIEWPORT

Slide 29

Slide 29 text

LA BALISE META « VIEWPORT » Largeur de fenêtre = device-width Largeur de fenêtre = device-width

Slide 30

Slide 30 text

LA BALISE META « VIEWPORT » Niveau de zoom = 1 Niveau de zoom = 1

Slide 31

Slide 31 text

VIEWPORT DANS LES SPECS @viewport { width: device-width; zoom: 1; } Déjà reconnu par Opera, IE Mobile 10 et Firefox mobile (ex. @-o-viewport) Déjà reconnu par Opera, IE Mobile 10 et Firefox mobile (ex. @-o-viewport)

Slide 32

Slide 32 text

Niveau de zoom : 320 / 320 = 1x Niveau de zoom : 320 / 320 = 1x

Slide 33

Slide 33 text

Crédits : flickr.com st3f4n Crédits : flickr.com st3f4n LES MEDIA QUERIES CSS3

Slide 34

Slide 34 text

Pas de Media Queries ? Pas de Media Queries ? Tous les écrans sont ciblés Tous les écrans sont ciblés

Slide 35

Slide 35 text

Avec Media Queries : Avec Media Queries : Sont ciblés : écrans dont la fenêtre est inférieure ou égale à 640 pixels Sont ciblés : écrans dont la fenêtre est inférieure ou égale à 640 pixels

Slide 36

Slide 36 text

@media (max-width:640px) { body { width: auto; } } Dans un fichier CSS : Dans un fichier CSS : Ici : plein de styles CSS dédiés aux petits écrans Ici : plein de styles CSS dédiés aux petits écrans

Slide 37

Slide 37 text

body { background-color: black; } @media (max-width:640px) { body { background-color: red; } } @media (max-width:640px) { body { width: auto; } } Dans un fichier CSS : Dans un fichier CSS : En pratique : En pratique :

Slide 38

Slide 38 text

Fenêtre de largeur supérieure à 640px Fenêtre de largeur supérieure à 640px Moins de 640px Moins de 640px RÉSULTAT

Slide 39

Slide 39 text

MEDIA QUERIES width / height largeur / hauteur de viewport device-width / device-height largeur / hauteur du device orientation : portrait ou landscape etc. width / height largeur / hauteur de viewport device-width / device-height largeur / hauteur du device orientation : portrait ou landscape etc. 9 9

Slide 40

Slide 40 text

Crédits : flickr.com jing_dong Crédits : flickr.com jing_dong BOX-SIZING

Slide 41

Slide 41 text

MA JOLIE BOÎTE div { width: 500px; padding: 0; }

Slide 42

Slide 42 text

MA JOLIE BOÎTE div { width: 500px; padding: 0; } 500px 500px 500px 500px

Slide 43

Slide 43 text

MA JOLIE BOÎTE div { width: 500px; padding: 10px; }

Slide 44

Slide 44 text

MA JOLIE BOÎTE div { width: 500px; padding: 10px; } 520px 520px 520px 520px

Slide 45

Slide 45 text

MA JOLIE BOÎTE div { width: 50%; padding: 1em; border-width: 1px; }

Slide 46

Slide 46 text

MA JOLIE BOÎTE div { width: 50%; padding: 1em; border-width: 1px; } 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px 50%+2em+2px

Slide 47

Slide 47 text

BOX-SIZING ! div { width: 50%; padding: 1em; border-width: 1px; } 50% 50% 50% 50% 50% 50% 50% 50% box-sizing: border-box;

Slide 48

Slide 48 text

BOX-SIZING ! * { -webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 8 8

Slide 49

Slide 49 text

Crédits : flickr.com jing_dong Crédits : flickr.com jing_dong DÉBORDEMENTS

Slide 50

Slide 50 text

FAUT QUE ÇA RENTRE ! ERF :( ERF :(

Slide 51

Slide 51 text

WORD-WRAP div { word-wrap: break-word; overflow-wrap: break-word; } 6 6

Slide 52

Slide 52 text

HYPHENS div { -webkit-hyphens : auto; -moz-hyphens : auto; -ms-hyphens : auto; hyphens : auto; } 10 10

Slide 53

Slide 53 text

ET LES IMAGES ? Tiens, c'est tout cassé là ! Tiens, c'est tout cassé là !

Slide 54

Slide 54 text

ET LES IMAGES ? img { max-width : 100%; height : auto; } /* IE8 uniquement (bugfix) */ .ie8 img { width : auto; } Une bordure sur l'image ? Une bordure sur l'image ?

Slide 55

Slide 55 text

CETTE FOIS, C'EST PARTI !

Slide 56

Slide 56 text

ANALYSE DE L'EXISTANT

Slide 57

Slide 57 text

ANALYSE DE L'EXISTANT ANALYSE DE L'EXISTANT

Slide 58

Slide 58 text

ANALYSE DE L'EXISTANT

Slide 59

Slide 59 text

ANALYSE DE L'EXISTANT 6 fichiers CSS différents 42 fois « font-size » 70 fois « !important » 30 fois « margin: 0 » 27 fois « padding: 0 » 23 fois « position » 30 fois « float » 12 fois « clear » 6 fichiers CSS différents 42 fois « font-size » 70 fois « !important » 30 fois « margin: 0 » 27 fois « padding: 0 » 23 fois « position » 30 fois « float » 12 fois « clear » OK, no stress ! OK, no stress !

Slide 60

Slide 60 text

ON FIXE LE NIVEAU DE ZOOM

Slide 61

Slide 61 text

FEUILLE DE STYLES MOBILE Appliquée seulement sur écrans de largeur de fenêtre au maximum de 960 pixels Appliquée seulement sur écrans de largeur de fenêtre au maximum de 960 pixels

Slide 62

Slide 62 text

STYLES « RESET » www.knacss.com www.knacss.com

Slide 63

Slide 63 text

RETOUR À LA NORMALE Pour les éléments problématiques : • width : auto • height : auto • float : none • position : static • padding : 0 • margin : 0 • etc.

Slide 64

Slide 64 text

QUELQUES PARTICULARITÉS

Slide 65

Slide 65 text

TIENS, UN BADGE !

Slide 66

Slide 66 text

STYLES SMARTPHONES

Slide 67

Slide 67 text

RE-STYLAGE DU BADGE

Slide 68

Slide 68 text

ADAPTATIONS DIVERSES

Slide 69

Slide 69 text

LA NAVIGATION 2 colonnes + une séparation

Slide 70

Slide 70 text

LA NAVIGATION (BIS) LA NAVIGATION (BIS)

Slide 71

Slide 71 text

LA NAVIGATION (TER) LA NAVIGATION (TER) Tout en douceur...

Slide 72

Slide 72 text

AVANT AVANT

Slide 73

Slide 73 text

APRES APRES www.kiwi.gg/rg/agora www.kiwi.gg/rg/agora

Slide 74

Slide 74 text

TEMPS PASSÉ Production effective de CSS = 6 heures Compréhension de l'existant = 4 heures Réflexions en amont, stratégie = 4 heures Corrections bugs, anomalies = 1 heure Production effective de CSS = 6 heures Compréhension de l'existant = 4 heures Réflexions en amont, stratégie = 4 heures Corrections bugs, anomalies = 1 heure → TOTAL : 15 heures → TOTAL : 15 heures

Slide 75

Slide 75 text

NON TRAITÉ Seule la Homepage a été prise en compte Ergonomie : le minimum vital a été fait pour smartphones et tablettes Aucune adaptation faite pour les différentes orientations Performances web : aucun effort n'a été fait dans ce domaine Écrans « HD » et « Retina » : aucune prise en compte Seule la Homepage a été prise en compte Ergonomie : le minimum vital a été fait pour smartphones et tablettes Aucune adaptation faite pour les différentes orientations Performances web : aucun effort n'a été fait dans ce domaine Écrans « HD » et « Retina » : aucune prise en compte → à « l'arrache » → à « l'arrache »

Slide 76

Slide 76 text

ALLER PLUS LOIN... ERF !

Slide 77

Slide 77 text

ALLER PLUS LOIN

Slide 78

Slide 78 text

Crédits : flickr.com/photos/udono BREF : UN BON DÉBUT … MAIS INSUFFISANT … MAIS INSUFFISANT

Slide 79

Slide 79 text

Photos, illustrations : flickr.com (licence CC) Police : Delicious Delicious Heavy Icones et pictos : iconfider.net findicons.com icônes Star Wars : Everaldo Coelho (free) icônes noires : Token Dark par Brsev (free) Photos, illustrations : flickr.com (licence CC) Police : Delicious Delicious Heavy Icones et pictos : iconfider.net findicons.com icônes Star Wars : Everaldo Coelho (free) icônes noires : Token Dark par Brsev (free) CRÉDITS

Slide 80

Slide 80 text

Raphaël Goetter @goetter MERCI ! MERCI ! Crédits : flickr.com/photos/st3f4n