Guide de survie en milieu responsive - Paris Web 2013
•
8 recomendaciones•3,598 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Guide de survie en milieu responsive - Paris Web 2013
Similar a Guide de survie en milieu responsive - Paris Web 2013 (20)
Guide de survie en milieu responsive - Paris Web 2013
- 1. @3k1n0 GUIDE DE SURVIE EN MILIEU RESPONSIVE Guillaume ABEL @MoreThanScreens Nicolas MASSOUH @NicolasMassouh Cyril BALIT @cbalit
- 2. DE QUOI ALLONS-NOUS VOUS PARLER ?
- 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 utilisateur @MoreThanScreens 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 reste ? @MoreThanScreens 7
- 8. NOTRE PROCESSUS UXD et vision de l’UX @MoreThanScreens
- 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
- 10. RECHERCHE & DÉCOUVERTE Quelle est la problématique ? @MoreThanScreens
- 11. QUELLE EST LA PROBLÉMATIQUE ? UTILISATEUR CONTEXTE CLIENT ANALYSE EXISTANT ANALYSE DATA @MoreThanScreens 11
- 12. QUELLE EST LA PROBLÉMATIQUE ? PERIMÈTRE FONCTIONNALITÉS PATTERNS Flickr - YujiHayashi @MoreThanScreens 12
- 13. 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
- 14. PATTERNS Ne pas réinventer la roue MOSTLY FLUID LAYOUT SHIFTER COLUMN DROP OFF CANVAS TROUVER UN LANGAGE COMMUN Lukew.com @MoreThanScreens 14
- 15. IDÉATION & CONCEPT Explorer les solutions possibles. @MoreThanScreens
- 16. EXPLORER LES SOLUTIONS POSSIBLES. ATELIERS BRAINSTORMING SKETCHING Flickr - marlenekzio @MoreThanScreens 16
- 17. SKETCHING Dessiner, c’est gagné ! stat.us @MoreThanScreens 17
- 18. SKETCHING Trucs & astuces FEUILLE A4 01 PRENDRE 2 FEUILLES A4 FEUILLE A4 02 @MoreThanScreens 18
- 19. SKETCHING Trucs & astuces 1 FEUILLE A4 = DESKTOP FEUILLE A4 01 @MoreThanScreens 19
- 20. SKETCHING Trucs & astuces 1/2 FEUILLE A4 = TABLETTE FEUILLE A4 02 1/4 FEUILLE A4 = MOBILE @MoreThanScreens 20
- 21. SKETCHING Résultats 1 FEUILLE A4 = DESKTOP @MoreThanScreens 21
- 22. SKETCHING Résultats 1/2 FEUILLE A4 = TABLETTE @MoreThanScreens 22
- 23. SKETCHING Résultats 1/4 FEUILLE A4 = MOBILE @MoreThanScreens 23
- 25. DESIGN & PROTOTYPE ZONING PRINCIPES D’INTERACTION WIREFRAME POC DOCUMENTATION Flickr - marlenekzio @MoreThanScreens 25
- 26. DESIGN & PROTOTYPE TESTS UTILISATEUR ITÉRATIONS Flickr - nobleup Coming Back Slowly @MoreThanScreens 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 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
- 30. WIREFRAME Fifty Shades of Grey @MoreThanScreens 30
- 31. WIREFRAME Fifty Shades of Grey @MoreThanScreens 31
- 32. POC Proof Of Concept @MoreThanScreens 32
- 33. 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
- 35. GRAPHISME CHARTE DÉCLINAISON PLANCHE DE COMPOSANT Flickr - Degilbo @MoreThanScreens 35
- 44. ENSEIGNEMENT Retour d’expérience sur le design d’expérience utilisateur.
- 45. ÊTRE MULTILINGUE …mais encore plus @MoreThanScreens 45
- 46. ITÉRER SUR LE PROCESSUS Flickr - avrene @MoreThanScreens 46
- 47. RECHERCHE & DÉCOUVERTE IDÉATION & CONCEPT DESIGN & PROTOTYPAGE GRAPHISME & DÉV @MoreThanScreens ANALYTICS AMÉLIORATION BESOIN CLIENT ITÉRER SUR LE PROCESSUS Avant 47
- 48. 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
- 50. APPLI RIA EN HTML 5 CROSSPLATFORM @NicolasMassouh 50
- 51. DE LA NÉCESSITÉ DU POC
- 52. DE LA NÉCESSITÉ DU POC @NicolasMassouh
- 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
- 58. LES CONCEPTS CLÉS DU RESPONSIVE
- 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
- 64. LES “OUTILS” DE L’INTÉGRATEUR
- 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
- 78. LE DEBUG SUR LES DIFFÉRENTS TERMINAUX
- 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
- 84. LA RÉALITÉ Lendemain de cuite
- 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
- 88. LA RÉALITÉ Les medias queries se sont multipliées @NicolasMassouh 88
- 89. LA RÉALITÉ Rendering et Painting : tendre vers 60 fps @NicolasMassouh 89
- 91. LES QUESTIONS
- 94. @cbalit 94
- 95. LES FEATURES On a tout ce qu’il faut è Le databinding è La vue c’est le HTML è Validation de formulaires, filtres… @cbalit 95
- 96. L’ARCHITECTURE è L’injection de dépendances è Orientée module Flickr - Lauren Manning @cbalit 96
- 98. MÉTHODOLOGIE
- 99. PRISE EN MAIN Somewhere - internet @cbalit 99
- 101. BON ALORS ANGULAR, ÇA MARCHE AVEC LE RWD ? Flickr - hilpalny @cbalit 101
- 102. LA MISE EN PLACE
- 104. DES CONTRAINTES TECHNIQUES ? Vue = HTML5 è Un DOM responsive ne sera pas altéré par Angular @cbalit 104
- 105. LES TRANSITIONS Pas de vues uniques è Écoute changements de vues è Utilisation de ng-class ANIMATION @cbalit 105
- 106. RESPONSIVE … MAIS ADAPTIF
- 107. COMMENT ? On doit connaître le contexte en JavaScript § matchMedia § Refresh (resize) @cbalit 107
- 108. POUR LES IMAGES Une convention è 3 tailles d’images SMALL, MEDIUM et LARGE è Un pattern d’url : /monurl/[size]/veh1.png @cbalit 108
- 112. LES OUTILS À NOTRE DISPOSITION Enrichir le HTML : les directives è ng-switch, ng-show, ng-hide è ng-class @cbalit 112
- 113. LES PERFORMANCES è Le databinding è Parsing du json è Redraw @cbalit 113
- 114. LES LEÇONS
- 115. L’URL @cbalit 115
- 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
- 121. @3k1n0 MERCI Guillaume ABEL @MoreThanScreens Nicolas MASSOUH @nicolasmassouh Cyril BALIT @cbalit 121