SlideShare une entreprise Scribd logo
@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

RESPONSIVE
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 PROCESSUS 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

Nom

Nom

Nom

Modèle

Modèle

Nom

▾

Modèle

Modèle

Modèle

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

Nouvelle Mégane

Limitrophe

xx€

Nom

ESS

DIE

Nom

GPL

E85

Nom
Nom

Autre critère
RECHERCHER

▾

Nom

Modèle

Modèle

Nom

Nom

Limitrophe

Budget

▾

Zone géographie
73

xx€

Nom

Energie

Modèle

Version
Initiale

Nom

xx€

Nom

Modèle

Nom

Budget

▾

Modèle

Nom

Zone géographie

▾

Nouvelle Mégane

Modèle

Nom
Nom

Mégane

▾

Mégane

▾

▾

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

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 Après

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

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
transformstyle:preserve-3d
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 : tendre vers 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

Contenu connexe

Tendances

L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
UX REPUBLIC
 
Ux design-jean-françois-marti
Ux design-jean-françois-martiUx design-jean-françois-marti
Ux design-jean-françois-martiFrenchWeb.fr
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017
Net Design
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
Usabilis
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
Sylvie Daumal
 
Experience map @UXRepublic
Experience map @UXRepublicExperience map @UXRepublic
Experience map @UXRepublic
UX REPUBLIC
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
Alexandre Jubien
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
Kiss The Bride
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
NiceToMeetYou
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
Catherine Verfaillie
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
David Koss
 
Le Lean UX avec K2
Le Lean UX avec K2Le Lean UX avec K2
Le Lean UX avec K2
Jean-Philippe MARTIN
 
Lean UX
Lean UX Lean UX
Lean UX
UX REPUBLIC
 
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
Flupa
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Marie Glandus
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence Backelite
Idean France
 
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
Patrice Pena
 
Les technologies immersives @UXRepublic
Les technologies immersives @UXRepublicLes technologies immersives @UXRepublic
Les technologies immersives @UXRepublic
UX REPUBLIC
 
Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactifdesigners interactifs
 

Tendances (20)

L'user experience for IoT
L'user experience for IoTL'user experience for IoT
L'user experience for IoT
 
Ux design-jean-françois-marti
Ux design-jean-françois-martiUx design-jean-françois-marti
Ux design-jean-françois-marti
 
Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017Work’n Coffee UX Design by ND du 27 octobre 2017
Work’n Coffee UX Design by ND du 27 octobre 2017
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
 
Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011Designer l'expérience utilisateur @ Web_UX 2011
Designer l'expérience utilisateur @ Web_UX 2011
 
Experience map @UXRepublic
Experience map @UXRepublicExperience map @UXRepublic
Experience map @UXRepublic
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
 
La matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tousLa matinale le fil : Design experience utilisateur pour tous
La matinale le fil : Design experience utilisateur pour tous
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
 
C’est quoi l’UX -
C’est quoi l’UX -C’est quoi l’UX -
C’est quoi l’UX -
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
 
Le Lean UX avec K2
Le Lean UX avec K2Le Lean UX avec K2
Le Lean UX avec K2
 
Lean UX
Lean UX Lean UX
Lean UX
 
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
FLUPA UX-Day 2014 - Leslie Matté et Risvan Asif : "Pourquoi l’UX Design va s’...
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
 
Présentation UX agence Backelite
Présentation UX agence BackelitePrésentation UX agence Backelite
Présentation UX agence Backelite
 
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
[Atelier des experts] Design d'expérience utilisateur : adopter une approche ...
 
Les technologies immersives @UXRepublic
Les technologies immersives @UXRepublicLes technologies immersives @UXRepublic
Les technologies immersives @UXRepublic
 
Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactif
 

En vedette

Removal of chromium
Removal of chromiumRemoval of chromium
Removal of chromium
Amr Elshikh
 
Chapter 5
Chapter 5Chapter 5
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESSA SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
Journal For Research
 
Chromium problems
Chromium problemsChromium problems
Chromium problems
crazyaxe
 
Aluminum Anodizing
Aluminum AnodizingAluminum Anodizing
Aluminum Anodizing
AACOA.com
 
Brochure Meca-19102016-bd
Brochure Meca-19102016-bdBrochure Meca-19102016-bd
Brochure Meca-19102016-bdCamille Volant
 
Protection des métaux contre la corrosion
Protection des métaux contre la corrosionProtection des métaux contre la corrosion
Protection des métaux contre la corrosion
CHTAOU Karim
 
DIU echocardio 23011
DIU echocardio 23011DIU echocardio 23011
DIU echocardio 23011oussama El-h
 
TALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of AluminiumTALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of Aluminium
CORE-Materials
 
27th Region
27th Region27th Region
27th Region
Stéphane VINCENT
 
C4021 Séance 8: Réseaux Sociaux
C4021 Séance 8: Réseaux SociauxC4021 Séance 8: Réseaux Sociaux
C4021 Séance 8: Réseaux Sociaux
Alexandru Panican
 
Les Mobinautes #Anglet10
Les Mobinautes #Anglet10Les Mobinautes #Anglet10
Les Mobinautes #Anglet10
Ludovic Dublanchet
 
Methods for removal of chromium
Methods for removal of chromiumMethods for removal of chromium
Methods for removal of chromium
Arvind Gupta
 
Présentation de la plate-forme d'éco-conception CORINE
Présentation de la plate-forme d'éco-conception CORINEPrésentation de la plate-forme d'éco-conception CORINE
Présentation de la plate-forme d'éco-conception CORINE
Brice Kosinski
 
L’oxydation
L’oxydationL’oxydation
L’oxydation
Missipssa BENATMANE
 
Animation obtention, conversion et séparation des aromatiques
Animation obtention, conversion et séparation des aromatiquesAnimation obtention, conversion et séparation des aromatiques
Animation obtention, conversion et séparation des aromatiquesTarik Taleb Bendiab
 
Deep oxidation of heterogeneous VOCs: practice and feedback
Deep oxidation of heterogeneous VOCs: practice and feedbackDeep oxidation of heterogeneous VOCs: practice and feedback
Deep oxidation of heterogeneous VOCs: practice and feedback
Serge Vigneron
 
Les Meilleurs Extensions: Top 10 google chrome extensions
Les Meilleurs Extensions: Top 10 google chrome extensionsLes Meilleurs Extensions: Top 10 google chrome extensions
Les Meilleurs Extensions: Top 10 google chrome extensions
Abderrahim Sibari
 
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
chemineebio8
 

En vedette (20)

Removal of chromium
Removal of chromiumRemoval of chromium
Removal of chromium
 
Chapter 5
Chapter 5Chapter 5
Chapter 5
 
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESSA SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
 
Chromium problems
Chromium problemsChromium problems
Chromium problems
 
Aluminum Anodizing
Aluminum AnodizingAluminum Anodizing
Aluminum Anodizing
 
Brochure Meca-19102016-bd
Brochure Meca-19102016-bdBrochure Meca-19102016-bd
Brochure Meca-19102016-bd
 
Protection des métaux contre la corrosion
Protection des métaux contre la corrosionProtection des métaux contre la corrosion
Protection des métaux contre la corrosion
 
DIU echocardio 23011
DIU echocardio 23011DIU echocardio 23011
DIU echocardio 23011
 
TALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of AluminiumTALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of Aluminium
 
27th Region
27th Region27th Region
27th Region
 
C4021 Séance 8: Réseaux Sociaux
C4021 Séance 8: Réseaux SociauxC4021 Séance 8: Réseaux Sociaux
C4021 Séance 8: Réseaux Sociaux
 
Les Mobinautes #Anglet10
Les Mobinautes #Anglet10Les Mobinautes #Anglet10
Les Mobinautes #Anglet10
 
Alliages dentaire
Alliages dentaire Alliages dentaire
Alliages dentaire
 
Methods for removal of chromium
Methods for removal of chromiumMethods for removal of chromium
Methods for removal of chromium
 
Présentation de la plate-forme d'éco-conception CORINE
Présentation de la plate-forme d'éco-conception CORINEPrésentation de la plate-forme d'éco-conception CORINE
Présentation de la plate-forme d'éco-conception CORINE
 
L’oxydation
L’oxydationL’oxydation
L’oxydation
 
Animation obtention, conversion et séparation des aromatiques
Animation obtention, conversion et séparation des aromatiquesAnimation obtention, conversion et séparation des aromatiques
Animation obtention, conversion et séparation des aromatiques
 
Deep oxidation of heterogeneous VOCs: practice and feedback
Deep oxidation of heterogeneous VOCs: practice and feedbackDeep oxidation of heterogeneous VOCs: practice and feedback
Deep oxidation of heterogeneous VOCs: practice and feedback
 
Les Meilleurs Extensions: Top 10 google chrome extensions
Les Meilleurs Extensions: Top 10 google chrome extensionsLes Meilleurs Extensions: Top 10 google chrome extensions
Les Meilleurs Extensions: Top 10 google chrome extensions
 
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
Une analyse simple de selectionner des aspects de grille de cheminee d'ethanol
 

Similaire à Guide de survie en milieu responsive - Paris Web 2013

Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussiAfterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
cyrilpicat
 
L'ADN d'un développement produit réussi
L'ADN d'un développement produit réussiL'ADN d'un développement produit réussi
L'ADN d'un développement produit réussi
OCTO Technology Suisse
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
FullSIX Group
 
Vers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériencesVers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériences
Fabernovel
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
ekino
 
Réussissez le développement de votre prochaine application web ou mobile
Réussissez le développement de votre prochaine application web ou mobileRéussissez le développement de votre prochaine application web ou mobile
Réussissez le développement de votre prochaine application web ou mobile
OCTO Technology Suisse
 
Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016
Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016
Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016
Damien Beaufils
 
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoL’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
TP1
 
Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion
UX Republic Bordeaux
 
Confoo 2017 - Nouveau socle pour une nouvelle vie
Confoo 2017 - Nouveau socle pour une nouvelle vieConfoo 2017 - Nouveau socle pour une nouvelle vie
Confoo 2017 - Nouveau socle pour une nouvelle vie
mikaelrandy
 
Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean
Daniel Duhautbout
 
SPA avec SignalR et Angular Js
SPA avec SignalR et Angular JsSPA avec SignalR et Angular Js
SPA avec SignalR et Angular Js
Microsoft
 
Seminaire Drupal 8 à Nantes
Seminaire Drupal 8 à NantesSeminaire Drupal 8 à Nantes
Seminaire Drupal 8 à Nantes
Smile I.T is open
 
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
OCTO Technology
 
Olivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson
 
SymBiOT-X portfolio
SymBiOT-X portfolioSymBiOT-X portfolio
SymBiOT-X portfolio
SymBiOT-X
 
Cas de la refonte de STM.info
Cas de la refonte de STM.infoCas de la refonte de STM.info
Cas de la refonte de STM.info
TP1
 
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
Publicis Sapient Engineering
 
Réussir dans un monde en perpétuel changement
Réussir dans un monde en perpétuel changementRéussir dans un monde en perpétuel changement
Réussir dans un monde en perpétuel changement
Jean-Marc De Jonghe
 
Industrie 4.0 / usine du futur : retours concrets & faibles coûts
Industrie 4.0 / usine du futur : retours concrets & faibles coûtsIndustrie 4.0 / usine du futur : retours concrets & faibles coûts
Industrie 4.0 / usine du futur : retours concrets & faibles coûts
FactoVia
 

Similaire à Guide de survie en milieu responsive - Paris Web 2013 (20)

Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussiAfterwork OCTO Delivery - L'ADN d'un développement produit réussi
Afterwork OCTO Delivery - L'ADN d'un développement produit réussi
 
L'ADN d'un développement produit réussi
L'ADN d'un développement produit réussiL'ADN d'un développement produit réussi
L'ADN d'un développement produit réussi
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Vers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériencesVers une nouvelle ère de vos expériences
Vers une nouvelle ère de vos expériences
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
Réussissez le développement de votre prochaine application web ou mobile
Réussissez le développement de votre prochaine application web ou mobileRéussissez le développement de votre prochaine application web ou mobile
Réussissez le développement de votre prochaine application web ou mobile
 
Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016
Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016
Développement artisanal d'un logiciel en 20 itérations - Paris Web 2016
 
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoL’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
 
Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion Star d'UX bordeaux #1 - en UXmmersion
Star d'UX bordeaux #1 - en UXmmersion
 
Confoo 2017 - Nouveau socle pour une nouvelle vie
Confoo 2017 - Nouveau socle pour une nouvelle vieConfoo 2017 - Nouveau socle pour une nouvelle vie
Confoo 2017 - Nouveau socle pour une nouvelle vie
 
Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean Catopsys - Une startup agile et lean
Catopsys - Une startup agile et lean
 
SPA avec SignalR et Angular Js
SPA avec SignalR et Angular JsSPA avec SignalR et Angular Js
SPA avec SignalR et Angular Js
 
Seminaire Drupal 8 à Nantes
Seminaire Drupal 8 à NantesSeminaire Drupal 8 à Nantes
Seminaire Drupal 8 à Nantes
 
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
Petit-déjeuner "Secteur Public : Retour d'expérience sur la refonte en agile ...
 
Olivier Besson Portfolio
Olivier Besson PortfolioOlivier Besson Portfolio
Olivier Besson Portfolio
 
SymBiOT-X portfolio
SymBiOT-X portfolioSymBiOT-X portfolio
SymBiOT-X portfolio
 
Cas de la refonte de STM.info
Cas de la refonte de STM.infoCas de la refonte de STM.info
Cas de la refonte de STM.info
 
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
XebiCon'16 : Le futur de la télévision, les applications ! Par Fabien Mirault...
 
Réussir dans un monde en perpétuel changement
Réussir dans un monde en perpétuel changementRéussir dans un monde en perpétuel changement
Réussir dans un monde en perpétuel changement
 
Industrie 4.0 / usine du futur : retours concrets & faibles coûts
Industrie 4.0 / usine du futur : retours concrets & faibles coûtsIndustrie 4.0 / usine du futur : retours concrets & faibles coûts
Industrie 4.0 / usine du futur : retours concrets & faibles coûts
 

Guide de survie en milieu responsive - Paris Web 2013