Responsive Web Design
Adresses derrière les liens

Principe de base
Écran 5
  1. www.espacecourbeformation.com/fr/cours/responsive-web-design/ http://www.espacecourbeformation.com/fr/cours/responsive-web-design/
Exemple concret montrant le rendu pour différents types d'appareils
Écran 6
  1. Site de la SMQ http://www.musees.qc.ca/
Des exemples de sites modèles
Écran 10
  1. blogue SimpleBits http://simplebits.com/
  2. blogue Cognition http://cognition.happycog.com/
  3. a fluid Hicksdesign http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign
  4. thème Shelf pour Wordpress http://hicksdesign.co.uk/journal/shelf-now-in-stock
  5. galerie de sites RWD sur Media Queries http://mediaqueri.es/
  6. Ethan Marcotte's 20 favourite responsive sites http://www.netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites
Patrons de transitions
Écran 11
  1. patrons de transitions sur les points de rupture http://www.lukew.com/ff/entry.asp?1514
Références
Écran 13
  1. Making the Transition to Responsive Web Design http://responsivedesign.ca/blog/making-the-transition-to-responsive-web-design
  2. Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/
  3. Create a Responsive Web Design With Media Queries http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries
  4. Responsive Design’s Dirty Little Secret http://www.palantir.net/blog/responsive-design-s-dirty-little-secret
Défi 2 : Problème d'échelle dans IE6 et IE7 (suite)
Écran 35
  1. Fluid Images http://unstoppablerobotninja.com/entry/fluid-images
Fonds de tuiles fixes
Écran 36
  1. Faux Columns http://www.alistapart.com/articles/fauxcolumns/
Illustration pour comprendre les tuiles placées en pourcentage
Écran 37
  1. CSS: Using Percentages in Background-Image http://www.sitepoint.com/css-using-percentages-in-background-image/
Requêtes média
Écran 48
  1. requêtes média http://www.w3.org/TR/css3-mediaqueries/
Quelques facettes pour les requêtes média
Écran 49
  1. norme CSS3 http://www.w3.org/TR/css3-mediaqueries/#media1
Règles média pour iPad
Écran 50
  1. iPad-Specific CSS http://css-tricks.com/snippets/css/ipad-specific-css/
Support des requêtes médias dans les navigateurs
Écran 54
  1. respond.js https://github.com/scottjehl/Respond/
Ajuster la grille en fonction des points de ruptures
Écran 56
  1. State of the web: of apps, devices, and breakpoints http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/
  2. Re-thinking Breakpoints in Responsive Design http://www.palantir.net/blog/re-thinking-breakpoints-responsive-design
Exemple de points de rupture
Écran 57
  1. Optimising for High Pixel Density Displays http://menacingcloud.com/?c=highPixelDensityDisplays
  2. screensiz.es http://screensiz.es/phone
Autre exemple de technique sur un blogue à  trois  colonnes
Écran 69
  1. CSS et Mobile First : procéder par amélioration progressive http://wdfriday.com/blog/2012/03/css-et-mobile-first-proceder-par-amelioration-progressive/
Refactorisation d'un design existant
Écran 72
  1. Scalable Navigation Patterns in Responsive Web Design http://www.palantir.net/blog/scalable-navigation-patterns-responsive-web-design
  2. Développement Web mobile : par quoi commencer ? http://www.journaldunet.com/developpeur/algo-methodes/developpement-mobile-quelle-methodologie.shtml
Démarche « mobile d'abord » (mobile first)
Écran 74
  1. CSS et Mobile First : procéder par amélioration progressive http://wdfriday.com/blog/2012/03/css-et-mobile-first-proceder-par-amelioration-progressive/
Problématique des courriels
Écran 77
  1. clients courriels sont souvent beaucoup plus primitifs http://www.campaignmonitor.com/css/
  2. Responsive Email Design http://www.campaignmonitor.com/guides/mobile/
Ingrédients de la recette
Écran 78
  1. astuce de contournement http://www.campaignmonitor.com/blog/post/3339/save-your-layout-by-overriding-the-minimum-font-size-on-the-iphone-and/
Bandeau avec deux images pour l'en-tête : code CSS
Écran 84
  1. Better background images for responsive Web design http://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/
Et pour le contenu
Écran 85
  1. Fluid mobile email design http://stylecampaign.com/blog/2010/09/fluid-mobile-email-design-part-4/
Deux exemples pour vous inspirer
Écran 86
  1. infolettre pour Starbucks http://preview.smartfocusdigital.com/go.asp?/mPJSB64F/bEST001
  2. infolettre sur WooThemes http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347
Problématique des tableaux
Écran 88
  1. FooTable - A jQuery Plugin for Responsive Data Tables http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/
Magie : pincée de JavaScript pour repeindre la page
Écran 91
  1. extension jQuery FooTable http://fooplugins.com/plugins/footable-jquery/
Que faire maintenant?
Écran 94
  1. Zen Grids http://zengrids.com/
  2. LESS http://lesscss.org/
  3. Sass http://sass-lang.com/
Tous droits réservés 2016, Espace Courbe Formation inc. —13 novembre 2016 — 16:35:49