121
GUIDE DE SURVIE EN MILIEU RESPONSIVE Guillaume ABEL Nicolas MASSOUH Cyril BALIT @MoreThanScreens @NicolasMassouh @cbalit @3k1n0
GUIDE DE SURVIE EN MILIEU RESPONSIVE
Guillaume ABEL Nicolas MASSOUH
Cyril BALIT
@MoreThanScreens@NicolasMassouh@cbalit
@3k1n0
DE QUOI ALLONS-NOUS VOUS PARLER ?
Le développeur
frontL’UX designer L’architecte
TROIS métiers
3
Guillaume Nicolas Cyril
UNE problématique
4
RESPONSIVE WEB DESIGN
Un projet
PROMO FLASH
5
Catalogue de voiture (avant en PDF)
C’est quoi ?
Pour les employés Renault
C’est pour qui ?
Un site centralisant les demandes
Comment ?
RWD + RIA
PROJET PILOTE
Le Designer d’expérience utilisateur
6
@MoreThanScreens
@MoreThanScreens
– 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 ?
7
@MoreThanScreens
Notre Méthodologie UXD
et vision de l’UX
@MoreThanScreens
Les grandes étapes
AN
ALY
TIC
SA
MÉL
IOR
ATIO
N
GRAPHISME & DÉV
DESIGN & PROTOTYPAGE
IDÉATION & CONCEPT
RECHERCHE & DÉCOUVERTE
BES
OIN
C
LIEN
T
Quelle est la problématique ?
Explorer les solutions possibles.
Projection
Réaliser la solution
9
@MoreThanScreens
RECHERCHE & DÉCOUVERTE
Quelle est la problématique ?
@MoreThanScreens
Quelle est la problématique ?
UTILISATEUR
CONTEXTE CLIENT
ANALYSE EXISTANT
ANALYSE DATA
11
@MoreThanScreens
Flickr - YujiHayashi
PERIMÈTRE
FONCTIONNALITÉS
PATTERNS
Quelle est la problématique ?
12
@MoreThanScreens
DEVICES CIBLE Responsive mais responsable
13
1
2
3
1
2
3
4
57
6
10
+ 1024 1023-768 767-480 Up to 479
@MoreThanScreens
PATTERNS Ne pas réinventer la roue
MOSTLY FLUID COLUMN DROP
LAYOUT SHIFTER OFF CANVAS
Lukew.com
TROUVER UN LANGAGE COMMUN
14
@MoreThanScreens
Idéation & concept
Explorer les solutions possibles.
@MoreThanScreens
Explorer les solutions possibles.
ATELIERS
Flickr - marlenekzio
SKETCHING
BRAINSTORMING
16
@MoreThanScreens
SKETCHING Dessiner, c’est gagné !
stat.us
17
@MoreThanScreens
FEUILLE A401
FEUILLE A402
PRENDRE 2 FEUILLES A4
SKETCHING Trucs & astuces
18
@MoreThanScreens
FEUILLE A401
1 FEUILLE A4 = DESKTOP
SKETCHING Trucs & astuces
19
@MoreThanScreens
FEUILLE A402
1/2 FEUILLE A4 = TABLETTE
1/4 FEUILLE A4 = MOBILE
SKETCHING Trucs & astuces
20
@MoreThanScreens
1 FEUILLE A4 = DESKTOP
SKETCHING Résultats
21
@MoreThanScreens
1/2 FEUILLE A4 = TABLETTE
22
SKETCHING Résultats
@MoreThanScreens
1/4 FEUILLE A4 = MOBILE
23
SKETCHING Résultats
@MoreThanScreens
DESIGN & prototype
Projection
@MoreThanScreens
DESIGN & prototype
ZONING
WIREFRAME
POC
DOCUMENTATION
Flickr - marlenekzio
25
PRINCIPES D’INTERACTION
@MoreThanScreens
DESIGN & prototype
ITÉRATIONS
TESTS UTILISATEUR
Flickr - nobleup Coming Back Slowly
26
@MoreThanScreens
Web
Header
Recherche
Résultat 01
Navigation
Mobile
Résultat 04
Résultat 02
Résultat 05
Résultat 03
Résultat 06
Header
< Recherche
Résultat 01
Résultat 02
Résultat 03
Header
Recherche
Valider
zoning Une vue macro des interfaces
27
DÉFINIR LES PRINCIPES RESPONSIVE
@MoreThanScreens
PRINCIPES D’INTERACTION Mobile
28
Header
Modèle
▾
Zone géographie
Limitrophe
RECHERCHER
ESS
Energie
DIE GPL E85
Budgetxx€
xx€
Étape 01
Modèle Modèle
Modèle Modèle
Modèle Modèle
Nom Nom
Nom Nom
Nom Nom
Sélectionner un modèle
Modèle
Modèle
Modèle
Nom
Nom
Nom
VALIDER
▾
Étape 02
Mégane
Modèle
▾
Zone géographie
Limitrophe
RECHERCHER
ESS
Energie
DIE GPL E85
Budgetxx€
xx€
Header
Étape 03
MÉCANIQUE DE RECHERCHE MOBILE
@MoreThanScreens
PRINCIPES D’INTERACTION Desktop
29
Modèle
▾
Zone géographie
Limitrophe
RECHERCHER
ESS
Energie
Autre critère ▾
DIE GPL E85
Budgetxx€
xx€
Nom
Nom
Nom
Nom
Nom
Nom
Nom
Nom
Nom
Nom
Étape 01
Mégane
Modèle
▾
Zone géographie
Limitrophe
ESS
Energie
Autre critère ▾
DIE GPL E85
Budgetxx€
xx€
Nouvelle Mégane ▾RECHERCHER
Modèle Modèle
Modèle Modèle
Modèle Modèle
Nom Nom
Nom Nom
Nom Nom
Étape 02
Mégane
Modèle
▾
73
Zone géographie
Limitrophe
ESS
Energie
Autre critère ▾
DIE GPL E85
Budgetxx€
xx€
Nouvelle Mégane ▾
RECHERCHER
Initiale
Version
▾
Étape 03
MÉCANIQUE DE RECHERCHE DESKTOP / TABLETTE
@MoreThanScreens
WIreframe Fifty Shades of Grey
30
@MoreThanScreens
WIreframe Fifty Shades of Grey
31
@MoreThanScreens
POC Proof Of Concept
32
@MoreThanScreens
– Identifier les écrans et fonctionnalités clefs de l’application
– Découper l’interface en modules.– Décrire chaque module pour chaque devices
DOCUMENTATION Approche modulaire
33
1a
1b
1c
1a
2
3
1
1 2 3
@MoreThanScreens
GRAPHISME
Réaliser la solution
@MoreThanScreens
GRAPHISME
Flickr - Degilbo
PLANCHE DE COMPOSANT
CHARTE
DÉCLINAISON
35
@MoreThanScreens
Les maquettes
36
@MoreThanScreens
Les maquettes
37
@MoreThanScreens
Les maquettes
38
@MoreThanScreens
Les maquettes
39
@MoreThanScreens
Les maquettes
40
@MoreThanScreens
Les maquettes
41
@MoreThanScreens 42
@MoreThanScreens
Planche de composant
43
ENSEIGNEMENT
Retour d’expérience sur le design d’expérience utilisateur.
@MoreThanScreens
Être multilingue
45
…mais encore plus
@MoreThanScreens
Itérer sur le processus
Flickr - avrene
46
@MoreThanScreens
AN
ALY
TIC
SA
MÉL
IOR
ATIO
N
GRAPHISME & DÉV
DESIGN & PROTOTYPAGE
IDÉATION & CONCEPT
RECHERCHE & DÉCOUVERTE
47
Itérer sur le processus AvantBES
OIN
C
LIEN
T
@MoreThanScreens
AN
ALY
TIC
SA
MÉL
IOR
ATIO
N
POCou prototype
HTML
RECHERCHE & DÉCOUVERTE
SKETCHING
IMPLICATION
TESTS UTILISATEURS
ITÉRATION
GRAPHISME & DÉV
48
Itérer sur le processus Avant
ATELIERS VALIDATION
BES
OIN
C
LIEN
T
Le développeur front
49
@NicolasMassouh
@NicolasMassouh
Cliquez pour modifier les styles du texte du masqueDeuxième niveauTroisième niveauQuatrième niveauCinquième niveau
APPLI RIA EN HTML 5 CROSSPLATFORM
50
De la nécessité du poc
@NicolasMassouh
De la nécessité du POC
@NicolasMassouh
De la nécessité du POC
LE CLIENT
LES DÉVELOPPEURS
Flickr - .reid.
53
LES CONCEPTEURSRASSURER
@NicolasMassouh
SOULEVER DES PROBLÉMATIQUES AUXQUELS NOUS N’ÉTIONS PAS PRÉPARÉES
De la nécessité du POC
Flickr - . the pale side of insomnia
54
@NicolasMassouh
MIEUX APPRÉCIER LES COÛT DE DÉVELOPPEMENT
De la nécessité du POC
Flickr - Ashley Pollak
55
@NicolasMassouh
SOCLE DANS LEQUEL PIOCHER UN SAVOIR FAIRE IMMÉDIAT ET POUR LE COUP ÉPROUVÉ
De la nécessité du POC
Flickr - AXEL BRUNST photography
56
@NicolasMassouh
MONTÉE EN COMPÉTENCES DES ÉQUIPES.
De la nécessité du POC
57
Team Ekino Front 2011
LES CONCEPTS CLÉS DU RESPONSIVE
@NicolasMassouh
COMMENT ON FAIT DU RESPONSIVE ?
les CoNCEPTs CLÉS du responsive
59
@NicolasMassouh
COMMENT ON FAIT DU
RESPONSIVE ?
les CoNCEPTs CLÉS du responsive
60
@NicolasMassouh
COMMENT ON FAIT LES BÉBÉS ?
les CoNCEPTs CLÉS du responsive
61
@NicolasMassouh
les CoNCEPTs CLÉS du responsive
ALORS LE RESPONSIVE …
62
@NicolasMassouh
AMELIORATION PROGRESSIVE
DEGRADATION GRACIEUSE
MOBILE FIRST
DESKTOP FIRST
IMAGE FLEXIBLE
GRILLE FLUIDE
PERFORMANCE
les CoNCEPTs CLÉS du responsive
63
Les “outils” de l’intégrateur
@NicolasMassouh
A
Les “outils” de l’intégrateur
BOILERPLATE
MODERNIZR
JQUERY
LES UNITÉS DES FONTS
LA BALISE META (VIEWPORT)LES BREAKS POINTS
LES COMMENTAIRES CONDITIONNNELS
LES MEDIAS QUERIES
LE SNIFFING
LES ANIMATIONS CSS365
NORMALIZE/RESET CSS
Les choix appliqués à ce projet
De la conception à la réalisation technique
@NicolasMassouh
Mobile first / amélioration progressive
De la conception à la réalisation technique
67
@NicolasMassouh
Les médias queries
De la conception à la réalisation technique
68
@NicolasMassouh
Layout du projet mobile
De la conception à la réalisation technique
69
PANEL 2
PANEL 1
RESULT LIST
viewport
@NicolasMassouh
Layout du projet desktop / tablet
De la conception à la réalisation technique
PANEL 2PANEL 1 RESULT LIST
160px 238px 100%
70
@NicolasMassouh
La grille desktop / tablet
http://bradfrost.github.io/this-is-responsive/patterns.html
Tous les li positionnés en float left
Jeux de clear: left; sur les différents paliers
De la conception à la réalisation technique
71
@NicolasMassouh
Les animations CSS
Meilleure Performance
Pas de scripting
transform-style:preserve-3d
backface-visibility:hidden
De la conception à la réalisation technique
72
@NicolasMassouh
Les animations sur ie
De la conception à la réalisation technique
● float: left pour ie
73
@NicolasMassouh
Utilisation de jQuery pour les composants ui
Gain de temps sur ce type de composant
Compatibilité
https://github.com/furf/jquery-ui-touch-punch
De la conception à la réalisation technique
74
@NicolasMassouh
Image Fluide
De la conception à la réalisation technique
75
@NicolasMassouh
Conception de bloc responsive
– Bloc Fluide – Contextualisé au maximum
– Box Sizing : border-box (un ami précieux)
– Min/Max width/height
De la conception à la réalisation technique
76
@NicolasMassouh
ImageOptim pour les images et les sprites
De la conception à la réalisation technique
77
Le debug sur les différents terminaux
@NicolasMassouh
le débug sur les différents terminaux
79
@NicolasMassouh
Sur iOS pour les macs users
le débug sur les différents terminaux
Simulateur iOS
Appareil branché en usb
Possibilité d’utiliser Safari à partir d’iOS6
80
@NicolasMassouh
Sur iOS pour les windows users
le débug sur les différents terminaux
81
@NicolasMassouh
Sur Android
le débug sur les différents terminaux
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
Version Minimum: Android 3.2
Appareil branché en usb
Pas de débug sur les navigateurs d’origines
82
@NicolasMassouh
Utilisation de VM pour IE7, IE8, IE9
le débug sur les différents terminaux
83
LA RÉALITÉ
Lendemain de cuite
@NicolasMassouh
La réalité
85
DevianART- CryingDoom
@NicolasMassouh
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
La réalité
86
@NicolasMassouh
La réalité
87
ON A PAS PU SE PASSER DU SNIFFING (USER AGENT)
@NicolasMassouh
Les medias queries se sont multipliées
La réalité
88
@NicolasMassouh
Rendering et Painting < 60 fps
La réalité
89
L’architecte
90
@cbalit
Les questions
@cbalit 92
RIA
QUALITÉ PRODUCTIVITÉ
PÉRENNITÉ INDUSTRIALISATION
@cbalit
utiliser Angular
93
@cbalit 94
@cbalit
On a tout ce qu’il faut– Le databinding– La vue c’est le HTML– Validation de formulaires, filtres…
les featureS
95
@cbalit
– L’injection de dépendances– Orientée module
l’architecture
Flickr - Lauren Manning
96
@cbalit
Le test …
97
méthodologie
@cbalit
Prise en main
99
Somewhere - internet
@cbalit
Prototype
Flickr - ilamont.com
100
@cbalit
Bon alors Angular, ça marche avec le RWD ?
Flickr - hilpalny
101
La mise en place
@cbalit
Organisation
103
@cbalit
Vue = HTML5– Un DOM responsive ne sera pas altéré par Angular
Des contraintes techniques ?
104
@cbalit
Pas de vues uniques– Écoute changements de vues– Utilisation de ng-class
Les transitions
105
ANIMATION
Responsive … mais ADAPTIF
@cbalit
On doit connaître le contexte en JavaScript matchMedia Refresh (resize)
Comment ?
107
@cbalit
Une convention– 3 tailles d’images SMALL, MEDIUM et LARGE– Un pattern d’url : /monurl/[size]/veh1.png
Pour Les images
108
@cbalit
FONCTIONNELLEMENT
109
@cbalit
techniquement
110
@cbalit
visuellement
111
@cbalit
Enrichir le HTML : les directives– ng-switch, ng-show, ng-hide– ng-class
Les outils à notre disposition
112
@cbalit
– Le databinding– Parsing du json– Redraw
Les performances
113
LES LEÇONS
@cbalit
L’url
115
@cbalit
La complexité
116
CONCLUSION
117
PerformanceSouplesse
Tester
SimplicitéPOC ! POC !Impliquer
Tester
AdaptiveDream team
RigueurTester
TROIS métiers
118
119
ONE MORE THING
120
www.renaultshop.fr
MERCI
121
Guillaume ABEL Nicolas MASSOUH
Cyril BALIT
@MoreThanScreens@nicolasmassouh@cbalit
@3k1n0
