Responsive Logic
13 juin 2014

True Story
Nous sommes le vendredi 13 juin

True Story
Nous sommes le vendredi 13 juin

True Story
Nous sommes le vendredi 13 juin
J’ai perdu 90% des slides cette nuit suite à un freeze...

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...

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

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.

Nous

Nos locaux

Nos clients

⌘S

Responsive Design

Responsive Design
•Fluid Layout

Responsive Design
•Fluid Layout
•Flexible Images

Responsive Design
•Fluid Layout
•Flexible Images
•Media Queries

Responsive Design
•Fluid Layout
•Flexible Images
•Media Queries
Ethan Marcotte, 25 mai 2010
http://alistapart.com/article/responsive-web-design/

Fluid Layout

Flexible Images

Media Queries

Responsive Design
+ +
et c’est tout ?

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...

Questions...
•Grille ?
•Bootstrap ? Foundation ?
•Fait maison ?
•Les deux ?

Questions...
•max-width: 100%; ça suffit ?
•<picture> ou srcset ?
•picturefill vs. CMS ?
•background ?

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 »

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

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

Progressive Enhancement
•Features HTML5 parfois plus présents
et/ou mieux implémentés sur mobile
•Mobile first ?
•Hack first ?

Responsive [Logic]
•Layout conditionnel
•Contenu conditionnel
•Fonctionnalités conditionnelles

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

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/

Layout conditionnel
Exemple :
@include when-sidebar-is-visible {
.sidebar {
display: block;
}
}

Layout conditionnel
Résultat :
@media (min-width: 840px) {
.sidebar {
display: block;
}
}

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

⌘S

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...

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...

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 !

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

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.

Récapitulatif
• Sauvegardez. Souvent.
• Gardez de bonnes pratiques
• Nommez vos media-queries
• Trouvez un moyen de regrouper les règles (DRY)
• Testez. Souvent.

Merci