Responsive logic - Kiwiparty
•
0 j'aime•3,493 vues
Les slides de mon talk à la Kiwiparty 2014 sur la logique Responsive : comment appréhender les différentes problématiques que pose le Responsive Design tout en conservant une bonne maintenabilité
Signaler
Partager
Responsive logic - Kiwiparty
- 1. Responsive Logic 13 juin 2014
- 2. True Story Nous sommes le vendredi 13 juin
- 3. True Story Nous sommes le vendredi 13 juin
- 4. True Story Nous sommes le vendredi 13 juin J’ai perdu 90% des slides cette nuit suite à un freeze...
- 5. True Story Nous sommes le vendredi 13 juin J’ai perdu 90% des slides cette nuit suite à un freeze... Et aussi parce que j’ai un peu oublié de sauvegarder...
- 6. True Story Nous sommes le vendredi 13 juin J’ai perdu 90% des slides cette nuit suite à un freeze... Et aussi parce que j’ai un peu oublié de sauvegarder... Du coup je ferais la grève du GIF
- 8. Qui suis-je ? @JulienCabanes Ça c’est mon Twitter mais je n’y suis pas très bavard Et ça c’est mon GitHub, où je ne commit pas assez Lead Developer chez Zee Agency à Paris 25 personnes, 10 développeurs J’aime les blagues vaseuses, les métaphores, parler avec mes mains et les sauvegardes automatiques.
- 9. Nous
- 10. Nos locaux
- 11. Nos clients
- 12. ⌘S
- 16. Responsive Design •Fluid Layout •Flexible Images
- 17. Responsive Design •Fluid Layout •Flexible Images •Media Queries
- 18. Responsive Design •Fluid Layout •Flexible Images •Media Queries Ethan Marcotte, 25 mai 2010 http://alistapart.com/article/responsive-web-design/
- 19. Fluid Layout
- 20. Flexible Images
- 21. Media Queries
- 24. Responsive Design + + et c’est tout ?
- 25. Responsive Design •Process ? http://socialmediatoday.com/jacey-gulden/1344396/great-responsive-web-design-matter-process •Maintenabilité ? http://drewbarontini.com/articles/single-responsibility/ •Plus de questions que de réponses...
- 26. Questions... •Grille ? •Bootstrap ? Foundation ? •Fait maison ? •Les deux ?
- 27. Questions... •max-width: 100%; ça suffit ? •<picture> ou srcset ? •picturefill vs. CMS ? •background ?
- 28. Questions... •Regrouper par composant ? •Regrouper par media-query ? •Bloat ? • « En fait, le mobile c’est 640px et plus 480px » • « En fait, la nav desktop marcherait mieux sur iPad »
- 31. Responsive Patterns •Onglets vs. Accordéon •Navigation simple vs. Off-Canvas •Table vs.Table... •Galerie vs. Carousel •Carousel vs. Galerie verticale http://bradfrost.github.io/this-is-responsive/patterns.html
- 32. Responsive Patterns •Map iframe vs. Image + Lien •Video embed vs. Image + Lien + à la volée •Formulaire long vs. Formulaire simplifié •Checkbox vs. Select multiple •Autocomplete ? Datepicker ? •Widget réseaux sociaux •etc... http://bradfrost.github.io/this-is-responsive/patterns.html
- 33. Progressive Enhancement •Features HTML5 parfois plus présents et/ou mieux implémentés sur mobile •Mobile first ? •Hack first ?
- 35. Responsive [Logic] •Layout conditionnel •Contenu conditionnel •Fonctionnalités conditionnelles
- 36. Layout conditionnel http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/ • Le contenu détermine les breakpoints et non l’inverse • Le layout est un bonus • Utiliser des unités relatives em pour la typographie et les espaces internes % pour les dimensions et espaces externes • Utiliser un préprocesseur pour gérer ses media-queries
- 37. Layout conditionnel Organisation des media-queries : • Par composants, quitte à utiliser ça pour le bloat https://github.com/buildingblocks/grunt-combine-media-queries • Nommer les media-queries • D’abord avec des variables • Ensuite avec des mixins • Utiliser un mixin global pour gérer la sortie (IE, etc...) http://css-tricks.com/conditional-media-query-mixins/
- 38. Layout conditionnel Exemple : @include when-sidebar-is-visible { .sidebar { display: block; } }
- 39. Layout conditionnel Résultat : @media (min-width: 840px) { .sidebar { display: block; } }
- 41. Layout conditionnel Là où ça se complique : • min & max-width qui rentrent en concurrence - éviter autant que possible le max-width (mobile first) • même layout, contenu & contexte différent - bon courage... • l’ordre des éléments qui change... - vertical stacking avec display: table / table-caption... - https://github.com/filamentgroup/AppendAround
- 43. ⌘S
- 44. Contenu conditionnel • Une bonne stratégie de contenu vaudra toujours mieux que les hacks, mais ce ne sera pas plus simple pour autant... • Chargement conditionnel ! http://24ways.org/2011/conditional-loading-for-responsive-designs/ http://filamentgroup.com/lab/ajax_includes_modular_content/ et autres...
- 45. Fonctionnalités conditionnelles Certains composants dépendent de contextes bien précis : • media-queries • feature-detection • parent / children • page ou template • présence d’un autre composant sur la page • visibilité dans le viewport • etc...
- 46. Fonctionnalités conditionnelles Selon ces contextes, les composants doivent : • se charger • se configurer • s’exécuter • s’interrompre à l’entrée et à la sortie des contextes !
- 48. Fonctionnalités conditionnelles Comment gérer ses conditions côté JS ? • matchMedia ? • body:after ? http://adactio.com/journal/5429/ Solutions : • Enquire.js : http://wicky.nillia.ms/enquire.js/ Défaut : ne gère que les media-queries • Conditioner.js : http://conditionerjs.com/ Pratique : se base sur des data-attributes
- 49. Fonctionnalités conditionnelles Comment partager ses conditions entre CSS & JS ? • Format d’échange ? JSON ? • SassyJSON : https://github.com/HugoGiraudel/SassyJSON • sass-json-vars : http://viget.com/extend/sharing-data- between-sass-and-javascript-with-json • Principe : créer un fichier JSON réunissant les conditions (breakpoints, etc...), pouvoir le lire à la fois côté Sass et JS.
- 51. Récapitulatif • Sauvegardez. Souvent. • Gardez de bonnes pratiques • Nommez vos media-queries • Trouvez un moyen de regrouper les règles (DRY) • Testez. Souvent.
- 52. Merci