About Cacher
Web App
Download
Sign In
Sign Up
menu
Cacher is the code snippet organizer for pro developers
We empower you and your team to get more done, faster
Learn More
bloqhead
6/15/2016 - 5:14 PM
share
Share
add_circle_outline
Save
Notes for Ethan Marcotte's responsive web design workshop.
Notes for Ethan Marcotte's responsive web design workshop.
FEDC_Workshop_Notes.md
content_copy
file_download
Rendered
Source
Ethan Marcotte
Exercise
Global utility links
Logo
Main navigation (reduced to the 3 main links)
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
clear