@3k1n0 GUIDE DE SURVIE EN MILIEU RESPONSIVE

Transcription

1 @3k1n0 GUIDE DE SURVIE EN MILIEU RESPONSIVE Guillaume Nicolas Cyril

2 DE QUOI ALLONS-NOUS VOUS PARLER?

3 TROIS métiers L UX designer Le développeur front L architecte Guillaume Nicolas Cyril 3

4 UNE problématique RESPONSIV E WEB DESIGN 4

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 Le Designer d expérience 6

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 7

8 Notre Méthodologie UXD et vision de l

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 9

10 RECHERCHE & DÉCOUVERTE Quelle est la

11 Quelle est la problématique? UTILISATEUR CONTEXTE CLIENT ANALYSE EXISTANT ANALYSE 11

12 Quelle est la problématique? PERIMÈTRE FONCTIONNALITÉS PATTERNS Flickr - 12

13 DEVICES CIBLE Responsive mais responsable Up to

14 PATTERNS Ne pas réinventer la roue MOSTLY FLUID LAYOUT SHIFTER COLUMN DROP OFF CANVAS TROUVER UN LANGAGE COMMUN 14

15 Idéation & concept Explorer les solutions

16 Explorer les solutions possibles. ATELIERS BRAINSTORMING SKETCHING Flickr - 16

17 SKETCHING Dessiner, c est gagné! 17

18 SKETCHING Trucs & astuces FEUILLE A4 01 PRENDRE 2 FEUILLES A4 FEUILLE A4 18

19 SKETCHING Trucs & astuces 1 FEUILLE A4 = DESKTOP FEUILLE A4 19

20 SKETCHING Trucs & astuces 1/2 FEUILLE A4 = TABLETTE FEUILLE A4 02 1/4 FEUILLE A4 = 20

21 SKETCHING Résultats 1 FEUILLE A4 = 21

22 SKETCHING Résultats 1/2 FEUILLE A4 = 22

23 SKETCHING Résultats 1/4 FEUILLE A4 = 23

24 DESIGN & prototype

25 DESIGN & prototype ZONING PRINCIPES D INTERACTION WIREFRAME POC DOCUMENTATION Flickr - 25

26 DESIGN & prototype TESTS UTILISATEUR ITÉRATIONS Flickr - nobleup Coming Back 26

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 27

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 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 28

29 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 / 29

30 WIreframe Fifty Shades of 30

31 WIreframe Fifty Shades of 31

32 POC Proof Of 32

33 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 a 1a 1b 2 1c 33

34 GRAPHISME Réaliser la

35 GRAPHISME CHARTE DÉCLINAISON PLANCHE DE COMPOSANT Flickr - 35

36 Les 36

37 Les 37

38 Les 38

39 Les 39

40 Les 40

41 Les 41

42 @MoreThanScreens 42

43 Planche de 43

44 ENSEIGNEMENT Retour d expérience sur le design d expérience utilisateur.

45 Être multilingue mais encore 45

46 Itérer sur le processus Flickr - 46

47 RECHERCHE & DÉCOUVERTE IDÉATION & CONCEPT DESIGN & PROTOTYPAGE GRAPHISME & ANALYTICS AMÉLIORATION BESOIN CLIENT Itérer sur le processus Avant 47

48 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 48

49 Le développeur 49

50 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 50

51 De la nécessité du poc

52 De la nécessité du

53 De la nécessité du POC RASSURER LES CONCEPTEURS LES DÉVELOPPEURS LE CLIENT Flickr 53

54 De la nécessité du POC SOULEVER DES PROBLÉMATIQUES AUXQUELS NOUS N ÉTIONS PAS PRÉPARÉES Flickr -. the pale side of 54

55 De la nécessité du POC MIEUX APPRÉCIER LES COÛT DE DÉVELOPPEMENT Flickr - Ashley 55

56 De la nécessité du POC SOCLE DANS LEQUEL PIOCHER UN SAVOIR FAIRE IMMÉDIAT ET POUR LE COUP ÉPROUVÉ Flickr - AXEL BRUNST 56

57 De la nécessité du POC MONTÉE EN COMPÉTENCES DES ÉQUIPES. Team Ekino Front 57

58 LES CONCEPTS CLÉS DU RESPONSIVE

59 les CoNCEPTs CLÉS du responsive COMMENT ON FAIT DU 59

60 les CoNCEPTs CLÉS du responsive COMMENT ON FAIT DU 60

61 les CoNCEPTs CLÉS du responsive COMMENT ON FAIT LES 61

62 les CoNCEPTs CLÉS du responsive ALORS LE 62

63 les CoNCEPTs CLÉS du responsive IMAGE FLEXIBLE AMELIORATION PROGRESSIVE DEGRADATION GRACIEUSE MOBILE FIRST DESKTOP FIRST PERFORMANCE GRILLE 63

64 Les outils de l intégrateur

65 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 65

66 De la conception à la réalisation technique Les choix appliqués à ce projet

67 De la conception à la réalisation technique Mobile first / amélioration 67

68 De la conception à la réalisation technique Les médias 68

69 De la conception à la réalisation technique Layout du projet mobile viewport PANEL 1 PANEL 2 RESULT 69

70 De la conception à la réalisation technique Layout du projet desktop / tablet PANEL 1 PANEL 2 RESULT LIST 160px 238px 70

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 71

72 De la conception à la réalisation technique Les animations CSS Meilleure Performance Pas de scripting transform-style:preserve-3 d 72

73 De la conception à la réalisation technique Les animations sur ie float: left pour 73

74 De la conception à la réalisation technique Utilisation de jquery pour les composants ui Gain de temps sur ce type de composant Compatibilité 74

75 De la conception à la réalisation technique Image 75

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 76

77 De la conception à la réalisation technique ImageOptim pour les images et les 77

78 Le debug sur les différents terminaux

79 le débug sur les différents 79

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 80

81 le débug sur les différents terminaux Sur ios pour les windows 81

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 82

83 le débug sur les différents terminaux Utilisation de VM pour IE7, IE8, 83

84 LA RÉALITÉ Lendemain de cuite

85 La réalité DevianART- 85

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 86

87 La réalité ON A PAS PU SE PASSER DU SNIFFING (USER 87

88 La réalité Les medias queries se sont 88

89 La réalité Rendering et Painting < 60 89

90 L 90

91 Les questions

92 PRODUCTIVITÉ QUALITÉ RIA PÉRENNITÉ 92

93 utiliser 93

94 @cbalit 94

95 les features On a tout ce qu il faut Le databinding La vue c est le HTML Validation de formulaires, 95

96 l architecture L injection de dépendances Orientée module Flickr - Lauren 96

97 Le 97

98 méthodologie

99 Prise en main Somewhere - 99

100 Prototype Flickr - 100

101 Bon alors Angular, ça marche avec le RWD? Flickr - 101

102 La mise en place

103 103

104 Des contraintes techniques? Vue = HTML5 Un DOM responsive ne sera pas altéré par 104

105 Les transitions Pas de vues uniques Écoute changements de vues Utilisation de ng-class 105

106 Responsive mais ADAPTIF

107 Comment? On doit connaître le contexte en JavaScript matchmedia Refresh 107

108 Pour Les images Une convention 3 tailles d images SMALL, MEDIUM et LARGE Un pattern d url : 108

109 109

110 110

111 111

112 Les outils à notre disposition Enrichir le HTML : les directives ng-switch, ng-show, ng-hide 112

113 Les performances Le databinding Parsing du json 113

114 LES LEÇONS

115 L 115

116 La 116

117 CONCLUSION 117

118 TROIS métiers Simplicité POC! POC! Impliquer Tester Performance Souplesse Tester Adaptive Dream team Rigueur Tester 118

119 ONE MORE THING 119

120 120

121 @3k1n0 MERCI Guillaume Nicolas Cyril 121