@3k1n0 GUIDE DE SURVIE EN MILIEU RESPONSIVE Guillaume ABEL @MoreThanScreens Nicolas MASSOUH @NicolasMassouh Cyril BALIT @cbalit
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 RESPONSIV E 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 site centralisant les demandes RWD + RIA PROMO FLASH PROJET PILOTE 5
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? 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
Notre Méthodologie UXD et vision de l UX @MoreThanScreens
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
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 @MoreThanScreens 13
PATTERNS Ne pas réinventer la roue MOSTLY FLUID LAYOUT SHIFTER COLUMN DROP OFF CANVAS TROUVER UN LANGAGE COMMUN Lukew.com @MoreThanScreens 14
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 25
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 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
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 Modèle Modèle Nom Nom Nom Modèle Modèle Modèle Nom 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
PRINCIPES D INTERACTION Desktop Étape 01 Étape 02 Modèle Modèle Nom Nom Zone géographie Mégane Modèle Nouvelle Mégane Nom Nom Limitrophe xx Nom xx Nom DIE GPL E85 Nom Nom Autre critère RECHERCHER Nom Nom Modèle Modèle Nom Nom Modèle Modèle Nom Nom Limitrophe Budget Nouvelle Mégane Version Zone géographie 73 xx Nom Energie Initiale Nom Budget ESS Zone géographie Mégane Modèle 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
WIreframe Fifty Shades of Grey @MoreThanScreens 30
WIreframe Fifty Shades of Grey @MoreThanScreens 31
POC Proof Of Concept @MoreThanScreens 32
DOCUMENTATION Approche modulaire Identifier les écrans et fonctionnalités clefs de l application Découper l interface en modules. Décrire chaque module pour chaque devices 1 2 1 3 1a 1a 1b 2 1c 3 @MoreThanScreens 33
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ÉLIORATION BESOIN CLIENT Itérer sur le processus Avant 47
Itérer sur le processus Avant 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
Le développeur front @NicolasMassouh 49
Cliquez pour modifier les styles du texte du masque Deuxième niveau Troisième niveau Quatrième niveau Cinquième niveau 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 insomnia @NicolasMassouh 54
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 photography @NicolasMassouh 56
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 PERFORMANCE GRILLE FLUIDE @NicolasMassouh 63
Les outils de l intégrateur
Les outils de l intégrateur LES BREAKS POINTS LA BALISE META (VIEWPORT) MODERNIZR LE SNIFFING BOILERPLATE A JQUERY NORMALIZE/RESET CSS LES MEDIAS QUERIES LES UNITÉS DES FONTS LES COMMENTAIRES CONDITIONNNELS LES ANIMATIONS CSS3 @NicolasMassouh 65
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 @NicolasMassouh 69
De la conception à la réalisation technique Layout du projet desktop / tablet PANEL 1 PANEL 2 RESULT LIST 160px 238px 100% @NicolasMassouh 70
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
De la conception à la réalisation technique Les animations CSS Meilleure Performance Pas de scripting transform-style:preserve-3 d backface-visibility:hidden @NicolasMassouh 72
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 de composant Compatibilité https://github.com/furf/jquery-ui-touch-punch @NicolasMassouh 74
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 Box Sizing : border-box (un ami précieux) Min/Max width/height @NicolasMassouh 76
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 Possibilité d utiliser Safari à partir d ios6 @NicolasMassouh 80
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 Pas de débug sur les navigateurs d origines https://developers.google.com/chrome-developer-tools/docs/remote-debugging @NicolasMassouh 82
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é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
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 < 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 @cbalit 95
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 @cbalit 108
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 118
ONE MORE THING 119
www.renaultshop.fr 120
@3k1n0 MERCI Guillaume ABEL @MoreThanScreens Nicolas MASSOUH @nicolasmassouh Cyril BALIT @cbalit 121