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