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é

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

14. Responsive Design

15. Responsive Design
•Fluid Layout

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