Responsive logic - Kiwiparty
0 j'aime3,496 vues
Le document traite des principes du responsive design en soulignant l'importance de la sauvegarde et des bonnes pratiques. Il aborde des sujets tels que le layout conditionnel, le contenu conditionnel et les fonctionnalités conditionnelles tout en suggérant des ressources et des stratégies pour une meilleure implémentation. Des questions clés sur le processus, la maintenabilité et les patterns de conception sont posées pour encourager une réflexion approfondie sur le sujet.
![Responsive [Logic]
•Layout conditionnel
•Contenu conditionnel
•Fonctionnalités conditionnelles](https://image.slidesharecdn.com/responsivelogic-140616072935-phpapp02/85/Responsive-logic-Kiwiparty-35-320.jpg)
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