2019-03---SLC-JS-Learners--Responsive-Web-Design---Presentation

notes.md

https://etherpad.net/p/slc-js-learners-2019-march

Responsive Web Design

Related Terms that you should know:

• Progressive Web Apps

  • Responsive Web Design is one aspect of Progressive Web Apps
  • https://developer.mozilla.org/en-US/search?q=responsive%20web%20design

• Mobile First Design

  • it also emphasizes addressing slow networks and memory limited phones
  • it also addresses mobile interactions (e.g. tap instead of click)
  • https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first

Examples of Responsive Design

• https://mediaqueri.es/popular/
• http://metasean.info/

Aspects of Responsive Designme

• setting measurements, pt 1 (namely, rem & em)
• getting measurements (viewport)
• setting measurements, pt 2 (vw, vh, vwmax, vhmax)
• using measurements (media queries)
• layouts (flexbox, grid)
• images (resize hosting services, srcset)
  • https://unsplash.com/search/photos/frozen-bubble

Additional resources

• Viewport

  • https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

• rem, em, vw, vh, vwmax, vhmax

  • https://developer.mozilla.org/en-US/docs/Web/CSS/length

• Media Queries (details, not the website with examples)

  • https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

• Flexbox

  • https://caniuse.com/#search=flexbox
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  • https://flexboxfroggy.com/
  • http://the-echoplex.net/flexyboxes/
  • http://jonibologna.com/flexbox-cheatsheet/
  • https://philipwalton.github.io/solved-by-flexbox/

• Grid

  • https://caniuse.com/#search=grid
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
  • https://cssgridgarden.com/
  • Generators
  • crazy simple & simplistic - https://cssgr.id/
  • basic custom css-grids - https://jhpratt.github.io/grid/
  • crazy complex, but also crazy powerful https://css-grid-layout-generator.pw/

• img srcset

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
  • https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

• simulate multiple sizes at once - https://sizzy.co