@3k1n0

GUIDE DE SURVIE EN MILIEU
RESPONSIVE
Guillaume ABEL @MoreThanScreens
Nicolas MASSOUH @NicolasMassouh
Cyril BALIT @...
DE QUOI ALLONS-NOUS
VOUS PARLER ?
TROIS MÉTIERS

L’UX designer

Le
développeur
front

L’architecte

Guillaume

Nicolas

Cyril

3
UNE PROBLÉMATIQUE

RESPONSIVE
WEB DESIGN

4
UN PROJET
C’est pour qui ?
Pour les employés
Renault

C’est quoi ?

Comment ?

Catalogue de
voiture (avant
en PDF)

Un sit...
Le Designer d’expérience utilisateur

@MoreThanScreens

6
è Comment je vais adapter la méthodologie UX ?
è Quels sont les usages ?
è Quelles sont les bonnes pratiques RWD ?
è C...
NOTRE PROCESSUS UXD
et vision de l’UX

@MoreThanScreens
LES GRANDES ÉTAPES

RECHERCHE &
DÉCOUVERTE

Projection

IDÉATION &
CONCEPT

DESIGN &
PROTOTYPAGE

Explorer les
solutions p...
RECHERCHE & DÉCOUVERTE
Quelle est la problématique ?

@MoreThanScreens
QUELLE EST LA PROBLÉMATIQUE ?
UTILISATEUR

CONTEXTE CLIENT

ANALYSE EXISTANT

ANALYSE DATA

@MoreThanScreens

11
QUELLE EST LA PROBLÉMATIQUE ?

PERIMÈTRE

FONCTIONNALITÉS

PATTERNS

Flickr - YujiHayashi

@MoreThanScreens

12
DEVICES CIBLE Responsive mais responsable

+ 1024

1023-768

767-480

Up to 479

1
4
2

1
2

3
3

5

7
10

6

@MoreThanScr...
PATTERNS Ne pas réinventer la roue

MOSTLY FLUID

LAYOUT SHIFTER

COLUMN DROP

OFF CANVAS

TROUVER UN LANGAGE COMMUN
Lukew...
IDÉATION & CONCEPT
Explorer les solutions possibles.

@MoreThanScreens
EXPLORER LES SOLUTIONS POSSIBLES.

ATELIERS

BRAINSTORMING

SKETCHING

Flickr - marlenekzio

@MoreThanScreens

16
SKETCHING Dessiner, c’est gagné !

stat.us

@MoreThanScreens

17
SKETCHING Trucs & astuces

FEUILLE A4
01

PRENDRE 2 FEUILLES A4

FEUILLE A4
02

@MoreThanScreens

18
SKETCHING Trucs & astuces

1 FEUILLE A4 = DESKTOP

FEUILLE A4
01

@MoreThanScreens

19
SKETCHING Trucs & astuces

1/2 FEUILLE A4 = TABLETTE

FEUILLE A4
02

1/4 FEUILLE A4 = MOBILE

@MoreThanScreens

20
SKETCHING Résultats

1 FEUILLE A4 = DESKTOP
@MoreThanScreens

21
SKETCHING Résultats

1/2 FEUILLE A4 = TABLETTE
@MoreThanScreens

22
SKETCHING Résultats

1/4 FEUILLE A4 = MOBILE
@MoreThanScreens

23
DESIGN & PROTOTYPE
Projection

@MoreThanScreens
DESIGN & PROTOTYPE
ZONING

PRINCIPES D’INTERACTION

WIREFRAME

POC

DOCUMENTATION
Flickr - marlenekzio

@MoreThanScreens

...
DESIGN & PROTOTYPE

TESTS UTILISATEUR

ITÉRATIONS
Flickr - nobleup Coming Back Slowly

@MoreThanScreens

26
ZONING Une vue macro des interfaces

Web

Mobile

Header
Header

Header

Navigation
< Recherche
Résultat
01

Résultat
02

...
PRINCIPES D’INTERACTION Mobile
Étape 01

Étape 02

Étape 03

▾

Sélectionner un modèle

Header

Header
Modèle

Zone géogra...
PRINCIPES D’INTERACTION Desktop

Étape 01

Étape 02

Modèle

Modèle
Nom
Nom

Zone géographie

Nouvelle Mégane

Limitrophe
...
WIREFRAME Fifty Shades of Grey

@MoreThanScreens

30
WIREFRAME Fifty Shades of Grey

@MoreThanScreens

31
POC Proof Of Concept

@MoreThanScreens

32
DOCUMENTATION Approche modulaire
1.  Identifier les écrans et fonctionnalités clefs de

l’application
2.  Découper l’inter...
GRAPHISME
Réaliser la solution

@MoreThanScreens
GRAPHISME
CHARTE

DÉCLINAISON

PLANCHE DE COMPOSANT
Flickr - Degilbo

@MoreThanScreens

35
LES MAQUETTES

@MoreThanScreens

36
LES MAQUETTES

@MoreThanScreens

37
LES MAQUETTES

@MoreThanScreens

38
LES MAQUETTES

@MoreThanScreens

39
LES MAQUETTES

@MoreThanScreens

40
LES MAQUETTES

@MoreThanScreens

41
@MoreThanScreens

42
PLANCHE DE COMPOSANT

@MoreThanScreens

43
ENSEIGNEMENT
Retour d’expérience sur le design d’expérience
utilisateur.
ÊTRE MULTILINGUE …mais encore plus

@MoreThanScreens

45
ITÉRER SUR LE PROCESSUS

Flickr -

avrene

@MoreThanScreens

46
RECHERCHE &
DÉCOUVERTE

IDÉATION &
CONCEPT

DESIGN &
PROTOTYPAGE

GRAPHISME
& DÉV

@MoreThanScreens

ANALYTICS
AMÉLIORATIO...
ITÉRER SUR LE PROCESSUS Après

BESOIN
CLIENT

POC

RECHERCHE &
DÉCOUVERTE

GRAPHISME
& DÉV

ou prototype
HTML

IMPLICATION...
Le développeur front

@NicolasMassouh

49
APPLI RIA EN HTML 5 CROSSPLATFORM

@NicolasMassouh

50
DE LA NÉCESSITÉ DU POC
DE LA NÉCESSITÉ DU POC

@NicolasMassouh
DE LA NÉCESSITÉ DU POC

RASSURER

LES CONCEPTEURS
LES
DÉVELOPPEURS
LE CLIENT

Flickr - .reid.

@NicolasMassouh

53
DE LA NÉCESSITÉ DU POC

SOULEVER DES PROBLÉMATIQUES AUXQUELS NOUS
N’ÉTIONS PAS PRÉPARÉES
Flickr - . the pale side of insom...
DE LA NÉCESSITÉ DU POC

MIEUX APPRÉCIER LES COÛT DE DÉVELOPPEMENT
Flickr - Ashley Pollak

@NicolasMassouh

55
DE LA NÉCESSITÉ DU POC

SOCLE DANS LEQUEL PIOCHER UN SAVOIR FAIRE
IMMÉDIAT ET POUR LE COUP ÉPROUVÉ
Flickr - AXEL BRUNST ph...
DE LA NÉCESSITÉ DU POC

MONTÉE EN COMPÉTENCES DES ÉQUIPES.
Team Ekino Front 2011

@NicolasMassouh

57
LES CONCEPTS CLÉS DU RESPONSIVE
LES CONCEPTS CLÉS DU RESPONSIVE

COMMENT ON FAIT DU
RESPONSIVE ?

@NicolasMassouh

59
LES CONCEPTS CLÉS DU RESPONSIVE

COMMENT ON
FAIT DU
RESPONSIVE ?

@NicolasMassouh

60
LES CONCEPTS CLÉS DU RESPONSIVE

COMMENT ON FAIT LES
BÉBÉS ?

@NicolasMassouh

61
LES CONCEPTS CLÉS DU RESPONSIVE

ALORS LE
RESPONSIVE …

@NicolasMassouh

62
LES CONCEPTS CLÉS DU RESPONSIVE

IMAGE FLEXIBLE
AMELIORATION PROGRESSIVE
DEGRADATION GRACIEUSE
MOBILE FIRST
DESKTOP FIRST
...
LES “OUTILS” DE L’INTÉGRATEUR
LES “OUTILS” DE L’INTÉGRATEUR
LES BREAKS POINTS

LA BALISE META (VIEWPORT)

MODERNIZR

LE SNIFFING

A

JQUERY

NORMALIZE/R...
DE LA CONCEPTION À LA RÉALISATION
TECHNIQUE
Les choix appliqués à ce projet
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Mobile first / amélioration progressive

@NicolasMassouh

67
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Les médias queries

@NicolasMassouh

68
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Layout du projet mobile
viewport
PANEL 1

PANEL 2
RESULT LIST

@NicolasMassou...
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Layout du projet desktop / tablet
PANEL 1

PANEL 2

RESULT LIST

160px

238px...
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

La grille desktop / tablet

§  Tous les li
§ 

positionnés en
float left
Je...
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Les animations CSS

§  Meilleure
§ 
§ 
§ 

Performance
Pas de scripting
t...
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Les animations sur ie

§  float: left pour ie

@NicolasMassouh

73
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Utilisation de jQuery pour les composants ui

§  Gain de temps sur ce
type d...
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Image Fluide

@NicolasMassouh

75
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

Conception de bloc responsive
è Bloc Fluide – Contextualisé au

maximum
è B...
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE

ImageOptim pour les images et les sprites

@NicolasMassouh

77
LE DEBUG SUR LES DIFFÉRENTS TERMINAUX
LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX

@NicolasMassouh

79
LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX
Sur iOS pour les macs users

§ 

Simulateur
iOS

§ 

Appareil branché
en usb

§ 
...
LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX
Sur iOS pour les windows users

@NicolasMassouh

81
LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX
Sur Android

§ 

Version
Minimum:
Android 3.2

§ 

Appareil branché
en usb

§ 

P...
LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX
Utilisation de VM pour IE7, IE8, IE9

@NicolasMassouh

83
LA RÉALITÉ
Lendemain de cuite
LA RÉALITÉ

DevianART- CryingDoom

@NicolasMassouh

85
LA RÉALITÉ

§  Bilan :
è Éviter le fallback pour les animations
è Limiter l’utilisation de jQuery
è Mobile First / Amé...
LA RÉALITÉ

ON A PAS PU SE PASSER DU SNIFFING (USER AGENT)
@NicolasMassouh

87
LA RÉALITÉ
Les medias queries se sont multipliées

@NicolasMassouh

88
LA RÉALITÉ
Rendering et Painting : tendre vers 60 fps

@NicolasMassouh

89
L’architecte

@cbalit

90
LES QUESTIONS
PRODUCTIVITÉ

QUALITÉ

RIA

PÉRENNITÉ

INDUSTRIALISATION

@cbalit

92
UTILISER ANGULAR

@cbalit

93
@cbalit

94
LES FEATURES
On a tout ce qu’il faut
è Le databinding
è La vue c’est le HTML
è Validation de formulaires, filtres…

@cb...
L’ARCHITECTURE
è L’injection de dépendances
è Orientée module

Flickr - Lauren Manning

@cbalit

96
LE TEST …

@cbalit

97
MÉTHODOLOGIE
PRISE EN MAIN

Somewhere - internet

@cbalit

99
PROTOTYPE

Flickr - ilamont.com

@cbalit

100
BON ALORS ANGULAR, ÇA MARCHE AVEC LE RWD ?

Flickr - hilpalny

@cbalit

101
LA MISE EN PLACE
ORGANISATION

@cbalit

103
DES CONTRAINTES TECHNIQUES ?
Vue = HTML5
è Un DOM responsive ne sera pas altéré par Angular

@cbalit

104
LES TRANSITIONS
Pas de vues uniques
è Écoute changements de vues
è Utilisation de ng-class

ANIMATION
@cbalit

105
RESPONSIVE … MAIS ADAPTIF
COMMENT ?
On doit connaître le contexte en JavaScript
§  matchMedia
§  Refresh (resize)

@cbalit

107
POUR LES IMAGES
Une convention
è 3 tailles d’images SMALL, MEDIUM et LARGE
è Un pattern d’url : /monurl/[size]/veh1.png
...
FONCTIONNELLEMENT

@cbalit

109
TECHNIQUEMENT

@cbalit

110
VISUELLEMENT

@cbalit

111
LES OUTILS À NOTRE DISPOSITION
Enrichir le HTML : les directives
è ng-switch, ng-show, ng-hide
è ng-class

@cbalit

112
LES PERFORMANCES
è Le databinding
è Parsing du json
è Redraw

@cbalit

113
LES LEÇONS
L’URL

@cbalit

115
LA COMPLEXITÉ

@cbalit

116
CONCLUSION

117
TROIS MÉTIERS

Simplicité
POC ! POC !
Impliquer
Tester

Performance
Souplesse
Tester

Adaptive
Dream team
Rigueur
Tester

...
ONE MORE THING

119
www.renaultshop.fr

120
@3k1n0

MERCI
Guillaume ABEL @MoreThanScreens
Nicolas MASSOUH @nicolasmassouh
Cyril BALIT @cbalit
121
Prochain SlideShare
Chargement dans…5
×

Guide de survie en milieu responsive - Paris Web 2013

2 724 vues

Publié le

Le responsive web design est une approche relativement jeune sous sa forme actuelle et manque encore de bonnes pratiques reconnues et éprouvées dans l’industrie. Du coup, à nouvelle approche, nouvelles questions :

Le designer d'expérience utilisateur se demandera « Quels sont les usages ? Quel sont les bonnes pratiques RWD ? Comment je vais adapter la méthodologie UX ? Comment avoir une expérience qui soit cohérente sur plusieurs écrans ? »

Le développeur Front se demandera « Comment je vais utiliser les break-points ? Et les media queries ? Comment je vais éviter le snifing ? Et concevoir des blocs responsive ? Et les animations ? Comment je vais gérer le grand-écart entre IE7 et les autres navigateurs ? Et le débug sur les différents terminaux ? »

L’architecte se demandera « Comment je vais garantir la meilleure productivité possible ? Et la meilleure qualité ? Tout en utilisant le data binding, l'injection de dépendance, les tests unitaires, etc. ? »

Autour d’un projet concret, nous partagerons avec vous les enseignements retirés de cette aventure qui vous permettrons d’en sortir vivant… ou pas.

PS : N’oubliez pas votre serviette de bain.

Publié dans : Technologie
1 commentaire
8 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 724
Sur SlideShare
0
Issues des intégrations
0
Intégrations
67
Actions
Partages
0
Téléchargements
0
Commentaires
1
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Guide de survie en milieu responsive - Paris Web 2013

  1. 1. @3k1n0 GUIDE DE SURVIE EN MILIEU RESPONSIVE Guillaume ABEL @MoreThanScreens Nicolas MASSOUH @NicolasMassouh Cyril BALIT @cbalit
  2. 2. DE QUOI ALLONS-NOUS VOUS PARLER ?
  3. 3. TROIS MÉTIERS L’UX designer Le développeur front L’architecte Guillaume Nicolas Cyril 3
  4. 4. UNE PROBLÉMATIQUE RESPONSIVE WEB DESIGN 4
  5. 5. UN PROJET C’est pour qui ? Pour les employés Renault C’est quoi ? Comment ? Catalogue de voiture (avant en PDF) Un site centralisant les demandes RWD + RIA PROMO FLASH PROJET PILOTE 5
  6. 6. Le Designer d’expérience utilisateur @MoreThanScreens 6
  7. 7. è Comment je vais adapter la méthodologie UX ? è Quels sont les usages ? è Quelles sont les bonnes pratiques RWD ? è Comment avoir une expérience qui soit cohérente sur plusieurs écrans ? è Quelle est la Grande Question sur la vie, l'univers et le reste ? @MoreThanScreens 7
  8. 8. NOTRE PROCESSUS UXD et vision de l’UX @MoreThanScreens
  9. 9. LES GRANDES ÉTAPES RECHERCHE & DÉCOUVERTE Projection IDÉATION & CONCEPT DESIGN & PROTOTYPAGE Explorer les solutions possibles. GRAPHISME & DÉV ANALYTICS AMÉLIORATION BESOIN CLIENT Quelle est la problématique ? Réaliser la solution @MoreThanScreens 9
  10. 10. RECHERCHE & DÉCOUVERTE Quelle est la problématique ? @MoreThanScreens
  11. 11. QUELLE EST LA PROBLÉMATIQUE ? UTILISATEUR CONTEXTE CLIENT ANALYSE EXISTANT ANALYSE DATA @MoreThanScreens 11
  12. 12. QUELLE EST LA PROBLÉMATIQUE ? PERIMÈTRE FONCTIONNALITÉS PATTERNS Flickr - YujiHayashi @MoreThanScreens 12
  13. 13. DEVICES CIBLE Responsive mais responsable + 1024 1023-768 767-480 Up to 479 1 4 2 1 2 3 3 5 7 10 6 @MoreThanScreens 13
  14. 14. PATTERNS Ne pas réinventer la roue MOSTLY FLUID LAYOUT SHIFTER COLUMN DROP OFF CANVAS TROUVER UN LANGAGE COMMUN Lukew.com @MoreThanScreens 14
  15. 15. IDÉATION & CONCEPT Explorer les solutions possibles. @MoreThanScreens
  16. 16. EXPLORER LES SOLUTIONS POSSIBLES. ATELIERS BRAINSTORMING SKETCHING Flickr - marlenekzio @MoreThanScreens 16
  17. 17. SKETCHING Dessiner, c’est gagné ! stat.us @MoreThanScreens 17
  18. 18. SKETCHING Trucs & astuces FEUILLE A4 01 PRENDRE 2 FEUILLES A4 FEUILLE A4 02 @MoreThanScreens 18
  19. 19. SKETCHING Trucs & astuces 1 FEUILLE A4 = DESKTOP FEUILLE A4 01 @MoreThanScreens 19
  20. 20. SKETCHING Trucs & astuces 1/2 FEUILLE A4 = TABLETTE FEUILLE A4 02 1/4 FEUILLE A4 = MOBILE @MoreThanScreens 20
  21. 21. SKETCHING Résultats 1 FEUILLE A4 = DESKTOP @MoreThanScreens 21
  22. 22. SKETCHING Résultats 1/2 FEUILLE A4 = TABLETTE @MoreThanScreens 22
  23. 23. SKETCHING Résultats 1/4 FEUILLE A4 = MOBILE @MoreThanScreens 23
  24. 24. DESIGN & PROTOTYPE Projection @MoreThanScreens
  25. 25. DESIGN & PROTOTYPE ZONING PRINCIPES D’INTERACTION WIREFRAME POC DOCUMENTATION Flickr - marlenekzio @MoreThanScreens 25
  26. 26. DESIGN & PROTOTYPE TESTS UTILISATEUR ITÉRATIONS Flickr - nobleup Coming Back Slowly @MoreThanScreens 26
  27. 27. ZONING Une vue macro des interfaces Web Mobile Header Header Header Navigation < Recherche Résultat 01 Résultat 02 Résultat 03 Recherche Résultat 01 Recherche Résultat 04 Résultat 05 Résultat 06 Valider Résultat 02 Résultat 03 DÉFINIR LES PRINCIPES RESPONSIVE @MoreThanScreens 27
  28. 28. PRINCIPES D’INTERACTION Mobile Étape 01 Étape 02 Étape 03 ▾ Sélectionner un modèle Header Header Modèle Zone géographie Limitrophe Modèle Nom Nom Nom Modèle Modèle Nom ▾ Modèle Modèle Modèle Nom Nom Modèle ▾ Mégane Zone géographie Limitrophe Budget Budget xx€ Modèle Modèle xx€ Modèle xx€ xx€ Nom Energie ESS DIE GPL E85 Nom Nom VALIDER Energie ESS DIE GPL E85 RECHERCHER RECHERCHER MÉCANIQUE DE RECHERCHE MOBILE @MoreThanScreens 28
  29. 29. PRINCIPES D’INTERACTION Desktop Étape 01 Étape 02 Modèle Modèle Nom Nom Zone géographie Nouvelle Mégane Limitrophe xx€ Nom ESS DIE Nom GPL E85 Nom Nom Autre critère RECHERCHER ▾ Nom Modèle Modèle Nom Nom Limitrophe Budget ▾ Zone géographie 73 xx€ Nom Energie Modèle Version Initiale Nom xx€ Nom Modèle Nom Budget ▾ Modèle Nom Zone géographie ▾ Nouvelle Mégane Modèle Nom Nom Mégane ▾ Mégane ▾ ▾ Modèle Étape 03 xx€ DIE Budget xx€ Energie ESS Limitrophe GPL xx€ E85 Energie Autre critère RECHERCHER ▾ ESS DIE GPL Autre critère E85 ▾ RECHERCHER MÉCANIQUE DE RECHERCHE DESKTOP / TABLETTE @MoreThanScreens 29
  30. 30. WIREFRAME Fifty Shades of Grey @MoreThanScreens 30
  31. 31. WIREFRAME Fifty Shades of Grey @MoreThanScreens 31
  32. 32. POC Proof Of Concept @MoreThanScreens 32
  33. 33. DOCUMENTATION Approche modulaire 1.  Identifier les écrans et fonctionnalités clefs de l’application 2.  Découper l’interface en modules. 3.  Décrire chaque module pour chaque devices 1 2 1 3 1a 1a 1b 2 1c 3 @MoreThanScreens 33
  34. 34. GRAPHISME Réaliser la solution @MoreThanScreens
  35. 35. GRAPHISME CHARTE DÉCLINAISON PLANCHE DE COMPOSANT Flickr - Degilbo @MoreThanScreens 35
  36. 36. LES MAQUETTES @MoreThanScreens 36
  37. 37. LES MAQUETTES @MoreThanScreens 37
  38. 38. LES MAQUETTES @MoreThanScreens 38
  39. 39. LES MAQUETTES @MoreThanScreens 39
  40. 40. LES MAQUETTES @MoreThanScreens 40
  41. 41. LES MAQUETTES @MoreThanScreens 41
  42. 42. @MoreThanScreens 42
  43. 43. PLANCHE DE COMPOSANT @MoreThanScreens 43
  44. 44. ENSEIGNEMENT Retour d’expérience sur le design d’expérience utilisateur.
  45. 45. ÊTRE MULTILINGUE …mais encore plus @MoreThanScreens 45
  46. 46. ITÉRER SUR LE PROCESSUS Flickr - avrene @MoreThanScreens 46
  47. 47. RECHERCHE & DÉCOUVERTE IDÉATION & CONCEPT DESIGN & PROTOTYPAGE GRAPHISME & DÉV @MoreThanScreens ANALYTICS AMÉLIORATION BESOIN CLIENT ITÉRER SUR LE PROCESSUS Avant 47
  48. 48. ITÉRER SUR LE PROCESSUS Après BESOIN CLIENT POC RECHERCHE & DÉCOUVERTE GRAPHISME & DÉV ou prototype HTML IMPLICATION ATELIERS ANALYTICS AMÉLIORATION TESTS UTILISATEURS SKETCHING ITÉRATION VALIDATION @MoreThanScreens 48
  49. 49. Le développeur front @NicolasMassouh 49
  50. 50. APPLI RIA EN HTML 5 CROSSPLATFORM @NicolasMassouh 50
  51. 51. DE LA NÉCESSITÉ DU POC
  52. 52. DE LA NÉCESSITÉ DU POC @NicolasMassouh
  53. 53. DE LA NÉCESSITÉ DU POC RASSURER LES CONCEPTEURS LES DÉVELOPPEURS LE CLIENT Flickr - .reid. @NicolasMassouh 53
  54. 54. DE LA NÉCESSITÉ DU POC SOULEVER DES PROBLÉMATIQUES AUXQUELS NOUS N’ÉTIONS PAS PRÉPARÉES Flickr - . the pale side of insomnia @NicolasMassouh 54
  55. 55. DE LA NÉCESSITÉ DU POC MIEUX APPRÉCIER LES COÛT DE DÉVELOPPEMENT Flickr - Ashley Pollak @NicolasMassouh 55
  56. 56. DE LA NÉCESSITÉ DU POC SOCLE DANS LEQUEL PIOCHER UN SAVOIR FAIRE IMMÉDIAT ET POUR LE COUP ÉPROUVÉ Flickr - AXEL BRUNST photography @NicolasMassouh 56
  57. 57. DE LA NÉCESSITÉ DU POC MONTÉE EN COMPÉTENCES DES ÉQUIPES. Team Ekino Front 2011 @NicolasMassouh 57
  58. 58. LES CONCEPTS CLÉS DU RESPONSIVE
  59. 59. LES CONCEPTS CLÉS DU RESPONSIVE COMMENT ON FAIT DU RESPONSIVE ? @NicolasMassouh 59
  60. 60. LES CONCEPTS CLÉS DU RESPONSIVE COMMENT ON FAIT DU RESPONSIVE ? @NicolasMassouh 60
  61. 61. LES CONCEPTS CLÉS DU RESPONSIVE COMMENT ON FAIT LES BÉBÉS ? @NicolasMassouh 61
  62. 62. LES CONCEPTS CLÉS DU RESPONSIVE ALORS LE RESPONSIVE … @NicolasMassouh 62
  63. 63. LES CONCEPTS CLÉS DU RESPONSIVE IMAGE FLEXIBLE AMELIORATION PROGRESSIVE DEGRADATION GRACIEUSE MOBILE FIRST DESKTOP FIRST PERFORMANCE GRILLE FLUIDE @NicolasMassouh 63
  64. 64. LES “OUTILS” DE L’INTÉGRATEUR
  65. 65. LES “OUTILS” DE L’INTÉGRATEUR LES BREAKS POINTS LA BALISE META (VIEWPORT) MODERNIZR LE SNIFFING A JQUERY NORMALIZE/RESET CSS LES MEDIAS QUERIES LES UNITÉS DES FONTS LES COMMENTAIRES CONDITIONNNELS LES ANIMATIONS CSS3 @NicolasMassouh 65
  66. 66. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Les choix appliqués à ce projet
  67. 67. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Mobile first / amélioration progressive @NicolasMassouh 67
  68. 68. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Les médias queries @NicolasMassouh 68
  69. 69. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Layout du projet mobile viewport PANEL 1 PANEL 2 RESULT LIST @NicolasMassouh 69
  70. 70. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Layout du projet desktop / tablet PANEL 1 PANEL 2 RESULT LIST 160px 238px 100% @NicolasMassouh 70
  71. 71. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE La grille desktop / tablet §  Tous les li §  positionnés en float left Jeux de clear: left; sur les différents paliers http://bradfrost.github.io/this-is-responsive/patterns.html @NicolasMassouh 71
  72. 72. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Les animations CSS §  Meilleure §  §  §  Performance Pas de scripting transformstyle:preserve-3d backface-visibility:hidden @NicolasMassouh 72
  73. 73. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Les animations sur ie §  float: left pour ie @NicolasMassouh 73
  74. 74. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Utilisation de jQuery pour les composants ui §  Gain de temps sur ce type de composant §  Compatibilité https://github.com/furf/jquery-ui-touch-punch @NicolasMassouh 74
  75. 75. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Image Fluide @NicolasMassouh 75
  76. 76. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE Conception de bloc responsive è Bloc Fluide – Contextualisé au maximum è Box Sizing : border-box (un ami précieux) è Min/Max width/height @NicolasMassouh 76
  77. 77. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE ImageOptim pour les images et les sprites @NicolasMassouh 77
  78. 78. LE DEBUG SUR LES DIFFÉRENTS TERMINAUX
  79. 79. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX @NicolasMassouh 79
  80. 80. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX Sur iOS pour les macs users §  Simulateur iOS §  Appareil branché en usb §  Possibilité d’utiliser Safari à partir d’iOS6 @NicolasMassouh 80
  81. 81. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX Sur iOS pour les windows users @NicolasMassouh 81
  82. 82. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX Sur Android §  Version Minimum: Android 3.2 §  Appareil branché en usb §  Pas de débug sur les navigateurs d’origines https://developers.google.com/chrome-developer-tools/docs/remote-debugging @NicolasMassouh 82
  83. 83. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX Utilisation de VM pour IE7, IE8, IE9 @NicolasMassouh 83
  84. 84. LA RÉALITÉ Lendemain de cuite
  85. 85. LA RÉALITÉ DevianART- CryingDoom @NicolasMassouh 85
  86. 86. LA RÉALITÉ §  Bilan : è Éviter le fallback pour les animations è Limiter l’utilisation de jQuery è Mobile First / Amélioration Progressive vs IE7 è Réduire le scope è Utiliser Sass dans le processus de développement è Intervenir davantage au moment de la conception è Les fonts en em vs rem @NicolasMassouh 86
  87. 87. LA RÉALITÉ ON A PAS PU SE PASSER DU SNIFFING (USER AGENT) @NicolasMassouh 87
  88. 88. LA RÉALITÉ Les medias queries se sont multipliées @NicolasMassouh 88
  89. 89. LA RÉALITÉ Rendering et Painting : tendre vers 60 fps @NicolasMassouh 89
  90. 90. L’architecte @cbalit 90
  91. 91. LES QUESTIONS
  92. 92. PRODUCTIVITÉ QUALITÉ RIA PÉRENNITÉ INDUSTRIALISATION @cbalit 92
  93. 93. UTILISER ANGULAR @cbalit 93
  94. 94. @cbalit 94
  95. 95. LES FEATURES On a tout ce qu’il faut è Le databinding è La vue c’est le HTML è Validation de formulaires, filtres… @cbalit 95
  96. 96. L’ARCHITECTURE è L’injection de dépendances è Orientée module Flickr - Lauren Manning @cbalit 96
  97. 97. LE TEST … @cbalit 97
  98. 98. MÉTHODOLOGIE
  99. 99. PRISE EN MAIN Somewhere - internet @cbalit 99
  100. 100. PROTOTYPE Flickr - ilamont.com @cbalit 100
  101. 101. BON ALORS ANGULAR, ÇA MARCHE AVEC LE RWD ? Flickr - hilpalny @cbalit 101
  102. 102. LA MISE EN PLACE
  103. 103. ORGANISATION @cbalit 103
  104. 104. DES CONTRAINTES TECHNIQUES ? Vue = HTML5 è Un DOM responsive ne sera pas altéré par Angular @cbalit 104
  105. 105. LES TRANSITIONS Pas de vues uniques è Écoute changements de vues è Utilisation de ng-class ANIMATION @cbalit 105
  106. 106. RESPONSIVE … MAIS ADAPTIF
  107. 107. COMMENT ? On doit connaître le contexte en JavaScript §  matchMedia §  Refresh (resize) @cbalit 107
  108. 108. POUR LES IMAGES Une convention è 3 tailles d’images SMALL, MEDIUM et LARGE è Un pattern d’url : /monurl/[size]/veh1.png @cbalit 108
  109. 109. FONCTIONNELLEMENT @cbalit 109
  110. 110. TECHNIQUEMENT @cbalit 110
  111. 111. VISUELLEMENT @cbalit 111
  112. 112. LES OUTILS À NOTRE DISPOSITION Enrichir le HTML : les directives è ng-switch, ng-show, ng-hide è ng-class @cbalit 112
  113. 113. LES PERFORMANCES è Le databinding è Parsing du json è Redraw @cbalit 113
  114. 114. LES LEÇONS
  115. 115. L’URL @cbalit 115
  116. 116. LA COMPLEXITÉ @cbalit 116
  117. 117. CONCLUSION 117
  118. 118. TROIS MÉTIERS Simplicité POC ! POC ! Impliquer Tester Performance Souplesse Tester Adaptive Dream team Rigueur Tester 118
  119. 119. ONE MORE THING 119
  120. 120. www.renaultshop.fr 120
  121. 121. @3k1n0 MERCI Guillaume ABEL @MoreThanScreens Nicolas MASSOUH @nicolasmassouh Cyril BALIT @cbalit 121

×