Un site web responsive en une heure ?

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