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