Day 16 : June 15, 2015

Today we covered

Responsive Web Design

• Flexible Grids
  • Flexible = percents
  • Target / context = result or child element / parent element
• Flexible images and media
  • img { max-width: 100%;}
  • videos and iframes rely on javascript
• Media Queries (using min-width and good practices, like mobile-first)
  • @media screen and (min-width:___px) { } with styles nested within brackets.
• Em-based typography
  • pixel type is hard to zoom on typography (unlike page zoom)
  • ems and rems (review from last week)
  • pixels can be a fallback for rems

• Device testing is awesome, but we also need to think device agnostically.

• Responsive patterns with the homework

• It’s really important to be consistent about how elements are specified from section to section. This CodePen explains why.
• RWD sites must include this “meta viewport” code: <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Screen sizes
• Another example of canceling out nth-of-types when working with media queries and being very specific and very consistent.
• For font-size conversions, the target / context = result formula still applies, where the context is 16px if the body {font-size: 100%} (default). If you change it to body {font-size: 62.5%}, the context is 10px, which some people consider easier to convert to.
• Display: none (is okay for now until JS)

Homework

Everyday a bit of written, audio, or video resources will be assigned to review, which will supplement class assignments. Assignments are always due by 8:59am of the following day, unless noted.

Supplemental Resources (required reading)

Responsive Web Design

• The first responsive web design article
• Fluid grids
• Device Agnostic
• Where to start
• RWD Checklist
• Responsive Strategy
• 9 gifs that example RWD perfectly

Assignments

• Update your Grid Codepen with 1-column grid for all of the same class names. Use media queries for the multi-column grids and break the one-column grid at 500px.

Extra Assignments

Done with the required homework and would like more to learn from? TIY has you covered.

• Once you complete the above, try your hand at…

• Sketch out how you’d retrofit Surf and Paddle from it’s current state to a 1-column layout.