Responsive logic - Kiwiparty

1,825 views
1,697 views

Published on

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é

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,825
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive logic - Kiwiparty

  1. 1. Responsive Logic 13 juin 2014
  2. 2. True Story Nous sommes le vendredi 13 juin
  3. 3. True Story Nous sommes le vendredi 13 juin
  4. 4. True Story Nous sommes le vendredi 13 juin J’ai perdu 90% des slides cette nuit suite à un freeze...
  5. 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. 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
  7. 7. 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.
  8. 8. Nous
  9. 9. Nos locaux
  10. 10. Nos clients
  11. 11. ⌘S
  12. 12. Responsive Design
  13. 13. Responsive Design •Fluid Layout
  14. 14. Responsive Design •Fluid Layout •Flexible Images
  15. 15. Responsive Design •Fluid Layout •Flexible Images •Media Queries
  16. 16. Responsive Design •Fluid Layout •Flexible Images •Media Queries Ethan Marcotte, 25 mai 2010 http://alistapart.com/article/responsive-web-design/
  17. 17. Fluid Layout
  18. 18. Flexible Images
  19. 19. Media Queries
  20. 20. Responsive Design + + et c’est tout ?
  21. 21. 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...
  22. 22. Questions... •Grille ? •Bootstrap ? Foundation ? •Fait maison ? •Les deux ?
  23. 23. Questions... •max-width: 100%; ça suffit ? •<picture> ou srcset ? •picturefill vs. CMS ? •background ?
  24. 24. 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 »
  25. 25. 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
  26. 26. 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
  27. 27. Progressive Enhancement •Features HTML5 parfois plus présents et/ou mieux implémentés sur mobile •Mobile first ? •Hack first ?
  28. 28. Responsive [Logic] •Layout conditionnel •Contenu conditionnel •Fonctionnalités conditionnelles
  29. 29. 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
  30. 30. 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/
  31. 31. Layout conditionnel Exemple : @include when-sidebar-is-visible { .sidebar { display: block; } }
  32. 32. Layout conditionnel Résultat : @media (min-width: 840px) { .sidebar { display: block; } }
  33. 33. 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
  34. 34. ⌘S
  35. 35. 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...
  36. 36. 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...
  37. 37. 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 !
  38. 38. 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
  39. 39. 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.
  40. 40. Récapitulatif • Sauvegardez. Souvent. • Gardez de bonnes pratiques • Nommez vos media-queries • Trouvez un moyen de regrouper les règles (DRY) • Testez. Souvent.
  41. 41. Merci

×