javascript-tutorial-learn-the-basics-udemy
Why Responsive Design?
Responsive Template
html flow
cascade principle
inheritance (only change styles that need to change)
percentages! (do the math)
max-width and min-width (limit max or min width)
height values are tricky
responsive images (100% of container parent)
modular design
breakpoints based on design not device
mobile first!
Media Queries Overview
workflow – sketches, create boxes of content
Approximate Breakpoints:
1200px
960px
768px
600px
480px
320px
Examples:
http://anderssonwise.com/
http://www.designweekportland.com/
http://westspacejournal.org.au/
http://mappeditions.com/
http://www.evolveartistic.com/
http://colly.com/
Define hierarchy
Sketch
Define breakpoints and changes
Previous dtc477 skroller project
Net Neutrality (dtc student site)
WORKSHOP: How To Project