RESPONSIVE DESIGN CRASH COURSE NOTES the 3 elements of responsive design ----------------------------------- 1. flexible grid 2. flexible images 3. media queries ///////////////////////////////// 1. flexible grid: ems for typography and percentage widths for divs -------- *** target {divided by} context = result *** Visit http://lab404.com/330/#responsive Under Responsive Tutorials: a. look at "full reset css template" - you can't change body text size. It has to remain >> font-size: 100%; - crucial code is >> font: inherit; b. compare "basic css (pixel-based) template" to "basic css (em-based) template" - note that 16px = default browser font size - remember: target/context = result - in the em-based template put a link inside an h1 tag, then adjust the font size code accordingly - once you apply the reset.css code to your html page, you will need to add a margin-bottom value to p tag, h1 tag, etc. if you want it (and you probably will). view http://turbulence.org/commissions/xanadu/template.css for an example of that added code. c. I like to make my psd mockups 1024 pixels-wide with a 960 pixel-wide content area, the base all my percentage math based on those starter dimensions. But really, if your container div is 90% wide, that should more or less cause your code to equate to the dimensions of your psd mockup. ///////////////////////////////// 2. flexible images ------------------ view the source of "homeweork answer [html]" - all you need for flexible images is >> img {max-width: 100%;} then in your html, don't specify the width of any of your images. ///////////////////////////////// 3. media queries ---------------- a. view the source of "homeweork answer [html]" - essential code >> - observe the code for the media queries. these define the threshold states (in pixel-width) at which your changes are meant to occur. b. view "homeweork answer [css]" - note the specified typography differences per media query threshold