SlideShare une entreprise Scribd logo
1  sur  52
Télécharger pour lire hors ligne
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

Contenu connexe

Similaire à Responsive logic - Kiwiparty

Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projetjollivetc
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteRaphaël Goetter
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousjwajsberg
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
 
Les frameworks flashlike javascript
Les frameworks flashlike javascriptLes frameworks flashlike javascript
Les frameworks flashlike javascriptekito
 
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...Core-Techs
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignFrédéric Harper
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Drupal & responsive
Drupal & responsiveDrupal & responsive
Drupal & responsiveRezonova
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Aurélien Maury
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heureRaphaël Goetter
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Madeline Pinthon
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieGoulven Champenois
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 

Similaire à Responsive logic - Kiwiparty (20)

Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
Les jeudis de la découverte
Les jeudis de la découverteLes jeudis de la découverte
Les jeudis de la découverte
 
Les frameworks flashlike javascript
Les frameworks flashlike javascriptLes frameworks flashlike javascript
Les frameworks flashlike javascript
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...Drupagora 2014 :  Reprendre un projet avec Drupal quand on a des centaines de...
Drupagora 2014 : Reprendre un projet avec Drupal quand on a des centaines de...
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Drupal & responsive
Drupal & responsiveDrupal & responsive
Drupal & responsive
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 

Responsive logic - Kiwiparty