Un site web responsive en une heure ?

Un site web responsive en une heure ?

AgoraCMS 2012, Paris

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

May 14, 2013
Tweet

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