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 !
   

   View Slide

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
   

   View Slide

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

   View Slide

4. C'EST PAS
   POSSIBLE !
   C'EST PAS
   POSSIBLE !
   KTHXBY
   KTHXBY
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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
    

    View Slide

11. AgoraCMS « bureau »
    

    View Slide

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

    View Slide

13. AgoraCMS « Responsive » ?
    

    View Slide

14. FACILE !
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

19. DES VRAIS ET DES FAUX PIXELS
    

    View Slide

20. DES VRAIS ET DES FAUX PIXELS
    960px
    960px
    960px
    960px
    

    View Slide

21. 640px
    640px
    640px
    640px 320px
    320px
    320px
    320px
    IPHONE4
    IPHONE4
    IPHONE3
    IPHONE3
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

25. www.mobitest.me
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. media="screen and (max-width: 640px)" >
    
    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
    

    View Slide

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
    

    View Slide

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 :
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 ?
    

    View Slide

55. CETTE FOIS, C'EST PARTI !
    

    View Slide

56. ANALYSE DE L'EXISTANT
    

    View Slide

57. ANALYSE DE L'EXISTANT
    ANALYSE DE L'EXISTANT
    

    View Slide

58. ANALYSE DE L'EXISTANT
    

    View Slide

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 !
    

    View Slide

60. ON FIXE LE NIVEAU DE ZOOM
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

64. QUELQUES PARTICULARITÉS
    

    View Slide

65. TIENS, UN BADGE !
    

    View Slide

66. STYLES SMARTPHONES
    

    View Slide

67. RE-STYLAGE DU BADGE
    

    View Slide

68. ADAPTATIONS DIVERSES
    

    View Slide

69. LA NAVIGATION
    2 colonnes + une
    séparation
    

    View Slide

70. LA NAVIGATION (BIS)
    LA NAVIGATION (BIS)
    

    View Slide

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

    View Slide

72. AVANT
    AVANT
    

    View Slide

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

    View Slide

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
    

    View Slide

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 »
    

    View Slide

76. ALLER PLUS LOIN...
    ERF !
    

    View Slide

77. ALLER PLUS LOIN
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide