Responsive Logic13 juin 2014

True StoryNous sommes le vendredi 13 juin

True StoryNous sommes le vendredi 13 juin

True StoryNous sommes le vendredi 13 juin

J’ai perdu 90% des slides cette nuit suite à un freeze...

True StoryNous 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 StoryNous 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 conditionnelhttp://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 bloathttps://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 conditionnelLà 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