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.

1. Raphaël GoetterRaphaë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 GoetterRaphaë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 !
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 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 JOURSENTRE 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/bfishadowCrédits : flickr.com/photos/bfishadow
BON, ON S'Y MET ?

16. NOTIONS
INDISPENSABLES
NOTIONS
INDISPENSABLES
C'EST BIEN PARCE QUE C'EST VOUSC'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 kalexandersonCrédits : flickr.com kalexanderson
LA SURFACE D'AFFICHAGE

19. DES VRAIS ET DES FAUX PIXELS

20. DES VRAIS ET DES FAUX PIXELS
960px960px960px960px

21. 640px640px640px640px 320px320px320px320px
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. 640px640px640px640px
IPHONE4
IPHONE4
320px320px320px320px
980px980px980px980px
DEVICE-WIDTHDEVICE-WIDTH
VIEWPORTVIEWPORT
LARGEUR PHYSIQUELARGEUR PHYSIQUE

27. IPHONE4
IPHONE4
320px320px320px320px
980px980px980px980px
DEVICE-WIDTHDEVICE-WIDTH
VIEWPORTVIEWPORT
Niveau de zoom :
320 / 980 = 0,33x
Niveau de zoom :
320 / 980 = 0,33x

28. Crédits : flickr.com st3f4nCrédits : flickr.com st3f4n
FORCER 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 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 st3f4nCré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é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ê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 à 640pxFenêtre de largeur supérieure à 640px Moins de 640pxMoins 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.
99

40. Crédits : flickr.com jing_dongCré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;
}
500px500px500px500px

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

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

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+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_dong
DÉBORDEMENTS

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

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

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

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'EXISTANTANALYSE 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.comwww.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. AVANTAVANT

73. 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

74. 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 »

75. ALLER PLUS LOIN...
ERF !

76. ALLER PLUS LOIN

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

78. 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

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