0
Raphaël GoetterRaphaël GoetterUN SITE WEBRESPONSIVE ENUNE HEURE ?UN SITE WEBRESPONSIVE ENUNE HEURE ?TOP CHRONO !TOP CHRONO !
alsacreations.fralsacreations.comgoetter.frknacss.commobitest.me@goetteralsacreations.fralsacreations.comgoetter.frknacss....
EN UNE HEURE,VOUS AVEZ DIT ?EN UNE HEURE,VOUS AVEZ DIT ?SANS DECONNER ?!SANS DECONNER ?!
CEST PASPOSSIBLE !CEST PASPOSSIBLE !KTHXBYKTHXBY
AVANT DE SE LANCER...Analyser et comprendre le code existant(template de CMS qui « laisse à désirer »)Identifier les probl...
AVANT DE SE LANCER...(bis)Connaître le contexte mobile(navigateurs, moteurs, spécificités)Comprendre le Viewport(device-wi...
PENDANTProduire du code pour écrans multiples(tablettes, smartphones, écrans larges)Produire des adaptations pour 2 orient...
ET APRES ? CORRIGER !Bugs sur tableaux HTML, iframes, vidéos, etc.Bugs CSS ou JS inexpliqués(table-cell, flexbox, événemen...
TOTAL ?TOTAL ?ENTRE 6 ET 12 JOURSENTRE 6 ET 12 JOURS… OU PLUS… OU PLUS
LE RESPONSIVE,CEST PASDU « BONUS » !LE RESPONSIVE,CEST PASDU « BONUS » !ÇA SE DÉCIDEEN AMONTÇA SE DÉCIDEEN AMONT
AgoraCMS « bureau »
Zoom nécessaireNavigation aveugleDesign « cassé »Mauvaise expérienceZoom nécessaireNavigation aveugleDesign « cassé »Mauva...
AgoraCMS « Responsive » ?
FACILE !
Crédits : flickr.com/photos/bfishadowCrédits : flickr.com/photos/bfishadowBON, ON SY MET ?
NOTIONSINDISPENSABLESNOTIONSINDISPENSABLESCEST BIEN PARCE QUE CEST VOUSCEST BIEN PARCE QUE CEST VOUS
La surface daffichageLes Media Queries CSS3Box-sizing pour vous servirHalte aux débordementsLa surface daffichageLes Media...
Crédits : flickr.com kalexandersonCrédits : flickr.com kalexandersonLA SURFACE DAFFICHAGE
DES VRAIS ET DES FAUX PIXELS
DES VRAIS ET DES FAUX PIXELS960px960px960px960px
640px640px640px640px 320px320px320px320pxIPHONE4IPHONE4IPHONE3IPHONE3
LARGEUR PHYSIQUE« VRAIS PIXELS »« VRAIS PIXELS »iPhone 3 : 320pxSamsung Galaxy S : 480pxiPhone 4, iPhone 5 : 640pxNokia Lu...
« DEVICE-WIDTH »« FAUX PIXELS »« FAUX PIXELS »iPhone 3, 4, 5 : 320pxNokia Lumia 920 : 320pxSony Xperia Z : 360pxSamsung Ga...
« VIEWPORT »« FAUX PIXELS »« FAUX PIXELS »Safari : 980pxOpera mini : 850pxOpera mobile : 980pxAndroid 1 : 800pxAndroid 2 :...
www.mobitest.me
640px640px640px640pxIPHONE4IPHONE4320px320px320px320px980px980px980px980pxDEVICE-WIDTHDEVICE-WIDTHVIEWPORTVIEWPORTLARGEUR ...
IPHONE4IPHONE4320px320px320px320px980px980px980px980pxDEVICE-WIDTHDEVICE-WIDTHVIEWPORTVIEWPORTNiveau de zoom :320 / 980 = ...
Crédits : flickr.com st3f4nCrédits : flickr.com st3f4nFORCER LE VIEWPORT
<meta name="viewport" content="width=device-width">LA BALISE META « VIEWPORT »Largeur de fenêtre = device-widthLargeur de ...
<meta name="viewport" content="width=device-width">LA BALISE META « VIEWPORT »<meta name="viewport" content="initial-scale...
VIEWPORT DANS LES SPECS@viewport {width: device-width;zoom: 1;}Déjà reconnu par Opera, IE Mobile 10 et Firefoxmobile (ex. ...
Niveau de zoom :320 / 320 = 1xNiveau de zoom :320 / 320 = 1x<meta name="viewport" content="initial-scale=1.0">
Crédits : flickr.com st3f4nCrédits : flickr.com st3f4nLES MEDIA QUERIES CSS3
<link rel="stylesheet" href="styles.css" media="screen" >Pas de Media Queries ?Pas de Media Queries ?Tous les écrans sont ...
<link rel="stylesheet" href="mobile.css"media="screen and (max-width: 640px)" ><link rel="stylesheet" href="styles.css" me...
@media (max-width:640px) {body { width: auto; }}Dans un fichier CSS :Dans un fichier CSS :Ici : plein de styles CSS dédiés...
body { background-color: black; }@media (max-width:640px) {body { background-color: red; }}@media (max-width:640px) {body ...
Fenêtre de largeur supérieure à 640pxFenêtre de largeur supérieure à 640px Moins de 640pxMoins de 640pxRÉSULTAT
MEDIA QUERIESwidth / heightlargeur / hauteur de viewportdevice-width / device-heightlargeur / hauteur du deviceorientation...
Crédits : flickr.com jing_dongCrédits : flickr.com jing_dongBOX-SIZING
MA JOLIE BOÎTEdiv {width: 500px;padding: 0;}
MA JOLIE BOÎTEdiv {width: 500px;padding: 0;}500px500px500px500px
MA JOLIE BOÎTEdiv {width: 500px;padding: 10px;}
MA JOLIE BOÎTEdiv {width: 500px;padding: 10px;}520px520px520px520px
MA JOLIE BOÎTEdiv {width: 50%;padding: 1em;border-width: 1px;}
MA JOLIE BOÎTEdiv {width: 50%;padding: 1em;border-width: 1px;}50%+2em+2px50%+2em+2px50%+2em+2px50%+2em+2px 50%+2em+2px50%+...
BOX-SIZING !div {width: 50%;padding: 1em;border-width: 1px;}50%50%50%50% 50%50%50%50%box-sizing: border-box;
BOX-SIZING !* {-webkit-box-sizing : border-box;-moz-box-sizing: border-box;box-sizing: border-box;}88
Crédits : flickr.com jing_dongCrédits : flickr.com jing_dongDÉBORDEMENTS
FAUT QUE ÇA RENTRE !ERF :(ERF :(
WORD-WRAPdiv {word-wrap: break-word;overflow-wrap: break-word;}66
HYPHENSdiv {-webkit-hyphens : auto;-moz-hyphens : auto;-ms-hyphens : auto;hyphens : auto;}1010
ET LES IMAGES ?Tiens, cest toutcassé là !Tiens, cest toutcassé là !
ET LES IMAGES ?img {max-width : 100%;height : auto;}/* IE8 uniquement (bugfix) */.ie8 img {width : auto;}Une bordure sur l...
CETTE FOIS, CEST PARTI !
ANALYSE DE LEXISTANT
ANALYSE DE LEXISTANTANALYSE DE LEXISTANT
ANALYSE DE LEXISTANT
ANALYSE DE LEXISTANT6 fichiers CSS différents42 fois « font-size »70 fois « !important »30 fois « margin: 0 »27 fois « pad...
ON FIXE LE NIVEAU DE ZOOM
FEUILLE DE STYLES MOBILEAppliquée seulement surécrans de largeur defenêtre au maximum de960 pixelsAppliquée seulement suré...
STYLES « RESET »www.knacss.comwww.knacss.com
RETOUR À LA NORMALEPour les élémentsproblématiques :• width : auto• height : auto• float : none • position : static• paddi...
QUELQUES PARTICULARITÉS
TIENS, UN BADGE !
STYLES SMARTPHONES
RE-STYLAGE DU BADGE
ADAPTATIONS DIVERSES
LA NAVIGATION2 colonnes + uneséparation
LA NAVIGATION (BIS)LA NAVIGATION (BIS)
LA NAVIGATION (TER)LA NAVIGATION (TER)Tout en douceur...
AVANTAVANT
TEMPS PASSÉProduction effective de CSS = 6 heuresCompréhension de lexistant = 4 heuresRéflexions en amont, stratégie = 4 h...
NON TRAITÉSeule la Homepage a été prise en compteErgonomie : le minimum vital a été fait poursmartphones et tablettesAucun...
ALLER PLUS LOIN...ERF !
ALLER PLUS LOIN
Crédits : flickr.com/photos/udonoBREF : UN BON DÉBUT… MAIS INSUFFISANT… MAIS INSUFFISANT
Photos, illustrations :flickr.com (licence CC)Police :DeliciousDelicious HeavyIcones et pictos :iconfider.netfindicons.com...
Raphaël Goetter @goetterMERCI !MERCI !Crédits : flickr.com/photos/st3f4n
Prochain SlideShare
Chargement dans... 5
×

Un site web responsive en une heure

27,408

Published on

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.

Published in: Technologies
6 commentaires
33 mentions J'aime
Statistiques
Remarques
  • assez compliquer à comprendre mais, est ce qu'il n'existe pas une méthode plus basique juste pour avoir le même affichage sur mobil et tablette que sur pc ? sans changer la mise en forme, juste avoir le meme visuel en plus petit pour qu'on n'est qu'à zoomer? parceque moi mon probleme c'est les bug des tableaux, des polices d'ecritures, etc ...
       Répondre 
    Êtes-vous sûr de vouloir  Oui  Non
    Votre message apparaîtra ici
  • Merci à toi! moi meme je suis sourde, et je comprends beaucoup mieux visuellement! encore merci!
       Répondre 
    Êtes-vous sûr de vouloir  Oui  Non
    Votre message apparaîtra ici
  • Très bon!
       Répondre 
    Êtes-vous sûr de vouloir  Oui  Non
    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 :-)
       Répondre 
    Êtes-vous sûr de vouloir  Oui  Non
    Votre message apparaîtra ici
  • de rien !
       Répondre 
    Êtes-vous sûr de vouloir  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Total des vues
27,408
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
37
Actions
Partages
0
Téléchargements
478
Commentaires
6
J'aime
33
Ajouts 0
No embeds

No notes for slide

Transcript of "Un site web responsive en une heure"

  1. 1. Raphaël GoetterRaphaël GoetterUN SITE WEBRESPONSIVE ENUNE HEURE ?UN SITE WEBRESPONSIVE ENUNE HEURE ?TOP CHRONO !TOP CHRONO !
  2. 2. alsacreations.fralsacreations.comgoetter.frknacss.commobitest.me@goetteralsacreations.fralsacreations.comgoetter.frknacss.commobitest.me@goetterRaphaël GoetterRaphaël Goetter
  3. 3. EN UNE HEURE,VOUS AVEZ DIT ?EN UNE HEURE,VOUS AVEZ DIT ?SANS DECONNER ?!SANS DECONNER ?!
  4. 4. CEST PASPOSSIBLE !CEST PASPOSSIBLE !KTHXBYKTHXBY
  5. 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. 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. 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. 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. 9. TOTAL ?TOTAL ?ENTRE 6 ET 12 JOURSENTRE 6 ET 12 JOURS… OU PLUS… OU PLUS
  10. 10. LE RESPONSIVE,CEST PASDU « BONUS » !LE RESPONSIVE,CEST PASDU « BONUS » !ÇA SE DÉCIDEEN AMONTÇA SE DÉCIDEEN AMONT
  11. 11. AgoraCMS « bureau »
  12. 12. Zoom nécessaireNavigation aveugleDesign « cassé »Mauvaise expérienceZoom nécessaireNavigation aveugleDesign « cassé »Mauvaise expérienceAgoraCMS « mobile »
  13. 13. AgoraCMS « Responsive » ?
  14. 14. FACILE !
  15. 15. Crédits : flickr.com/photos/bfishadowCrédits : flickr.com/photos/bfishadowBON, ON SY MET ?
  16. 16. NOTIONSINDISPENSABLESNOTIONSINDISPENSABLESCEST BIEN PARCE QUE CEST VOUSCEST BIEN PARCE QUE CEST VOUS
  17. 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. 18. Crédits : flickr.com kalexandersonCrédits : flickr.com kalexandersonLA SURFACE DAFFICHAGE
  19. 19. DES VRAIS ET DES FAUX PIXELS
  20. 20. DES VRAIS ET DES FAUX PIXELS960px960px960px960px
  21. 21. 640px640px640px640px 320px320px320px320pxIPHONE4IPHONE4IPHONE3IPHONE3
  22. 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. 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. 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. 25. www.mobitest.me
  26. 26. 640px640px640px640pxIPHONE4IPHONE4320px320px320px320px980px980px980px980pxDEVICE-WIDTHDEVICE-WIDTHVIEWPORTVIEWPORTLARGEUR PHYSIQUELARGEUR PHYSIQUE
  27. 27. IPHONE4IPHONE4320px320px320px320px980px980px980px980pxDEVICE-WIDTHDEVICE-WIDTHVIEWPORTVIEWPORTNiveau de zoom :320 / 980 = 0,33xNiveau de zoom :320 / 980 = 0,33x
  28. 28. Crédits : flickr.com st3f4nCrédits : flickr.com st3f4nFORCER LE VIEWPORT
  29. 29. <meta name="viewport" content="width=device-width">LA BALISE META « VIEWPORT »Largeur de fenêtre = device-widthLargeur de fenêtre = device-width
  30. 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. 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. 32. Niveau de zoom :320 / 320 = 1xNiveau de zoom :320 / 320 = 1x<meta name="viewport" content="initial-scale=1.0">
  33. 33. Crédits : flickr.com st3f4nCrédits : flickr.com st3f4nLES MEDIA QUERIES CSS3
  34. 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. 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. 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. 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. 38. Fenêtre de largeur supérieure à 640pxFenêtre de largeur supérieure à 640px Moins de 640pxMoins de 640pxRÉSULTAT
  39. 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. 40. Crédits : flickr.com jing_dongCrédits : flickr.com jing_dongBOX-SIZING
  41. 41. MA JOLIE BOÎTEdiv {width: 500px;padding: 0;}
  42. 42. MA JOLIE BOÎTEdiv {width: 500px;padding: 0;}500px500px500px500px
  43. 43. MA JOLIE BOÎTEdiv {width: 500px;padding: 10px;}
  44. 44. MA JOLIE BOÎTEdiv {width: 500px;padding: 10px;}520px520px520px520px
  45. 45. MA JOLIE BOÎTEdiv {width: 50%;padding: 1em;border-width: 1px;}
  46. 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. 47. BOX-SIZING !div {width: 50%;padding: 1em;border-width: 1px;}50%50%50%50% 50%50%50%50%box-sizing: border-box;
  48. 48. BOX-SIZING !* {-webkit-box-sizing : border-box;-moz-box-sizing: border-box;box-sizing: border-box;}88
  49. 49. Crédits : flickr.com jing_dongCrédits : flickr.com jing_dongDÉBORDEMENTS
  50. 50. FAUT QUE ÇA RENTRE !ERF :(ERF :(
  51. 51. WORD-WRAPdiv {word-wrap: break-word;overflow-wrap: break-word;}66
  52. 52. HYPHENSdiv {-webkit-hyphens : auto;-moz-hyphens : auto;-ms-hyphens : auto;hyphens : auto;}1010
  53. 53. ET LES IMAGES ?Tiens, cest toutcassé là !Tiens, cest toutcassé là !
  54. 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. 55. CETTE FOIS, CEST PARTI !
  56. 56. ANALYSE DE LEXISTANT
  57. 57. ANALYSE DE LEXISTANTANALYSE DE LEXISTANT
  58. 58. ANALYSE DE LEXISTANT
  59. 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. 60. ON FIXE LE NIVEAU DE ZOOM
  61. 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. 62. STYLES « RESET »www.knacss.comwww.knacss.com
  63. 63. RETOUR À LA NORMALEPour les élémentsproblématiques :• width : auto• height : auto• float : none • position : static• padding : 0• margin : 0• etc.
  64. 64. QUELQUES PARTICULARITÉS
  65. 65. TIENS, UN BADGE !
  66. 66. STYLES SMARTPHONES
  67. 67. RE-STYLAGE DU BADGE
  68. 68. ADAPTATIONS DIVERSES
  69. 69. LA NAVIGATION2 colonnes + uneséparation
  70. 70. LA NAVIGATION (BIS)LA NAVIGATION (BIS)
  71. 71. LA NAVIGATION (TER)LA NAVIGATION (TER)Tout en douceur...
  72. 72. AVANTAVANT
  73. 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. 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. 75. ALLER PLUS LOIN...ERF !
  76. 76. ALLER PLUS LOIN
  77. 77. Crédits : flickr.com/photos/udonoBREF : UN BON DÉBUT… MAIS INSUFFISANT… MAIS INSUFFISANT
  78. 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. 79. Raphaël Goetter @goetterMERCI !MERCI !Crédits : flickr.com/photos/st3f4n
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×