Your SlideShare is downloading. ×
Responsive logic - Kiwiparty
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive logic - Kiwiparty

1,098

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é

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,098
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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. Nous
  • 9. Nos locaux
  • 10. Nos clients
  • 11. ⌘S
  • 12. Responsive Design
  • 13. Responsive Design •Fluid Layout
  • 14. Responsive Design •Fluid Layout •Flexible Images
  • 15. Responsive Design •Fluid Layout •Flexible Images •Media Queries
  • 16. Responsive Design •Fluid Layout •Flexible Images •Media Queries Ethan Marcotte, 25 mai 2010 http://alistapart.com/article/responsive-web-design/
  • 17. Fluid Layout
  • 18. Flexible Images
  • 19. Media Queries
  • 20. Responsive Design + + et c’est tout ?
  • 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. Questions... •Grille ? •Bootstrap ? Foundation ? •Fait maison ? •Les deux ?
  • 23. Questions... •max-width: 100%; ça suffit ? •<picture> ou srcset ? •picturefill vs. CMS ? •background ?
  • 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. 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. 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. Progressive Enhancement •Features HTML5 parfois plus présents et/ou mieux implémentés sur mobile •Mobile first ? •Hack first ?
  • 28. Responsive [Logic] •Layout conditionnel •Contenu conditionnel •Fonctionnalités conditionnelles
  • 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. 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. Layout conditionnel Exemple : @include when-sidebar-is-visible { .sidebar { display: block; } }
  • 32. Layout conditionnel Résultat : @media (min-width: 840px) { .sidebar { display: block; } }
  • 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. ⌘S
  • 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. 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. 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. 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. 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. Récapitulatif • Sauvegardez. Souvent. • Gardez de bonnes pratiques • Nommez vos media-queries • Trouvez un moyen de regrouper les règles (DRY) • Testez. Souvent.
  • 41. Merci

×