6/15/2016 - 5:14 PM

Notes for Ethan Marcotte's responsive web design workshop.

Notes for Ethan Marcotte's responsive web design workshop.

Ethan Marcotte


  1. Global utility links
  2. Logo
  3. Main navigation (reduced to the 3 main links)
  4. Search

Misc Notes

  • "Device-agnostic"
  • BBC website checks the browser's capabilities prior
    • It checkes for certain capabilities and loads things in based on that information
    • It does this via querySelector in JS

Section 1: Moving from Pages to Patterns

  • The Great Discontent
  • See .has-animation code by Ethan
    • This would be good for detecting if a browser supports SVG and/or animation
    • Load in PNG vs. SVG if needed
  • "support" doesn't need to mean "experience parity"
  • Tools of the trade
    • Progressive disclosure
      • Reduces the cognitive load on the user and only presents information as things are interacted with (adlibbed)
      • Example: Twitter
    • Rethinking the hierarchy
    • "AppendAround" by Filament Group on Github
    • Conditional loading
      • Ajax-Include-Pattern on Github
        • Uses data attributes
      • Tread carefully; don't get carried away
  • Edible Vineyard - MA website
  • Be more conscious of load weight in various conditions
  • Lverage grunticon more often
  • Compressive images
  • We don't have a reliable means of detecting bandwidth
  • Screen size does not correlate to bandwidth
  • Leverage the picture element more often (support is relatively new)
    • "picturefill" on Github
    • Support in WordPress?
  • "Made by Hand" website