• J'aime
Un site web responsive en une heure
Prochain SlideShare
Chargement dans... 5
×

Un site web responsive en une heure

  • 21,146 vues
Transféré le

La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le ...

La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc.
Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.

Plus dans : Technologies
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • Merci à toi! moi meme je suis sourde, et je comprends beaucoup mieux visuellement! encore merci!
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • Très bon!
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • Une approche pédagogique toujours aussi intéressante. Tout comme ton bouquin CSS avancées qui m'apprend énormément de choses, pourtant je ne suis pas un perdreau de l'année :-)
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • de rien !
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
  • Les 4 sujets incontournables du 'responsive design', avec les recommendations pratiques qui font gagner du temps. Exactement ce qu'il me fallait, merci !
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
Aucun téléchargement

Vues

Total des vues
21,146
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
34

Actions

Partages
Téléchargements
365
Commentaires
5
J'aime
28

Ajouts 0

No embeds

Signaler un contenu

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
    No notes for slide

Transcript

  • 1. Raphaël GoetterRaphaël GoetterUN SITE WEBRESPONSIVE ENUNE HEURE ?UN SITE WEBRESPONSIVE ENUNE HEURE ?TOP CHRONO !TOP CHRONO !
  • 2. alsacreations.fralsacreations.comgoetter.frknacss.commobitest.me@goetteralsacreations.fralsacreations.comgoetter.frknacss.commobitest.me@goetterRaphaël GoetterRaphaël Goetter
  • 3. EN UNE HEURE,VOUS AVEZ DIT ?EN UNE HEURE,VOUS AVEZ DIT ?SANS DECONNER ?!SANS DECONNER ?!
  • 4. CEST PASPOSSIBLE !CEST PASPOSSIBLE !KTHXBYKTHXBY
  • 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 dergoFaire un choix de navigationPenser « 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 dergoFaire un choix de navigationPenser « 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. PENDANTProduire du code pour écrans multiples(tablettes, smartphones, écrans larges)Produire des adaptations pour 2 orientationsPenser « 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 orientationsPenser « 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écessaireProblè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écessaireProblèmes de compatibilités(anciens Android, Blackberry, etc.)→ COMPTER... 1 à 3 jours→ COMPTER... 1 à 3 jours
  • 9. TOTAL ?TOTAL ?ENTRE 6 ET 12 JOURSENTRE 6 ET 12 JOURS… OU PLUS… OU PLUS
  • 10. LE RESPONSIVE,CEST PASDU « BONUS » !LE RESPONSIVE,CEST PASDU « BONUS » !ÇA SE DÉCIDEEN AMONTÇA SE DÉCIDEEN AMONT
  • 11. AgoraCMS « bureau »
  • 12. Zoom nécessaireNavigation aveugleDesign « cassé »Mauvaise expérienceZoom nécessaireNavigation aveugleDesign « cassé »Mauvaise expérienceAgoraCMS « mobile »
  • 13. AgoraCMS « Responsive » ?
  • 14. FACILE !
  • 15. Crédits : flickr.com/photos/bfishadowCrédits : flickr.com/photos/bfishadowBON, ON SY MET ?
  • 16. NOTIONSINDISPENSABLESNOTIONSINDISPENSABLESCEST BIEN PARCE QUE CEST VOUSCEST BIEN PARCE QUE CEST VOUS
  • 17. La surface daffichageLes Media Queries CSS3Box-sizing pour vous servirHalte aux débordementsLa surface daffichageLes Media Queries CSS3Box-sizing pour vous servirHalte aux débordementsNOTIONS INDISPENSABLES
  • 18. Crédits : flickr.com kalexandersonCrédits : flickr.com kalexandersonLA SURFACE DAFFICHAGE
  • 19. DES VRAIS ET DES FAUX PIXELS
  • 20. DES VRAIS ET DES FAUX PIXELS960px960px960px960px
  • 21. 640px640px640px640px 320px320px320px320pxIPHONE4IPHONE4IPHONE3IPHONE3
  • 22. LARGEUR PHYSIQUE« VRAIS PIXELS »« VRAIS PIXELS »iPhone 3 : 320pxSamsung Galaxy S : 480pxiPhone 4, iPhone 5 : 640pxNokia Lumia 920 : 768pxiPad, iPad Mini : 768pxSony Xperia Z : 1080pxSamsung Galaxy S4 : 1080pxiPad 3 : 1536pxiPhone 3 : 320pxSamsung Galaxy S : 480pxiPhone 4, iPhone 5 : 640pxNokia Lumia 920 : 768pxiPad, iPad Mini : 768pxSony Xperia Z : 1080pxSamsung Galaxy S4 : 1080pxiPad 3 : 1536px
  • 23. « DEVICE-WIDTH »« FAUX PIXELS »« FAUX PIXELS »iPhone 3, 4, 5 : 320pxNokia Lumia 920 : 320pxSony Xperia Z : 360pxSamsung Galaxy S4 : 360pxiPad 1, 2, 3 : 768pxiPad mini : 768pxiPhone 3, 4, 5 : 320pxNokia Lumia 920 : 320pxSony Xperia Z : 360pxSamsung Galaxy S4 : 360pxiPad 1, 2, 3 : 768pxiPad mini : 768px
  • 24. « VIEWPORT »« FAUX PIXELS »« FAUX PIXELS »Safari : 980pxOpera mini : 850pxOpera mobile : 980pxAndroid 1 : 800pxAndroid 2 : 800pxAndroid 3 : 800pxAndroid 4 : 980pxIE mobile : 1024pxSafari : 980pxOpera mini : 850pxOpera mobile : 980pxAndroid 1 : 800pxAndroid 2 : 800pxAndroid 3 : 800pxAndroid 4 : 980pxIE mobile : 1024px
  • 25. www.mobitest.me
  • 26. 640px640px640px640pxIPHONE4IPHONE4320px320px320px320px980px980px980px980pxDEVICE-WIDTHDEVICE-WIDTHVIEWPORTVIEWPORTLARGEUR PHYSIQUELARGEUR PHYSIQUE
  • 27. IPHONE4IPHONE4320px320px320px320px980px980px980px980pxDEVICE-WIDTHDEVICE-WIDTHVIEWPORTVIEWPORTNiveau de zoom :320 / 980 = 0,33xNiveau de zoom :320 / 980 = 0,33x
  • 28. Crédits : flickr.com st3f4nCrédits : flickr.com st3f4nFORCER LE VIEWPORT
  • 29. <meta name="viewport" content="width=device-width">LA BALISE META « VIEWPORT »Largeur de fenêtre = device-widthLargeur 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 = 1Niveau de zoom = 1
  • 31. VIEWPORT DANS LES SPECS@viewport {width: device-width;zoom: 1;}Déjà reconnu par Opera, IE Mobile 10 et Firefoxmobile (ex. @-o-viewport)Déjà reconnu par Opera, IE Mobile 10 et Firefoxmobile (ex. @-o-viewport)
  • 32. Niveau de zoom :320 / 320 = 1xNiveau de zoom :320 / 320 = 1x<meta name="viewport" content="initial-scale=1.0">
  • 33. Crédits : flickr.com st3f4nCrédits : flickr.com st3f4nLES 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ésTous 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êtreest inférieure ou égale à 640 pixelsSont ciblés : écrans dont la fenêtreest 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 auxpetits écransIci : plein de styles CSS dédiés auxpetits é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 à 640pxFenêtre de largeur supérieure à 640px Moins de 640pxMoins de 640pxRÉSULTAT
  • 39. MEDIA QUERIESwidth / heightlargeur / hauteur de viewportdevice-width / device-heightlargeur / hauteur du deviceorientation :portrait ou landscapeetc.width / heightlargeur / hauteur de viewportdevice-width / device-heightlargeur / hauteur du deviceorientation :portrait ou landscapeetc.99
  • 40. Crédits : flickr.com jing_dongCrédits : flickr.com jing_dongBOX-SIZING
  • 41. MA JOLIE BOÎTEdiv {width: 500px;padding: 0;}
  • 42. MA JOLIE BOÎTEdiv {width: 500px;padding: 0;}500px500px500px500px
  • 43. MA JOLIE BOÎTEdiv {width: 500px;padding: 10px;}
  • 44. MA JOLIE BOÎTEdiv {width: 500px;padding: 10px;}520px520px520px520px
  • 45. MA JOLIE BOÎTEdiv {width: 50%;padding: 1em;border-width: 1px;}
  • 46. MA JOLIE BOÎTEdiv {width: 50%;padding: 1em;border-width: 1px;}50%+2em+2px50%+2em+2px50%+2em+2px50%+2em+2px 50%+2em+2px50%+2em+2px50%+2em+2px50%+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;}88
  • 49. Crédits : flickr.com jing_dongCrédits : flickr.com jing_dongDÉBORDEMENTS
  • 50. FAUT QUE ÇA RENTRE !ERF :(ERF :(
  • 51. WORD-WRAPdiv {word-wrap: break-word;overflow-wrap: break-word;}66
  • 52. HYPHENSdiv {-webkit-hyphens : auto;-moz-hyphens : auto;-ms-hyphens : auto;hyphens : auto;}1010
  • 53. ET LES IMAGES ?Tiens, cest toutcassé là !Tiens, cest toutcassé là !
  • 54. ET LES IMAGES ?img {max-width : 100%;height : auto;}/* IE8 uniquement (bugfix) */.ie8 img {width : auto;}Une bordure sur limage ?Une bordure sur limage ?
  • 55. CETTE FOIS, CEST PARTI !
  • 56. ANALYSE DE LEXISTANT
  • 57. ANALYSE DE LEXISTANTANALYSE DE LEXISTANT
  • 58. ANALYSE DE LEXISTANT
  • 59. ANALYSE DE LEXISTANT6 fichiers CSS différents42 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érents42 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 MOBILEAppliquée seulement surécrans de largeur defenêtre au maximum de960 pixelsAppliquée seulement surécrans de largeur defenêtre au maximum de960 pixels
  • 62. STYLES « RESET »www.knacss.comwww.knacss.com
  • 63. RETOUR À LA NORMALEPour les élémentsproblé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 NAVIGATION2 colonnes + uneséparation
  • 70. LA NAVIGATION (BIS)LA NAVIGATION (BIS)
  • 71. LA NAVIGATION (TER)LA NAVIGATION (TER)Tout en douceur...
  • 72. AVANTAVANT
  • 73. TEMPS PASSÉProduction effective de CSS = 6 heuresCompréhension de lexistant = 4 heuresRéflexions en amont, stratégie = 4 heuresCorrections bugs, anomalies = 1 heureProduction effective de CSS = 6 heuresCompréhension de lexistant = 4 heuresRéflexions en amont, stratégie = 4 heuresCorrections bugs, anomalies = 1 heure→ TOTAL : 15 heures→ TOTAL : 15 heures
  • 74. NON TRAITÉSeule la Homepage a été prise en compteErgonomie : le minimum vital a été fait poursmartphones et tablettesAucune adaptation faite pour les différentesorientationsPerformances web : aucun effort na été fait dans cedomaineÉcrans « HD » et « Retina » : aucune prise en compteSeule la Homepage a été prise en compteErgonomie : le minimum vital a été fait poursmartphones et tablettesAucune adaptation faite pour les différentesorientationsPerformances web : aucun effort na été fait dans cedomaineÉcrans « HD » et « Retina » : aucune prise en compte→ à « larrache »→ à « larrache »
  • 75. ALLER PLUS LOIN...ERF !
  • 76. ALLER PLUS LOIN
  • 77. Crédits : flickr.com/photos/udonoBREF : UN BON DÉBUT… MAIS INSUFFISANT… MAIS INSUFFISANT
  • 78. Photos, illustrations :flickr.com (licence CC)Police :DeliciousDelicious HeavyIcones et pictos :iconfider.netfindicons.comicônes Star Wars : Everaldo Coelho (free)icônes noires : Token Dark par Brsev (free)Photos, illustrations :flickr.com (licence CC)Police :DeliciousDelicious HeavyIcones et pictos :iconfider.netfindicons.comicônes Star Wars : Everaldo Coelho (free)icônes noires : Token Dark par Brsev (free)CRÉDITS
  • 79. Raphaël Goetter @goetterMERCI !MERCI !Crédits : flickr.com/photos/st3f4n