Notes for Ethan Marcotte's responsive web design workshop.

FEDC_Workshop_Notes.md

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