bloqhead
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

Exercise

  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