Upload
nicolas-massouh
View
305
Download
0
Embed Size (px)
Citation preview
GUIDE DE SURVIE EN MILIEU RESPONSIVE
Guillaume ABEL Nicolas MASSOUH
Cyril BALIT
@MoreThanScreens @NicolasMassouh @cbalit
@3k1n0
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
@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
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
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
EXPLORER LES SOLUTIONS POSSIBLES.
ATELIERS
Flickr - marlenekzio
SKETCHING
BRAINSTORMING
16
@MoreThanScreens
FEUILLE A4 02
1/2 FEUILLE A4 = TABLETTE
1/4 FEUILLE A4 = MOBILE
SKETCHING Trucs & astuces
20
@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
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
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
@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
AMELIORATION PROGRESSIVE
DEGRADATION GRACIEUSE
MOBILE FIRST
DESKTOP FIRST
IMAGE FLEXIBLE
GRILLE FLUIDE
PERFORMANCE
LES CONCEPTS CLÉS DU RESPONSIVE
63
@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
@NicolasMassouh
Mobile first / amélioration progressive
DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
67
@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
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
@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 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
§ 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
@cbalit
On a tout ce qu’il faut è Le databinding è La vue c’est le HTML è Validation de formulaires, filtres…
LES FEATURES
95
@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
@cbalit
Une convention è 3 tailles d’images SMALL, MEDIUM et LARGE è Un pattern d’url : /monurl/[size]/veh1.png
POUR LES IMAGES
108
@cbalit
Enrichir le HTML : les directives è ng-switch, ng-show, ng-hide è ng-class
LES OUTILS À NOTRE DISPOSITION
112
Performance Souplesse
Tester
Simplicité POC ! POC ! Impliquer
Tester
Adaptive Dream team
Rigueur Tester
TROIS MÉTIERS
118