Embed Size (px)
Citation preview
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
front L’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 PROCESSUS UXD
et vision de l’UX
@MoreThanScreens
LES GRANDES ÉTAPES
AN
ALY
TICS
A
MÉL
IORA
TIO
N
GRAPHISME & DÉV
DESIGN & PROTOTYPAGE
IDÉATION & CONCEPT
RECHERCHE & DÉCOUVERTE
BESO
IN
CLIE
NT
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
5 7
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 A4 01
FEUILLE A4 02
PRENDRE 2 FEUILLES A4
SKETCHING Trucs & astuces
18
@MoreThanScreens
FEUILLE A4 01
1 FEUILLE A4 = DESKTOP
SKETCHING Trucs & astuces
19
@MoreThanScreens
FEUILLE A4 02
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
Budget xx€
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
Budget xx€
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
Budget xx€
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
Budget xx€
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
Budget xx€
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
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
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
TICS
A
MÉL
IORA
TIO
N
GRAPHISME & DÉV
DESIGN & PROTOTYPAGE
IDÉATION & CONCEPT
RECHERCHE & DÉCOUVERTE
47
ITÉRER SUR LE PROCESSUS Avant BE
SOIN
CL
IEN
T
@MoreThanScreens
AN
ALY
TICS
A
MÉL
IORA
TIO
N
POC ou prototype
HTML
RECHERCHE & DÉCOUVERTE
SKETCHING
IMPLICATION
TESTS UTILISATEURS
ITÉRATION
GRAPHISME & DÉV
48
ITÉRER SUR LE PROCESSUS Après
ATELIERS VALIDATION
BESO
IN
CLIE
NT
Le développeur front
49
@NicolasMassouh
@NicolasMassouh
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 CONCEPTEURS RASSURER
@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
MODERNIZR
JQUERY
LES UNITÉS DES FONTS
LA BALISE META (VIEWPORT) LES BREAKS POINTS
LES COMMENTAIRES CONDITIONNNELS
LES MEDIAS QUERIES
LE SNIFFING
LES ANIMATIONS CSS3 65
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 2 PANEL 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 : tendre vers 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
Performance Souplesse
Tester
Simplicité POC ! POC ! Impliquer
Tester
Adaptive Dream team
Rigueur Tester
TROIS MÉTIERS
118
119
ONE MORE THING
120
www.renaultshop.fr
MERCI
121
Guillaume ABEL Nicolas MASSOUH
Cyril BALIT
@MoreThanScreens @nicolasmassouh @cbalit
@3k1n0
