Le responsive web design est une approche relativement jeune sous sa forme actuelle et manque encore de bonnes pratiques reconnues et éprouvées dans l’industrie. Du coup, à nouvelle approche, nouvelles questions :
Le designer d'expérience utilisateur se demandera « Quels sont les usages ? Quel sont les bonnes pratiques RWD ? Comment je vais adapter la méthodologie UX ? Comment avoir une expérience qui soit cohérente sur plusieurs écrans ? »
Le développeur Front se demandera « Comment je vais utiliser les break-points ? Et les media queries ? Comment je vais éviter le snifing ? Et concevoir des blocs responsive ? Et les animations ? Comment je vais gérer le grand-écart entre IE7 et les autres navigateurs ? Et le débug sur les différents terminaux ? »
L’architecte se demandera « Comment je vais garantir la meilleure productivité possible ? Et la meilleure qualité ? Tout en utilisant le data binding, l'injection de dépendance, les tests unitaires, etc. ? »
Autour d’un projet concret, nous partagerons avec vous les enseignements retirés de cette aventure qui vous permettrons d’en sortir vivant… ou pas.
PS : N’oubliez pas votre serviette de bain.
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
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 reste ?
@MoreThanScreens
7
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 solution
@MoreThanScreens
9
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 RESPONSIVE
@MoreThanScreens
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
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
29. 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
53. DE LA NÉCESSITÉ DU POC
RASSURER
LES CONCEPTEURS
LES
DÉVELOPPEURS
LE CLIENT
Flickr - .reid.
@NicolasMassouh
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 insomnia
@NicolasMassouh
54
55. DE LA NÉCESSITÉ DU POC
MIEUX APPRÉCIER LES COÛT DE DÉVELOPPEMENT
Flickr - Ashley Pollak
@NicolasMassouh
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 photography
@NicolasMassouh
56
57. DE LA NÉCESSITÉ DU POC
MONTÉE EN COMPÉTENCES DES ÉQUIPES.
Team Ekino Front 2011
@NicolasMassouh
57
59. LES CONCEPTS CLÉS DU RESPONSIVE
COMMENT ON FAIT DU
RESPONSIVE ?
@NicolasMassouh
59
60. LES CONCEPTS CLÉS DU RESPONSIVE
COMMENT ON
FAIT DU
RESPONSIVE ?
@NicolasMassouh
60
61. LES CONCEPTS CLÉS DU RESPONSIVE
COMMENT ON FAIT LES
BÉBÉS ?
@NicolasMassouh
61
62. LES CONCEPTS CLÉS DU RESPONSIVE
ALORS LE
RESPONSIVE …
@NicolasMassouh
62
63. LES CONCEPTS CLÉS DU RESPONSIVE
IMAGE FLEXIBLE
AMELIORATION PROGRESSIVE
DEGRADATION GRACIEUSE
MOBILE FIRST
DESKTOP FIRST
PERFORMANCE
GRILLE FLUIDE
@NicolasMassouh
63
65. 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
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 progressive
@NicolasMassouh
67
68. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
Les médias queries
@NicolasMassouh
68
69. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
Layout du projet mobile
viewport
PANEL 1
PANEL 2
RESULT LIST
@NicolasMassouh
69
70. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
Layout du projet desktop / tablet
PANEL 1
PANEL 2
RESULT LIST
160px
238px
100%
@NicolasMassouh
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
http://bradfrost.github.io/this-is-responsive/patterns.html
@NicolasMassouh
71
72. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
Les animations CSS
§ Meilleure
§
§
§
Performance
Pas de scripting
transformstyle:preserve-3d
backface-visibility:hidden
@NicolasMassouh
72
73. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
Les animations sur ie
§ float: left pour ie
@NicolasMassouh
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é
https://github.com/furf/jquery-ui-touch-punch
@NicolasMassouh
74
75. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
Image Fluide
@NicolasMassouh
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 width/height
@NicolasMassouh
76
77. DE LA CONCEPTION À LA RÉALISATION TECHNIQUE
ImageOptim pour les images et les sprites
@NicolasMassouh
77
79. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX
@NicolasMassouh
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’iOS6
@NicolasMassouh
80
81. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX
Sur iOS pour les windows users
@NicolasMassouh
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
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
@NicolasMassouh
82
83. LE DÉBUG SUR LES DIFFÉRENTS TERMINAUX
Utilisation de VM pour IE7, IE8, IE9
@NicolasMassouh
83
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 rem
@NicolasMassouh
86
87. LA RÉALITÉ
ON A PAS PU SE PASSER DU SNIFFING (USER AGENT)
@NicolasMassouh
87