Un site web responsive en une heure ?

AgoraCMS 2012, Paris

Transcript

1. Raphaël Goetter Raphaël Goetter UN SITE WEB RESPONSIVE EN UNE HEURE ? UN SITE WEB RESPONSIVE EN UNE HEURE ? TOP CHRONO ! TOP CHRONO !
2. 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
3. EN UNE HEURE, VOUS AVEZ DIT ? EN UNE HEURE, VOUS AVEZ DIT ? SANS DECONNER ?! SANS DECONNER ?!
4. C'EST PAS POSSIBLE ! C'EST PAS POSSIBLE ! KTHXBY KTHXBY
5. 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
6. 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
7. 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
8. 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
9. TOTAL ? TOTAL ? ENTRE 6 ET 12 JOURS ENTRE 6 ET 12 JOURS … OU PLUS … OU PLUS
10. 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
11. AgoraCMS « bureau »
12. Zoom nécessaire Navigation aveugle Design « cassé » Mauvaise expérience Zoom nécessaire Navigation aveugle Design « cassé » Mauvaise expérience AgoraCMS « mobile »
13. AgoraCMS « Responsive » ?
14. FACILE !
15. Crédits : flickr.com/photos/bfishadow Crédits : flickr.com/photos/bfishadow BON, ON S'Y MET ?
16. NOTIONS INDISPENSABLES NOTIONS INDISPENSABLES C'EST BIEN PARCE QUE C'EST VOUS C'EST BIEN PARCE QUE C'EST VOUS
17. 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
18. Crédits : flickr.com kalexanderson Crédits : flickr.com kalexanderson LA SURFACE D'AFFICHAGE
19. DES VRAIS ET DES FAUX PIXELS
20. DES VRAIS ET DES FAUX PIXELS 960px 960px 960px 960px
21. 640px 640px 640px 640px 320px 320px 320px 320px IPHONE4 IPHONE4 IPHONE3 IPHONE3
22. 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
23. « 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
24. « 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
25. www.mobitest.me
26. 640px 640px 640px 640px IPHONE4 IPHONE4 320px 320px 320px 320px 980px 980px 980px 980px DEVICE-WIDTH DEVICE-WIDTH VIEWPORT VIEWPORT LARGEUR PHYSIQUE LARGEUR PHYSIQUE
27. 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
28. Crédits : flickr.com st3f4n Crédits : flickr.com st3f4n FORCER LE VIEWPORT
29. <meta name="viewport" content="width=device-width"> LA BALISE META « VIEWPORT » Largeur de fenêtre = device-width Largeur de fenêtre = device-width
30. <meta name="viewport" content="width=device-width"> LA BALISE META « VIEWPORT » <meta name="viewport" content="initial-scale=1.0"> Niveau de zoom = 1 Niveau de zoom = 1
31. 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)
32. Niveau de zoom : 320 / 320 = 1x Niveau de zoom : 320 / 320 = 1x <meta name="viewport" content="initial-scale=1.0">
33. Crédits : flickr.com st3f4n Crédits : flickr.com st3f4n LES MEDIA QUERIES CSS3
34. <link rel="stylesheet" href="styles.css" media="screen" > Pas de Media Queries ? Pas de Media Queries ? Tous les écrans sont ciblés Tous les écrans sont ciblés
35. <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)" > <link rel="stylesheet" href="styles.css" media="screen" > 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
36. @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
37. 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 :
38. Fenêtre de largeur supérieure à 640px Fenêtre de largeur supérieure à 640px Moins de 640px Moins de 640px RÉSULTAT
39. 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
40. Crédits : flickr.com jing_dong Crédits : flickr.com jing_dong BOX-SIZING
41. MA JOLIE BOÎTE div { width: 500px; padding: 0; }
42. MA JOLIE BOÎTE div { width: 500px; padding: 0; } 500px 500px 500px 500px
43. MA JOLIE BOÎTE div { width: 500px; padding: 10px; }
44. MA JOLIE BOÎTE div { width: 500px; padding: 10px; } 520px 520px 520px 520px
45. MA JOLIE BOÎTE div { width: 50%; padding: 1em; border-width: 1px; }
46. 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
47. BOX-SIZING ! div { width: 50%; padding: 1em; border-width: 1px; } 50% 50% 50% 50% 50% 50% 50% 50% box-sizing: border-box;
48. BOX-SIZING ! * { -webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 8 8
49. Crédits : flickr.com jing_dong Crédits : flickr.com jing_dong DÉBORDEMENTS
50. FAUT QUE ÇA RENTRE ! ERF :( ERF :(
51. WORD-WRAP div { word-wrap: break-word; overflow-wrap: break-word; } 6 6
52. HYPHENS div { -webkit-hyphens : auto; -moz-hyphens : auto; -ms-hyphens : auto; hyphens : auto; } 10 10
53. ET LES IMAGES ? Tiens, c'est tout cassé là ! Tiens, c'est tout cassé là !
54. 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 ?
55. CETTE FOIS, C'EST PARTI !
56. ANALYSE DE L'EXISTANT
57. ANALYSE DE L'EXISTANT ANALYSE DE L'EXISTANT
58. ANALYSE DE L'EXISTANT
59. 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 !
60. ON FIXE LE NIVEAU DE ZOOM
61. 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
62. STYLES « RESET » www.knacss.com www.knacss.com
63. RETOUR À LA NORMALE Pour les éléments problématiques : • width : auto • height : auto • float : none • position : static • padding : 0 • margin : 0 • etc.
64. QUELQUES PARTICULARITÉS
65. TIENS, UN BADGE !
66. STYLES SMARTPHONES
67. RE-STYLAGE DU BADGE
68. ADAPTATIONS DIVERSES
69. LA NAVIGATION 2 colonnes + une séparation
70. LA NAVIGATION (BIS) LA NAVIGATION (BIS)
71. LA NAVIGATION (TER) LA NAVIGATION (TER) Tout en douceur...
72. AVANT AVANT
73. APRES APRES www.kiwi.gg/rg/agora www.kiwi.gg/rg/agora
74. 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
75. 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 »
76. ALLER PLUS LOIN... ERF !
77. ALLER PLUS LOIN
78. Crédits : flickr.com/photos/udono BREF : UN BON DÉBUT … MAIS INSUFFISANT … MAIS INSUFFISANT
79. 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
80. Raphaël Goetter @goetter MERCI ! MERCI ! Crédits : flickr.com/photos/st3f4n